vue使用axios发送get、post请求

在使用axios前，确保安装了axios,以及在main.js中导入并使用了

npm install axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

1.axios发送get请求

var url = "http://localhost:8080/personblog/users/login";
var that = this;
that.axios.get(url,{
     params:{
        'username': that.ruleForm.username,
        'password': that.ruleForm.password
      }
    }).then(function (res) {
      if (res.data.code == 200) {
        that.user = res.data.data;
        console.log(res.data.data);
      }
      console.log(res.data.msg);
    }).catch(function (error) {
      console.log(error);
    }); 

2.axios发送post请求

里面用到了qs所以我们需要安装qs: npm install qs
然后在main.js里面加入

import qs from 'qs';
Vue.prototype.$qs = qs

这样我们就可以使用post请求了

var url = "http://localhost:8080/personblog/users/login";
var that = this;

that.axios.post(url, that.$qs.stringify({
     'username': that.ruleForm.username,
     'password': that.ruleForm.password
 })).then(function (res) {
   if (res.data.code == 200) {
     that.user = res.data.data;
     console.log(res.data.data.username);
     // console.log(that.user.password);
   }
   console.log(res.data.msg);
 }).catch(function (error) {
   console.log(error);
 });

后端接收

@PostMapping("login")
    public Map<String, Object> login(@Param("username") String username, @Param("password") String password) {
        Users user = usersService.login(username, password);
        if(user==null){
            return Json.fail("查询失败!");
        }
        return Json.success(user, "查询成功！");
    }

参考链接1：解决post不能传参问题
https://www.jianshu.com/p/6bca2512803c
参考链接2：axios各种请求传参
https://www.cnblogs.com/zyh-club/p/11201592.html
参考链接3：安装常用插件 Element、axios、qs、Vant、echartsjs
https://www.cnblogs.com/lidonglin/p/11473733.html