基于 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

Web To App (web网页一键打包成android Apk文件)

引言 随着公司业务的快速发展，我们计划推出一款面向移动端用户的应用。然而，当前开发团队主要由 Web 前端工程师组成，缺乏原生 Android 开发经验。在完成 Web 版本的业务系统后，产品团队提出了一个关键需求：希望将现有的 Web 网站“安装”到用户的 Android 手机上，以提供类似原生 App 的使用体验。 面对这一需求，我主动承接了“将 Web 应用打包为 Android APK”的任务，并着手寻找一种对 Web 团队友好、低门槛且可自动化的实现方案。 现状与挑战 传统上，将 Web 内容封装为 Android 应用（通常称为“Web App 套壳”）需要搭建完整的 Android 开发环境。
音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目 * 项目概述 * 项目视图效果 * 一、侧边栏相关代码 * （一）HTML代码 * （二）css代码 * 二、登录页面 * （一）HTML代码 * （二）css代码 * （三）js代码 * 三、剩余代码以及所有源代码Gitee地址 项目概述 在当今数字化时代，音乐已然成为人们生活中不可或缺的一部分。本次带来的音乐播放器 HTML 项目，旨在打造一个具备基础且实用功能的音乐播放平台。通过 HTML、CSS 和 JavaScript 等前端技术的巧妙融合，实现一个界面美观、操作便捷的音乐播放器，满足用户在本地浏览音乐库、播放音乐等多样化需求。 提示！！！！ 由于项目代码太多，代码全部内容放置在我的Gitee码云中，需要的小伙伴们自取 我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/

Web 应用开发核心：登录注册接口设计与实现全解析

在 Web 应用开发中，登录注册接口是用户与系统交互的第一道门槛，也是保障系统安全、提升用户体验的关键环节。无论是简单的个人博客，还是复杂的电商平台、SaaS 系统，稳定、安全、易用的登录注册功能都是基础中的基础。本文将从核心概念、技术选型、设计规范、安全防护、常见问题等维度，全面拆解登录注册接口的开发知识点，助力开发者打造可靠的用户认证体系。 一、登录注册接口的核心定位与业务价值 登录注册接口本质是用户身份认证与授权的入口，核心职责包括： 1. 身份核验：验证用户提交的凭证（账号密码、验证码等）是否合法； 2. 会话管理：为合法用户创建会话，维护登录状态； 3. 数据安全：保护用户敏感信息（密码、手机号等）在传输和存储过程中的安全； 4. 用户体验：简化注册流程、降低登录门槛，同时提供找回密码等兜底方案。 其业务价值直接影响产品留存：注册流程繁琐会导致用户流失，登录安全漏洞可能引发数据泄露，而稳定的会话管理则是保障用户持续使用的基础。 二、
【前端地图】地图覆盖物：折线（Polyline）与多边形（Polygon）——绘制路线、区域围栏、编辑图形、图形交互

【前端地图】地图覆盖物：折线（Polyline）与多边形（Polygon）——绘制路线、区域围栏、编辑图形、图形交互

🌏第 5 节 地图覆盖物：折线（Polyline）与多边形（Polygon）完全指南 1. 🤓 引言：老曹的吐槽时间 📢 各位童鞋，欢迎来到第 5 节。如果说上一节的 Marker 是地图上的“图钉”，那今天的 Polyline 和 Polygon 就是地图上的“绳子”和“圈地”。老曹我得先泼盆冷水：画点容易画线难，画完还得防穿帮。你以为画个折线就是连几个点？天真！坐标系偏一点，线就飘到海里去了；多边形少个闭合点，区域就漏风了。当年老曹我为了画一个精准的园区围栏，跟产品经理吵了三天，就因为他说“这个角不够圆润”。今天咱们就把这些矢量覆盖物彻底搞懂，别到时候画个三角形像个圆，那就丢人丢到太平洋了。🌊 🗺️ 矢量图形是地图业务的核心，无论是物流路线、行政区域还是电子围栏，都离不开它们。但这玩意儿比 Marker