通过实际demo演示一个管理后台的开发过程
知识点：
1、新增router，新增models
新增菜单配置
1、如上图所示，打开/src/common/menu.js可以看到菜单列表
其中 menuData 是菜单数组，其中每个对象表示一个菜单
name 表示菜单的名字
path 表示菜单的路由地址名称
icon 表示菜单的icon
anthority 表示权限控制可以是字符串也可以数组，参数是准入身份
children 表示菜单下的二级目录
2、菜单配好后我们看routes文件夹，routes文件夹存放的是业务页面入口，习惯上一个菜单放在一个文件夹下对应一个models（下文会提到）
routes业务页面入口
以QuestionList为例，它就是1中所说的menuData中的第一个对象，name为“题库列表”的对应模块
3、模块也创建好以后我们还需要创建一个对应的models（存放dva model）
在如上图models文件夹中创建question.js
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中获取数据。
redux、react-redux、redux-saga 的封装
所有这些都准备好以后，我们开始配置router
4、打开/src/common/router.js 我们会看到如下图
/src/common/router.js 配置路由地址，引入模块，关联model
其中routerConfig对象中的key就是我们页面显示的路由地址，它的value中有我们必须配置的项
dynamicWrapper方法有三个参数
第一个参数app 就是 dva 实例
第二个参数是一个数组，它的值是这个路由地址下的组件所关联的model的namespace
第三个参数import当然是引用组件了
以上全部都准备完毕，新增页面结束，下图是我们在浏览器中打开的效果
浏览器打开看左边菜单栏变化，点击看地址栏变化
总结关键知识点（新增页面分几步）：
1、编辑菜单
2、在routes中创建模块
3、在models中创建对应的Model
4、配置路由
5、看页面喽
下一篇总结Table 表格
网友评论