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

您所在的位置：网站首页 › 请求json格式不正确怎么办 › 从前端Vue到后端Spring Boot：接收JSON数据的正确姿势

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

2024-06-03 21:52| 来源: 网络整理| 查看: 265

目录一、前端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; } } 三、常见错误和问题 JSON数据格式错误

问题：Spring Boot 抛出 HttpMessageNotReadableException 异常。原因：JSON数据缺少必要的属性或属性值不符合Java对象要求。解决方法：核实JSON数据格式，确保其完全匹配Java对象定义。例如：

{ "name": "John", "age": 30, "email": "[email protected]", "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 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(); // 处理逻辑 }

【本文地址】

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

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

今日新闻

推荐新闻