pingssys-ant design pro基础

1.pro简介

• Ant Design Pro是一个后台前端/设计解决方案，整合umi + dva + ant
• pro说明

2.安装部署

• 下载：git clone --depth=1 https://github.com/ant-design/ant-design-pro.git demo
• 安装依赖：npm install
• 启动本地开发服务器：npm start
• 编译：npm run build
• 分析：npm run analyze

3.配置

A.概况

├── config                   # umi 配置，包含路由，构建等配置
│   └── router.config.js     # 统一配置和管理 
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

B.路由和菜单

• router.config.js：统一配置和管理
  • name：菜单名称
  • icon：菜单图标
  • hideChildrenInMenu：隐藏子路由
  • hideInMenu：隐藏路由(包括子路由)
  • hideInBreadcrumb: 不展现面包屑
  • authority：路由的权限
• 布局
  • 账户相关布局(UserLayout)：登陆注册页面
  • 基础布局(BasicLayout)：主页面，包含了头部导航，侧边栏和通知栏
  • 空白布局(BlankLayout)
• 自定义的 icon
• 带参数的路由

C.和服务端交互

• 数据处理流程：
  • UI组件交互操作
  • 调用model的effect
  • 调用统一管理的service请求函数
  • 使用封装的request.js发送请求
  • 获取服务端返回
  • 调用reducer改变state
  • 更新model

D.国际化

• 开启(config.js)

locale: {
    enable: true,
    default: 'zh-CN', 
    baseNavigator: true, 
},

• 添加配置(en-US.js/zh-CN.js)
• 使用：

//**导入
import { FormattedMessage } from 'umi/locale';
//**组件中使用
<div><FormattedMessage id="navbar.lang" /></div>
//**直接返回string
<div>{formatMessage({id:'navbar.lang'})}</div>

E.错误处理

• 页面级报错
  • 场景
    • 路由直接引导到报错页面
    • 代码控制跳转到报错页面
  • 实现
    • Exception异常页，默认支持404，403，500三种错误
    • Result结果页
• 提示性报错
  • 场景
    • 表单项校验报错
    • 操作反馈
    • 网络请求错误
  • 实现
    • Alert
    • message
    • notification
• 默认错误提示(request.js)

F.权限管理

• 权限组件说明
• 权限组件(Authorized)：通过比对当前权限与准入权限，决定展示正常渲染内容还是异常内容