v4 相对之前的版本，改动比较大。请参考：Ant Design Pro v4 is Here

Ant Design Pro 相关文档

下载区块

在 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
# ...

原因就是有文件没有下载下来。修复这个错，找到下面三行，并注释掉两行，如下：

1
2
3

//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 下再做开发和研究。

CentOS 7 下操作步骤

如果还没安装 yarn，先安装，下面以 root 身份登录安装的：

yarn site: https://yarnpkg.com/en/docs/install#centos-stable

1 2	curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo \| sudo tee /etc/yum.repos.d/yarn.repo yum install -y yarn

安装好后，依次执行以下指令。

由于网络原因，如果遇到失败，重复操作失败的步骤，或者删除整个文件夹，重头再来一遍，如果一遍不行，那就两遍…

yarn create umi
npm i
npm run fetch:blocks
rm -rf node_modules/ # 删掉下载的依赖包
tar -czvf adp.tar.gz adp/ # 打包文件夹
sz adp.tar.gz # 下载到本地

与后端 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 下的具体的方法。

1
2
3

*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 参数的修改。增加：

1 2	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) {

至此，一个完整的登录过程就介绍完了。后续就可以专注于业务逻辑开发了。

Ant Design Pro v4 开发备忘，TypeScript 版本

2019-08-26
react
Ant Design Pro