目录

一、前端Vue发送JSON数据二、后端Spring Boot接收JSON数据三、常见错误和问题

一、前端Vue发送JSON数据

<code>axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。它支持所有现代浏览器和IE9+（包括IE9）。

npm install axios

在Vue组件中使用axios发送POST请求，并将数据转换为JSON格式，需要设置请求头Content-Type为application/json：

import axios from 'axios';

export default { -- -->

data() {

return {

user: {

name: '',

age: 0,

gender: ''

}

}

},

methods: {

submitData() {

axios.post('/api/user', JSON.stringify(this.user), {

headers: {

'Content-Type': 'application/json'

}

})

.then(response => {

console.log(response.data);

})

.catch(error => {

console.error(error);

});

}

}

}

二、后端Spring Boot接收JSON数据

在后端Spring Boot中，接收JSON数据需要使用@RequestBody注解，将HTTP请求主体映射到一个User对象中，并将其作为参数传递给createUser方法。

@RestController

@RequestMapping("/api")

public class UserController {

@PostMapping("/user")

public User createUser(@RequestBody User user) {

System.out.println(user);

return user;

}

}

三、常见错误和问题

JSON数据格式错误

问题：Spring Boot 抛出 HttpMessageNotReadableException 异常。

原因：JSON数据缺少必要的属性或属性值不符合Java对象要求。

解决方法：核实JSON数据格式，确保其完全匹配Java对象定义。例如：

{

"name": "John",

"age": 30,

"email": "john@example.com",

"phoneNumber": "1234567890" // 确保与Java对象中的类型匹配

}

Java对象定义错误

问题：抛出 HttpMessageConversionException 异常。

原因：Java对象属性缺失或类型定义不符。

解决方法：检查并修正Java对象定义，保证与JSON数据一致。例如：

public class User {

private String name;

private int age;

private String email;

private String phoneNumber; // 修改为String类型以匹配JSON数据

// 省略getter和setter

}

控制器中使用了多个@RequestBody注解

问题表现：Spring Boot 抛出 IllegalStateException 异常。

原因：在单一请求处理方法中错误地使用了多个 @RequestBody 注解。

解决方法：将多个请求体数据整合到单个对象中，使用一个 @RequestBody 注解接收。例如：

错误示例：

@PostMapping("/users")

public ResponseEntity<User> createUser(@RequestBody User user, @RequestBody Address address) {

// 处理逻辑

}

修正方案：

public class CreateUserDto {

private User user;

private Address address;

// getter和setter

}

@PostMapping("/users")

public ResponseEntity<User> createUser(@RequestBody CreateUserDto createUserDto) {

User user = createUserDto.getUser();

Address address = createUserDto.getAddress();

// 处理逻辑

}