一個精簡的React+Ant Design後臺管理系統模版

看了網上不少基於React+Ant Design後臺管理系統解決方案，我的感受有些太重，整合了太多東西進去，例如富文本組件，markdown，Echarts，甚至還有AntD表格的使用demo......

或許你只想要一個拿來就能用，除了修改項目名稱，而不須要修改太多地方的簡單模版。

注意：本項目使用 react-app-rewired 和 customize-cra 來重寫配置，並未eject，因此若是你要修改配置你只須要修改跟目錄下config-overrides.js文件裏的代碼便可。

作一個後臺管理系統，可能你只須要整合一些基本的：

1. react router v4路由，實現按需加載，鑑權。
2. axios，基本封裝。
3. mockjs，實現攔截ajax響應模擬數據。
4. react-intl國際化。
5. mobx集成。
6. 登陸頁面。
7. 管理頁面Layout（動態側邊導航欄，頭部導航欄，麪包屑導航，和主體）。
8. 按需加載AntD，可用less文件定製主題。
9. 集成decorators，開發可以使用裝飾器。
複製代碼

那麼可能這個項目更適合你：shx996/react-antd-admin。

本項目登陸頁面和loader組件是借鑑了github社區zuiidea/antd-admin，該項目仍是很優秀的，只不過它基於阿里的dvajs開發，而且整合了全部經常使用的demo。

寫這個項目初衷主要是爲了本身日後開發項目作備用，過程其實不復雜，主要是每次整合都很麻煩。

項目截圖

項目結構

v react-antd-admin
   > public
   v src
    v components
     > Layout               // 佈局組件
     > Loader               // 加載組件
       index.js             // 導出
    > locales               // 國際化
    > pages                 // 頁面
    > routes                // 路由
    > service               // api服務，包括mock
       api.js
       mock.js
    > stores                // mobx
    > styles                // 全局樣式(antd主題定製)
    v utils                 // 封裝的工具
       config.js            // 全局配置
       loading.js           // 基於js方式調用的加載插件
       request.js           // 簡單封裝axios
       tools.js             // 經常使用函數工具
      App.js
      App.less
      App.test.js
      index.js
      Main.js
      serviceWorker.js
    .gitignore
    config-overrides.js     // 重寫項目默認配置
    LICENSE
    package.json
    README.md
    yarn.lock
複製代碼

靈活，簡單，儘可能不寫一句多餘代碼。

使用細節

非組件方式調用loading

import loading from '../utils/loading'

loading.show()
loading.hide()
複製代碼

發送一個http請求

/** * Api是全局變量 * App.js -> global.Api = api */
const form = {username: 'guest', password: 'guest'}
Api.login(form)
// mock模擬，默認false
Api.login(form, {mock: true})
// loading關閉，默認true
Api.login(form, {loading: false})
// 或者在封裝的時候能夠作統一默認
export default {
  login: (data, config) => request.post('login', {data, loading: false, ...config})
}
複製代碼

請求數據能夠放到組件中的state，若是喜歡分離，能夠放到mobx（或者redux，本項目沒有集成，可是很容易集成。感受mobx開啓嚴格模式，是能夠勝任大部分項目，用得好很差呢看我的和團隊）。

注意細節

本項目對以module.less結尾文件開啓了css-modules（非以這個結尾的不受影響），默認使用的也是less，使用方式爲

:global {
  .test-global {
    font-size: 12px;
  }
}
.test {
  color: #1890ff;
}
.test-name {
  font-size: 14px;
}
複製代碼

import styles from './Dashboard.module.less'

// 瀏覽器或許會生成 class="test-global Dashboard_test__1E0aO"
<span className={`test-global ${styles.test}`}></span>
<span className={styles['test-name']}></span>
複製代碼

若是你用的是Sass或者是Stylus等等，一樣你須要修改 config-overrides.js文件

若是能幫助你，那最好。

歡迎加入Vue/React 前端技術羣，一塊兒探討前端開發。

Vue/React 前端技術羣

END