vue的axios的请求和后端的处理

vue中的axios

首先安装axios：

axios npm install axios -S

创建请求request.js文件，用封装请求服务。

import axios from "axios";

import { Message } from 'element-ui';
const service = axios.create({
  baseURL: 'http://localhost:8083/',
  timeout: 10000
})

// 设置axios请求拦截器
// 拦截器中，可以对请求进行一些统一化的操作
service.interceptors.request.use(
  config => {
    // 统一设置请求头
    if (sessionStorage.getItem('token')) {

      config.headers['token'] = sessionStorage.getItem('token');

    }
    return config
  },
)
// 设置响应拦截器
service.interceptors.response.use((response) => {
  if (response.status === 200 && response.data && response.data.code === 401) {

    Message.error('登录失效,请重新登录！')
    setTimeout(function () {
      window.location.href = window.location.origin + '/login';
    }, 1000);

  }

  const token = response.headers['token'];

  if (token) {
    sessionStorage.setItem('token', token)
  }
  return response.data;
})
// 把service导出
export default service

src目录下创建api文件夹，创建一个请求的js文件，用于封装请求后台的的某个方法。
这里使用的是post请求。

例如在api中创建一个list.js：

import request from '../utils/request'

const group_name = 'list'

let data = {
    getList(params){
        return new request({
            url:`${group_name}/getList`,
            data:params,
            method:'post',
        })
    }
}
export default data

在要发请求的组件中使用该请求，例如在某个组件中，请求上面的getlist，在发请求的组件中这样写：
需要导入请求对应的js文件，方法写在methods中。

这里使用的是watch监听来调用请求方法的。

<template>
  <div>
    <el-table
      :data="tableData"
      height="510"
      align="center"
      border
      style="font-size: 16px"
    >
      <el-table-column type="index" label=" 序号 " width="70"></el-table-column>
      <el-table-column
        prop="number"
        label=" 学号 "
        width="150"
      ></el-table-column>
      <el-table-column prop="name" label=" 姓名 " width="140" ></el-table-column>
      <el-table-column prop="sex" label=" 性别 " width="100"></el-table-column>
      <el-table-column prop="description" label=" 描述 "></el-table-column>
      <el-table-column fixed="right" label=" 操作 " width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="16px">
            <router-link
              target="_blank"
              :to="{ name: 'details', query: { number: scope.row.number } }"
            >
              <i class="el-icon-view"><span> 查 看 </span></i>
            </router-link>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import list from "@api/list";
export default {
  name: "mainbody",
  methods: {
    getlist() {
      let params = this.$qs.stringify({
        grade: this.grade,
        carrer: this.carrer,
      });
      list
        .getList(params)
        .then((response) => {
          this.tableData = response;
          console.log(response);
        })
        .catch((error) => {
          console.info(error);
        });
    },
  },
  watch: {
    grade: "getlist",
    carrer: "getlist",
  },

  data() {
    return {
      grade: "",
      carrer: "",
      number: "",
      tableData: [],
    };
  },
};
</script>

qs功能

在main.js中引入

import qs from 'qs'
Vue.prototype.$qs = qs

qs可以自己转换并且去拼接要传递的参数给后台。

let params = this.$qs.stringify({
        grade: this.grade
      });

拼接成：/${group_name}/getProblemList?grade=+grade,

后台接收请求

在controller层创建对应的mapper路径，让请求找到具体的方法，再把后台获取到的数据返回给前台。

如：找到/list/getlist路径下的getlist方法

@RestController
@RequestMapping("list")
public class ListController {

    @Resource
    private MyListMapper mylistMapper;

    @RequestMapping("getList")
    public List<Mylist> getList(String grade,String carrer){
            List list = mylistMapper.selectListByGradeJob(grade, carrer);
            return list;
    }
}