在开始前,先介绍一下下面这两个方法

JSON.stringify()

将对象变成json格式的字符串

  • 例:JSON.stringify({ id:1,name:“小明” })
    转换后就变为:{ “id”:“1”,“name”:“小明”}
this.$qs.stringify({})

将参数拼接为url传参的形式

  • 例:this.$qs.stringify({id:1,name:“小明”})
    转换后就变为:id=1&name=小明

(但实际上使用post方式传递时,参数值为中文时会进行url转码,否则会产生歧义)

一. 使用@RequestBody(传递单个对象适用)

Controller控制层使用@RequestBody注解接收对象参数时:

  1. Axios需设置响应头参数context-type为application/json,设置方式与ajax不同,需写在headers内。

  2. 使用JSON.stringify(对象),将需传递到后端的对象序列化成json格式的字符串。

this.$axios({
    method: 'post',
    url: '/queryUser',
    headers:{
    	'Context-Type': 'application/json' // 1
    },
    data: JSON.stringify(this.user) // 2
}).then((res) => {
    console.log(res.data)
});
  1. Controller需在形参对象前加上@RequestBody注解,因为注解带有反序列化机制,可将前端送来的json格式的字符串反序列化并一一映射为对象的属性,从而构成后端可直接使用的pojo对象
@RequestMapping(value = '/queryUser', method = RequestMethod.POST)
public void queryUser(@RequestBody User user) { // 3
	// user可直接使用
	System.out.print(user);
}

二. 使用@RequestParam(传递多个对象适用)

Controller控制层使用@RequestParam注解接收对象参数时:

  1. 在Axios中,先使用JSON.stringify()将需传递的对象转换为json格式的字符串,再使用this.$qs.stringify()转化为url传参形式的字符串
this.$axios({
    method: 'post',
    url: '/queryUser',
    data: this.$qs.stringify({  // 1
        user: JSON.stringify(this.user)
    })
}).then((res) => {
    console.log(res.data)
});
  1. Controller使用@ResquestParam注解,形参并不直接写pojo对象,而是Map< String,Object>对象,然后使用其get(“key”)方法得到前端作为url参数传递过来的json格式的object对象,使用toString转化为字符串后,利用第三方架包fastjson的JSON.ParseObject()将字符串转成后端直接使用的pojo对象
@RequestMapping(value = 'queryUser', method = RequestMethod.POST)
public void queryUser(@RequestParam Map<String, Object> param) { // 2
// get("key")方法得到前端作为url参数传递过来的json格式的object对象
Object o = param.get("user");
// toString转成字符串
String userStr = o.toString();
// 三方架包fastjson转pojo对象
User user = JSON.parseObject(userStr, User.class);
// 对象使用
System.out.print(user);

JSON.parseObject()的依赖

<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>2.0.1</version>
</dependency>

若用此方法在Axios传递对象时,仅仅 this.$qs.stringify({user: this.user}),则会将user的每一个属性拆解拼接为url传参形式的串(user.id=1&user.name=小明),后端就获取不到完整对象了

三. 无注解(传递单个对象适用)

  1. 无需设置响应头
  2. axios使用this.$qs.stringify()
this.$axios({
    method: 'post',
    url: '/queryUser',
    data: this.$qs.stringify(user)
}).then((res) => {
    console.log(res.data)
});
  1. Controller形参处无需注解
@RequestMapping(value = '/queryUser', method = RequestMethod.POST)
public void queryUser(User user) {
	// user可直接使用
	System.out.print(user);
}

总结

单个pojo对象可使用第一种和第三种方法,多个不同的pojo对象则可使用第二种方法

文章参考博主简述 @insaneh

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐