微服務前端開發框架React-Admin

摘要： React-Admin是基於React16.x、Ant Design3.x的管理系統架構。 採用前後端分離，內建了許多管理系統常用功能，通過一些指令碼、封裝幫助開發人員快速開發管理系統，集中精力處理業務邏輯。 背景 一般的網際網路公司內部或者對外都會有大量的管理系統，傳統公司一般有後端...

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');

複製程式碼