Axios使用Post向Spring传递POJO对象的三种方法（@RequestBody与@RequestParam注解）

Posted 2022-04-20 卉卉不会写代码

序

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

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)
);

3. 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)
);

2. 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)
);

3. Controller形参处无需注解

@RequestMapping(value = '/queryUser', method = RequestMethod.POST)
public void queryUser(User user) 
	// user可直接使用
	System.out.print(user);

总结

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

文章参考博主简述 @insaneh