管理系统架构，基于 antd + react + redux + webpack + ES6 的单页面应用
管理系统架构，基于 antd + react + redux + webpack + ES6 的单页面应用
管理系统往往是大量的表单表格等页面，存在大量的体力劳动，基于长期的管理系统开发，整理出一套管理系统架构、组件、通用方法来提高开发效率。
可以以此为基础，快速创建管理系统项目。simple is all，make coding easy!
感谢ant design提供如此出色的UI库及设计思想，让开发变得简单很多！祝ant design越做越好！
喜欢就给个star，感谢您的鼓励与支持！
注：此库使用后编译（依赖具体项目的编译环境）
如果您想找华丽的UI，这个框架会让你失望，它目前只关注了如何简化编码，提高开发效率。
必须使用yarn进行构建。yarn可以更好的组织依赖，下载依赖速度更快，也许还需要翻墙。
使用npm或者淘宝的cnpm安装之后运行npm run dev会报错无法启动；
yarn:
# 安装所有依赖$ yarn# 启动开发$ yarn dev# 生产环境构建$ yarn build# 清除缓存（如果发现源码与webpack编译文件明显不一致，有可能是缓存脏数据）$ yarn clear-cache
.├── .happypack // happypack缓存文件├── bin // 代码生成脚本├── builder // 构建工具├── dist // 开发构建时，生成的临时文件，生产环境不用├── local-default // 个性化配置，用户分模块打包、个人配置等，只开发模式有效，目前没启用，预留功能├── public // 构建之后的代码，用户生产环境部署├── src // 开发主要目录│ ├── commons // 系统公共方法，组件│ ├── frame // 页面框架，头部+左侧等│ ├── mock // mock数据，截获ajax请求，便于前端单独调试│ │ └── mockdata // 模拟数据 mockjs│ ├── pages // 业务页面，业务开发主要关系目录│ │ ├── error // 一些error页面，404 403 401 等等│ │ ├── examples // 一些例子│ │ └── home // 首页│ ├── redux // redux 相关│ │ ├── actions // redux action定义│ │ ├── reducers // redux reducers定义目录│ │ ├── store // redux store│ │ └── actionTypes.js // actions 和 reducers使用的types常量│ ├── route // 路由 相关│ ├── services // 前端服务，一般是ajax请求等一些封装，提供基础数据│ ├── all-routes.js // 脚本生成的路由配置文件│ ├── App.jsx // 项目入口文件│ ├── global.less // 全局样式定义│ ├── page-init-state.js // 全局样式定义│ ├── page-init-state.js // 脚本生成的简化redux写法的初始化state│ ├── page-routes.js // 脚本生成的路由配置文件│ └── variables.less // 主题变量├── static // 非构建依赖的静态文件├── .babelrc├── .eslintignore├── .eslintrc.js├── .gitignore├── favicon.png├── index.html├── package.json├── postcss.config.js├── README.md└── yarn.lock
src/pages/user-centeruser-center.less、user-center.jsUserCenter.jsx系统菜单的激活状态根据url地址，自动判定
菜单匹配分几种情况
/+ 之前部分与菜单path精确匹配，直接使用此菜单如果是二级页面，比如添加页面，需要保持其父级页面菜单状态，菜单path需要写成parentPath/+childPath，使用/+作为分界，比如：
list页面：export const PAGE_ROUTE = '/example/users'list页面的添加按钮，跳转到添加页面，但是页面菜单选中状态要保持list页面状态export const PAGE_ROUTE = '/example/users/+add'
页面头部标题、面包屑导航系统会根据页面状态自动获取，但也可以控制显示隐藏、修改标题、修改面包屑。
componentWillMount() {this.props.$actions.hidePageHeader();}
componentWillMount() {this.props.$actions.setPageTitle('自定义页面标题');}
componentWillMount() {this.props.$actions.setPageBreadcrumbs([{key: 'zidingyi',path: '',text: '自定义',icon: 'fa-user',},{key: 'mianbaoxie',path: '',text: '面包屑',icon: 'fa-user',},{key: 'daohang',path: '',text: '导航',icon: 'fa-user',},]);}
# 服务地址upstream api_service {server localhost:8080;keepalive 2000;}#server {listen 80;server_name localhost;location / {root /home/app/nginx/html; // 前端打包之后的文件存放路径index index.html;try_files $uri $uri/ /index.html; #react-router 防止页面刷新出现404}location ^~/api { // 代理ajax请求，前端的ajax请求配置了统一的baseUrl = ‘/api’proxy_pass http://api_service/;proxy_set_header Host $http_host;proxy_set_header Connection close;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-Server $host;}}
基于配置，进行不同项目的打包构建，解决不同项目，但是类似，有很多通用组件，但是要单独发布的情景；
如果项目相差较大，没有太多的公共部分，还是建议单独建立一个项目。
构建可以传入config文件，基于config文件可以构建出不同的项目
"dev": "yarn run clear-cache && yarn run dll && cross-env NODE_ENV=development node ./builder/dev-server.js --cfg ./xxx.config.js",
xxx.config.js如下
module.exports = {// 业务页面所在目录，用来构建路由以及init state，字符串或者数组pagePath: './src/pages/**/*.jsx',// pagePath: [// './src/pages/reserve/**/*.jsx',// './src/pages/sale/**/*.jsx',// ],// 忽略文件，不进行构建，提供部分模块打包功能，一般是配合补充 pagePath 进行使用，字符串或者数组pageIgnore: [// '**/ActionsExample.jsx',],// webpack配置，区分不同环境webpack: {base: {entry: {app: './src/App.jsx',login: './src/pages/login/Login.jsx',},},dev: {},prod: {},dll: {},},};
已经改为进入App之前获取菜单，这样刷新页面就可以获取最新菜单，不必重新登录。
通过配置可以区分出那些模块使用css module，那些不使用。
- 浏览器与webstorm 结合的调试