SpringBoot + jQuery 留言板实战：从零实现完整前后端交互

前两天帮人评估一个毕设选题对方发来一句“基于 SpringBoot jQuery 实现留言板功能”。我一看这个题目第一反应是简单再往深里想其实不简单。留言板这个功能看着不起眼但拆开来看后端要做 HTTP 接口、数据库读写、参数校验、分页查询前端要做表单提交、异步渲染、列表更新、事件绑定一条完整的 Web 开发基本功链路全在里面。换句话说一个留言板写明白了前后端交互这套底子就算真正打扎实了。这篇文章我打算把整个流程完整走一遍从技术选型怎么定、数据表怎么设计、接口怎么规划到 SpringBoot 后端代码怎么写、jQuery 前端怎么发 Ajax、怎么渲染页面再讲到高频问题的排查思路。适合刚接触 SpringBoot 的初学者也适合要交毕设、或者想在内部系统里快速搭一个反馈留言模块的在职开发。全篇基于我实际验证过的配置和代码你可以直接照着抄。1. 项目设计与技术选型拆解这套组合为什么不过时1.1 留言板功能的真实定位很多人在评估这种项目时都会低估它觉得“不就是个增删改查嘛”。但实际上留言板在不同场景下的定位差别很大。教学项目里它是为了覆盖 Web 开发的主要知识点毕设场景里它是系统里的用户交互入口通常配合一个后台管理系统给普通用户提供反馈问题的通道真实业务里它可能就是一个产品的意见反馈区。定位不同功能的弹性很大但核心链路是一样的用户在前端输入信息前端通过 Ajax 提交到后端接口后端做校验并写入数据库前端再从接口拉数据渲染成列表。这个项目恰好是这套链路的最小完整闭环所以我一直觉得它比“图书管理系统”更适合练手。图书管理要处理的字段多、分类多反而容易把学习者的注意力从核心链路上移开。留言板字段少昵称、内容、时间、IP 就够用但交互一点都不少该覆盖的技术点都能覆盖到。你把这个项目完整吃透后面再去做更复杂的系统底子是稳的。1.2 SpringBoot jQuery为什么这个组合依然值得做先说 SpringBoot。它最大的价值不是“帮你写代码”而是帮你把环境搭起来、把配置收拢、把依赖管好。基于 SpringBoot 的 Web 项目引入 spring-boot-starter-web 之后内嵌 Tomcat 直接启动不需要额外部署 war 包web.xml、Spring 配置文件这类传统 SSM 项目里繁琐的东西都可以省掉。这对开发者的意义在于精力可以放在业务逻辑上而不是放在“怎么让框架跑起来”上。SpringBoot 的自动配置也是一个很实用的机制数据源、MyBatis、Jackson 这些组件的默认行为都帮你配好了你只需要关心要覆盖的部分。再说 jQuery。很多人觉得它是老古董但在留言板这种场景里价值很明显。jQuery 对 Ajax 的封装非常轻量$.get、$.post、$.ajax几个方法就能覆盖大部分场景DOM 操作上$(#id).html()这种方式比原生document.getElementById写起来顺手得多对初学者几乎没有门槛。更关键的是大量存量系统尤其是企业内部管理系统前端仍然是 jQuery 主导你会这个技能维护老系统时就是实打实的竞争力。这个组合还有一个隐性优点前后端边界清楚。SpringBoot 只出 JSON 接口前端页面用 jQuery 发异步请求渲染分工明确调试起来也方便。它不像某些前后端不分的 JSP 项目页面里混着 Java 代码改个样式都要重启服务。你先把这条链路吃透之后再切换到 Vue、React 那套前后端分离架构思路是相通的。1.3 借这个话题说清楚jQuery 到底还有没有必要学这个问题在国内技术社区几乎每隔一段时间就要讨论一轮。我的观点很务实如果你是零基础入门可以直接从原生 JavaScript 加 Vue 或 React 起步因为新项目在选型上确实很少再用 jQuery但如果你将来要接触真实的企业项目、毕业设计、外包系统jQuery 要求你“会读、能改、能修”这一点是绕不开的。我带项目的一个体会是“有必要学”和“有必要深入学”是两回事。jQuery 不需要像 Vue、React 那样钻研组件化、状态管理、虚拟 DOM你只需要掌握四个核心能力选择器、事件绑定、Ajax 封装、链式操作再配合一点原生 JS 基础就足够维护绝大多数老系统。一句话总结不把它当前端主力但它是重要的存量技能。用它来做留言板恰好是性价比最高的练法不会陷入框架复杂度又能把前后端交互的底子打扎实。2. 前端与后端整体方案设计表结构、接口与页面2.1 数据表设计一个字段一个字段抠清楚留言板最少只需要一张表。我实际项目中常用的是下面这个结构CREATE TABLE message ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键, nickname varchar(50) NOT NULL COMMENT 留言昵称, content varchar(1000) NOT NULL COMMENT 留言内容, ip varchar(64) DEFAULT NULL COMMENT 留言IP, like_count int NOT NULL DEFAULT 0 COMMENT 点赞数, status tinyint NOT NULL DEFAULT 0 COMMENT 状态0显示 1隐藏 2删除, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 留言时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT留言表;这里有两个容易被忽略的点。第一字符集一定要用 utf8mb4不要用 utf8。MySQL 里的 utf8 实际最多只能存 3 个字节遇到 emoji 或者生僻字就会直接报错而 utf8mb4 是完整 UTF-8 编码能存 4 字节内容。第二create_time 用 datetime 而不要用 timestamp。timestamp 有 2038 年问题而且受时区影响跨时区场景下处理起来比较麻烦。nickname 和 content 加上 NOT NULL 约束同时长度一定要限制。昵称 50 个字符足够内容 1000 也够用但这个限制前后端都要做。后端不校验的话一条超长内容把页面撑爆是小事程序里可能直接内存溢出或 SQL 报错。status 字段是给管理场景预留的没有管理端需求可以去掉但我建议保留它可以避免“想删留言时只能物理删除”的尴尬。物理删除数据是事后很容易后悔的操作尤其是留言里有关键反馈信息的时候。like_count 是低成本的高频互动字段加一个点赞功能会让项目看起来完整很多。2.2 后端接口规划明确每一个接口的职责后端接口的设计会直接影响前端写起来爽不爽。我的做法是规定一个统一的返回结构比如{ code: 0, msg: success, data: ... }前端拿到之后先判断 code再决定走成功逻辑还是失败逻辑这样 Ajax 回调里的判断就完全统一了。对比一下如果你一个接口直接返回字符串另一个接口返回 JSON前端每个请求都要单独写一套解析逻辑维护起来非常痛苦。接口列表可以定为这四个POST /api/message/add提交留言GET /api/message/list分页查询留言列表DELETE /api/message/{id}删除留言POST /api/message/{id}/like点赞list 接口的分页参数用 page 和 size排序规则固定为 create_time 倒序。关于分页我要强调一点一定用数据库分页也就是 LIMIT/OFFSET不要先查出全表数据再在内存里截取。初学者最常见的错误就是把ListMessage全查出来然后用 subList 切割。数据量只有几十条的时候看不出来问题一旦到了几千条接口延迟会明显上升数据库压力也白白浪费。2.3 前端页面结构设计静态页面还是模板引擎前端我推荐两种方案一种是纯静态 HTML 页面加 jQuery通过 Ajax 调用后端 JSON 接口另一种是用 Thymeleaf 模板直接渲染首屏列表翻页和提交继续用 jQuery。两种我都验证过。第一种更贴近前后端分离的思想适合接口型项目第二种适合不想单独部署前端静态页、希望一个 SpringBoot 应用搞定全部的场景。这里顺便提一下 Thymeleaf 热更新。开发环境下在 application.yml 里关闭模板缓存也就是设置spring.thymeleaf.cachefalse再配合 spring-boot-devtools改完 HTML 模板后刷新浏览器就能看到效果不用重启服务。很多人问“模板改了没反应”八成就是缓存没关这个问题在开发阶段特别影响效率。页面结构上单页面只需要四个区域留言发布表单包括昵称输入框、内容输入框、提交按钮留言列表区每条记录显示昵称、内容、时间、点赞按钮分页条上一页、页码、下一页再加一个提示区用于显示“提交中”或“提交成功”等状态。这个结构已经足够不需要过度设计成多页面或路由。留言板的核心价值在交互和数据链路不在页面数量。3. 实战落地从零把留言板跑起来3.1 项目初始化与依赖配置先说版本选型。我推荐 SpringBoot 2.7.18 加 JDK 8/11再配 MyBatis-Plus 3.5.x 和 MySQL 5.7/8.0。原因很简单2.7.18 是 SpringBoot 2.x 的最后一个版本成熟稳定兼容性好网上资料多市面上绝大多数存量项目都在这个体系内。如果你非要上 SpringBoot 3.x那就需要 JDK 17 以上需要注意 jakarta 命名空间、部分依赖兼容性问题对初学者来说没必要一上来就挑战这些差异。很多人说“SpringBoot 版本太高导致各种奇怪问题”多数就是依赖没跟上版本导致的兼容性踩坑。用 IDEA 创建项目时选择 Spring InitializrGroup 填 com.exampleArtifact 填 message-boardJava 版本选 8 或 11依赖先勾 Spring Web然后手动往 pom.xml 里补 MyBatis-Plus 和 MySQL 驱动。核心依赖如下dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency这里有两个提醒。第一mybatis-plus-boot-starter 版本尽量别用太老的3.5.x 跟 SpringBoot 2.7 配合是经过大量项目验证的组合。第二MySQL 8.0 的驱动类名是com.mysql.cj.jdbc.Driver不是老的com.mysql.jdbc.Driver。我见过不少复制旧项目代码导致启动直接报 Driver 相关错误的这类问题排查起来会很浪费时间。application.yml 配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/message_board?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密码 mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: autourl 里的参数不要乱删。useUnicodetruecharacterEncodingutf8保证写入中文不乱码useSSLfalse避免 MySQL 8 在本地连接时提示 SSL 问题serverTimezoneAsia/Shanghai解决数据库时间和 Java 时间相差 8 小时的问题。密码如果含特殊字符比如 、#直接在 yml 里用单引号包起来比如password: abc123否则 YAML 解析会报错。数据库密码这类配置实际项目中一般会放到环境变量或配置中心但开发阶段先写本地配置没问题。3.2 后端核心代码实现先写实体类。字段和数据库表对应用 Lombok 的Data省去 getter/setter 的重复代码Data TableName(message) public class Message { TableId(type IdType.AUTO) private Long id; private String nickname; private String content; private String ip; private Integer likeCount; private Integer status; private LocalDateTime createTime; }TableId(type IdType.AUTO)对应数据库自增主键。这个注解很容易被忽略如果你不加MyBatis-Plus 默认按雪花算法生成 ID插入时就会带上一个很大的数字 ID跟数据库自增行为对不上。实体类里createTime用LocalDateTime比老的Date类型更符合现代 Java 开发习惯配合 Jackson 序列化也没有时区烦恼。Mapper 接口只需要继承 BaseMapperMapper public interface MessageMapper extends BaseMapperMessage { }MyBatis-Plus 的 BaseMapper 已经提供了基础的单表增删改查和分页能力这个项目规模下不需要写任何 SQL 方法。如果你熟悉 XML 映射文件也不是不能用但在留言板这种场景里使用 BaseMapper 反而更省事。分页插件配置是很容易漏的一步Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }千万别漏了这个配置。很多人照着网上的代码写分页发现返回的 total 一直是 0或者压根不分页排查半天才发现是缺少分页插件。MyBatis-Plus 本身是增强包它的分页拦截器才是真正负责把普通查询改写成带 LIMIT 语句的组件。Controller 是项目的核心。我通常会把统一返回结果做成一个通用类Data public class ResultT { private Integer code; private String msg; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.code 0; r.msg success; r.data data; return r; } public static T ResultT error(String msg) { ResultT r new Result(); r.code 1; r.msg msg; return r; } }Controller 的完整实现RestController RequestMapping(/api/message) public class MessageController { Resource private MessageMapper messageMapper; PostMapping(/add) public ResultMessage add(RequestBody Message message, HttpServletRequest request) { String nickname message.getNickname(); String content message.getContent(); if (nickname null || nickname.trim().isEmpty() || nickname.length() 20) { return Result.error(昵称不能为空且最长20个字符); } if (content null || content.trim().isEmpty() || content.length() 200) { return Result.error(留言内容不能为空且最长200个字符); } message.setNickname(cleanXss(nickname)); message.setContent(cleanXss(content)); message.setIp(getIp(request)); message.setLikeCount(0); message.setStatus(0); message.setCreateTime(LocalDateTime.now()); messageMapper.insert(message); return Result.success(message); } GetMapping(/list) public ResultIPageMessage list(RequestParam(defaultValue 1) long page, RequestParam(defaultValue 5) long size) { size Math.min(size, 50); PageMessage pageParam new Page(page, size); QueryWrapperMessage wrapper new QueryWrapper(); wrapper.eq(status, 0).orderByDesc(create_time); return Result.success(messageMapper.selectPage(pageParam, wrapper)); } PostMapping(/{id}/like) public ResultInteger like(PathVariable Long id) { Message message messageMapper.selectById(id); if (message null) { return Result.error(留言不存在或已删除); } message.setLikeCount(message.getLikeCount() 1); messageMapper.updateById(message); return Result.success(message.getLikeCount()); } private String cleanXss(String text) { if (text null) { return null; } return text.replaceAll([^]*, ).trim(); } }add 接口里做了三层事情基本校验、IP 记录、XSS 清洗。校验逻辑放在 Controller 层是允许的但如果项目更正规我建议把这些校验迁移到 Service 层Controller 只做参数接收Service 管业务规则。IP 获取要兼容有 Nginx 反代的情况代码写成工具方法public static String getIp(HttpServletRequest request) { String ip request.getHeader(X-Forwarded-For); if (ip null || ip.isEmpty() || unknown.equalsIgnoreCase(ip)) { ip request.getHeader(X-Real-IP); } if (ip null || ip.isEmpty() || unknown.equalsIgnoreCase(ip)) { ip request.getRemoteAddr(); } if (ip ! null ip.contains(,)) { ip ip.split(,)[0].trim(); } return ip; }需要说明的是X-Forwarded-For这个请求头在理论上是可以被客户端伪造的所以这个 IP 更适合作为参考信息而不是安全判断依据。留言板记录 IP 主要用于运营侧分析比如看留言来源分布不需要做到百分百精确。3.3 前端页面与 jQuery 交互实现前端页面我用纯静态 HTML 加 jQuery 来演示。页面文件放在src/main/resources/static目录下SpringBoot 天然支持访问。HTML 骨架核心部分!DOCTYPE html html langzh-CN head meta charsetUTF-8 title留言板/title script srcjs/jquery.min.js/script script srcjs/message.js/script /head body div classmb-form input typetext idnickname placeholder你的昵称 maxlength20 textarea idcontent placeholder说点什么... maxlength200/textarea button idsubmitBtn提交留言/button /div div idmessageList/div div idpagination button idprevBtn上一页/button span idpageInfo/span button idnextBtn下一页/button /div /body /html提交留言的 jQuery 代码$(#submitBtn).on(click, function () { var nickname $(#nickname).val().trim(); var content $(#content).val().trim(); if (!nickname || !content) { alert(昵称和内容不能为空); return; } $.ajax({ url: /api/message/add, type: POST, contentType: application/json, data: JSON.stringify({ nickname: nickname, content: content }), dataType: json, success: function (res) { if (res.code 0) { $(#nickname).val(); $(#content).val(); loadMessages(1); } else { alert(res.msg); } } }); });加载列表的 jQuery 代码是核心中的核心翻页、删除、点赞都要依赖它var currentPage 1; function loadMessages(page) { $.get(/api/message/list, { page: page, size: 5 }, function (res) { if (res.code ! 0) return; var records res.data.records; var html ; records.forEach(function (item) { html div classmessage-item div classmsg-head span classnickname escapeHtml(item.nickname) /span span classtime formatTime(item.createTime) /span /div div classmsg-content escapeHtml(item.content) /div button classlike-btn>function escapeHtml(text) { return String(text) .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #39;); }点赞按钮是动态渲染出来的所以不能用$(.like-btn).on(click, ...)这种直接绑定的方式。第一次加载没问题但翻页后新生成的按钮事件绑定时节点还不存在。正确写法是事件委托把监听挂在父容器上让子元素的事件冒泡过来$(#messageList).on(click, .like-btn, function () { var id $(this).data(id); $.post(/api/message/ id /like, function (res) { if (res.code 0) { loadMessages(currentPage); } }); });事件委托是 jQuery 动态列表项目里的标配写法一定要养成习惯。这套代码跑通后留言板核心功能就完成了页面加载列表、提交留言、异步刷新、点赞交互一条链路全部打通。3.4 启动验证与联调要点启动 SpringBoot 应用后控制台会打印内嵌 Tomcat 的端口信息。先用浏览器直接访问http://localhost:8080/index.html看页面是否正常加载再用 Postman 测接口。我建议验证顺序是POST /api/message/add提交一条留言确认返回 code0GET /api/message/list?page1size5看列表是否有数据浏览器刷新页面看列表能否正常渲染提交按钮走一遍完整流程如果控制台没有输出 SQL 日志检查 application.yml 里log-impl配置是否配了StdOutImpl。不配的话 MyBatis-Plus 默认不打 SQL出了问题很难定位到底发的什么 SQL、参数是什么。这条配置在开发阶段几乎是必备的。如果页面样式乱了检查一下引用的 jquery.min.js 是否存在本地静态资源 404 是新手高频问题。4. 踩坑排雷留言板项目里的高频问题与排查思路我按出现频率从高到低写这些是我实际带项目和评审代码时见过最多的问题。有些看起来基础但越基础越容易卡人。4.1 启动报错Required a bean of type MessageMapper这个问题问率最高。报错信息一般是Field messageMapper in com.example...MessageController required a bean of type com.example...MessageMapper that could not be found。原因就两大类Mapper 接口没被扫描到或者没加Mapper注解。排查步骤是确认 Mapper 接口上有没有Mapper确认启动类有没有MapperScan(com.example.messageboard.mapper)包名一定要对得上。注意MapperScan扫描的是接口包不是 Controller 包别复制粘贴时把包路径写错。4.2 接口 404 与静态资源访问不到如果静态页面 404确认页面是否放在src/main/resources/static目录下SpringBoot 默认只在这个目录及子目录查找静态资源。如果接口 404检查 Controller 的RequestMapping路径和前端请求路径是否完全一致包括大小写、末尾斜杠这两个细节。另外如果你在 application.yml 里改了server.servlet.context-path那前端所有请求都必须带上这个前缀忘了这件事就会全部 404。还有一个隐蔽的情况Controller 类上写了RequestMapping(/api/message)方法上又写了RequestMapping(/list)正常请求/api/message/list是对的但如果方法上写的是RequestMapping(/list/)访问/api/message/list反而会 404。这类小坑最耗时间遇到接口不通时先看控制台有没有打印请求进来了再逐级对比路径。4.3 中文乱码与时间差 8 小时乱码分两种。写入数据库之前就乱码几乎都是连接串的characterEncoding参数没加或者数据库表的字符集不是 utf8mb4数据库里中文正常、页面拿到的接口数据乱码需要检查文件编码是不是 UTF-8尤其是 HTML、JS、Java 文件。IDEA 右下角可以看到当前文件编码统一改成 UTF-8 即可。时间差 8 小时通常出现在 MySQL 和 Java 时区不一致。我在配置里写了serverTimezoneAsia/Shanghai从数据库连接这一层统一了时区实体类里字段用LocalDateTime也减少了很多序列化上的时区问题。如果已经出现数据差 8 小时先检查连接串有没有时区参数再查 MySQL 的时区变量SHOW VARIABLES LIKE %time_zone%。前端显示时如果时间格式不好看可以加上JsonFormat(pattern yyyy-MM-dd HH:mm:ss)注解或者在前端做格式化处理。4.4 分页返回 total0 或者不分页同样在前面提过最典型的原因是没配分页插件。另一个原因是用了错误方法比如查数据用了selectList而不是selectPage。还有一些人会在 QueryWrapper 里手工拼接last(limit 1)结果 MyBatis-Plus 分页插件生成的 SQL 又带上了 LIMIT数据库直接报语法错误。分页用selectPage加Page参数就完事不要手工拼接 SQL。page 和 size 的接收类型建议直接用 longPage底层的分页参数就是 long 类型没必要转换成 int 再转回来。前端传的 page 从 1 开始后端不要自作聪明地做减一操作先约定好规则两端都按同一个规则走免得数据错位。4.5 动态渲染的坑事件绑定失效与 XSS动态渲染的按钮绑定事件我前面已经给出解决方案事件委托。这里再补充一个细节$(this).data(id)拿到的可能是字符串如果你的 ID 后续要参与算术运算或严格比较需要先转成数字用Number()或parseInt()处理。XSS 攻击在留言板场景里必须正视。后端我在 Controller 里做了一个简单的去除标签处理这能挡住一部分粗糙的脚本注入但防不住所有情况。更严谨的做法是引入 Jsoup 这类库做 HTML 清洗比如Jsoup.clean(input, Safelist.basic())。后端防线是必须有的因为前端校验只针对正常用户绕过前端直接调接口是毫无难度的事。4.6 留言板常见问题速查表现象排查顺序大概率原因启动提示 MessageMapper 找不到看 Mapper/MapperScan包扫描路径不对或注解漏了静态页面 404看 static 目录、文件位置页面没有放在 resources/static 下接口 404对比请求路径、看控制台日志路径不一致或 context-path 缺失中文乱码看连接串、文件编码characterEncoding 没配或文件不是 UTF-8时间差 8 小时看连接串时区、MySQL 时区缺 serverTimezone 参数分页 total0看分页插件配置MybatisPlus 分页拦截器缺失动态按钮不响应看事件绑定方式没有使用事件委托点赞失败看请求 URL、data-id动态渲染的数据属性丢失或数据类型不对这张表基本覆盖了留言板项目里八成以上的入门问题。如果你已经跑通了整个项目遇到问题先对照这张表过一遍能省下大量搜索时间。4.7 容易忽略的细节逻辑删除与后续扩展留言删除不要用物理删除。MyBatis-Plus 支持TableLogic逻辑删除在实体类的 status 字段上加上注解后调用deleteById会变成UPDATE message SET status2 WHERE id?查询时也会自动过滤已删除数据。这样设计的好处是数据可追溯万一哪天想恢复某条留言或者做审计分析数据还在。要注意 config 里的逻辑删除配置需要跟你表结构里的 status 含义对应比如logic-delete-value: 2、logic-not-delete-value: 0。项目跑通之后扩展方向很自然加一个管理端页面做留言审核和删除留言内容支持楼层回复点赞数改成 Redis 计数器再异步落库静态页面换成 Vue 或 React 单页应用后端接口不用动。这些都是常见的演化路径但前提是你先把当前这条前后端链路吃透后面只是换皮和加模块的问题。最后说点个人体会。留言板这个项目我前后带过的学生和同事加起来得有几十个版本但几乎每次都能遇到新的问题这恰好说明越是基础的项目越能检验你对 Web 开发的理解是不是成体系的。如果你照着上面的代码跑通了我建议你别急着丢开试着再加一个功能比如“管理员删除留言时要求输入密码”或者“不同用户看到不同状态的留言”。加功能的过程才是真正把它变成你自己项目的过程。另外一个务实的建议跑通之后把整个项目用 Maven 打成 jar 包用 Docker 部署到服务器上试试。中间会遇到静态资源路径、数据库连接、端口占用、时区设置等一系列问题但这些都是生产环境必考的题目早踩坑早省事。等你能在浏览器里通过域名或 IP 访问到自己独立部署的留言板时SpringBoot 加 jQuery 这个组合你就算真正拿下了。