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