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

最近用ant-design-pro在做一个后台的管理系统，因为之前使用过基于antd的antd-admin，github地址：https://github.com/zuiidea/antd-admin，觉得挺不错的，这次于是选择了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.到这里一个新页面和功能也就基本实现了。

总结：

整体的一个运行流程如下：

1. 进入页面，在页面的componentDidMount钩子函数中调用model的effect中的方法
2. 该方法调用service文件夹下的统一管理的请求函数
3. 获取到服务器返回值，在model的effect中拿到，并且调用model下的reducer
4. 调用model的reducers对请求的数据进行处理，将model的state进行改变，页面自动进行渲染

具体文档可看：https://pro.ant.design/docs/server-cn