ant design pro 初探

1,530 阅读1分钟

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)

权限

  • 从以上 布局 可以看到,需要权限验证的路由项都配置了authorityRoutes
  • 登录后获取到用户权限admin或user,保存
  • BasicLayout中内容区用Authorized鉴权组件包了一层,这时候会用到路由配置中的权限信息