antd-pro新增頁面和功能詳細步驟

ant-design-pro新增頁面和功能

最近用ant-design-pro在做一個後臺的管理系統，因爲之前使用過基於antd的antd-admin，github地址：https://github.com/zuiidea/an…，覺得挺不錯的，這次於是選擇了antd-pro作爲後臺。他們都是基於 dva 和antd的。所以需要先了解一下dva中的一些概念，例如dva中的model等。

以下是詳細步驟：

1. 找到 /src/common/menu.js中進行配置菜單，可以參照 自帶的菜單進行配置
2. 在/src/routes/ 這個文件夾下新建一個文件夾，用來存放新的頁面，並且最好文件夾的命名需要和menu.js中的path相對應，然後新建一個js文件作爲頁面
3. 在/src/common/router.js 的 routerConfig中配置路由。其中第二個參數是該頁面對應的model，即數據存儲的地方，第三個參數則是一個函數，返回對應的頁面

 '/frontUser/list':{   
        //第二個參數是指定model   
    component : dynamicWrapper(app,['frontUser'],()=> import('../routes/FrontUser/List')) 
}

1. 到這裏就可以看到效果了，但是需要有數據操作。於是在 /src/models/ 這個文件夾下新建一個 frontUser.js文件，作爲這個頁面的model，用來定義該頁面需要用到的數據，以及一些函數。
2. 在model中存在 namespace(命名空間，用來區分不同的頁面之間的數據)，state（該命名空間下的數據），effects（一些異步請求的api方法定義在這裏），reducers（用來修改state的一些函數定義在reducers下）
3. 在model中不直接書寫發起請求的代碼，而是將請求統一放在 /src/services/下，新建一個js文件，存儲各種請求的函數，將這些函數暴露出去，在model中引用。
4. 到這裏一個新頁面和功能也就基本實現了。

總結：
整體的一個運行流程如下：

• 進入頁面，在頁面的componentDidMount鉤子函數中調用model的effect中的方法
• 該方法調用service文件夾下的統一管理的請求函數
• 獲取到服務器返回值，在model的effect中拿到，並且調用model下的reducer
• 調用model的reducers對請求的數據進行處理，將model的state進行改變，頁面自動進行渲染

具體文檔可看：https://pro.ant.design/docs/s…

我的文章都會在gitbook上找到，有興趣的可以看一下。給個star，謝謝