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