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'))
    },

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

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

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

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

個人文章都會在gitbook上找到，以爲不錯的的能夠看一下。順便給個star，哈哈！