在玩vue的时候发现axios的post请求餐参数有问题
1.发送失败的前端代码
this.loading = true
let param = {username:this.loginForm.username,password:this.loginForm.password};
console.log(param)
this.axios.post("http://localhost:8098/login/login",param ,).then(res=>{
console.log(res.data)
if (res.data.errorCode>0){
this.$router.push({ path: this.redirect || '/' })
this.loading = false
} else {
console.log("登陆失败")
this.salt=res.data.data.data;
this.$store.commit('set_salt',this.salt);
this.onLogin();
}
})
前段打印结果
2.后台java代码
@OLogAnnotation(method="登录方法")
@PostMapping("/login")
@ResponseBody
public ApiResult login(String username, String password, String code, Boolean rememberMe, Model model) {
Subject subject= SecurityUtils.getSubject();
//2.提交用户信息
UsernamePasswordToken token = new UsernamePasswordToken(username,password);
subject.login(token);
model.addAttribute("username",username);
return ResultUtils.buildSucessObject(null);
}
断点发现参数为null,
经过上面的打印结果,此次发送的形式为
{"username":"张三","password":"123456"}
这里百度一下,推荐用qs
3.更改后的代码代码
this.loading = true
let param = {username:this.loginForm.username,password:this.loginForm.password};
/*this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false*/
let postData = this.$qs.stringify(param)
console.log(postData)
this.axios.post("http://localhost:8098/login/login",postData,).then(res=>{
console.log(res.data)
if (res.data.errorCode>0){
this.$router.push({ path: this.redirect || '/' })
this.loading = false
} else {
console.log("登陆失败")
this.salt=res.data.data.data;
this.$store.commit('set_salt',this.salt);
this.onLogin();
}
4.qs配置
import qs from '../node_modules/qs'
Vue.prototype.$qs = qs;
5.结果
前端发送结果
后台接受结果
6.结束
问题解决。
本文为作者原创,转载请申明出处。
一个后台渣渣的vue之旅吧。