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

一、简介

一个使用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.redux-actions

import { createActions } from 'redux-actions'

export const {

  // 获取github个人信息

  fetchGitInfo,

  setGithubInfo,

} = createActions(

  {

    // 获取github个人信息

    FETCH_GIT_INFO: (username) => ({ username }),

    SET_GITHUB_INFO: (githubData) => ({ githubData}),

  },

)

export default {}

//2.redux-saga

import axios from 'axios'

import { fork, put, takeEvery } from 'redux-saga/effects'

import {

  // github 个人信息

  fetchGitInfo,

  setGithubInfo,

} from './action'

// 请求github

function* getGithubInfo(action) {

  const { username } = action.payload

  // username为你的github 用户名

  const result = yield axios.get(`https://api.github.com/users/${username}`)

  // console.log(action, result, 'saga.....')

  yield put(setGithubInfo(result.data))

}

//

function* watchCommon() {

  // 请求接口

  yield takeEvery(fetchGitInfo, getGithubInfo)

}

export default [fork(watchCommon)]

//3.reducer

import { handleActions } from 'redux-actions'

import {

  // 暂存github信息

  setGithubInfo,

} from './action'

// 该store的命名空间，可创建多个把store分开管理

export const namespace = 'common'

export const defaultState = {

  // github个人信息

  githubInfo: {},

}

export const commonReducer = handleActions(

  {

    [setGithubInfo]: (state, action) => {

      const { githubData } = action.payload

      return { ...state, githubData }

    }

  },

  defaultState

)

// 4.reselect

// 从store单独获取githubInfo,实际中可能有N多个接口的不同数据

export const getGithubData = state => state[namespace].githubData || {}

// 5、组件内部使用

import React, { useEffect } from 'react'

import { connect } from 'react-redux'

import { fetchGitInfo } from '../../store/modules/common/action'

import { getGithubData } from '../../store/modules/common/selector'

const mapStateToProps = state => ({

  myGithubInfo: getGithubData(state),

})

const mapDispatchToProps = {

  fetchGitInfo,

}

const MyInfo = (props) => {

  const { myGithubInfo, fetchGitInfo } = props

  // react-hooks新增：可代替componentDidMount和componentDidUpdate

  useEffect(() => {

    if (myGithubInfo && !Object.keys(myGithubInfo).length) {

    // 触发action,开始请求接口

      fetchGitInfo('wjf444128852')

    }

  }, [myGithubInfo, fetchGitInfo])

  return (

    <div>

      <p>{myGithubInfo.name}</p>

      <p>{myGithubInfo.flowers}</p>

    </div>

  )

}

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)

秒客网

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

相关文章