隨行付微服務前端開發框架React Admin
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.js
export default {
initialState: {
title: void 0,
},
setTitle: title => ({title}),
}
// 使用
this.props.action.page.setTitle('my title');
複製程式碼