隨行付微服務前端開發框架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');


複製代碼

項目地址

開源中國：gitee.com/sxfad/react…

GitHub：github.com/sxfad/react…

文檔：open.vbill.cn/react-admin…

做者介紹

王淑彬，隨行付架構部前端架構師。深耕大前端技術棧，精通React、React Native、Vue等新型前端技術，致力於提高前端研發效能。