通過實際demo演示一個管理后臺的開發過程

知識點：

1、新增router，新增models

新增菜單配置

1、如上圖所示，打開/src/common/menu.js可以看到菜單列表

其中 menuData 是菜單數組，其中每個對象表示一個菜單

name 表示菜單的名字

path 表示菜單的路由地址名稱

icon 表示菜單的icon

anthority 表示權限控制可以是字符串也可以數組，參數是準入身份

children 表示菜單下的二級目錄

2、菜單配好后我們看routes文件夾，routes文件夾存放的是業務頁面入口，習慣上一個菜單放在一個文件夾下對應一個models（下文會提到）

routes業務頁面入口

以QuestionList為例，它就是1中所說的menuData中的第一個對象，name為“題庫列表”的對應模塊

3、模塊也創建好以后我們還需要創建一個對應的models（存放dva model）

在如上圖models文件夾中創建question.js

namespace很重要

Model 是 dva 最重要的部分，可以理解為 redux、react-redux、redux-saga 的封裝。

通常項目中一個模塊對應一個 model。

namespace?是該 model 的命名空間，同時也是全局?state?上的一個屬性

reducer?類似于 redux 中的 reducer，它是一個純函數，用于處理同步操作，是唯一可以修改?state?的地方，由?action?觸發，它有?state?和?action?兩個參數。

effects用于處理異步操作，不能直接修改state，由action觸發，也可觸發action。

effects它只能是generator函數，并且有action和effects兩個參數。第二個參數effects包含put、call和select三個字段，put用于觸發action，call用于調用異步處理邏輯，select用于從state中獲取數據。

redux、react-redux、redux-saga 的封裝

所有這些都準備好以后，我們開始配置router

4、打開/src/common/router.js 我們會看到如下圖

/src/common/router.js 配置路由地址，引入模塊，關聯model

其中routerConfig對象中的key就是我們頁面顯示的路由地址，它的value中有我們必須配置的項

dynamicWrapper方法有三個參數

第一個參數app 就是 dva 實例

第二個參數是一個數組，它的值是這個路由地址下的組件所關聯的model的namespace

第三個參數import當然是引用組件了

以上全部都準備完畢，新增頁面結束，下圖是我們在瀏覽器中打開的效果

瀏覽器打開看左邊菜單欄變化，點擊看地址欄變化

總結關鍵知識點（新增頁面分幾步）：

1、編輯菜單

2、在routes中創建模塊

3、在models中創建對應的Model

4、配置路由

5、看頁面嘍

下一篇總結Table 表格

感謝Ant Design Pro

總結

以上是生活随笔為你收集整理的Ant Design Pro开发后台管理系统（新增页面）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。