Java后端接受前端数据的几种方法

news2025/6/3 20:47:43

在前后端分离的开发模式中，前端（Vue）与后端（Java）的数据交互有多种格式，下面详细介绍几种常见的格式以及后端对应的接收方式。

一、JSON 格式

前端传输

在 Vue 里，可借助 axios 把数据以 JSON 格式发送给后端，示例如下：

axios.post('/api/user', {
  username: 'john',
  age: 30
})

后端接收

后端的 Java 代码可以使用 Spring MVC 框架，通过@RequestBody注解来接收 JSON 数据，示例如下：

@PostMapping("/api/user")
public User createUser(@RequestBody User user) {
    // 处理接收到的user对象
    return user;
}

这里需要有一个与 JSON 数据结构相匹配的 Java 类，例如：

public class User {
    private String username;
    private Integer age;
    
    // getters and setters
}

二、表单数据（Form Data）

前端传输

在 Vue 中，可通过表单或者 FormData 对象来发送表单数据，示例如下：

const formData = new FormData();
formData.append('username', 'john');
formData.append('age', 30);

axios.post('/api/user', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

后端接收

后端的 Java 代码同样可以使用 Spring MVC 框架，通过@RequestParam注解来接收表单数据，示例如下：

@PostMapping("/api/user")
public User createUser(
    @RequestParam("username") String username,
    @RequestParam("age") Integer age
) {
    User user = new User();
    user.setUsername(username);
    user.setAge(age);
    return user;
}

三、URL 编码参数

前端传输

在 Vue 中，可以将参数附加在 URL 后面进行传输，示例如下：

axios.get('/api/user?username=john&age=30')

后端接收

后端的 Java 代码还是使用 Spring MVC 框架，通过@RequestParam注解来接收 URL 编码参数，示例如下：

@GetMapping("/api/user")
public User getUser(
    @RequestParam("username") String username,
    @RequestParam("age") Integer age
) {
    User user = new User();
    user.setUsername(username);
    user.setAge(age);
    return user;
}

四、文件上传

前端传输

在 Vue 中，可使用 FormData 对象来上传文件，示例如下：

const formData = new FormData();
formData.append('file', file); // file是文件对象

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

后端接收

后端的 Java 代码使用 Spring MVC 框架，通过@RequestParam和MultipartFile来接收文件，示例如下：

@PostMapping("/api/upload")
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
    if (!file.isEmpty()) {
        try {
            // 处理文件上传
            byte[] bytes = file.getBytes();
            // 保存文件等操作
            return "上传成功";
        } catch (Exception e) {
            return "上传失败: " + e.getMessage();
        }
    } else {
        return "上传失败，因为文件为空";
    }
}

五、路径参数

前端传输

在 Vue 中，可将参数嵌入 URL 路径中进行传输，示例如下：

axios.get('/api/user/123')

后端接收

后端的 Java 代码使用 Spring MVC 框架，通过@PathVariable注解来接收路径参数，示例如下：

@GetMapping("/api/user/{id}")
public User getUser(@PathVariable("id") Long id) {
    // 根据id获取用户
    User user = userService.getUserById(id);
    return user;
}

总结

前端格式	后端接收方式	适用场景
JSON	`@RequestBody`	复杂对象传输
表单数据	`@RequestParam` 或 `MultipartFile`	表单提交、文件上传
URL 编码参数	`@RequestParam`	简单参数查询
文件上传	`MultipartFile`	上传文件
路径参数	`@PathVariable`	RESTful API 中的资源标识