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 = https://www.cnblogs.com/-walker/p/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)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178598.html

標籤：JavaScript

上一篇：1-JavaScript變數

下一篇：vue的mescroll搜索運用以及各種填坑處理