项目作者: SimpleRoom

项目描述 :
:cn: Walker Management Center By React
高级语言: JavaScript
项目地址: git://github.com/SimpleRoom/walker-admin.git
创建时间: 2018-10-23T11:25:07Z
项目社区:https://github.com/SimpleRoom/walker-admin

开源协议:

下载


React+Material-ui构建的后台管理系统



react
redux
react-router-dom
redux-actioins
redux-saga
reselect
material-ui
material-table
styled-components
plop

一个基于React全家桶结合Material-ui的管理系统,使用redux管理全局state,redux-saga中间件处理异步数据,更好的融合state和action,redux-actions中间件简化了redux的复杂写法,使用reselect来精确获取指定的state,内置缓存效果,优化渲染压力。

1、如何开发查看

  1. # 克隆该仓库
  2. git clone git@github.com:SimpleRoom/walker-admin.git
  3. # 进入walker-admin文件夹
  4. cd walker-admin
  5. # 安装依赖
  6. npm install
  7. # 或者
  8. yarn add
  9. # 启动项目:http://localhost:3800
  10. npm run start
  11. # 或者
  12. yarn start
  13. # 打包构建
  14. npm run build
  15. # 或者
  16. yarn build
  17. # 快速创建components和store
  18. # 全局安装plop后
  19. plop
  20. # 未全局安装
  21. npm run plop
  22. # 注:CHANGELOG-安装使用(细化commit)
  23. npm install -g commitizen
  24. # 或者本地安装
  25. npm install --save-dev commitizen
  26. npm install -g cz-conventional-changelog
  27. # 或者本地安装
  28. npm install cz-conventional-changelog --save-dev
  29. # 添加新的CHANGELOG
  30. git add XX之后
  31. # 进入可选择性的命令行界面:按照提示选择填写
  32. git cz
  33. # 自动生成对应的commit信息到:CHANGELOG.md文件内,方面追踪查看(复制命令行内变化到changelog)
  34. npm run changelog
  35. # 生成releases
  36. npm run release -- --release-as 1.0.0

2、目录模块

  1. plop── 快速创建componentsstore的模板
  2. ┌── assets 资源文件
  3. ├── components 页面组件
  4. ├── router 路由配置
  5. ├── store state模块管理中心
  6. src──├── styles 页面样式
  7. ├── utils 插件和工具
  8. ├── views 与路由对应的页面
  9. └── index.js 页面配置入口
  10. ┌── Card 面板组件
  11. ├── CustomButtons 按钮组件
  12. ├── CustomInput 输入框组件
  13. ├── CustomTabs 公用Tab切换组件
  14. components ──├── Dialog 弹框组件
  15. ├── Footer 底部footer
  16. ├── Grid 栅格组件
  17. ├── HeadNavBar 头部导航组件
  18. ├── HotelCard 酒店页面UI面板
  19. ├── HotelList 酒店页面列表UI组件
  20. ├── Login 登录组件
  21. ├── MaterialTable 定制可编辑Table组件
  22. ├── MuiDatepicker 日期选择器组件
  23. ├── MuiTimepicker 时间选择器组件
  24. ├── Notifications 自定义提示消息组件
  25. ├── Snackbar Material-ui官方消息提示组件
  26. ├── Table 定制不可编辑的Table组件
  27. ├── Loading loading组件
  28. ├── NotFound 404组件
  29. ├── ScrollToTopMount 路由切换缓动到顶部组件
  30. ├── SideBar 侧边栏路由导航
  31. └── SideTool 右边工具栏组件
  32. ┌── modules 不同的state模块
  33. ├── account 登录验证state
  34. ├── common 全局公用的state
  35. └── theme 主题控制state
  36. store──├
  37. └── indexStore.js state入口
  • root-state-tree

3、日志记录

4、在线查看

5、工具概括

  • 1、 reduxstate管理容器
  • 2、 react-reduxReact官方控制React组件与Redux的连接容器
  • 3、 redux-actions简化Redux写法工具
  • 4、 redux-sagaRedux处理异步数据的中间件
  • 5、 reselectRedux的选择器工具,精确获取指定state,减轻渲染压力
  • 6、styled-components可以使用es6来编写css的工具
  • 7、npm run plop自动生成组件或store到指定目录,配置:(plopfile.js&plop)

License

Simplified