Springboot中前端向后端传递数据的几种方式

在前端和后端的交互中，前端需要向后端传递数据，常见的数据传递方式包括表单提交、URL 参数、JSON 请求等。Spring Boot 作为一种流行的后端开发框架，提供了多种方式来接收来自前端的数据。本文将介绍常见的几种数据传递方式，并说明如何在 Spring Boot 中实现这些方式。

---

1. 表单提交（Form Submission）

最传统的方式是使用 HTML 表单提交数据。Spring Boot 使用 @RequestParam 或 @ModelAttribute 来接收数据。

1.1 前端 HTML 表单

<form action="/submitForm" method="POST">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>
php
175 Bytes
© 菜鸟-创作你的创作

1.2 Spring Boot 后端接收表单数据

• 使用 @RequestParam 来接收表单字段数据。

@RestController
public class FormController {
    @PostMapping("/submitForm")
    public String handleFormSubmission(@RequestParam String username, @RequestParam String password) {
        return "用户名: " + username + ", 密码: " + password;
    }
}
php
246 Bytes
© 菜鸟-创作你的创作

• 使用 @ModelAttribute 接收整个表单数据映射为一个对象。

public class User {
    private String username;
    private String password;
    // getters and setters
}
@RestController
public class FormController {
    @PostMapping("/submitForm")
    public String handleFormSubmission(@ModelAttribute User user) {
        return "用户名: " + user.getUsername() + ", 密码: " + user.getPassword();
    }
}
php
340 Bytes
© 菜鸟-创作你的创作

解释：

• @RequestParam 用于从单个表单字段获取数据。
• @ModelAttribute 用于将表单数据映射到一个对象，适合处理较复杂的数据结构。

---

2. URL 参数（Query Parameters）

URL 参数也常用于传递数据，尤其适合 GET 请求。Spring Boot 可以通过 @RequestParam 来接收 URL 参数。

2.1 前端请求

<a href="/search?query=SpringBoot&limit=10">搜索</a>
php
50 Bytes
© 菜鸟-创作你的创作

2.2 Spring Boot 后端接收 URL 参数

@RestController
public class SearchController {
    @GetMapping("/search")
    public String search(@RequestParam String query, @RequestParam int limit) {
        return "搜索内容: " + query + ", 限制条数: " + limit;
    }
}
php
217 Bytes
© 菜鸟-创作你的创作

解释：

• @RequestParam 从 URL 参数中获取数据。
• URL 参数通常用于 GET 请求，是简单的数据传递方式。

---

3. JSON 请求体（POST 请求）

当需要传递结构化数据，尤其是复杂的对象时，使用 JSON 格式通过 HTTP POST 请求是最常见的方式。前端通过 AJAX 或 fetch API 发送 JSON 数据，而后端则使用 @RequestBody 来接收 JSON 数据并映射为 Java 对象。

3.1 前端发送 JSON 请求

fetch('/saveUser', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: 'john_doe',
        password: '123456'
    })
})
.then(response => response.json())
.then(data => console.log(data));
php
268 Bytes
© 菜鸟-创作你的创作

3.2 Spring Boot 后端接收 JSON 数据

public class User {
    private String username;
    private String password;
    // getters and setters
}
@RestController
public class UserController {
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user) {
        return "保存用户: " + user.getUsername() + ", 密码: " + user.getPassword();
    }
}
php
324 Bytes
© 菜鸟-创作你的创作

解释：

• @RequestBody 注解将请求体中的 JSON 数据转换为对应的 Java 对象。
• 适用于需要传递复杂数据结构或对象的场景。

---

4. 文件上传（Multipart/Form-Data）

前端可以通过表单提交文件，Spring Boot 提供了对文件上传的支持，可以通过 @RequestParam 或 @ModelAttribute 来接收文件。

4.1 前端文件上传表单

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button type="submit">上传文件</button>
</form>
php
153 Bytes
© 菜鸟-创作你的创作

4.2 Spring Boot 后端接收文件

import org.springframework.web.multipart.MultipartFile;
@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public String uploadFile(@RequestParam MultipartFile file) {
        String fileName = file.getOriginalFilename();
        return "上传文件名: " + fileName;
    }
}
php
301 Bytes
© 菜鸟-创作你的创作

解释：

• enctype="multipart/form-data" 必须设置在 HTML 表单中，才能上传文件。
• @RequestParam MultipartFile 用于接收前端上传的文件。

---

5. Path Variables（路径变量）

有时，数据作为路径的一部分传递，这种情况通常是通过 URL 路径来传递数据。Spring Boot 可以通过 @PathVariable 接收路径参数。

5.1 前端请求

<a href="/user/john_doe">查看用户</a>
php
33 Bytes
© 菜鸟-创作你的创作

5.2 Spring Boot 后端接收路径参数

@RestController
public class UserController {
    @GetMapping("/user/{username}")
    public String getUser(@PathVariable String username) {
        return "用户: " + username;
    }
}
php
183 Bytes
© 菜鸟-创作你的创作

解释：

• @PathVariable 用于接收 URL 路径中的数据。
• 适用于资源标识符或其他动态路径数据传递。

---

6. Cookies 和 Headers

在某些情况下，前端也可以通过 HTTP 头或 Cookies 传递数据。Spring Boot 可以通过 @RequestHeader 或 @CookieValue 获取头部信息或 Cookie。

6.1 前端发送请求带 Header

fetch('/api/user', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer your-token'
    }
})
.then(response => response.json())
.then(data => console.log(data));
php
177 Bytes
© 菜鸟-创作你的创作

6.2 Spring Boot 后端接收 Header

@RestController
public class ApiController {
    @GetMapping("/api/user")
    public String getUser(@RequestHeader("Authorization") String authorization) {
        return "Authorization Header: " + authorization;
    }
}
php
221 Bytes
© 菜鸟-创作你的创作

6.3 前端发送请求带 Cookie

fetch('/api/user', {
    method: 'GET',
    credentials: 'include'  // 允许带 Cookie
})
.then(response => response.json())
.then(data => console.log(data));
php
153 Bytes
© 菜鸟-创作你的创作

6.4 Spring Boot 后端接收 Cookie

@RestController
public class ApiController {
    @GetMapping("/api/user")
    public String getUser(@CookieValue("user_id") String userId) {
        return "用户ID: " + userId;
    }
}
php
183 Bytes
© 菜鸟-创作你的创作

解释：

• @RequestHeader 用于获取 HTTP 请求头中的数据。
• @CookieValue 用于获取 HTTP 请求中的 Cookie 数据。

---

7. 总结

在 Spring Boot 中，前端可以通过多种方式向后端传递数据，常见的方式包括：

1. 表单提交 ：使用 @RequestParam 或 @ModelAttribute。
2. URL 参数 ：使用 @RequestParam 获取查询字符串参数。
3. JSON 请求 ：使用 @RequestBody 来接收 JSON 数据。
4. 文件上传 ：通过 @RequestParam 或 @ModelAttribute 接收文件。
5. 路径变量 ：使用 @PathVariable 从 URL 路径中获取数据。
6. 请求头和 Cookie ：使用 @RequestHeader 或 @CookieValue 获取头部或 Cookie 信息。

根据不同的应用场景，开发者可以选择合适的数据传递方式，确保数据传递的效率和安全性。 www.52runoob.com/archives/51...