antd-pro添加新页面和新功能

最新推荐文章于 2024-05-09 10:30:02 发布

转载

最新推荐文章于 2024-05-09 10:30:02 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014897318

本文介绍了如何在antd-pro项目中添加新的页面和功能。首先在`/src/common/menu.js`配置菜单，接着在`/src/routes/`下创建页面文件夹并对应配置路由，同时在`/src/models/`建立model来定义数据和函数。请求操作统一放在`/src/services/`中。完成以上步骤，新页面和功能即可实现。整个流程涉及组件挂载、异步请求、数据处理和页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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（用来修

最低0.47元/天解锁文章

200万优质内容无限畅学