基于 Spring Boot 的 Web 三大核心交互案例精讲

优质文章学习记录

— 11 min read
基于 Spring Boot 的 Web 三大核心交互案例精讲
—知识点专栏——JavaEE专栏—

作为 Spring Boot 初学者，理解后端接口的编写和前端页面的交互至关重要。本文将通过三个经典的 Web 案例——表单提交、AJAX 登录与状态管理、以及 JSON 数据交互——带您掌握前后端联调的核心技巧和 Spring Boot 的关键注解。

1. 案例一：表单提交与参数绑定（计算求和）

本案例展示最基础、最传统的 Web 交互方式：HTML 表单提交。

1.1 后端代码：CalcController.java

使用 @RestController 简化接口编写，并通过方法参数接收表单数据。

packagecn.overthinker.springboot;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;@RequestMapping("/calc")@RestControllerpublicclassCalcController{/** * 求和接口：通过方法参数名自动接收前端表单提交的 num1 和 num2 */@RequestMapping("/sum")publicStringsum(Integer num1,Integer num2){// 使用 Integer 包装类进行非空判断，避免空指针异常if(num1 ==null|| num2 ==null){return"请求非法：请输入两个数字！";}// 计算并返回结果return"计算结果为："+(num1 + num2);}}

1.2 前端代码：calc.html

在这里插入图片描述


在这里插入图片描述
📋 HTML 代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="calculator-container"><h1>简单求和计算器</h1><formaction="/calc/sum"method="post"> 数字1：<inputname="num1"type="text"placeholder="请输入数字1"><br> 数字2：<inputname="num2"type="text"placeholder="请输入数字2"><br><inputtype="submit"value=" 点击相加 "></form></div></body></html>

1.3 联调重点解析：参数绑定

  • 前端 Form 的 name 属性：前端 <input name="num1"> 中的 name 必须与后端方法的参数名 Integer num1完全一致。
  • 后端自动类型转换：Spring Boot 会自动将 HTTP 请求中的字符串参数转换为 Java 方法所需的 Integer 类型。

2. 案例二：AJAX 异步交互与 Session 状态管理（用户登录）

本案例引入 AJAX 实现无刷新登录，并利用 Session 在服务器端保存用户状态。

2.1 后端代码：UserController.java 和 Person.java

UserController.java (核心逻辑)
packagecn.overthinker.springboot;importjakarta.servlet.http.HttpServletRequest;importjakarta.servlet.http.HttpSession;importorg.springframework.util.StringUtils;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;@RequestMapping("/user")@RestControllerpublicclassUserController{/** * 登录接口：使用 HttpSession 存储用户信息 */@PostMapping("/login")publicbooleanlogin(String userName,String password,HttpSession session){if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){returnfalse;}// 硬编码校验（实际项目应查询数据库）if("admin".equals(userName)&&"123456".equals(password)){// **核心知识点：登录成功后，将用户名存入 Session** session.setAttribute("loginUser", userName);returntrue;}returnfalse;}/** * 获取当前登录用户接口：从 Session 中读取用户信息 */@GetMapping("/getLoginUser")publicStringgetLoginUser(HttpServletRequest request){// request.getSession(false)：如果 Session 不存在，则不创建HttpSession session = request.getSession(false);if(session !=null){String loginUser =(String) session.getAttribute("loginUser");return loginUser;}return"";}}
Person.java (实体类)

虽然未直接用于登录，但作为 JavaBean 演示参数绑定基础。

packagecn.overthinker.springboot;// 略：包含 name, password, age 属性及其 Getter/Setter 和 toString 方法publicclassPerson{// ... 属性、Getter/Setter、toString ...}

2.2 前端代码：login.html 和 index.html

在这里插入图片描述


在这里插入图片描述

使用 jQuery AJAX 进行异步登录，用户体验更好。

login.html (登录页面)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="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><divclass="login-box"><h1>用户登录</h1> 用户名：<inputname="userName"type="text"id="userName"placeholder="请输入用户名"><br> 密码：<inputname="password"type="password"id="password"placeholder="请输入密码"><br><inputtype="button"value="登录"onclick="login()"></div><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>functionlogin(){ $.ajax({ url:"/user/login", type:"post",// 核心联调：通过 AJAX 传递参数 data:{ userName:$("#userName").val(), password:$("#password").val()},success:function(result){if(result){// 登录成功，跳转到首页 location.href ="/index.html";}else{alert("用户名或密码错误");}}});}</script></body></html>
index.html (首页 - 获取登录信息)
<!doctypehtml><htmllang="en"><head><metacharset="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><divclass="welcome">欢迎回来，登录人: <spanid="loginUser"></span></div><scriptsrc="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 与 Session

  • AJAX (Asynchronous JavaScript and XML)：允许前端在不刷新页面的情况下，与后端进行数据交换。在 login.html 中，我们使用 jQuery 的 $.ajax 实现异步请求。
  • Session 机制：Session 是服务器端用来存储用户状态信息的机制。
    • 当用户登录成功后，session.setAttribute("loginUser", userName); 在服务器上创建或关联一个 Session，并存入数据。
    • 浏览器通过 Cookie 自动携带一个 Session ID 给服务器。
    • 在 index.html 请求 /user/getLoginUser 时，服务器通过浏览器传来的 Session ID 找到对应的 Session，从而取出存储的 loginUser 信息，实现了状态保持。

3. 案例三：JSON 数据传输与 RESTful 接口（留言板）

本案例是现代 Web 开发最常用的方式：前后端通过 JSON 格式进行数据交互，后端使用 RESTful 风格的接口。

3.1 后端代码：MessageController.java 和 MesseageInfo.java

MessageController.java (核心逻辑)
packagecn.overthinker.springboot;importorg.springframework.util.StringUtils;importorg.springframework.web.bind.annotation.*;importjava.util.ArrayList;importjava.util.List;@RequestMapping("/Message")@RestControllerpublicclassMessageController{// 存储留言的列表（模拟数据库存储）privateList<MesseageInfo> messeageInfoList =newArrayList<>();/** * 发布留言接口：使用 @RequestBody 接收 JSON 数据 */@PostMapping("/publish")publicBooleanpublish(@RequestBodyMesseageInfo messeageInfo){// 参数校验if(!StringUtils.hasLength(messeageInfo.getFrom())||!StringUtils.hasLength(messeageInfo.getTo())||!StringUtils.hasLength(messeageInfo.getMessage())){returnfalse;} messeageInfoList.add(messeageInfo);returntrue;}/** * 获取留言列表接口：返回 JSON 数组 */@GetMapping("/getList")publicList<MesseageInfo>getList(){return messeageInfoList;}}
MesseageInfo.java (数据传输对象 DTO)

使用 Lombok 的 @Data 注解自动生成 Getter/Setter。

packagecn.overthinker.springboot;importlombok.Data;@Data// Lombok 注解，自动生成 Getter/Setter, toString, equals等方法publicclassMesseageInfo{privateString from;privateStringto;privateString message;// 注意：前端传的字段名是 message}

3.2 前端代码：message.html

在这里插入图片描述

前端使用 AJAX 发送 JSON 格式的数据。

📋 HTML 代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="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><divclass="container"><h1>留言板</h1><pclass="grey">输入后点击提交，信息将显示在下方</p><divclass="row"><span>谁:</span><inputtype="text"id="from"placeholder="你的名字"></div><divclass="row"><span>对谁:</span><inputtype="text"id="to"placeholder="你想对谁说"></div><divclass="row"><span>说什么:</span><inputtype="text"id="say"placeholder="你的留言内容"></div><inputtype="button"value="提交留言"id="submit"onclick="submit()"><divclass="message-list"></div></div><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>// 页面加载时自动获取并展示所有留言functionloadMessages(){ $.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();functionsubmit(){varfrom=$('#from').val();var to =$('#to').val();var say =$('#say').val();if(from==''|| to ==''|| say ==''){return;}// 核心联调：发送 JSON 数据 $.ajax({ type:"post", url:"/Message/publish",// 1. 设置 Content-Type 为 application/json contentType:"application/json",// 2. 使用 JSON.stringify 将 JS 对象转换为 JSON 字符串 data:JSON.stringify({from:from, to: to,// 注意：前端字段名为 message，与后端 DTO 匹配 message: say }),success:function(result){if(result){// 提交成功后重新加载列表loadMessages();// 清空输入框$('#from').val("");$('#to').val("");$('#say').val("");}else{alert("添加留言失败，请检查输入");}}});}</script></body></html>

3.3 联调重点解析：@RequestBody 与 JSON

  • @RequestBody：这是 Spring Boot 接收 JSON 数据的关键注解。它告诉 Spring MVC：请将 HTTP 请求体（Request Body）中的 JSON 字符串解析，并自动映射到方法参数 MesseageInfo messeageInfo 对象中。
  • 前端 contentType: "application/json"：前端必须设置此头信息，告诉服务器发送的是 JSON 格式数据。
  • 前端 JSON.stringify(...)：JavaScript 的内置方法，用于将一个 JS 对象（如 {from: 'A', to: 'B', message: 'Hello'}）转换为后端能够识别的 JSON 字符串。
  • JSON 字段匹配：前端 JSON 中的键（Key）必须与后端 DTO (MesseageInfo) 中的属性名（Field Name）保持一致（例如：message 对应 private String message;）。

4. 总结：前后端联调模式对比

联调模式案例核心机制后端注解/参数接收优点缺点
Form 表单提交求和计算器浏览器直接跳转/刷新页面方法参数名匹配简单、无需 JavaScript用户体验差、无法精细控制
AJAX (Query String)登录系统 (GET/POST)异步通信（无刷新）方法参数名匹配用户体验好、可局部更新仅适用于少量简单数据
AJAX (JSON)留言板异步通信（无刷新）@RequestBody 接收 DTO传输复杂结构数据、最常用需要配置 Content-Type 和 JSON.stringify

若你在学习过程中遇到其他问题，或有好的学习经验分享，欢迎在评论区留言！一起交流进步🌟

在这里插入图片描述

Read more

基于 Q-learning 的三维无人机动态避障导航算法设计与实现（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭：行百里者，半于九十。 📋📋📋本文内容如下：🎁🎁🎁  ⛳️赠与读者 👨‍💻做科研，涉及到一个深在的思想系统，需要科研者逻辑缜密，踏实认真，但是不能只是努力，很多时候借力比努力更重要，然后还要有仰望星空的创新点和启发点。建议读者按目录次序逐一浏览，免得骤然跌入幽暗的迷宫找不到来时的路，它不足为你揭示全部问题的答案，但若能解答你胸中升起的一朵朵疑云，也未尝不会酿成晚霞斑斓的别一番景致，万一它给你带来了一场精神世界的苦雨，那就借机洗刷一下原来存放在那儿的“躺平”上的尘埃吧。      或许，雨过云收，神驰的天地更清朗.......🔎🔎🔎 💥第一部分——内容介绍 基于 Q-learning 的三维无人机动态避障导航方法研究 摘要 针对低空复杂三维环境下无人机自主飞行的安全与路径优化问题，本文提出一种基于 Q-learning 强化学习的无人机导航与避障方法。该方法在离散化三维空间

801-203_各无人机厂家对RemoteID支持情况汇总

1. 大疆DJI 参考链接：大疆无人机RemoteID支持情况 DJI航拍无人机的RID广播信息包含以下信息： 1. ID等身份认证 2. 无人机的纬度、经度、几何高度和速度 3. 控制站的纬度、经度和几何高度的指示 4. 时间信息、紧急状态信息 支持RID的航拍无人机型号 大疆无人机支持RID型号列表 序号无人机机型支持情况备注1DJI Mavic 4 Pro支持2DJI Flip支持3DJI Air 3S支持4DJI Neo支持WIFI直连模式下和脱控模式下不支持5DJI Mini 4K支持V01.07.0400 及以后6DJI Avata 2V01.00.0300 及以后7DJI Mini 4 Pro支持V01.00.0400 及以后8DJI Air 3支持V01.00.1200 及以后9DJI Mini 3支持V01.
AirSim无人机仿真入门（一）：实现无人机的起飞与降落

AirSim无人机仿真入门（一）：实现无人机的起飞与降落

概述： 安装好所需要的软件和环境，通过python代码控制无人机进行起飞和降落。 参考资料： 1、知乎宁子安大佬的AirSim教程（文字教程，方便复制） 2、B站瑜瑾玉大佬的30天RL无人机仿真教程（视频教程，方便理解） 3、AirSim官方手册（资料很全，不过是纯英文的） AirSim无人机仿真入门（一）：实现无人机的起飞与降落 * 1 安装AirSim * 1.1 参考教程 * 1.2 内容梳理 * 1.3 步骤总结 * 2 开始使用 AirSim * 2.1 参考教程 * 2.2 内容梳理 * 2.3 步骤总结 * 3 撰写python控制程序 * 3.1 参考教程 * 3.2 内容梳理
FLUX.2[klein]开源！小香蕉平替，本地部署AI绘画的极简方案

FLUX.2[klein]开源！小香蕉平替，本地部署AI绘画的极简方案

文章目录 * 前言 * 一、FLUX.2[klein]到底香在哪？ * 二、部署前准备：硬件+环境一键搞定 * 1. 硬件要求（最低配置） * 2. 环境安装（3行命令搞定） * 三、极简部署方案：2种方式任选（新手首选方式1） * 方式1：Python脚本一键运行（纯代码，无界面，最快上手） * 步骤1：创建运行脚本 * 步骤2：运行脚本 * 方式2：ComfyUI可视化部署（适合喜欢拖拽操作的用户） * 步骤1：安装ComfyUI * 步骤2：下载FLUX.2[klein]模型 * 步骤3：启动ComfyUI并加载工作流 * 四、常见问题&优化技巧 * 1. 显存不足怎么办？ * 2. 模型下载慢/