一个精简的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

项目截图

项目结构

使用细节

注意细节

相关文章：