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

• 点赞
• 收藏
• 分享
• 文章举报