vue axios的get和post请求（后台是java代码）

首先get请求例子1：

后台的java代码如下

@RequestMapping("/get2")
public String getOne2(@RequestParam String name){
    return  name +"------------------success+++++++++++get请求";
}

前台的方式一：可以直接在url上面加字符串参数，后台可以愉快的接受

get1() {
  this.$axios.get(
    'http://localhost:8083/get2?name=' + this.name
  )
    .then(function (response) {
      console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });
}

前台的方式二：在get的参数config里面添加params来实现参数的传递后台也可以接受，如下面

get2() {
  this.$axios.get(
    'http://localhost:8083/get2', {
      params: {name: this.name} // 
    }).then(function (response) {
    console.log(response.data);
  })
    .catch(function (error) {
      console.log(error);
    });
},

 post 方式一：通过qs 方式来实现，首先要安装qs插件，要注意JSON 和qs的区别，不明白的可以百度，后台也可以接收

get3() {
  let data = {name: this.name};
  let nam = Qs.stringify(data);
  console.log(nam);
  this.$axios.post(
    'http://localhost:8083/get2',
    nam
  ).then(function (response) {
    console.log(response.data);
  })
    .catch(function (error) {
      console.log(error);
    });
}// 此方法对应上面的java后台 的 方法，可以愉快的调用。

post方法二：首先对应的java方法是下面的get1，注意此处的 @RequestBody和上面的 @RequestParam不一样的

@RequestMapping("/get1")
public String  getOne(@RequestBody User map){
    String name = map.getName();
    return  name+"----------------success+++ post 请求";
}

所以此处的前端代码是

get5() {
  let data = {
    name: this.name
  };
  this.$axios.post(
    'http://localhost:8083/get1',
    data
  ).then(function (res) {
    console.log(res.data);
  }).catch(function (error) {
    console.log(error);
  })
}

这样也可以调用成功。

最后下面的方法，get ，post 都可以使用,但是参数不一样，这里是get的例子，使用post的时候仅仅把参数修改下就可以了。

func() {
  this.$axios({
    url: "http://localhost:8083/get2",
    methods: "get",//post
    params: {  
      name: this.name
    }
  }).then(function (response) {
    console.log(response.data);
  })

}

基本就这样了，希望大家周末愉快！