项目实训 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;
}
上一篇:031.Python类中的方法


下一篇:week2学习linux运维总结