react后台管理系统(一)
react后台管理系统(一)
·
🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来React篇专栏内容:react后台管理系统(一)
前言
本文档详细介绍了如何从零开始搭建一个基于 React 和 Ant Design 的前端项目。通过逐步引导，读者可以了解从项目初始化到配置装饰器、集成 UI 库、设计布局结构、配置路由以及实现左侧菜单栏的完整流程。本文档适合初学者和有一定经验的开发者，帮助他们在实际项目中快速上手。
目录
1.创建项目
npx create-react-app react-pro2.配置装饰器(但不是必须)
安装模块
cnpm i @babel/plugin-proposal-decorators customize-cra react-app-rewired -D
yarn add @babel/plugin-proposal-decorators customize-cra react-app-rewired -D根目录下创建config-overrides.js
// 参考配置连接：https://www.npmjs.com/package/customize-cra
const {override,addDecoratorsLegacy}=require("customize-cra");
module.exports=override(
addDecoratorsLegacy(),//配置装饰器模式
);修改package.json运行命令
...,
"scripts": {
"start": "react-app-rewired start", // update
"build": "react-app-rewired build", // update
"test": "react-app-rewired test", // update
"eject": "react-scripts eject"
},
...
import { connect } from 'react-redux'
class App extends Component {
render () {
return ()
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
==装饰器（只能用在类组件中，可以装饰类以及类的方法）==>
import { connect } from 'react-redux'
@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
render () {
return ()
}
}
export default App
3.配置UI库
Ant Design - 一套企业级 UI 设计语言和 React 组件库 查看文档
在 create-react-app 中使用 - Ant Design 查看具体的使用文档
cnpm i antd -S
yarn add antd -S删除src文件内容，添加index.css 以及 index.js
index.css
@import '~antd/dist/antd.css';index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'
ReactDOM.render(
<App />,
document.querySelector('#root')
)测试UI库 App.jsx
import React from 'react'
import { Button } from 'antd'
const App = () => {
return (
<>
<Button type="primary">hello</Button>
</>
)
}
export default App4.修改目录结构
src
api
components
layout
router
store
utils
views5.搭建项目的主结构
查看Layout 组件，修改App.jsx
import React from 'react'
import { Layout, Menu } from 'antd';
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
class App extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<Layout>
<Sider className="mySider" trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
}
export default App添加logo,
import logo from './logo.svg'
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
// ++++++++
<div className="logo">
<img src={ logo } style={{width: '32px', height: '32px', margin: '0 10px 0 0'}} alt=""/>
{ this.state.collapsed ? null : '嗨购管理系统' }
</div>
// ++++++++
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu>
</Sider>相关样式 index.css
@import '~antd/dist/antd.css';
#root { height: 100%;}
.ant-layout { height: 100%;}
.mySider .trigger {
padding: 0 24px;
font-size: 18px;
line-height: 64px;
cursor: pointer;
transition: color 0.3s;
}
.mySider .trigger:hover {
color: #1890ff;
}
.mySider .logo {
height: 32px;
margin: 16px;
/* background: rgba(255, 255, 255, 0.3); */
color: #fff;
font-size: 18px;
line-height: 32px;
}
.site-layout .site-layout-background {
background: #fff;
}移植App.jsx代码至 layout/main/index.jsx,注意logo的路径
Logo.svg图片在src目录下
import logo from '../../logo.svg'安装路由模块
yarn add react-router-dom -S修改App.jsx
import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Main from './layout/main/index.jsx'
function App () {
return (
<Router >
<Switch>
<Route path="/" component = {Main}/>
</Switch>
</Router>
)
}
export default App6.设计左侧菜单栏
https://gp.adouzaizai.top/haigou/#/login
7.左侧菜单
按照UI库 的 Menu组件以及 Tree树形控件。设计字段
生成左侧菜单的基本配置信息 router/menus.js
import {
HomeOutlined,
PictureOutlined,
NotificationOutlined,
UsergroupDeleteOutlined,
SwitcherOutlined
} from '@ant-design/icons'
const menus = [
{
title: '系统首页',
path: '/home',
key: '0-0',
icon: <HomeOutlined />
},
{
title: '轮播图管理',
path: '/banner',
key: '0-1',
icon: <PictureOutlined />,
children: [
{
title: '轮播图列表',
path: '/banner/list',
key: '0-1-0'
},
{
title: '添加轮播图',
path: '/banner/add',
key: '0-1-1'
},
]
},
{
title: '首页数据管理',
path: '/homeData',
key: '0-2',
icon: <NotificationOutlined />,
children: [
{
title: '秒杀列表',
path: '/homeData/skill',
key: '0-2-0',
},
{
title: '推荐列表',
path: '/homeData/recommend',
key: '0-2-1',
}
]
},
{
title: '用户管理',
path: '/users',
key: '0-3',
icon: <UsergroupDeleteOutlined />,
children: [
{
title: '用户列表',
path: '/users/list',
key: '0-3-0',
},
{
title: '管理员列表',
path: '/users/adminList',
key: '0-3-1',
}
]
},
{
title: '商品管理',
path: '/pro',
key: '0-4',
icon: <SwitcherOutlined />,
children: [
{
title: '商品列表',
path: '/pro/list',
key: '0-4-0',
},
{
title: '筛选商品',
path: '/pro/search',
key: '0-4-1',
}
]
}
]
export default menus配置左侧菜单栏(抽离左侧菜单栏组件/layout/main/SideMenu.jsx)
挑选UI库中 Menus 菜单，选择只展开当前父级菜单
import React from 'react'
import { Menu } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
// submenu keys of first level
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
const SideMenu = () => {
const [openKeys, setOpenKeys] = React.useState(['sub1']);
const onOpenChange = keys => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
};
return (
<Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 256 }}>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
);
};
export default SideMenu
主界面 调用该组件，
修改菜单栏组件以及渲染正确的菜单栏数据
import React from 'react'
import { Menu } from 'antd';
import menus from '../../router/menus'
const { SubMenu } = Menu;
// submenu keys of first level
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
const SideMenu = () => {
const [openKeys, setOpenKeys] = React.useState(['sub1']);
const onOpenChange = keys => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
};
const renderMenus = (menus) => {
return menus.map(item => {
// 判断当前的选项有没有子菜单
if (item.children) { // 有子级菜单
return (
<SubMenu key={ item.path } icon={ item.icon } title={item.title}>
{/* 递归调用自身，渲染多级菜单 */}
{ renderMenus(item.children) }
</SubMenu>
)
} else {
// path具有唯一性，key也具有唯一性
// 为了后续操作方便，此时建议将path作为遍历的key值
return <Menu.Item key={ item.path } icon = { item.icon }>
{ item.title }
</Menu.Item>
}
})
}
return (
<Menu theme="dark" mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} >
{
renderMenus(menus)
}
{/* <Menu.Item key="1">Option 1</Menu.Item>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu> */}
</Menu>
);
};
export default SideMenu浏览器测试发现并么有只展开一项，点击之后全部可以展开
import React from 'react'
import { Menu } from 'antd';
import menus from '../../router/menus'
const { SubMenu } = Menu;
// submenu keys of first level
const keyArr = []
menus.forEach(item => { // 只需要一级菜单项即可
keyArr.push(item.path)
})
// const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
const rootSubmenuKeys = keyArr
const SideMenu = () => {
const [openKeys, setOpenKeys] = React.useState([]);
const onOpenChange = keys => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
};
const renderMenus = (menus) => {
return menus.map(item => {
// 判断当前的选项有没有子菜单
if (item.children) { // 有子级菜单
return (
<SubMenu key={ item.path } icon={ item.icon } title={item.title}>
{/* 递归调用自身，渲染多级菜单 */}
{ renderMenus(item.children) }
</SubMenu>
)
} else {
// path具有唯一性，key也具有唯一性
// 为了后续操作方便，此时建议将path作为遍历的key值
return <Menu.Item key={ item.path } icon = { item.icon }>
{ item.title }
</Menu.Item>
}
})
}
return (
<Menu theme="dark" mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} >
{
renderMenus(menus)
}
{/* <Menu.Item key="1">Option 1</Menu.Item>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu> */}
</Menu>
);
};
export default SideMenu
总结
通过本文档，我们完成了以下主要步骤：
- 创建项目：使用
create-react-app快速初始化项目。 - 配置装饰器：安装必要的依赖并配置 Babel 插件，支持类组件的装饰器语法。
- 配置 UI 库：引入 Ant Design 并进行基本配置，确保项目中可以正常使用 Ant Design 的组件。
- 修改目录结构：整理项目目录，使其更加符合实际开发需求。
- 搭建主结构：设计并实现项目的主布局，包括顶部导航和侧边栏。
- 配置路由：安装并配置
react-router-dom，实现页面之间的导航。 - 设计左侧菜单栏：使用 Ant Design 的
Menu组件，实现动态生成的多级菜单，并确保只展开当前选中的父级菜单。
通过以上步骤，我们成功搭建了一个功能完善、结构清晰的 React 项目。希望本文档能为读者在实际开发中提供有价值的参考。
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
35
0- 0
已为社区贡献1条内容
所有评论(0)