掌握后端接口编写与前端页面交互是 Spring Boot 开发的基础。这里通过三个经典案例，带你从传统表单到现代异步通信，彻底搞懂前后端联调的核心技巧。
1. 案例一：表单提交与参数绑定（计算求和）
这是最基础、最传统的 Web 交互方式，适合理解 HTTP 请求的基本原理。
1.1 后端实现：CalcController.java
使用 @RestController 简化接口定义，方法参数直接接收表单数据。注意代码格式规范，包名和类名之间要有空格。
package cn.overthinker.springboot;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/calc")
@RestController
public class CalcController {
/**
* 求和接口：通过方法参数名自动接收前端表单提交的 num1 和 num2
*/
@RequestMapping("/sum")
public String sum(Integer num1, Integer num2) {
// 使用 Integer 包装类进行非空判断，避免空指针异常
if (num1 == null || num2 == null) {
return "请求非法：请输入两个数字！";
}
// 计算并返回结果
return "计算结果为：" + (num1 + num2);
}
}
1.2 前端页面：calc.html
界面设计简洁，重点在于 Form 标签的 action 和 method 配置。
📋 HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单求和计算器</title>
<style>
body { font-family: sans-serif; background-color: #f4f7f6; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.calculator-container { background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); width: 300px; text-align: center; }
h1 { color: #333; margin-bottom: 30px; font-size: 24px; border-bottom: 2px solid #5cb85c; display: inline-block; padding-bottom: 5px; }
input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
input[type="submit"] { background-color: #5cb85c; color: white; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; margin-top: 20px; width: 100%; transition: background-color 0.3s ease; }
input[type="submit"]:hover { background-color: #4cae4c; }
</style>
</head>
<body>
<div class="calculator-container">
<h1>简单求和计算器</h1>
<form action="/calc/sum" method="post">
数字 1：<input name="num1" type="text" placeholder="请输入数字 1"><br>
数字 2：<input name="num2" type="text" placeholder="请输入数字 2"><br>
<input type="submit" value="点击相加">
</form>
</div>
</body>
</html>
1.3 联调关键点
- name 属性匹配：前端
<input name="num1">中的name必须与后端方法的参数名Integer num1完全一致。Spring MVC 会按名称自动映射。 - 类型转换：Spring Boot 会自动将 HTTP 请求中的字符串参数转换为 Java 方法所需的
Integer类型，如果传值无法转换会抛出异常，所以建议加上判空逻辑。
2. 案例二：AJAX 异步交互与 Session 状态管理（用户登录）
实际项目中很少刷新页面登录，我们引入 AJAX 实现无刷新体验，并利用 Session 在服务器端保存用户状态。
2.1 后端实现：UserController.java
核心在于利用 HttpSession 存储登录信息，并在后续请求中读取。
package cn.overthinker.springboot;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/user")
@RestController
public class UserController {
/**
* 登录接口：使用 HttpSession 存储用户信息
*/
@PostMapping("/login")
public boolean login(String userName, String password, HttpSession session) {
if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
return false;
}
// 硬编码校验（实际项目应查询数据库）
if ("admin".equals(userName) && "123456".equals(password)) {
// 核心知识点：登录成功后，将用户名存入 Session
session.setAttribute("loginUser", userName);
return true;
}
return false;
}
/**
* 获取当前登录用户接口：从 Session 中读取用户信息
*/
@GetMapping("/getLoginUser")
public String getLoginUser(HttpServletRequest request) {
// request.getSession(false)：如果 Session 不存在，则不创建
HttpSession session = request.getSession(false);
if (session != null) {
String loginUser = (String) session.getAttribute("loginUser");
return loginUser;
}
return "";
}
}
2.2 前端页面：login.html & index.html
使用 jQuery AJAX 发送异步请求，用户体验更流畅。
login.html (登录页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
body { font-family: sans-serif; background-color: #e8eff1; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.login-box { background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: 280px; text-align: center; }
h1 { color: #3c8dbc; margin-bottom: 25px; }
input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
input[type="button"] { background-color: #3c8dbc; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; transition: background-color 0.3s; }
input[type="button"]:hover { background-color: #367fa9; }
</style>
</head>
<body>
<div class="login-box">
<h1>用户登录</h1>
用户名：<input name="userName" type="text" id="userName" placeholder="请输入用户名"><br>
密码：<input name="password" type="password" id="password" placeholder="请输入密码"><br>
<input type="button" value="登录" onclick="login()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function login() {
$.ajax({
url: "/user/login",
type: "post",
data: {
userName: $("#userName").val(),
password: $("#password").val()
},
success: function(result) {
if (result) {
location.href = "/index.html";
} else {
alert("用户名或密码错误");
}
}
});
}
</script>
</body>
</html>
index.html (首页)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录首页</title>
<style>
body { font-family: sans-serif; background-color: #f0f4f7; padding: 50px; }
.welcome { font-size: 24px; color: #333; }
#loginUser { color: #d9534f; font-weight: bold; }
</style>
</head>
<body>
<div class="welcome">欢迎回来，登录人：<span id="loginUser"></span></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// 页面加载后立即发起 AJAX 请求获取 Session 中的登录信息
$.ajax({
url: "user/getLoginUser",
type: "get",
success: function(userName) {
$("#loginUser").text(userName || "（未登录）");
}
});
</script>
</body>
</html>
2.3 联调关键点
- AJAX 机制：允许前端在不刷新页面的情况下与后端交换数据。jQuery 的
$.ajax封装了底层 XMLHttpRequest，使用更便捷。 - Session 保持：浏览器通过 Cookie 自动携带
Session ID。登录时服务端写入数据，后续请求带上 ID，服务端就能找到对应的 Session 取出数据。这实现了跨请求的状态保持。
3. 案例三：JSON 数据传输与 RESTful 接口（留言板）
现代 Web 开发的主流模式：前后端分离，通过 JSON 格式交互，后端遵循 RESTful 风格。
3.1 后端实现：MessageController.java
使用 @RequestBody 接收 JSON 对象，模拟数据库操作。
package cn.overthinker.springboot;
import lombok.Data;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;
@RequestMapping("/Message")
@RestController
public class MessageController {
// 存储留言的列表（模拟数据库存储）
private List<MessageInfo> messageInfoList = new ArrayList<>();
/**
* 发布留言接口：使用 @RequestBody 接收 JSON 数据
*/
@PostMapping("/publish")
public Boolean publish(@RequestBody MessageInfo messageInfo) {
if (!StringUtils.hasLength(messageInfo.getFrom()) || !StringUtils.hasLength(messageInfo.getTo()) || !StringUtils.hasLength(messageInfo.getMessage())) {
return false;
}
messageInfoList.add(messageInfo);
return true;
}
/**
* 获取留言列表接口：返回 JSON 数组
*/
@GetMapping("/getList")
public List<MessageInfo> getList() {
return messageInfoList;
}
}
MessageInfo.java (DTO)
使用 Lombok 简化 Getter/Setter 生成。
package cn.overthinker.springboot;
import lombok.Data;
@Data
public class MessageInfo {
private String from;
private String to;
private String message;
}
3.2 前端页面：message.html
前端构建 JSON 对象并通过 AJAX 发送。
📋 HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
body { font-family: sans-serif; background-color: #f0f7f4; padding: 20px; }
.container { width: 400px; margin: 20px auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); text-align: center; }
h1 { color: #387063; margin-bottom: 5px; }
.grey { color: #888; margin-bottom: 20px; }
.row { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-bottom: 10px; }
.row span { width: 70px; text-align: left; color: #555; font-weight: bold; }
.row input { flex-grow: 1; height: 35px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 4px; }
#submit { width: 100%; height: 45px; background-color: #387063; color: white; border: none; border-radius: 5px; margin-top: 20px; font-size: 18px; cursor: pointer; transition: background-color 0.3s; }
#submit:hover { background-color: #2b574d; }
.message-list div { text-align: left; padding: 8px 0; border-bottom: 1px dashed #eee; color: #333; }
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交，信息将显示在下方</p>
<div class="row"><span>谁:</span><input type="text" id="from" placeholder="你的名字"></div>
<div class="row"><span>对谁:</span><input type="text" id="to" placeholder="你想对谁说"></div>
<div class="row"><span>说什么:</span><input type="text" id="say" placeholder="你的留言内容"></div>
<input type="button" value="提交留言" id="submit" onclick="submit()">
<div class="message-list"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// 页面加载时自动获取并展示所有留言
function loadMessages() {
$.ajax({
type: "get",
url: "/Message/getList",
success: function(messages) {
$(".message-list").empty();
for (let msg of messages) {
let divE = "<div>" + msg.from + " 对 " + msg.to + " 说：" + msg.message + "</div>";
$(".message-list").append(divE);
}
}
});
}
loadMessages();
function submit() {
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
if (from == '' || to == '' || say == '') {
return;
}
// 核心联调：发送 JSON 数据
$.ajax({
type: "post",
url: "/Message/publish",
contentType: "application/json",
data: JSON.stringify({
from: from,
to: to,
message: say
}),
success: function(result) {
if (result) {
loadMessages();
$('#from').val("");
$('#to').val("");
$('#say').val("");
} else {
alert("添加留言失败，请检查输入");
}
}
});
}
</script>
</body>
</html>
3.3 联调关键点
- @RequestBody：告诉 Spring MVC 将 HTTP 请求体中的 JSON 字符串解析并映射到 Java 对象。没有这个注解，Spring 会尝试按参数名匹配表单字段，导致 JSON 解析失败。
- Content-Type：前端必须设置
contentType: "application/json"，否则后端不知道如何反序列化。 - JSON.stringify：JS 对象转 JSON 字符串的关键步骤，确保键名与后端 DTO 属性名严格对应（如
message）。
4. 总结：前后端联调模式对比
| 联调模式 | 案例 | 核心机制 | 后端注解/参数接收 | 优点 | 缺点 |
|---|---|---|---|---|---|
| Form 表单提交 | 求和计算器 | 浏览器直接跳转/刷新页面 | 方法参数名匹配 | 简单、无需 JavaScript | 用户体验差、无法精细控制 |
| AJAX (Query String) | 登录系统 (GET/POST) | 异步通信（无刷新） | 方法参数名匹配 | 用户体验好、可局部更新 | 仅适用于少量简单数据 |
| AJAX (JSON) | 留言板 | 异步通信（无刷新） | @RequestBody 接收 DTO | 传输复杂结构数据、最常用 | 需要配置 Content-Type 和 JSON.stringify |
掌握这三种模式，基本能应对大部分 Spring Boot Web 开发场景。实际开发中，根据业务复杂度灵活选择即可。