从前端Vue到后端Spring Boot：接收JSON数据的正确姿势

目录

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

  一、前端Vue发送JSON数据

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

  三、常见错误和问题

  1. JSON数据格式错误

  问题：Spring Boot 抛出 HttpMessageNotReadableException 异常。

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

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

  {  "name": "John",  "age": 30,  "email": "john@example.com",  "phoneNumber": "1234567890" // 确保与Java对象中的类型匹配}

  1. Java对象定义错误

  问题：抛出 HttpMessageConversionException 异常。

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

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

  public class User {  private String name;  private int age;  private String email;  private String phoneNumber; // 修改为String类型以匹配JSON数据  // 省略getter和setter}

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

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

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

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

  错误示例：

  @PostMapping("/users")public ResponseEntity createUser(@RequestBody User user, @RequestBody Address address) {    // 处理逻辑}

  修正方案：

  public class CreateUserDto {    private User user;    private Address address;    // getter和setter}@PostMapping("/users")public ResponseEntity createUser(@RequestBody CreateUserDto createUserDto) {    User user = createUserDto.getUser();    Address address = createUserDto.getAddress();    // 处理逻辑}