vue-cli+element-ui使用axios

  1. vue-cli项目下载axios,cd到项目目录,在终端中输入cnpm install axios(或者用npm也行)

  2. main.js把axios挂载到vue构造函数的prototype属性上,之后可以用$http进行get,post请求

import axios from ‘axios‘;
Vue.prototype.$http=axios
  1. get方法示例:get请求中是接口的地址(springboot写的,跨域问题要在controller类上加@CrossOrigin)
/**
*  get中填的是接口的地址,then中是处理返回的数据
*  控制台打印返回的数据,将这个数据赋值给tableData
*/
this.$http.get("http://localhost:8089/user/user_list").then((res) => {
        console.log(res.data);
        this.tableData = res.data;
});
  1. post方法示例:发送post请求,上传form的数据,判断返回的数据中的状态
    如果是true说明上传成功,跳出提示成功,清除表单数据,关闭对话框,重新查询页面数据
    如果是false,提示错误并清除表单数据
onSubmit() {
      //发送一个axios请求,绑定form参数以后上传
      //清空表单信息也可以直接让form={}
      this.$http
        .post("http://localhost:8089/user/save", this.form)
        .then((res) => {
          console.log(res.data);
          if (res.data.status == true) {
            //成功以后,显示提示,清空表单,关闭对话框,重新调用查询方法
            this.$message({
              message: "成功添加用户",
              type: "success",
            });
            this.form = {};
            this.dialogFormVisible = false;
            this.findAllUsers();
          } else {
            this.$message.error("错了哦,请重试");
            this.$refs.addForm.resetFields();
          }
        });
},

vue-cli+element-ui使用axios

上一篇:AntDesign Pro connect


下一篇:React AntDesign Table 动态合并单元格(大量数据有分页时也有效)