前言
React-Admin是基於React16.x、Ant Design3.x的管理系統架構。 採用前後端分離，內置了許多管理系統常用功能，通過一些腳本、封裝幫助開發人員快速開發管理系統，集中精力處理業務邏輯。
背景
一般的互聯網公司內部或者對外都會有大量的管理系統，傳統公司一般有後端開發人員進行管理系統開發，所用技術大多都是jsp、模版語言等。 隨着公司的發展，管理系統數量和複雜度不端增加，開發人員耗費大量的精力在開發和維護管理系統上。 由於管理系統大多是公司內部使用，很多公司、團隊並不重視，導致可用性差、bug多、頁面醜陋。使用者怨聲載道，開發者苦不堪言。。。
技術迭代
隨着前端的技術發展迭代，傳統的基於後端模版語言、jQuery的開發方式已經過時，難以應對複雜的需求、快速的項目迭代。 近幾年隨着React、Es6等技術的興起，讓前端可以與後端分離、可以組件化模塊化，擁有了構建大型複雜項目的能力。
困難
WebPack開發五分鐘，配置兩小時，各種解決方案要結合：React、組件庫、Redux、Router、ajax、國際化、主題、Less、CSS Module。。。 社區上有很多好的工具、組件，但是整合起來形成系統的解決方案的寥寥無幾。要自己做一個？基礎代碼纔剛剛寫的溜，還要加班改bug，哪兒有時間搞框架~
React-Admin介紹
React-Admin專注於解決管理系統開發過程中涉及到的一些列問題，採用最新的前端技術棧：React、ES6+、組件化、模塊化等。針對於管理系統，整合了大量開源社區優秀的組件、工具庫；集成了大量管理系統常用功能！
項目截圖
這裏只提供了部分頁面截圖，根據文檔快速開始進行項目的搭建，瀏覽項目豐富功能！
項目結構
社區常用標準化目錄組織。
.
├── config // 構建配置
├── nginx-conf // 生產部署nginx配置參考
├── public // 不參與構建的靜態文件
├── scripts // 構建腳本
├── src
│ ├── commons // 通用js
│ ├── components // 通用組件
│ ├── i18n // 國際化
│ ├── layouts // 頁面框架佈局組件
│ ├── library // 基礎組件
│ ├── mock // 模擬數據
│ ├── models // 模塊封裝，基於redux，提供各組件共享數據、共享邏輯
│ ├── pages // 頁面組件
│ ├── router // 路由
│ ├── App.js // 根組件
│ ├── index.css // 全局樣式
│ ├── index.js // 項目入口
│ ├── menus.js // 菜單配置
│ ├── setupProxy.js // 後端聯調代理配置
│ └── theme.js // 主題變量
├── package.json
├── README.md
└── yarn.lock
功能
經過多年的沉澱積累、篩選迭代，系統目前集成功能如下：
-
菜單配置：扁平化數據組織，方便編寫、存庫；
-
頁面配置：提供配置裝飾器，頁面功能配置化；
-
系統路由：簡化路由配置，一個變量搞定；
-
Ajax請求：restful規範，自動錯誤提示，提示可配置；
-
Mock模擬數據：無需等待後端，自己提供數據，簡化mock寫法；
-
樣式&主題：Less簡化css編寫，CSS Module防衝突，用戶可自定義主題顏色；
-
導航佈局：多種導航方式，一鍵切換；
-
Model(Redux)：簡化Redux寫法，配置化同步LocalStorage；
-
國際化：多種語言支持；
-
權限控制：菜單級別、功能級別權限控制；
-
Nginx配置：內置配置參考；
-
開發代理：開發過程中與後端調試接口；
-
代碼生成工具：CRUD基礎一鍵生成，提高開發效率；
系統提供了一些基礎的頁面： * 登錄 * 修改密碼 * 菜單編輯 * 用戶管理 * 角色管理
部分功能介紹
系統集成了大量功能，簡單介紹幾個。還有許多的功能，就不一一介紹了，感興趣可以戳這裏;
菜單
菜單往往涉及到了樹的操作、狀態選中、佈局等等問題，系統內置了菜單功能：
-
系統內置菜單權限編輯頁面
-
國際化支持
-
權限支持
-
菜單支持頭部、左側、頭部+左側三種佈局方式；
-
系統會基於路由path自動選中對應的菜單；
-
無菜單對應的二級頁面也可以選中相應父級菜單；
-
左側菜單會自動滾動到可視範圍內；
-
左側菜單支持展開收起、拖拽改變寬度
-
頁面標題、tab標籤頁標題、麪包屑基於菜單狀態自動生成，但也提供了對應的修改方式；
-
通過菜單配置，支持內嵌iframe打開頁面、a標籤方式打開頁面；
路由
基於React-Router做系統路由，開發人員也要寫配置，隨着系統不斷壯大，配置文件也越來越大，多人協作各種git衝突
React-Admin內置路由封裝，無需寫配置，只寫一個變量就好~
@config({
path: '/path',})export default class SomePage extends React.Component {
...}
導航佈局
系統內置多種導航佈局方式，一鍵切換：
-
頭部菜單
-
左側菜單
-
頭部+左側菜單
-
tab頁方式
頁面保持
列表頁經過查詢、翻頁等操作找到一條記錄，點擊編輯頁面跳轉，再跳轉回列表頁，列表頁初始化了，還要重新查找。 如果頁面每次切換，都能保持之前的操作狀態多好！React-Admin底層封裝了，一鍵開啓，無需其他特殊編碼。
Model(Redux)
Redux很強大，也很好用，但是寫法也忒複雜了吧，大量的樣板代碼~我就想跨組件共享個數據！ React-Admin基於Redux做了封裝，用Redux，只寫一個函數就好！
// page.model.jsexport default {
initialState: {
title: void 0,
},
setTitle: title => ({title}),}// 使用this.props.action.page.setTitle('my title');
項目地址
開源中國：https://gitee.com/sxfad/react-admin.git