项目实训 week2 前后端交互格式/自定义请求方法

为了前后端交流的便利，我们采用json格式定义接口的交流方法，其接口内容见博客

https://www.cnblogs.com/aminor/p/14981115.html （接口定义）

1、前后端交互

1）前端跨域配置

因为前端使用axios向后端请求信息会遇到跨域的问题，所以需要在前端进行配置。

在vue.config.js添加如下代码：

module.exports = {
    proxy: {  //配置跨域
      '/api': {
        target: 'http://localhost:8181/',  //
        changOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': ''
        }
      },
    }
}

其中，我们的后端端口为localhost:8181，所以target的地址模拟的是真实的后台接口。

使用pathRewrite是用于重写路径，例如 当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时，实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo，因为重写/api。

此外，在与真实后端交互的时候，需要将devServer.before = require('./mock/mock-server.js')注释或删除，防止因为mock.js而造成后端post请求出现问题。

2）请求模块编写

import {request} from "@/network/request";

export function my_request(vue, config) {
  config.baseURL = 'api/';
  config.timeout = 2500;
  // config.baseURL = 'dev-api/';
  return new Promise(((resolve, reject) => {
    
    request(config)
      .then(res => {
        let code = res.data.code;
        if (code === 200) {
          resolve(res);
        } else if (code === -1) {
          let message = res.data.message;
          vue.$message.error(message);
          // reject(code);
        }
      })
      .catch(err => {
        vue.$message.error("服务器开小差了!")
      });
  }));
}

因为功能需要，所以与后端商量一套数据格式，约定code:200为返回成功，code:-1为出现错误，并由后端给出message字段在前端展示。

所以我们首先封装已有的request方法，返回new Promise，并在内部首先进行code值判断，并打印错误信息。

调用请求方法时，代码如下：

getData() {
  this.loading = true;
  let params = {}

  return my_request(this, {
    url: 'data/systemManagement/userList',
    method: 'post',
    data: params,
  }).then(res => {
    // 处理数据
  }).finally(() => {
    this.loading = false;
  });
},

后端需要将post携带的负载，使用对象进行封装，相应代码如下

@PostMapping("/userList")
public Object queryUserList(
        @RequestBody UserVo userVo
)
{
    // 进行处理，前端传入的data相当于UserVo对象
    return res;
}

标签：code,自定义,res,request,api,实训,message,week2,config
来源： https://www.cnblogs.com/aminor/p/14998221.html