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

3. 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;
});

4. 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

原文：https://www.cnblogs.com/lfs2333/p/13395204.html