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

知識點：

1、新增router，新增models

新增菜單配置

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

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

name 表示菜單的名字

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

icon 表示菜單的icon

anthority 表示權(quán)限控制可以是字符串也可以數(shù)組，參數(shù)是準(zhǔn)入身份

children 表示菜單下的二級目錄

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

routes業(yè)務(wù)頁面入口

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

3、模塊也創(chuàng)建好以后我們還需要創(chuàng)建一個對應(yīng)的models（存放dva model）

在如上圖models文件夾中創(chuàng)建question.js

namespace很重要

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

通常項目中一個模塊對應(yīng)一個 model。

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

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

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

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

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

所有這些都準(zhǔn)備好以后，我們開始配置router

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

/src/common/router.js 配置路由地址，引入模塊，關(guān)聯(lián)model

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

dynamicWrapper方法有三個參數(shù)

第一個參數(shù)app 就是 dva 實例

第二個參數(shù)是一個數(shù)組，它的值是這個路由地址下的組件所關(guān)聯(lián)的model的namespace

第三個參數(shù)import當(dāng)然是引用組件了

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

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

總結(jié)關(guān)鍵知識點（新增頁面分幾步）：

1、編輯菜單

2、在routes中創(chuàng)建模塊

3、在models中創(chuàng)建對應(yīng)的Model

4、配置路由

5、看頁面嘍

下一篇總結(jié)Table 表格

感謝Ant Design Pro

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。