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 交互到服务端处理流程是这样的：

1. UI 组件交互操作；
2. 调用 model 的 effect；
3. 调用统一管理的 service 请求函数；
4. 使用封装的 request.ts 发送请求；
5. 获取服务端返回；
6. 然后调用 reducer 改变 state；
7. 更新 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 文件修改两处：

1. 修改登录状态的代码

   yield put({
           type: 'changeLoginStatus',
           payload: response,
         });
   

   改为

         yield put({
           type: 'changeLoginStatus',
           payload: response.responseBody,
         });
   

2. 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
• 邮箱：[email protected]