Ant Design Pro开发后台管理系统(新增页面)

简介: 通过实际demo演示一个管理后台的开发过程知识点:1、新增router,新增models新增菜单配置1、如上图所示,打开/src/common/menu.

通过实际demo演示一个管理后台的开发过程

知识点:

1、新增router,新增models

img_19c277e4cdb2491b7a07e9c7dfe52c15.png
新增菜单配置

1、如上图所示,打开/src/common/menu.js可以看到菜单列表

其中 menuData 是菜单数组,其中每个对象表示一个菜单

name 表示菜单的名字

path 表示菜单的路由地址名称

icon 表示菜单的icon

anthority 表示权限控制可以是字符串也可以数组,参数是准入身份

children 表示菜单下的二级目录


2、菜单配好后我们看routes文件夹,routes文件夹存放的是业务页面入口,习惯上一个菜单放在一个文件夹下对应一个models(下文会提到)


img_248c5b5f9f2bd4600719c0a824d42006.png
routes业务页面入口

以QuestionList为例,它就是1中所说的menuData中的第一个对象,name为“题库列表”的对应模块

3、模块也创建好以后我们还需要创建一个对应的models(存放dva model)

在如上图models文件夹中创建question.js


img_ef96bb067a3c21d41023653f641f1084.png
namespace很重要

Model 是 dva 最重要的部分,可以理解为 redux、react-redux、redux-saga 的封装。

通常项目中一个模块对应一个 model。

namespace 是该 model 的命名空间,同时也是全局 state 上的一个属性

reducer 类似于 redux 中的 reducer,它是一个纯函数,用于处理同步操作,是唯一可以修改 state 的地方,由 action 触发,它有 state 和 action 两个参数。

effects用于处理异步操作,不能直接修改state,由action触发,也可触发action。

effects它只能是generator函数,并且有action和effects两个参数。第二个参数effects包含put、call和select三个字段,put用于触发action,call用于调用异步处理逻辑,select用于从state中获取数据。


img_4884a7fc2c40342fc9b8b9b6aeb5e7e5.png
 redux、react-redux、redux-saga 的封装

所有这些都准备好以后,我们开始配置router

4、打开/src/common/router.js 我们会看到如下图


img_a86d0008754bf2118304752568e8afa9.png
/src/common/router.js 配置路由地址,引入模块,关联model

其中routerConfig对象中的key就是我们页面显示的路由地址,它的value中有我们必须配置的项

dynamicWrapper方法有三个参数

第一个参数app 就是 dva 实例

第二个参数是一个数组,它的值是这个路由地址下的组件所关联的model的namespace

第三个参数import当然是引用组件了

以上全部都准备完毕,新增页面结束,下图是我们在浏览器中打开的效果


img_20c4a0bf2d7578f84dc4230ad003db5f.png
浏览器打开看左边菜单栏变化,点击看地址栏变化

总结关键知识点(新增页面分几步):

1、编辑菜单

2、在routes中创建模块

3、在models中创建对应的Model

4、配置路由

5、看页面喽

下一篇总结Table 表格

感谢Ant Design Pro

相关文章
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1368 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
前端开发 JavaScript Java
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
901 0
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
764 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1488 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
前端开发
ant design一个页面(新增编辑)
ant design一个页面(新增编辑)
75 0
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
895 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
|
开发工具 git
基于Ant Design Pro搭建博客管理后台 第一节
基于Ant Design Pro搭建博客管理后台 第一节
123 0
|
前端开发 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板 OpenAPI,快速管理你的请求接口。
前言 >转载好文,作者:[赵小左](https://blog.csdn.net/qq_31281245/article/details/126783707)
【Ant Design Pro】使用ant design pro做为你的开发模板 OpenAPI,快速管理你的请求接口。
Ant Design Pro新增页面步骤
Ant Design Pro新增页面步骤
291 0