Ant Design Pro v4 开发备忘，TypeScript 版本
官方项目里的版本为1.0.0，实际上习惯称这个版本为 v4，相对之前的版本，改动比较大。请参考：Ant Design Pro v4 is Here
Ant Design Pro 相关文档
- github 地址
- 中文文档
- 区块中文文档
下载区块
在 windows 10 下 npm run fetch:blocks，总是非常慢，还经常卡住不动，而且即使显示执行成功，实际上有好多文件没有下载完，导致启动（npm start）时会报错，我遇到的错误提示：
ERROR Failed to compile with 1 errors 21:35:10
This relative module was not found:
* ../list/search in ./src/pages/.umi/router.js
ERROR CODE ERR_WEBPACK_MODULE_NOT_FOUND
# ...
原因就是有文件没有下载下来。修复这个错，找到下面三行，并注释掉两行，如下：
//path: '/list/search',
name: 'search-list',
//component: './list/search',
如此修改之后，可以运行起来了，但还是有好些页面找不到。
umi development 404 page
There's not a page yet at /dashboard/analysis.
Create a React.js component in your pages directory at src/pages/dashboard/analysis.js and configure the route in config file then this page will automatically refresh to show the new page component you created.
最佳实践来了
- 在 CentOS 7 下执行同样的操作，发现非常顺利。
- 下载好后，把文件复制到 windows 下再做开发和研究。
与后端 api 交互
第一步，设置代理
找到 config/config.ts 文件的以下内容
/*
proxy: {
'/server/api/': {
target: 'https://preview.pro.ant.design/',
changeOrigin: true,
pathRewrite: { '^/server': '' },
},
},
*/
改为
proxy: {
'/api/': {
target: 'http://localhost:89',
changeOrigin: true,
// pathRewrite: { '^/server': '' },
},
},
其中 http://localhost:89 为后端 api 地址，/api/ 为请求 api 的前缀，可根据自己的项目情况灵活修改。
第二步，前端修改
参考官方文档：和服务端进行交互
前端请求流程
在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：
- UI 组件交互操作；
- 调用 model 的 effect；
- 调用统一管理的 service 请求函数；
- 使用封装的 request.ts 发送请求；
- 获取服务端返回；
- 然后调用 reducer 改变 state；
- 更新 model。
以登录为例
- 修改文件 package.json 的启动参数：
"start": "set port=96 && umi dev",，执行npm start之后，登录页面的地址为：http://localhost:96/user/login，对应的页面文件：src\pages\user\login\index.tsx - 登录用到的 model 文件:
src\models\login.ts - 登录触发的函数是：handleSubmit，提交登录请求 dispatch 代码为：
dispatch({
type: 'login/login',
payload: {
...values,
type,
},
});
- 其中第一个 login 为 module
src\models\login.ts的 namespace。 - 第二个 login 为
src\models\login.ts定义的 effect 下的具体的方法。
*login({ payload }, { call, put }) {
const response = yield call(fakeAccountLogin, payload);
// ...
- fakeAccountLogin 为调用的 api，也就是统一管理的 service 请求函数。在文件：
src\services\login.ts中定义，代码如下：
export async function fakeAccountLogin(params: LoginParamsType) {
return request('/api/auth/login', {
method: 'POST',
data: params,
});
}
- 其中
/api/auth/login为后端 api 真正的地址，访问的时候会自动拼接成：http://localhost:89/api/auth/login - 登录的时候，在后端打一个断点，就可以看到请求参数了，不过，参数格式以及提交方式还需要根据自己的后端项目做相应修改，下面会以 spring boot 项目为例进行讲解。
第三步，前后端参数进行匹配
后端是 spring boot 项目，提供 restful api，Controller 定义如下：
/**
* 登录授权
*/
@RequestMapping("/api/auth/login")
public ApiResponse login(@RequestBody AuthorizationUserRequest authorizationUserRequest) {
return SysUserService.userLogin(authorizationUserRequest);
}
其中，AuthorizationUserRequest 为接收前台传过去的参数的 POJO，定义如下：
@Data
public class AuthorizationUserRequest {
@NotBlank
private String username;
@NotBlank
private String password;
private String type; // 前端需要
}
POJO 的成员名与前台提交的参数名和类型一一对应即可。
前端对请求参数做统一加工（封装）
参考：https://github.com/umijs/umi-request/blob/master/README_zh-CN.md
对请求参数做处理，适配后端 api 对参数的需要
- 重要：
src\services\login.ts文件中，将import request from 'umi-request';改为import request from '@/utils/request';。 - 以下代码，添加到
src\utils\request.ts文件中，export default request;之前。
// request拦截器, 改变 options.
request.interceptors.request.use((url, options) => {
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
return (
{
options: { ...options },
}
);
});
如此修改之后，后端报错：
error: "Unsupported Media Type"
message: "Content type 'text/plain;charset=UTF-8' not supported"
path: "/api/auth/login"
status: 415
timestamp: "2019-08-28T17:11:55.511+0800"
trace: "org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain;charset=UTF-8' not supported
...
解决，增加对 headers 参数的修改。增加：
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
增加请求头参数
request.interceptors.request.use((url, options) => {
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
options.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
...options.headers,
};
return (
{
options: { ...options },
}
);
});
对 token 进行判断，把 token 添加到请求头 headers
如果 token 没有值，同时不是登录页面，则直接跳转到登录页面。
// request拦截器, 改变 options.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
request.interceptors.request.use((url, options) => {
let tokenSessionStorage: string | null = sessionStorage.getItem('token');
if ((tokenSessionStorage === null || tokenSessionStorage.length === 0) && url !== '/api/auth/login') {
window.location.href = '/user/login';
return;
}
if (tokenSessionStorage === null) {
tokenSessionStorage = '';
}
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
options.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
Authorization: tokenSessionStorage,
...options.headers,
};
// eslint-disable-next-line consistent-return
return {
options: { ...options },
};
});
前端对调用 api 返回的结果做统一处理
经过测试，官方文档中介绍的 response 拦截器，其中的 response 并不是后端返回来的数据，代码如下：
// response拦截器, 处理response
request.interceptors.response.use((response, options) => {
response.headers.append('interceptors', 'yes yo');
return response;
});
不过，官方文档中介绍的中间件 request.use，得到的 res（response） 是后端返回的数据，代码如下（根据自己的业务有修改）：
// 中间件，对请求前、响应后做处理
request.use(async (ctx, next) => {
await next();
const { res } = ctx;
let { token } = res;
if (token !== undefined && token !== null && token.length > 0) {
token = `Bearer ${token}`;
sessionStorage.setItem('token', token);
}
});
把 request 拦截器的逻辑写到 request.use 中间件，让中间件把请求前和响应后的处理逻辑都做了
- 请求前：
- 修改请求参数 options 以适配后端 api。
- 添加 headers 参数以适配后端 api。
- 非登录页面，需要有 token，如果没有直接跳转到登录页面。
- 非登录页面，需要把 token 添加到请求头，后端 api 需要鉴权。
- 响应后，把后端返回的最新 token 写到 sessionStorage。
- 后端 api 在每次请求后，如果不是 excel 文件下载这类请求，都会把更新后的 token 返回调用端。
- 当然，也可以全局性的对返回结果进行判断，如 api 返回错误，要如何提示以及如何处理等。
// 中间件，对请求前、响应后做处理
request.use(async (ctx, next) => {
const { req } = ctx;
const { url, options } = req;
let tokenSessionStorage: string | null = sessionStorage.getItem('token');
// eslint-disable-next-line max-len
if ((tokenSessionStorage === null || tokenSessionStorage.length === 0) && url !== '/api/auth/login') {
window.location.href = '/user/login';
return;
}
if (tokenSessionStorage === null) {
tokenSessionStorage = '';
}
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
options.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
Authorization: tokenSessionStorage,
...options.headers,
};
await next();
const { res } = ctx;
let { token } = res;
if (token !== undefined && token !== null && token.length > 0) {
token = `Bearer ${token}`;
sessionStorage.setItem('token', token);
}
});
登录验证
针对后端返回的数据，做相应调整即可。后端返回数据类似：
{
"code": 1,
"message": "",
"errMessage": "",
"token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU2NzA3NDQ0NCwiaWF0IjoxNTY3MDQ1NjQ0fQ.Q9LnO-ibBYuBibuo_C7hIIklsK4k1gC-NE6G5yS6AjVJHCZikiSjmCPmcLaBZVUP_TtL5Q2zuw4w69-0IyR7-A",
"responseBody": {
"type": "account",
"status": "ok",
"currentAuthority": [
"admin"
]
}
}
先定义后端返回的代码：
export const responseCode = {
success: 1,
notLogin: -90,
mustUpdateDefaultPassword: -67,
};
src\models\login.ts 文件修改两处：
- 修改登录状态的代码
改为yield put({ type: 'changeLoginStatus', payload: response, });yield put({ type: 'changeLoginStatus', payload: response.responseBody, }); if (response.status === 'ok') {改为if (response.code === responseCode.success) {
至此，一个完整的登录过程就介绍完了。后续就可以专注于业务逻辑开发了。
关于作者
- 个人博客：https://www.lovesofttech.com
- CSDN博客：https://blog.csdn.net/runAndRun
- 简书博客：https://www.jianshu.com/u/4833b4e0214a
- github: https://github.com/uncleAndyChen
- gitee: https://gitee.com/uncleAndyChen
- 邮箱：andy@lovesofttech.com