React全家桶+Material-ui構建的後臺管理系統

1、簡介javascript

一個使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui構建的後來管理中心。前端

2、 附錄
+ 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個頁面:圖表數據,我的資料,員工管理,會員管理,線路設計,酒店預訂java

3、 工具歸納react

+ 一、[redux](https://redux.js.org/):管理組件state的容器
+ 二、[react-redux](https://react-redux.js.org/):React官方控制React組件與Redux的鏈接容器
+ 三、[redux-actions](https://redux-actions.js.org/):簡化Redux寫法的工具
+ 四、[redux-saga](https://redux-saga.js.org/):Redux處理異步數據的中間件
+ 五、[reselect](https://github.com/reduxjs/reselect):Redux的選擇器工具,精確獲取指定state,減小沒必要要的渲染
+ 六、[plop](https://plopjs.com/):快速開發工具,自動生成指定模板文件的工具ios

4、功能概況git

+ 一、路由權限匹配,可在登陸時接口返回該帳號權限級別,把routerList注入store
+ 二、異步獲取github開放的我的信息接口,redux和redux-saga和redux-actions以及reselect是如何串聯一塊兒的。對應目錄(src/store/modules/common)github

// 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 || {}

// 五、組件內部使用
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)

  

 

+ 三、員工管理和會員管理頁面中選擇了[Material-table](https://material-table.com/),內置搜索功能,可編輯,增長,刪除。須要配置中文顯示,配置參考(componenst/MaterialTable)shell

五、 目錄結構redux

```shellaxios

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入口

```

6、 結語

+ 一、上述中redux的工具使用相對複雜繁瑣,且不適合react初學者!!!!
+ 一、以上只是實際開發中遇到的筆記總結,如有誤請指出。
+ 二、若是打包部署到服務器二級目錄如:www.xxx.com/admin,須要對路由添加配置
+ 三、React質量交流QQ羣: <code>530415177</code>
+ 五、[前端聯盟小組: https://github.com/jsfront](https://github.com/jsfront)

相關文章
相關標籤/搜索