✨ 前言：从理解到实战，彻底掌握 Spring MVC 前后端交互
当我们学习了 Spring MVC 中的各种注解、参数绑定、请求方式、编码处理以及 Cookie/Session 操作之后，下一步就是 —— 动手实践！
理论再多，不如亲自敲一次代码。
为了帮助你真正掌握这些知识点，本期我们特别准备了 4 个实战练习案例，从最简单的 GET 请求查询，到复杂的 JSON 请求、表单提交、Cookie/Session 管理、响应处理，全方位模拟实际开发中最常见的场景。
通过这些实战练习，你将：
-
学会使用
@RequestParam、@PathVariable、@RequestBody等注解完成数据传参； -
体验 Cookie 与 Session 在用户状态保持中的应用；
-
掌握返回 JSON、HTML 片段、静态页面等多种响应形式；
-
深入理解前端 AJAX 与 Spring MVC 后端的数据交互过程；
-
遇到乱码怎么办？特殊字符如何传参？我们也准备了答案！
每一个练习都配有 功能说明 + 技术点目标 + 后端实现 + AJAX 示例，从基础到进阶，适合你一步步打通 Spring MVC 的任督二脉 💪
📚 准备好了吗？接下来，让我们一起动手做项目，走出「会看不会写」的学习阶段！
实战项目：
1 加法计算器
1.1 事前准备（项目创建）：
创建项目·选择Maven项目 点击下一步
添加Maven依赖
3 导入我们准备的前端代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<form action="calc/sum" method="post"><h1>计算器</h1>数字1：<input name="num1" type="text"><br>数字2：<input name="num2" type="text"><br><input type="submit" value=" 点击相加 ">
</form>
</body></html>1.2 约定前后端交互接⼝
概念介绍
约定"前后端交互接⼝"是进⾏Web开发中的关键环节.
接⼝⼜叫API（ApplicationProgrammingInterface),我们⼀般讲到接⼝或者API，指的都是同⼀个东西.
是指应⽤程序对外提供的服务的描述,⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).
简单来说,就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.
这是个特别关键的问题，尤其是做 Web 开发时必须理解的核心概念之一。我们来讲得既清楚又实战一点 👇
❓ 那么为什么要“约定”前后端交互接口？
前后端分离后，前端只管展示，后端只管数据与逻辑。为了能顺利“合作”，必须明确沟通规范——也就是所谓的“接口约定”。
🎯 简单理解：接口就像“合同”
你可以把前后端接口当作一份“合作协议”或“API合同”，它包括：
| 内容 | 作用 |
|---|---|
| 请求路径 | 前端知道请求哪个地址 |
| 请求方式 | GET / POST / PUT / DELETE 等 |
| 参数名称与类型 | 后端告诉前端需要哪些参数，类型是什么 |
| 返回数据格式 | 返回的是 JSON？里面有哪些字段？ |
| 状态码规范 | 成功/失败怎么判断？出错时返回什么信息？ |
💥 如果没有接口约定，会怎样？
-
前端可能传了参数，但后端收不到；
-
后端返回了数据，但前端不知道字段名；
-
请求方法搞错，POST 写成了 GET；
-
返回的格式乱七八糟，前端根本无法解析；
-
后端改了接口，前端完全不知道，直接“炸裂”💥
✅ 规范接口有哪些常见方式？
-
接口文档（推荐）
使用 Postman、YApi、Swagger、Apifox 等工具记录 API 信息。 -
RESTful 风格（建议遵守）
URL 语义清晰，比如：-
/users→ 获取所有用户 -
/users/{id}→ 获取某个用户 -
/users POST→ 新增用户
-
-
定义返回格式（如统一 JSON）：
{"code": 200,"message": "success","data": { ... } }
🧠 总结一句话：
前后端接口约定的本质，是让前端和后端团队像两个“契约者”，有序合作、互不踩雷。
所以在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⼝⽂档进⾏开发.
接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.
接⼝⽂档⼀旦写好,尽量不要轻易改变.
如若需要改变,必须要通知另⼀⽅知晓.
1.3 接⼝定义
请求参数:
1.4 开发代码
由此根据以上接口，我们可以写出：
package com.example.demo;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/calc")
public class computer {@RequestMapping("/sum")public String sum(Integer num1,Integer num2) {Integer sum = num1 + num2;return "</h1>相加的结果 sum = " + sum + "</h1>" ;
}
}1..5 结果展示：
在两个输入框内输入数字：
点击相加：
由此我们的第一个简单的项目已经完成了，有没有感觉到非常的简单呢？我们要开始加大难度了👇
2 ⽤⼾登录
需求:⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确
1. 如果不正确,前端进⾏⽤⼾告知
2. 如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾
3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息
2.1 事前准备 ：
前端代码：login
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body>
<h1>用户登录</h1>
用户名：<input name="userName" type="text" id="userName"><br>
密码：<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>function login(){}</script>
</body></html>index：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>
登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script></script>
</body></html>2.2 约定前后端交互接⼝
需求分析 对于后端开发⼈员⽽⾔,不涉及前端⻚⾯的展⽰,只需要提供两个功能
1. 登录⻚⾯:通过账号和密码,校验输⼊的账号密码是否正确,并告知前端
2. ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回空
2.3 接⼝定义
请求参数:
响应数据:
Content-Type: text/html
响应内容:
true //账号密码验证成功
false//账号密码验证失败
查询登录⽤⼾接⼝
请求参数:
⽆
响应数据:
2.4 开发代码
package com.example.demo;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/user")
@RestController
public class userlogin {@RequestMapping("/login")//判断传递的两个参数是否为空，如果为空就返回false//不为空就将输入名字的参数传递在session中以便在前端中中获取public Boolean login(String username, String password, HttpSession session) {if(!StringUtils.hasLength(username)||!StringUtils.hasLength(password)) {return false;}//校验账号密码是否正确//理论上应该从数据库中获取账号密码, 校验是否正确, 但当前还没讲数据库的操作, 先把// 账号密码固定写死if(!"zhangsan".equals(username)|| !"admin".equals(password)) {return false;}//密码验证成功, 把⽤⼾名存储在Session中session.setAttribute("username", username);return true;}@RequestMapping("/getLoginUser")public String getLoginUser(HttpSession session) {//从Session中获取⽤⼾登录信息String username = (String) session.getAttribute("username");//如果⽤⼾已经登录, 则直接返回⽤⼾登录 if(StringUtils.hasLength(username)) {return username;}return"";}
}
2.5 调整前端⻚⾯代码
2.5.1调整登录⻚⾯login.html
对于前端⽽⾔,当点击登录按钮时,需要把⽤⼾输⼊的信息传递到后端进⾏校验,后端校验成功,则跳转 到⾸⻚:index.html,后端校验失败,则直接弹窗
function login(){$.ajax({type :"post",url:"/user/login",data:{"userName":$("#userName").val(),"password":$("#password").val()},success:function (result){if(result){location.href = "/index.html"} else {alert("账号或密码有错误");}}});}
⻚⾯跳转的三种⽅式:
1. window.location.href="book_list.html";
2. window.location.assign("book_list.html");
3. window.location.replace("book_list.html");
以上写法,通常把"window."省略,⽐如window.location.href = "book_list.html"; 写成location.href = "book_list.html";
三者区别参考:location.assign()、location.href、location.replace(url)的不同-阿里云开发者社区
2.5.2 调整⾸⻚代码
⾸⻚代码⽐较简单,只显⽰当前登录⽤⼾即可.
当前登录⽤⼾需要从后端获取,并显⽰到前端
$.ajax({type: "get",url: "/user/getLoginUser",success: function (result) {$("#loginUser").text(result);}});2.6 运⾏测试
多次刷新http://127.0.0.1:8080/index.html 发现依然可以获取到登录⽤⼾ 如果重启服务器,则登录⼈显⽰:空
Session存在内存中,如果不做任何处理,默认服务器重启,Session数据就丢失了
