01-ant design前端转发后端

背景说明

• ant design 前端store会调用service，service会发送Get,Post请求到后端
• 所有前端请求以/api/开头,比如

export async function fetchVariableConfigByPage(params) {
  const tokenId = sessionStorage.getItem('tokenId');
  return request(`/api/variable-config/page?tokenId=${tokenId}`, {
    method: 'POST',
    data: {
      ...params,
    },
  });
}

• 后端controller API接口形式-/api/variable-config

@RestController(value = "/api/variable-config")
public class VariableConfigController {
    @PostMapping("/page")
    public Response<PageDto<VariableConfigDto>> findVariableConfigByPage(@RequestParam("tokenId") String tokenId,
                                                                         @RequestBody VariableConfigDoQuery variableConfigDoQuery) {
        try {
            PageDto<VariableConfigDto> pageDto = variableConfigService.selectByPage(variableConfigDoQuery);
            return Response.successResponse(pageDto);
        } catch (Exception e) {
            e.printStackTrace();
            return Response.errorResponse(e.getMessage());
        }
    }
}

• 最终目的是将下面两种API转化

#前端
/api/variable-config/page
#后端
http://localhost:8080/api/variable-config/page
#可以看到只需将前端/api/开头请求proxy到http://localhost:8080（/api/及后面内容不变）

• 只需将前端/api/开头请求proxy到http://localhost:8080（/api/及后面内容不变）

mock方式

• 前端可以单独启动，并通过umi.js 的mock前后端分离开发
• 启动方式：npm start

转发方式

• dev环境下前端可以直接访问后端，这样联调比较直接
• 配置方式

  proxy: {
    //只需将前端/api/开头请求proxy到http://localhost:8080（/api/及后面内容照抄不变）
    // /api/zhangsan->http://localhost:8080/api/zhangsan
    '/api/': {
      target: 'http://localhost:8080/',
      changeOrigin: true,
      //pathRewrite: { '^/server': '' },
    },

• 启动方式:$ npm run start:no-mock