隨行付微服務前端開發框架React Admin

馬力_隨行付發表於2019-02-20

前言

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


複製程式碼