项目实训 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://localhost:8181/core/getData/userInfo，因为重写了/api。

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

完整的vue.config.js如下：

let env = {
  // 输出目录
  assetsDir: 'static',
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {  //配置跨域
      '/api': {
        target: 'http://localhost:8181/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true,  //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
            实际上访问的地址是：http://localhost:8181/core/getData/userInfo,因为重写了 /api
           */
          '^/api': ''
        }
      },
    }
    
  },
};
// if (process.env.NODE_ENV === "development") {
//   env.devServer.before = require('./mock/mock-server.js')
// } else if (process.env.NODE_ENV === "asd") {
// }
module.exports = env;

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("服务器开小差了!")
      });
  }));
}

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

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

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

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携带的负载，使用对象进行封装，相应代码如下

前端post所携带的data	后端 （UserVo）对象

（Controller）

@RestController
@RequestMapping("/data/systemManagement")
public class UserController {

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

2、后端需要注意的问题

order by作为一个常用的功能，在项目中应该经常用到。

如果实现根据传入排序指标参数进行排序时，会遇到order by没有生效问题。

解决方法是使用$运算符，Mybatis不会进行预编译，直接把值传进去，无法防止sql注入

代码如下:

 order by ${userVo.sort} ${userVo.sortMethod}
limit #{numStart}, #{numEnd}