react 技术栈（全家桶）学习心得

Ant Design Pro v4 开发备忘，TypeScrip

2019-10-08  本文已影响0人  AndyChen

官方项目里的版本为1.0.0，实际上习惯称这个版本为 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
# ...

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

//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.

最佳实践来了

与后端 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。

以登录为例

dispatch({
    type: 'login/login',
    payload: {
      ...values,
      type,
    },
});

*login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLogin, payload);
      // ...

export async function fakeAccountLogin(params: LoginParamsType) {
  return request('/api/auth/login', {
    method: 'POST',
    data: params,
  });
}

第三步，前后端参数进行匹配

后端是 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 对参数的需要

// 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;
});
image

不过，官方文档中介绍的中间件 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);
  }
});
image

把 request 拦截器的逻辑写到 request.use 中间件，让中间件把请求前和响应后的处理逻辑都做了

// 中间件，对请求前、响应后做处理
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) {

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

上一篇下一篇

猜你喜欢

热点阅读