ant design pro ?
功能 = 脚手架 + React中后台项目开发模板
技术栈 = 开发工具:umi + UI组件:Ant Design React + 数据流:dva + 基于antd封装的组件ProComponents
创建项目
生成的项目有完整的配置、布局、一般可复用的功能(表格、表单、图表、列表页、详情页、信息展示、状态页、画图等等),几乎囊括了后台管理系统可能用到的功能。ant design pro可作为一个快速开发的工具,来提高做一些重复工作的效率!
代码结构
布局
BasicLayout
主要由高级布局组件ProLayout实现
ProLayout与umi配合,拿到config/config.js中的路由配置直接生成菜单(有新增一些字段配置,如icon、hideInMenu等),同时可以生成面包屑导航,会根据浏览器地址栏url自动选中对应的菜单。
菜单右侧内容区可根据需要使用PageContainer组件,它会根据路由配置生成面包屑和标题,还可以配置tabList 和 content
路由
路由和布局共用一份配置(config/config.js:routes)
权限
- 从以上 布局 可以看到,需要权限验证的路由项都配置了authority、Routes
- 登录后获取到用户权限admin或user,保存
- BasicLayout中内容区用Authorized鉴权组件包了一层,这时候会用到路由配置中的权限信息