用React做一个后台管理系统(个人总结，更新中。。。)

目录

目录

目录

1.环境搭建

1.1 项目结构设计

1.2 样式框架设计

1.3 webpack规则配置

1.4 页面入口设置

1.5 跨域http-proxy-middleware+axios二次封装

1.6 Eslint统一规则

2.页面设计

2.1 页面基本UI布局

3.路由设置

1）在App.js(视图汇总页)写入基本的路由配置，如：登录、注册、首页等；

2）再配置模块页面，一般模块页面都是有相同的页头、页脚和侧边栏等，所以逻辑是制作一个框架组件Layout.js，里面嵌入各模块路由

 3）第三步是配置所有的路由路径，然后汇总导出

4）第四步是根据导出的路由路径数组，配置相应的，并进行权限配置和懒加载（Suspense+lazy）

5）第五步是配置redux和数据缓存

 4.Redux

1.环境搭建

1.1 项目结构设计

重点是src下面的各个模块的定义

assets 静态资源

common 公用组件

config 权限配置/全局变量配置/菜单配置/路由配置/各个环境的请求地址配置

service 各模块接口信息

store redux数据总仓库

utils 公用脚本方法

view 各模块页面

style.js 全局样式

1.2 样式框架设计

https://blog.csdn.net/Augustine_Cyq/article/details/105773838?spm=1001.2014.3001.5501

1.3 webpack规则配置

如webpack.config.js中配置地址路径简写

resolve: {
           ...
                'common': path.resolve(__dirname, '../src/common'),
                'assets': path.resolve(__dirname, '../src/assets'),
                '@': path.resolve(__dirname, '../src')
            },

1.4 页面入口设置

./src/index.js

1.5 跨域http-proxy-middleware+axios二次封装

https://blog.csdn.net/Augustine_Cyq/article/details/106641776?spm=1001.2014.3001.5501

1.6 Eslint统一规则

2.页面设计

选择antd组件框架并进行二次开发

2.1 页面基本UI布局

在路径./common/layout下, 对页面的侧边栏Sider/头部导航栏Header/页面路由组件展示区Content/页脚Footer, 进行编写和设计

3.路由设置

 项目中用的是react-router 4.0版本

4.0版本中已不需要路由配置，重心放在组件化思维，用的库是react-router-dom（yarn add react-router-dom下载）；

1）在App.js(视图汇总页)写入基本的路由配置，如：登录、注册、首页等；

2）再配置模块页面，一般模块页面都是有相同的页头、页脚和侧边栏等，所以逻辑是制作一个框架组件Layout.js，里面嵌入各模块路由

import Router from '@/common/router';(看第四步)

 3）第三步是配置所有的路由路径，然后汇总导出

{
        component: 'module/sale/lading/list', // 组件位置
        path: '/saleLadingList', //路由路径
        name: '销售提单列表', 
    },

4）第四步是根据导出的路由路径数组，配置相应的<Route>，并进行权限配置和懒加载（Suspense+lazy）

5）第五步是配置redux和数据缓存

需要在App.js上包装两层代码<Provider store={store}>和<PersistGate loading={null} persistor={persistor}>

具体缓存配置查看：https://blog.csdn.net/Augustine_Cyq/article/details/106648324?spm=1001.2014.3001.5501

 4.Redux

•  combineReducers实现React数据分仓管理：https://blog.csdn.net/Augustine_Cyq/article/details/105814489?spm=1001.2014.3001.5501
• ajax+redux+redux-thunk：https://blog.csdn.net/Augustine_Cyq/article/details/105822440?spm=1001.2014.3001.5501
• redux-persist持久化数据存储+中间件封装：https://blog.csdn.net/Augustine_Cyq/article/details/106648324?spm=1001.2014.3001.5501