04 SpringMVC 前后端传参协调

话接上次练手 JavaWeb 实现了第一个后端接口,在 Postman 上测试可正常食用。寻思搭建个后台方便测试,却意外发生而后端无法接收参数的问题,花了点时间找下问题根源所在。

问题复现

前端传参

前端接口请求使用的 HTTP 库是知名的 axios,之前工作中项目一直使用都能顺利工作,故将其从原来的项目中 CV 过来。

import axios from 'axios'
const baseUrl = 'http://localhost:8088'
class HttpRequest {
constructor(baseUrl) {
this.baseUrl = baseUrl
this.queue = {}
}
getInsideConfig() {
const config = {
baseURL: this.baseUrl,
headers: {
'Content-Type': 'application/json'
}
}
return config
}
destroy(url) {
delete this.queue[url]
}
interceptors(instance, url) {
// 请求拦截
instance.interceptors.request.use(
config => {
this.queue[url] = true
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截
instance.interceptors.response.use(
res => {
this.destroy(url)
return res.data
},
error => {
this.destroy(url)
return Promise.reject(error)
}
)
}
request(options) {
const instance = axios.create()
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
const axios = new HttpRequest(baseUrl)
export default axios

在 vuex 中调用登录接口,使用 Post 方法传参:

// 用户登录
async ['user/handleLogin'](context, { username, password }) {
const res = await axios.request({
method: 'POST',
url: '/user/login.do',
data: {
username,
password
}
})
return res
}

后端接口

后端是正常的 SpringMVC 接收参数方式:

// 用户登录
@RequestMapping(value = "login.do", method = RequestMethod.POST)
@ResponseBody
public ServerResponse<User> login(HttpSession session, String username, String password) {
System.out.println("username: " + username + " password: " + password);
ServerResponse<User> response = iUserService.login(username, password);
if (response.isSuccess()) {
session.setAttribute(Const.CURRENT_USER, response.getData());
}
return response;
}

项目成功运行后,访问登录接口却无法登录,查看后端日志发现参数用户名和密码并没有正确接收,值为 null,改用 Get 请求后可以正确调用,看来是前后端对 Post 方法传参和接参没有协调一致。

解决方案

方案一 前端修改

前端主流传参格式使用 json 格式,并设置请求头 'Content-Type': 'application/json',查看 Request Payload 可查参数格式如下:

{ "username": "shiyu", "password": "654321" }

后端无法接收参数原因很简单,因为 axios post 一个对象到后端的时候,是直接把 json 放到请求体中的,提交到后端的,而后端是怎么取参数的,是用的 @RequestParam,这种方式只能从请求的地址中取出参数,也就是只能从 username=shiyu&password=654321 这种字符串中解析出参数,而不能提取出请求体中的参数的。

在后端代码不变的情况下,可以修改前端传参方式,使用 URLSearchParams 传参并修改请求头 'Content-Type': 'application/x-www-form-urlencoded',将 json 对象传参转换为字符串格式。

// 用户登录
async ['user/handleLogin'](context, { username, password }) {
const param = new URLSearchParams()
param.append('username', username)
param.append('password', password)
const res = await axios.request({
method: 'POST',
url: '/user/login.do',
data: param
})
return res
}

方案二 后端修改

如果觉得前端使用 URLSearchParams 传参不方便,毕竟 json 传参还是主流,可以修改后端代码,直接去请求体中取参数。通过 @RequestBody 注解,SpringMVC 可以把 json 中的数据绑定到 Map 中,这样就可以取出参数了。

// 用户登录
@RequestMapping(value = "login.do", method = RequestMethod.POST)
@ResponseBody
public ServerResponse<User> login(HttpSession session, @RequestBody Map map) {
String username = (String) map.get("username");
String password = (String) map.get("password");
System.out.println("username: " + username + " password: " + password);
ServerResponse<User> response = iUserService.login(username, password);
if (response.isSuccess()) {
session.setAttribute(Const.CURRENT_USER, response.getData());
}
return response;
}

参考文章: axios 发送 post 请求,springMVC 接收不到数据问题