目录

• 一、前端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对象中的类型匹配
}

2. Java对象定义错误

问题：抛出 HttpMessageConversionException 异常。
原因：Java对象属性缺失或类型定义不符。
解决方法：检查并修正Java对象定义，保证与JSON数据一致。例如：

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

  // 省略getter和setter
}

3. 控制器中使用了多个@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();
    // 处理逻辑
}