axios传值的方式

get 方式

this.$axios
  .get("http://localhost:8081/users/", {
    // data()中的queryInfo对象
    params: this.queryInfo
  })
  .then(res => {
    if (res.data.code === 200) {
    }
  });

post 方式

• 方式一：但是兼容性不好，在 ie 浏览器没用

var params = new URLSearchParams();
params.append("name", this.addUserForm.name);
// params.append("userInfo", this.addUserForm);尝试拼接对象，但是在f12后的xhr中，传值仅仅显示是对象，后端拿不到值
this.$axios
  .post("http://localhost:8081/users/add?", params)
  .then(response => (this.Datas = response.data.json.userMaps));

• 方式二：
  在 main.js 中引入 axios 中自带的：

import Qs from ‘qs’
Vue.prototype.qs = Qs

const params = this.qs.stringify({
  id: this.addUserForm.id,
  name: this.addUserForm.name
});
this.$axios
  .post("http://localhost:8081/users/add", params)
  .then(success => {
    if (success.data.code === 200) {
      this.editDialogVisible = false;
      this.getUserList();
    }
  })
  .catch(err => {
    this.$message.error("添加失败:" + err);
  });

put 方式

方式一：直接传值，不推荐
这种是前面怎么修改，值后端都是不能获取到，但是现在可以跟 post 的方式二一样。

this.$axios
  .put(
    `http://localhost:8081/users/changeStatus?id=${userInfo.id}&status=${userInfo.status}`
  )
  .then(res => {
    if (res.data.code === 200) {
      this.$message.success("更新状态成功");
      // 重新获取数据
      this.getUserList();
    }
  })
  .catch(err => {
    return this.$message.error(`更新状态失败:${err}`);
  });

delete 方式

this.$axios
  .delete("http://localhost:8081/users/delete", {
    params: {
      userId: userId
    }
  })
  .then(success => {
  });

注意：前端怎么传值，后端就用什么拿值，一一对应。
更多内容，请点击下方：

My Blog: http://coderblue.cn/
Github:https://github.com/onecoderly
My Project:http://coderblue.cn/project/