使用axios传递参数,后端接收为null
1、请求如下:
请求接口'/login'
,有用户名和密码两个参数。
const res = await this.$http.post('login',{username:this.loginForm.username,password:this.loginForm.password})
(1)postman测试接口,结果成功,说明后端接口没有问题,JSON字符串如下:
{
"username": "admin2",
"password": "121212",
"userId": 102
}
(2)后端进行参数输出测试。
System.out.println(user);
System.out.println("前端传递的用户名" + username);
System.out.println("前端传递的密码" + password);
结果显示参数为空,没有拿到前端传来的参数。
2、解决方法如下:
安装qs模块
npm install qs
在前端项目main.js中引入qs模块,并挂载到Vue上
/引入qs模块
import qs from 'qs'
Vue.prototype.$qs = qs
此时将请求修改如下:
const res = await this.$http.post('login', this.$qs.stringify({username:this.loginForm.username,password:this.loginForm.password}))
比之前的请求多了this.$qs.stringify(params)
这样一个对参数转换的过程。
再次进行登录测试。
可以看到已经能够打印输出前端传递的用户名和密码了。
这个问题是因为Vue.js默认数据格式与传递数据格式不符,需要qs模块进行转换,qs模块是axios自带的。
POST请求
let param = {
username: this.loginForm.username,
password: Encrypt(this.loginForm.password), //密码加密
};
let res = await this.$http.post("login", this.$qs.stringify(param));
GET请求
这里必须是params,不能是param、Param等。
let res = await this.$http.post("login", {params:{
username: this.loginForm.username,
password: Encrypt(this.loginForm.password)
}
});