;
};
subscriptions: { setup: Subscription };
}
const IndexModel: IndexModelType = {
namespace: "index",
state: {
name: "",
},
effects: {
*query({ payload }, { call, put }) {},
},
reducers: {
save(state, action) {
return {
...state,
...action.payload,
};
},
// 启用 immer 之后
// save(state, action) {
// state.name = action.payload;
// },
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === "/") {
dispatch({
type: "query",
});
}
});
},
},
};
export default IndexModel;
```
#### 案例
1. 模拟后台数据
- 利用 umi 自带的 mock 插件模拟真实接口
```ts
// mock/api.ts
export default {
// 支持值为 Object 和 Array
"GET /api/todos": [
{
id: 0,
title: "吃饭",
completed: false,
},
{
id: 1,
title: "睡觉",
completed: false,
},
{
id: 2,
title: "上号",
completed: false,
},
],
// GET 可忽略
"/api/users/1": { id: 1 },
// 支持自定义函数，API 参考 express@4
"POST /api/users/create": (req, res) => {
// 添加跨域请求头
res.setHeader("Access-Control-Allow-Origin", "*");
res.end("ok");
},
};
```
- 使用 request 发起网络请求
```ts
// user/service.ts
import { request } from "umi";
export const getTodos = async () => {
// var data = [
// {
// id: 0,
// title: '吃饭',
// completed: false,
// },
// {
// id: 1,
// title: '睡觉',
// completed: false,
// },
// {
// id: 2,
// title: '上号',
// completed: false,
// },
// ];
// return data;
return request("/api/todos", {
method: "get",
});
};
```
2. 发送请求并把数据设置到 state 上
```ts
// user/model.ts
import { getTodos } from "@/pages/user/service";
const IndexModel = {
namespace: "user",
state: {
name: "admin",
counter: 100,
todos: [],
},
effects: {
*getTodos({ payload }, { call, put }) {
const data = yield call(getTodos);
yield put({
type: "setTodos",
payload: data,
});
},
},
reducers: {
setTodos(state, { payload }) {
console.log(1);
return {
...state,
todos: payload,
};
},
increment(state, action) {
console.log(1);
return {
...state,
counter: (state.counter += action.payload),
};
},
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === "/user") {
dispatch({
type: "getTodos",
});
}
});
},
},
};
export default IndexModel;
```
3. 在需要的组件中调用数据
```ts
import React from "react";
import { Button } from "antd";
import { connect, useDispatch } from "umi";
function Index(props) {
return (
当前计数为：{props.user.counter}
);
}
const mapStateToProps = ({ user }) => {
console.log(user);
return {
user,
};
};
const mapDispatchToProps = (dispatch) => {
return {
increment() {
dispatch({
type: "user/increment",
payload: 1,
});
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Index);
```
### pro-component 增强组件
传统上我们基本上据于 Ant Design 或者 Vue（element ui， Ant Design for vue, iView,Avue) 等基础组件库来开发，但我们在开发大量中后台功能时，发现更希望有页面级别的组件库供我们使用即标准化的 CRUD 页面组件，这些组件包装好了本身特性状态和行为，例如一个列表页面组件，自带了 dataSoure，loading 状态，同时还有网络请求的行为等封装，分页功能，搜索功能等，从而大量减少我们的重复工作量，当然它只适合中后台应用程序的开发，如果需要丰富的页面风格还是采用原生的 Ant Design 基础组件库才能满足需求。
https://procomponents.ant.design/
#### pro-component 设计思想
1. 一个重型组件的设计思想就是：抽象出有哪些状态，然后围绕出这些状态再抽象出这个状态有哪些行为，即 一个状态加一系列的行为。
2. 重型组件就是约等于一个页面组件： 与传统的组件不同，它是抽象成页面处理，从而让开发更专注核心的业务逻辑：
- 列表页面：ProLayout + ProTable
- 添加/编辑页面：ProLayout + ProForm
- 查看页面：ProLayout + ProDescriptions
#### pro-component 包括了哪些页面级的重型组件
ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著的提升制作 CRUD 页面的效率，更加专注于页面。
- ProLayout 高级布局
- PageContainer 高级页容器
- ProCard 高级卡片
- ProForm 高表单
- ProTable 高级表格
#### 安装依赖包
```bash
# 每个包都是可以独立按需安装的 也可以yarn add @ant-design安装所有包
yarn add @ant-design/pro-form --save
yarn add @ant-design/pro-layout --save
yarn add @ant-design/pro-table --save
yarn add @ant-design/pro-list --save
yarn add @ant-design/pro-descriptions --save
yarn add @ant-design/pro-card --save
yarn add @ant-design/pro-skeleton --save
```
## 五、antd-pro
### antd-pro 简介
https://pro.ant.design/docs/getting-started
And Design Pro(官网)，我们一般也将之简称为 antd pro，是 Ant Design 的升级版。如果你接触过 Ant Design（常简称之为 antd），antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
而 antd pro 则在其之上，增加了 umiJS 的扩展加成，提供了路由、国际化、权限管理等功能，从而成为一整套企业级的中后台前端解决方案，从 AntD 官网介绍可以看出：
> Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。
也就是说，And Design Pro 是不仅是一套前端开发框架，更是一整套的中后台前端解决方案，在力求提供开箱即用的开发体验，为此我们提供完整的脚手架，涉及国际化，权限，mock，数据流，网络请求等各个方面。为这些中后台中常见的方案提供了最佳实践来减少学习和开发成本。
本章我们会了解 antd pro 的大概，了解 antd pro 是什么、目录结构大概，然后创建一个基础项目并运行之。
### 目录结构
```
ant-design-pro基本根目录结构
├── config # umi 配置，包含路由，构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
```
其中， pages 为业务页面入口，如下 antd pro 也作了推荐规范：
#### 页面代码结构
为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们定义了一套规范，该规范当前只作为推荐的指导，并非强制。
```
页面代码结构
src
├── components
└── pages
├── Welcome # 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
| ├── components # 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
| ├── Form.tsx
| ├── index.tsx # 页面组件的代码
| └── index.less # 页面样式
├── Order # 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
| ├── index.tsx
| └── index.less
├── user # 一系列页面推荐通过小写的单一字母做 group 目录
| ├── components # group 下公用的组件集合
| ├── Login # group 下的页面 Login
| ├── Register # group 下的页面 Register
| └── util.ts # 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
└── * # 其它页面组件代码
```
### 创建一个基础项目
- 创建一个基础 antd pro 项目（老方式）
```shell
# 创建基础项目
yarn create umi myapp
> 选 ant-design-pro 项目
# 安装依赖
cd myapp
yarn install
# 可选，安装 开发模式小气泡，方便添加区块和模版等pro资产
yarn add @umijs/preset-ui -D
# 运行
yarn start
# 根据提示打开浏览器，进入项目页面
```
- 创建一个基础 antd pro 项目（新！）
```shell
npm i @ant-design/pro-cli -g
pro create my-app
cd my-app
yarn
yarn start # 打开浏览器访问 http://localhost:8000
```