用配置文件快速生成含菜单/导航/登录的后台界面框架

方案简介

react-antd-admin 是一个 React 通用后台方案，目标是快速搭建一个可用的后台界面。作者是一名 Java 开发，经常需要为内部系统、运营后台做前端，但重复工作多、代码不可复用，于是想一劳永逸搞一个通用的东西，尽量用写配置的方式替代写代码。方案的第一件事就是搭建一个框架，用配置文件生成典型的后台界面：侧边栏菜单、Header（用户名与面包屑导航）、内容区、Footer，以及登录、注销等，从某种角度上说与 Metronic/AdminLTE 的目标相似。它比较适合项目初期做原型、或者对后台要求不高的情况，也适合对 React 或 Ant Design 感兴趣但不知如何入手的人参考。

亮点与能力

• 通过配置文件生成完整后台界面框架（侧边栏/Header/内容区/Footer）
• 可配置侧边栏与顶部菜单
• 通过 React Router 配置点击菜单时右侧渲染的组件
• 支持 header/footer/登录校验/单点登录等配置
• 默认 debug 模式 mock 所有数据，无需后端即可预览
• 支持 TAB 模式的界面（见 DEMO）
• 提供单点登录等配置项

组成与分工

• React：组件化编写后台界面与业务组件
• Ant Design：提供后台 UI 组件与视觉风格
• React Router：配置点击侧边栏菜单时右侧渲染什么组件
• webpack/webpack-dev-server：打包 js/css，开发时本地调试服务
• src/menu.js：定义侧边栏菜单
• src/config.js：项目名、footer、单点登录、logLevel 等配置

前置要求

• node 版本 5.3+
• npm 版本 3.3+
• clone 项目后安装依赖：

npm install

实施步骤

1. 环境准备与安装

保证 node 版本 5.3+、npm 版本 3.3+，clone 下来后执行 npm install 安装必要的依赖。

2. 本地调试启动

npm run dev

启动 webpack-dev-server，打开浏览器 http://localhost:8080 查看效果。默认是 debug 模式，不会请求后端接口，所有数据都是 mock 的。

3. 配置菜单与路由

参考 src/menu.js 配置侧边栏和顶部菜单；修改 src/index.js 中的路由表，保证和 menu.js 中的菜单项一致，否则可能 404。

4. 修改全局配置

修改 src/config.js 中相关配置，比如项目名、footer、单点登录等等。如有必要可把 logLevel 设置为 debug，会输出详细的 debug 日志。

5. 构建部署

npm run prod

编译 js 文件，然后将 dist 目录下的所有 js/css/html 文件拷贝到自己的工程中。一般会有一个 index.html，一个 bundle.min.css，以及多个 js 文件。

使用与配置要点

• 日常开发可用 npm run eslint/npm run stylelint/npm run lesshint 等 lint 工具检查代码
• npm run clean 可删除 dist 目录下的 bundle*.js
• 验证成功：浏览器访问 http://localhost:8080 能看到生成的后台界面，或线上 DEMO 用户名/密码 guest/guest 登录体验

注意事项与常见问题

• 安全/权限：目前对安全&权限都没考虑进去，如有要求只能后端校验，在请求后端接口时校验用户的身份和权限；权限不太好在框架层做成通用的，有需求建议定制开发。
• 兼容性：能力所限，只能保证 chrome 中正常使用；mac 下开发，windows 下测试较少，有问题欢迎提 issue。
• bundle size：webpack 打包的 bundle.js 总是还会有 1M 多，减不下去，应用到外网时初次加载可能比较慢，内网无所谓。

优缺点

• ✓ 配置优于代码，快速搭建
• ✓ 界面体验还算看得过去
• ✕ 所有后台都长一个样子
• ✕ bundle 1M多首屏慢

出处

本方案挖掘自开源项目 jiangxy/react-antd-admin，方案内容与实施命令均来自其 README 原文。