【後臺管理系統】—— Ant Design Pro入門學習&項目實踐筆記（一）

前言：最近在作公司的一個後臺管理系統項目，前端是用React的Ant Design Pro 2.0 ，能夠開箱即用，底層使用了dva和umi代替了redux和umi，使用起來更方便了。

第一次用Ant Design Pro，這裏爲進一步學習作一個梳理便於本身和你們翻閱(O(∩_∩)O~

---

1、項目準備

• 官網：https://pro.ant.design/docs/getting-started-cn
• 官方工做臺：https://preview.pro.ant.design/dashboard/workplace
• 本地環境：須要安裝 node 和 git。咱們的技術棧基於 ES2015+、React、UmiJS、dva、g2 和 antd，
• 安裝

  $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project　　

• 目錄結構：已自動生成一個完整的框架

  ├── config # umi 配置，包含路由，構建等配置 ├── mock # 本地模擬數據 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地靜態資源 │ ├── components # 業務通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用佈局 │ ├── models # 全局 dva model │ ├── pages # 業務頁面入口和經常使用模板 │ ├── services # 後臺接口服務 │ ├── utils # 工具庫 │ ├── locales # 國際化資源 │ ├── global.less # 全局樣式 │ └── global.js # 全局 JS ├── tests # 測試工具 ├── README.md └── package.json　　

• 本地開發：安裝依賴

  $ npm install $ npm start　　

• 啓動完成：會自動打開瀏覽器訪問 http://localhost:8000

   

2、佈局

• 抽離出的通用佈局：放在 layouts 目錄中

1. BasicLayout：基礎頁面佈局，包含了頭部導航，側邊欄和通知欄
2. UserLayout：抽離出用於登錄註冊頁面的通用佈局
3. BlankLayout：空白的佈局

• 佈局與路由系統結合：Ant Design Pro 的路由使用了 Umi 的路由方案，將配置信息統一抽離到 config/router.config.js 下

1. 映射路由與頁面佈局之間的關係

   module.exports = [{ path: '/', component: '../layouts/BasicLayout', // 指定如下頁面的佈局 routes: [ // dashboard { path: '/', redirect: '/dashboard/analysis' }, { path: '/dashboard', name: 'dashboard', icon: 'dashboard', routes: [ { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' }, { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' }, { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' }, ], }, ], }]　　

2. 更多的Umi路由配置方式 ：Umi 配置式路由
3. Pro擴展配置：在 router.config.js 擴展了一些關於 pro 全局菜單的配置

   { name: 'dashboard', //當前路由在菜單和麪包屑中的名稱，國際化配置的key icon: 'dashboard', //當前路由在菜單下的圖標名 hideInMenu: true, //當前路由在菜單中不展示，默認 false hideChildrenInMenu: true, //當前路由的子級在菜單中不展示，默認 false hideInBreadcrumb: true, //當前路由在麪包屑中不展示，默認 false authority: ['admin'], //容許展現的權限，不設則均可見 }　　

• 佈局組件：除了 Pro 裏的內建佈局之外，在一些頁面中須要進行佈局，可使用 AntD 的兩套佈局組件工具：Layout 和 Grid

1. Grid 組件：柵格佈局按比例劃分頁面，具備彈性佈局的特色，能設置間距、支持響應式的比例設置和flex模式 （Grid）

2. Layout 組件：輔助頁面框架級別的佈局設計，只須要填空就能夠開發規範專業的頁面總體佈局（Layout）

3.  注意：一般會把抽象出來的佈局組件，放到跟 pages、 components 平行的 layouts 文件夾中方便管理　

 

3、路由和菜單 

• 基本結構

1. 路由管理：經過約定的語法根據在 router.config.js 中配置路由
2. 菜單生成：根據路由配置來生成菜單。菜單項名稱，嵌套路徑與路由高度耦合
3. 麪包屑：組件 PageHeader 中內置的麪包屑也可由腳手架提供的配置信息自動生成

• 路由

1. 目前腳手架中全部的路由都經過 router.config.js 來統一管理
2. 在 umi 的配置中咱們增長了一些參數，來輔助生成菜單，如上↑（Pro擴展配置）(更多：umi#路由)

• 菜單

1. 菜單根據 router.config.js 生成，具體邏輯在 src/models/menu.js 中的 formatter 方法實現。
2. 注意：若是項目不須要菜單，可直接在 BasicLayout 中刪除 SiderMenu 組件的掛載。並在 src/layouts/BasicLayout 中設置 const MenuData = []。

• 從服務器請求菜單

1. 只需在 models/menu 中發起 http 請求（*getMenuData），menuData 是一個 json 數組。只需服務器返回相似格式的 json 便可。
2. 注意：path 必需要在 routre.config.js 中定義。（約定式路由不須要，只需頁面真實有效便可）

• 麪包屑

1. 麪包屑由 PageHeaderWrapper 實現，MenuContext 將 根據 MenuData 生成的 breadcrumbNameMap 經過 props 傳遞給了 PageHeader。
2. 自定義的麪包屑：能夠經過修改傳入的 breadcrumbNameMap 來解決。
3. 菜單跳轉到外部地址：直接將完整 url 填入 path 中，框架會自動處理。

• 帶參數的路由

1. 支持，但須要本身寫

   { path: '/dashboard/:page', hideInMenu:true, name: 'analysis', component: './Dashboard/Analysis', },　　

2. 路由跳轉：2種方法，umi的router.push（）和<Link  />

   import router from 'umi/router'; router.push('/dashboard/anyParams') //or import Link from 'umi/link'; <Link to="/dashboard/anyParams">go</Link>

3. 在路由組件中，能夠經過this.props.match.params 來得到路由參數　

 

4、新增頁面和業務組件

• 新增 js、less 文件：在 src/pages 下新建頁面的 js 及 less 文件，多個頁面能夠新建文件夾放置

• 新增樣式文件：默認使用 CSS Modules （@import……） 或者 在樣式文件的頭部引入 antd 樣式變量文件

• 將文件加入菜單和路由：按照上面↑方式加入，訪問 http://localhost:8000/#/new 便可看到新增頁面

• 新增 model 和 service：若是須要用到 dva 中的數據流，要在 src/models src/services 中創建相應的 model 和 service

• 新增業務組件：在 src/components 下新建一個以組件名命名的文件夾，注意首字母大寫，命名儘可能體現組件的功能

 

5、樣式

• Less: Ant Design Pro 默認使用 less 做爲樣式語言

• CSS Modules: 模塊化引入css文件

  // example.js import styles from './example.less'; export default ({ title }) => <div className={styles.title}>{title}</div>; 

  // example.less .title { color: @heading-color; font-weight: 600; margin-bottom: 16px; } 

1. js 文件的改變就是在設置 className 時，用一個對象屬性取代了原來的字符串，屬性名跟 less 文件中對應的類名相同，對象從 less 文件中引入

2. .title只會在本文件中生效，要定義全局樣式，使用:global

   /* 定義全局樣式 */ :global(.text) { font-size: 16px; } /* 定義多個全局樣式 */ :global { .footer { color: #ccc; } .sider { background: #ebebeb; } }　　

• 樣式文件類別

1. src/index.less：全局樣式文件（由於 antd 會自帶一些全局設置，如字號，顏色，行高等，因此這裏只須要關注本身的個性化需求便可，不用進行大量的 reset）

2. src/utils/utils.less：工具函數供調用，如.clearfox清除浮動

3. src/layouts/BasicLayout.less: 基本佈局樣式（如項目須要使用其餘佈局，也建議將佈局相關的 js 和 less 放在這裏src/layouts）

4. src/routes/Dashborad/Monitor.less：具體頁面相關的樣式，裏面的內容僅和本頁面的內容相關

5. 組件級樣式：重複使用的組件，其相關的樣式也應該提煉出來放在組件中，而不是混淆在頁面裏

6. 內聯樣式： style={{ ... }}


• 覆蓋組件樣式

1. 被覆蓋的類名必須放到 :global 中，此時覆蓋是全局性的

2. 爲了防止對其餘 同類 組件形成影響，因此須要包裹額外的 className 限制樣式的生效範圍 

 

6、和服務端進行交互

• DVA 是基於 redux、redux-saga 和 react-router 的輕量級前端框架及最佳實踐沉澱（model 是 DVA 中最重要的概念）

1. namespace：model 的命名空間，只能用字符串。一個大型應用可能包含多個 model，經過namespace區分。

2. state：當前 model 狀態的初始值，表示當前狀態。

3. reducers：用於處理同步操做，能夠修改 state，由 action 觸發。reducer 是一個純函數，它接受當前的 state 及一個數據體（payload）做爲入參，返回一個新的 state。

4. effects：用於處理異步操做（例如：與服務端交互）和業務邏輯，也是由 action 觸發。可是，它不能夠修改 state，要經過觸發 action 調用 reducer 實現對 state 的間接操做。 

5. action：是 reducers 及 effects 的觸發器，通常是一個對象，形如{ type: ‘add’, payload: todo }，經過 type 屬性能夠匹配到具體某個 reducer 或者 effect，payload 屬性則是數據體，用於傳送給 reducer 或 effect。

     

• 使用mock模擬數據

1. 在根目錄下新建mock文件夾

2. 新建 mock/xxx.js

   // 代碼中會兼容本地 service mock 以及部署站點的靜態數據 export default { // 支持值爲 Object 和 Array // GET POST 可省略 'POST /api/register': (req, res) => { res.send({ status: 'ok', currentAuthority: 'user' }); } }　　

3. mock文件夾在umi中，會自動引入使用，能夠新建多個mock文件。會根據請求路徑對應攔截　　

• 在 model 中請求服務端數據

1. 代理請求：跨域問題

2. 在配置文件config/config.js添加

   proxy: { '/login': { target: 'http://192.168.1.106:9099', //代理請求的服務器地址 changeOrigin: true, pathRewrite: { '^/login/': '' } }, }　　

3. 代理請求成功，顯示的請求地址不會改變，仍爲 http://localhost:8000
4. 若是沒作其餘處理，使用mock數據時，須要關閉proxy代碼

 

7、構建和發佈

• 構建

  npm run build　　

• 前端路由與服務端的結合

1. Ant Design Pro 使用的 Umi 支持兩種路由方式：browserHistory 和 hashHistory
2. 能夠在 config/config.js 中配置選擇用哪一種方式：

   export default { history: 'hash', // 默認是 browser }　　

3. browserHistory路由方式：須要服務器作好處理 URL 的準備，不然在刷新路由後，請求會異常內容不能正常顯示
4. hashHistory路由方式：瀏覽器訪問到的始終都是根目錄下 index.html，在來回刷新路由後，請求正常內容能夠正常顯示

 

8、學習推薦　　

• 夕陽楓【ant design pro 代碼學習】系列博客：https://blog.csdn.net/zcs425171513?t=1

• Ant design Pro 在線問題討論：https://github.com/ant-design/ant-design-pro/issues

• Ant design Pro 在線源碼： https://github.com/ant-design/ant-design-pro

• Ant design Pro 官方教程： https://www.yuque.com/ant-design/course/dsl8ee

 

參考資料 

• Ant design Pro 官網：https://pro.ant.design/docs/getting-started-cn

• 辛木木博客：http://www.javashuo.com/article/p-skxoyumq-ku.html

---

注：轉載請註明出處