【Ant Design Pro】快速上手

初始化

初始化脚手架：快速开始

官方默认使用 umi4，这里文档还没有及时更新（不能像文档一样选择 umi 的版本），之后我选择 simple。

然后安装依赖。

在 package.json 中：

    "start": "cross-env UMI_ENV=dev max dev","start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",

这里 start 模式使用了前端项目内的 mock 数据，而 start:dev 没有使用mock 数据，需要真实的后端接口。

Pro 的底座是 umi，umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力，同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。

以前 umi/plugins 里的插件已经内置到 @umijs/plugins 了，可以通过 plugins: [‘@umijs/plugins/dist/*’] 用。插件都需要兼容 umi4 才能用，插件 api 有变化，没兼容的是用不了的。比如 umi-ui 在 umi4 中并不支持 issues。

umi-ui 还是很好用的，不知道什么时候可以支持 umi4.

项目瘦身

移除国际化

在这里插入图片描述

然后也可以把 src/locale 文件夹删掉了。

在这里插入图片描述

config 配置
defaultConfig 默认配置
routes 路由
proxy 代理配置
oneapi 也是和 api 相关的，可以删掉

然后可以删除页面和对应的路由。

在这里插入图片描述

这里的 swagger 接口文档工具也可以删掉。

前后端联调

antd pro 请求或者是 umi 请求

查看 antdpro 官网，发现请求相关配置在 app.tsx 中。

或者也可以打开 antd pro 的 github 源码，发现 app.tsx 中关于请求的配置：

/*** @name request 配置，可以配置错误处理* 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。* @doc https://umijs.org/docs/max/request#配置*/
export const request = {...errorConfig,
};

我们可以在 app.tsx 中写自己请求的相关配置。

import { RequestConfig } from 'umi';export const request: RequestConfig = {timeout: 1000,errorConfig: {},middlewares: [],requestInterceptors: [],responseInterceptors: [],errorHandler,// ...
};

但是他这里的配置明显是不全的，所以我们需要逐层进入源码进行查找。然后就可以发现很多配置（比如 prefix，timeout等）。

或者也可以看官方文档（但是直接看源码会更快更准一些）：

在这里插入图片描述

这是最新版的 umi，不同于上个版本，上一个版本应该是透传的 umi-request 。

直接在 github 中看 umi-request，发现更新也已经是三年前了。

配置代理

直接使用 antdpro 提供的 config\proxy.ts 即可。

然后前端统一在 api.ts 中加上 api：

在这里插入图片描述

同时后端也都加上 /api 前缀：

在这里插入图片描述

（虽然前后端同时都不加 /api 应该也可以😂）

Procomponents

这里 antdpro 已经有一个登录表单，我们希望使用一个注册表单，但是登录的 button 文字在文档中并没有说明，这时我们可以追溯源码：

在这里插入图片描述

可以发现有很多配置项，其中 submitter.searchConfig.subText 就是该 button 中的文字，然后做以下修改：

在这里插入图片描述

然后就只需要修改类型校验、登录注册的 type.d.ts 和相关 api 请求接口方法就可以（或者加一些自己的业务校验）。

权限管理

app.tsx 是项目全局入口文件（在首次访问页面执行 / 刷新页面），定义了整个项目使用的公共数据，getInitialState 方法定义了项目初始化需要执行的操作。getInitialstate。

access.ts 是定义权限的地方，access。通过初始化数据时获取的用户数据，来判断是否具有 admin 权限。

export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {const { currentUser } = initialState ?? {};return {canAdmin: currentUser && currentUser.access === 'admin',};
}

请求响应拦截器

requestErrorConfig.ts 里面规定了全局请求响应拦截的一系列操作，request。

其中，response

里面的 data 可以直接获取后端返回的数据：

然后整体对象 errorConfig 会被引入到 app.ts 中，然后导出：

/*** @name request 配置，可以配置错误处理* 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。* @doc https://umijs.org/docs/max/request#配置*/
export const request = {...errorConfig,
};