Vue Axios

在main.js中

//安装axios npm install --sava axios

创建vue模板

vue init webpack 项目名

var axios =require('axios')
//设置前端URL为后端服务/home地址
axios.defaults.baseURL= 'http://localhost:8088/home'
//将方法/home绑定全局
Vue.prototype.$axios =axios

Vue.config.productionTip = false
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

-----------------------------------------------------------------------------------------------------

 // 数据初始化打开网页默认进入数据
    created(){
        // alert("我进来了我要接受spring后端数据")
    // 获取axios请求获取路径 
        this.$axios.get('/dept1',{})
        // lembda表达式写法
        .then(Response=>{
          if(Response.data.statusCode==200){
            // alert(Response.data.msg)
            this.depts=Response.data.data;
          }
        })
    },
    methods: {
      dialogAdd1( ){
        var dept={
          'id':this.dept.id,
          'dname':this.dept.dname,
          'loc':this.dept.loc
        }
        this.$axios.post("/isDept",dept)
        .then(Response=>{
          if(Response.data.statusCode==200){
            alert(Response.data.msg)
            this.depts.push(dept)
            this.dialogAdd =false           
          }
        })
        },
      dialogUpdate1( ){
           var dept ={
          'id':this.dept.id,
          'dname':this.dept.dname,
          'loc':this.dept.loc
          };
          this.$axios.put("/upDate",dept)
          .then(Response=>{
            if(Response.data.statusCode==200){
              alert(Response.data.msg)             
              for(var i=0 ; i<this.depts.length ; i++){
                if(this.depts[i].id==dept.id){
                  this.depts[i]=dept;
                }               
              }
              this.dialogUpdate= false        
            }
          })
        },
      handleEdit(index, row) {
        // console.log(index, row);
        this.dept.id=row.id;
        this.dept.dname=row.dname;
        this.dept.loc=row.loc;
        this.dialogUpdate = true;
      },
      handleDelete(index, row) {
        alert(row.id)
        //获取axios请求
        this.$axios.get('/delete',{params:{id:row.id}},{})
        //回调then方法
        .then(Response=>{
          if(Response.data.statusCode==200){
            // alert(Response.data.msg)
            for(var i = 0 ; i < this.depts.length ; i ++){
                if( this.depts[i].id == row.id){
                  this.depts.splice(i,1)
                }
            }
          }
        })
        .catch(error=>{
          alert(error)
        })
      }
    }
  }