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

前端趋势：别被时代抛弃

前端趋势：别被时代抛弃 毒舌时刻 这代码写得跟博物馆似的，都是过时的技术。 各位前端同行，咱们今天聊聊前端趋势。别告诉我你还在使用过时的技术，那感觉就像在 5G 时代还在用 2G 网络——能用，但慢得要命。 为什么你需要关注前端趋势 最近看到一个项目，还在使用 React 16，不知道 React 18 的并发模式。我就想问：你是在做开发还是在做考古？ 反面教材 // 反面教材：使用过时技术 // App.jsx import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState([]); const [loading, setLoading] = useState(true)
Java+Leaflet:湖南省道路长度WebGIS的构建与实践

Java+Leaflet:湖南省道路长度WebGIS的构建与实践

目录 前言 一、基础空间数据简介 1、涉及相关表 2、省域道路长度检索 二、Java后台实现 1、道路视图对象 2、Mapper空间检索查询 3、控制API实现 三、WebGIS界面实现 1、里程图例及初始化 2、各地市信息展示 四、成果展示 1、总体展示 2、分区域说明 五、总结 前言         在当今数字化时代，地理信息系统（GIS）技术在各个领域都发挥着至关重要的作用。它不仅为城市规划、交通管理、环境保护等提供了强大的技术支持，也为公众获取地理信息提供了便捷的途径。湖南省作为中国中部地区的重要省份，拥有复杂的地理环境和庞大的交通网络。如何高效地管理和展示湖南省的道路长度信息，对于交通规划、物流运输以及公众出行都具有极其重要的意义。因此，我们开展了基于Java和Leaflet的湖南省道路长度WebGIS系统的构建与实践研究。         湖南省地处中国中部，交通网络密集且复杂。随着经济的快速发展和城市化进程的加快，湖南省的道路建设不断推进，
Flutter Web 开发：解决跨域（CORS）问题的终极指南

Flutter Web 开发：解决跨域（CORS）问题的终极指南

Flutter Web 开发：解决跨域（CORS）问题的终极指南 在 Flutter Web 开发过程中，默认情况下浏览器会遵循同源策略。当你的应用尝试加载不同域名的网络资源（如 API 接口、图片等）时，经常会遇到 CORS（跨域资源共享） 错误，导致请求失败。 虽然生产环境应由后端配置 CORS 头来解决，但在本地开发和调试阶段，我们可以通过修改 Flutter 工具链源码来临时禁用浏览器的安全策略，从而顺利调试。 以下是详细的操作步骤： 🛠️ 操作步骤 第一步：定位 chrome.dart 文件 首先，你需要找到 Flutter SDK 中负责启动 Chrome 浏览器的配置文件 chrome.dart。 参考路径（请根据你的实际安装路径调整）： <你的
深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例

深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例

深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例 📌 引言 在前端开发中，我们经常需要处理高频事件（如输入框输入、滚动、窗口调整大小等）。如果不加限制，浏览器会频繁触发回调函数，导致性能问题，甚至页面卡顿。 防抖（Debounce） 和 节流（Throttle） 是两种优化方案，可以有效控制事件触发的频率，提高应用的性能和用户体验。 本篇文章将详细解析 防抖和节流的原理、适用场景及代码实现，帮助你更好地优化前端应用。 1. 什么是防抖（Debounce）？ 📝 概念 防抖是一种在事件触发后延迟执行的技术，如果在延迟期间事件被再次触发，计时器会重置，重新计算延迟时间。 核心思想：短时间内多次触发，只执行最后一次。 📌 适用场景 * 搜索框输入（防止用户每次输入都发送请求） * 窗口调整大小（resize）（防止短时间内多次触发计算） * 表单输入验证（用户停止输入后再进行验证） ✅ 代码实现 functiondebounce(fn,