基于 Spring Boot 的 Web 三大核心交互案例精讲
Spring Boot Web 开发中，前后端交互是最基础也是最核心的部分。本文通过三个经典案例，从传统到现代、从同步到异步、从表单到 JSON，系统讲解 Spring Boot 中 Web 交互的核心技巧。
这三个案例几乎覆盖了 80% 的日常 Web 开发场景：
- 表单提交（传统同步交互 + 参数绑定）
- AJAX 异步交互（无刷新登录 + Session 状态管理）
- RESTful JSON 数据交互（前后端分离主流方式）
适合 Spring Boot 初学者和正在做 Web 项目的开发者，直接复制代码即可运行。
项目基础准备（所有案例通用）
使用 Spring Initializr 创建项目，添加以下依赖：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
</dependencies>
application.yml 基础配置：
server:
port: 8080
spring:
thymeleaf:
cache: false
启动类保持默认：
@SpringBootApplication
public class WebDemoApplication {
public static void main(String[] args) {
SpringApplication.run(WebDemoApplication.class, args);
}
}
案例一：表单提交与参数绑定（求和计算器）
场景：用户在页面输入两个数字，提交表单，后端计算求和并返回结果页面。
1. 实体类（可选，使用 @ModelAttribute）
public class CalcForm {
@NotNull(message = "数字1不能为空")
private Integer num1;
@NotNull(message = "数字2不能为空")
private Integer num2;
// getter/setter
}
2. Controller
@Controller
public class FormController {
@GetMapping("/calc")
public String showForm(Model model) {
model.addAttribute("calcForm", new CalcForm());
return "calc"; // 返回 calc.html
}
@PostMapping("/calc")
public String doCalc(@ModelAttribute @Valid CalcForm form,
BindingResult result, Model model) {
if (result.hasErrors()) {
return "calc";
}
int sum = form.getNum1() + form.getNum2();
model.addAttribute("sum", sum);
model.addAttribute("num1", form.getNum1());
model.addAttribute("num2", form.getNum2());
return "calc-result";
}
}
3. Thymeleaf 页面（calc.html）
<form th:action="@{/calc}" th:object="${calcForm}" method="post">
<input type="number" th:field="*{num1}" placeholder="数字1">
<input type="number" th:field="*{num2}" placeholder="数字2">
<button type="submit">计算求和</button>
</form>
结果页 calc-result.html 简单显示求和结果。
核心知识点：
@Controller+ Thymeleaf 返回视图@ModelAttribute绑定表单到对象@Valid+BindingResult做数据校验th:object、th:field实现双向绑定
案例二：AJAX 异步交互与 Session 状态管理（用户登录）
场景：用户输入用户名密码，AJAX 提交，后端验证，成功后存 Session，返回 JSON，前端无刷新提示登录成功。
1. Controller
@RestController
@RequestMapping("/api")
public class AjaxController {
@PostMapping("/login")
public Map<String, Object> login(@RequestParam String username,
@RequestParam String password,
HttpSession session) {
Map<String, Object> result = new HashMap<>();
if ("admin".equals(username) && "123456".equals(password)) {
session.setAttribute("user", username);
result.put("success", true);
result.put("message", "登录成功");
result.put("user", username);
} else {
result.put("success", false);
result.put("message", "用户名或密码错误");
}
return result;
}
@GetMapping("/checkLogin")
public Map<String, Object> checkLogin(HttpSession session) {
Map<String, Object> result = new HashMap<>();
Object user = session.getAttribute("user");
result.put("loggedIn", user != null);
if (user != null) {
result.put("user", user);
}
return result;
}
}
2. 前端页面（login.html，使用 jQuery）
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form id="loginForm">
<input type="text" id="username" placeholder="用户名">
<input type="password" id="password" placeholder="密码">
<button type="button" id="loginBtn">登录</button>
</form>
<div id="message"></div>
<script>
$(function() {
$("#loginBtn").click(function() {
$.ajax({
url: "/api/login",
type: "POST",
data: {
username: $("#username").val(),
password: $("#password").val()
},
success: function(res) {
if (res.success) {
$("#message").html("<span style='color:green'>登录成功！欢迎 " + res.user + "</span>");
} else {
$("#message").html("<span style='color:red'>" + res.message + "</span>");
}
},
error: function() {
alert("请求失败");
}
});
});
});
</script>
核心知识点：
@RestController返回 JSON@RequestParam接收表单数据HttpSession管理用户状态- jQuery AJAX 异步提交，无刷新体验
案例三：JSON 数据传输与 RESTful 接口（留言板 CRUD）
场景：前后端分离风格，使用 JSON 进行增删改查，符合 RESTful 规范。
1. 实体类
public class Message {
private Long id;
private String content;
private String author;
// getter/setter + 构造器
}
2. RESTful Controller
@RestController
@RequestMapping("/api/messages")
public class MessageController {
private final List<Message> messages = new CopyOnWriteArrayList<>(); // 模拟数据库
@GetMapping
public List<Message> getAll() {
return messages;
}
@PostMapping
public Message create(@RequestBody Message message) {
message.setId(System.currentTimeMillis());
messages.add(message);
return message;
}
@GetMapping("/{id}")
public Message getById(@PathVariable Long id) {
return messages.stream()
.filter(m -> m.getId().equals(id))
.findFirst()
.orElseThrow(() -> new RuntimeException("Not found"));
}
@PutMapping("/{id}")
public Message update(@PathVariable Long id, @RequestBody Message updated) {
// 简化实现，实际应查找并更新
return updated;
}
@DeleteMapping("/{id}")
public void delete(@PathVariable Long id) {
messages.removeIf(m -> m.getId().equals(id));
}
}
3. 前端使用 Axios（推荐）或 Fetch
// 示例：POST 添加留言
axios.post('/api/messages', {
content: "这是一条留言",
author: "张三"
}).then(res => {
console.log("添加成功", res.data);
});
核心知识点：
@RestController+@RequestBody接收 JSON@PathVariable处理路径参数- RESTful 规范：GET（查）、POST（增）、PUT（改）、DELETE（删）
- 前后端完全分离，返回纯 JSON
三大交互方式对比总结
| 交互方式 | 适用场景 | 核心注解 | 数据格式 | 是否刷新页面 | 推荐程度 |
|---|---|---|---|---|---|
| 表单提交 | 传统网页、简单 CRUD | @Controller + @ModelAttribute | form-data | 是 | ★★★☆☆ |
| AJAX 异步 | 需要良好用户体验（如登录、搜索） | @RestController + @RequestParam | JSON / form | 否 | ★★★★★ |
| RESTful JSON | 前后端分离、移动端、SPA | @RestController + @RequestBody | JSON | 否 | ★★★★★ |
最佳实践建议：
- 复杂项目优先使用 前后端分离 + RESTful + Axios/Vue/React。
- 简单后台管理系统可用 Thymeleaf + 表单/AJAX 混合模式。
- 始终加上 @Valid 校验 + 全局异常处理（@ControllerAdvice）。
- 参数较多时优先使用 DTO/实体类绑定。
- 生产环境注意 CORS 配置（
@CrossOrigin或全局配置）。 - Session 管理推荐升级为 JWT + Redis（分布式场景）。
通过这三个案例，你已经掌握了 Spring Boot Web 开发中最核心的交互技能。建议自己动手搭建一个完整的小项目（如简单的 TodoList 或留言板），把三个案例融合起来实践。
需要完整可运行源码（GitHub 风格）、添加 MyBatis/MySQL 版本、使用 Vue3 + Axios 前端完整版、全局异常处理与统一返回结果，或者文件上传交互案例，随时告诉我，我继续给你详细代码和扩展！
加油，掌握这些后，你的 Spring Boot Web 开发能力将迈上一个新台阶！🚀
