antd-pro新增新頁面和新功能

JinsongChai發表於2018-05-17

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，哈哈！

相關文章