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,哈哈!

    原文作者:JinsongChai
    原文地址: https://segmentfault.com/a/1190000014897318
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞