经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React全家桶+Material-ui构建的后台管理系统
来源:cnblogs  作者:逗伴不是瓣  时间:2019/10/30 9:15:04  对本文有异议

一、简介

一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心。

二、 附录
+ 1. [在线体验](https://simpleroom.github.io):账号:<code>admin</code>密码:<code>123456</code>
+ 2. [源码地址:https://github.com/SimpleRoom/walker-admin](https://github.com/SimpleRoom/walker-admin),觉得有用请戳:star~ 会不断更新......
+ 3. 默认使用: [create-react-app](https://github.com/facebook/create-react-app)
+ 4. 目前分5个页面:图表数据,个人资料,员工管理,会员管理,线路设计,酒店预订

三、 工具概括

+ 1、[redux](https://redux.js.org/):管理组件state的容器
+ 2、[react-redux](https://react-redux.js.org/):React官方控制React组件与Redux的连接容器
+ 3、[redux-actions](https://redux-actions.js.org/):简化Redux写法的工具
+ 4、[redux-saga](https://redux-saga.js.org/):Redux处理异步数据的中间件
+ 5、[reselect](https://github.com/reduxjs/reselect):Redux的选择器工具,精确获取指定state,减少不必要的渲染
+ 6、[plop](https://plopjs.com/):快速开发工具,自动生成指定模板文件的工具

四、功能概况

+ 1、路由权限匹配,可在登录时接口返回该账号权限级别,把routerList注入store
+ 2、异步获取github开放的个人信息接口,redux和redux-saga和redux-actions以及reselect是如何串联一起的。对应目录(src/store/modules/common)

  1. // 1.redux-actions
  2. import { createActions } from 'redux-actions'
  3. export const {
  4. // 获取github个人信息
  5. fetchGitInfo,
  6. setGithubInfo,
  7. } = createActions(
  8. {
  9. // 获取github个人信息
  10. FETCH_GIT_INFO: (username) => ({ username }),
  11. SET_GITHUB_INFO: (githubData) => ({ githubData}),
  12. },
  13. )
  14. export default {}
  15.  
  16. //2.redux-saga
  17. import axios from 'axios'
  18. import { fork, put, takeEvery } from 'redux-saga/effects'
  19. import {
  20. // github 个人信息
  21. fetchGitInfo,
  22. setGithubInfo,
  23. } from './action'
  24. // 请求github
  25. function* getGithubInfo(action) {
  26. const { username } = action.payload
  27. // username为你的github 用户名
  28. const result = yield axios.get(`https://api.github.com/users/${username}`)
  29. // console.log(action, result, 'saga.....')
  30. yield put(setGithubInfo(result.data))
  31. }
  32. //
  33. function* watchCommon() {
  34. // 请求接口
  35. yield takeEvery(fetchGitInfo, getGithubInfo)
  36. }
  37. export default [fork(watchCommon)]
  38.  
  39. //3.reducer
  40. import { handleActions } from 'redux-actions'
  41. import {
  42. // 暂存github信息
  43. setGithubInfo,
  44. } from './action'
  45. // 该store的命名空间,可创建多个把store分开管理
  46. export const namespace = 'common'
  47. export const defaultState = {
  48. // github个人信息
  49. githubInfo: {},
  50. }
  51. export const commonReducer = handleActions(
  52. {
  53. [setGithubInfo]: (state, action) => {
  54. const { githubData } = action.payload
  55. return { ...state, githubData }
  56. }
  57. },
  58. defaultState
  59. )
  60.  
  61. // 4.reselect
  62. // 从store单独获取githubInfo,实际中可能有N多个接口的不同数据
  63. export const getGithubData = state => state[namespace].githubData || {}
  64.  
  65. // 5、组件内部使用
  66. import React, { useEffect } from 'react'
  67. import { connect } from 'react-redux'
  68. import { fetchGitInfo } from '../../store/modules/common/action'
  69. import { getGithubData } from '../../store/modules/common/selector'
  70.  
  71. const mapStateToProps = state => ({
  72. myGithubInfo: getGithubData(state),
  73. })
  74. const mapDispatchToProps = {
  75. fetchGitInfo,
  76. }
  77.  
  78. const MyInfo = (props) => {
  79. const { myGithubInfo, fetchGitInfo } = props
  80. // react-hooks新增:可代替componentDidMount和componentDidUpdate
  81. useEffect(() => {
  82. if (myGithubInfo && !Object.keys(myGithubInfo).length) {
  83. // 触发action,开始请求接口
  84. fetchGitInfo('wjf444128852')
  85. }
  86. }, [myGithubInfo, fetchGitInfo])
  87. return (
  88. <div>
  89. <p>{myGithubInfo.name}</p>
  90. <p>{myGithubInfo.flowers}</p>
  91. </div>
  92. )
  93. }
  94.  
  95. export default connect(mapStateToProps, mapDispatchToProps)(MyInfo)

  

 

+ 3、员工管理和会员管理页面中选择了[Material-table](https://material-table.com/),内置搜索功能,可编辑,增加,删除。需要配置中文显示,配置参考(componenst/MaterialTable)

5、 目录结构

```shell

plop── 快速创建components和store的模板

          ┌── assets 资源文件

          ├── components 页面组件
          ├── router 路由配置
          ├── store state模块管理中心
src──├── styles 页面样式
          ├
          ├── utils 插件和工具
          ├
          ├── views 与路由对应的页面
          └── index.js 页面配置入口


                        ┌── Card 面板组件
                        ├── CustomButtons 按钮组件
                        ├── CustomInput 输入框组件
                        ├── CustomTabs 公用Tab切换组件
components ──├── Dialog 弹框组件
                        ├── Footer 底部footer
                        ├── Grid 栅格组件
                        ├── HeadNavBar 头部导航组件
                        ├── HotelCard 酒店页面UI面板
                        ├── HotelList 酒店页面列表UI组件
                        ├── Login 登录组件
                        ├── MaterialTable 定制可编辑Table组件
                        ├── MuiDatepicker 日期选择器组件
                        ├── MuiTimepicker 时间选择器组件
                        ├── Notifications 自定义提示消息组件
                        ├── Snackbar Material-ui官方消息提示组件
                        ├── Table 定制不可编辑的Table组件
                        ├── Loading loading组件
                        ├── NotFound 404组件
                        ├── ScrollToTopMount 路由切换缓动到顶部组件
                        ├── SideBar 侧边栏路由导航
                        └── SideTool 右边工具栏组件


             ┌── modules 不同的state模块
             ├ ├── account 登录验证state
             ├ ├── common 全局公用的state
             ├ └── theme 主题控制state
store──├
             └── indexStore.js state入口

```

六、 结语

+ 1、上述中redux的工具使用相对复杂繁琐,且不适合react初学者!!!!
+ 1、以上只是实际开发中遇到的笔记总结,若有误请指出。
+ 2、如果打包部署到服务器二级目录如:www.xxx.com/admin,需要对路由添加配置
+ 3、React质量交流QQ群: <code>530415177</code>
+ 5、[前端联盟小组: https://github.com/jsfront](https://github.com/jsfront)

原文链接:http://www.cnblogs.com/-walker/p/11760494.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号