ant-design-pro新增页面和功能
最近用ant-design-pro在做一个后台的管理系统,因为之前使用过基于antd的antd-admin,github地址:https://github.com/zuiidea/an...,觉得挺不错的,这次于是选择了antd-pro作为后台。他们都是基于 dva 和antd的。所以需要先了解一下dva中的一些概念,例如dva中的model等。
以下是详细步骤:
- 找到 /src/common/menu.js中进行配置菜单,可以参照 自带的菜单进行配置
- 在/src/routes/ 这个文件夹下新建一个文件夹,用来存放新的页面,并且最好文件夹的命名需要和menu.js中的path相对应,然后新建一个js文件作为页面
-
在/src/common/router.js 的 routerConfig中配置路由。其中第二个参数是该页面对应的model,即数据存储的地方,第三个参数则是一个函数,返回对应的页面
'/frontUser/list':{ //第二个参数是指定model component : dynamicWrapper(app,['frontUser'],()=> import('../routes/FrontUser/List')) },
- 到这里就可以看到效果了,但是需要有数据操作。于是在 /src/models/ 这个文件夹下新建一个 frontUser.js文件,作为这个页面的model,用来定义该页面需要用到的数据,以及一些函数。
- 在model中存在 namespace(命名空间,用来区分不同的页面之间的数据),state(该命名空间下的数据),effects(一些异步请求的api方法定义在这里),reducers(用来修改state的一些函数定义在reducers下)
- 在model中不直接书写发起请求的代码,而是将请求统一放在 /src/services/下,新建一个js文件,存储各种请求的函数,将这些函数暴露出去,在model中引用。
- 到这里一个新页面和功能也就基本实现了。
总结:
整体的一个运行流程如下:
- 进入页面,在页面的componentDidMount钩子函数中调用model的effect中的方法
- 该方法调用service文件夹下的统一管理的请求函数
- 获取到服务器返回值,在model的effect中拿到,并且调用model下的reducer
- 调用model的reducers对请求的数据进行处理,将model的state进行改变,页面自动进行渲染
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。