按需付费GPU+开源模型：AI部署成本优化策略
2026/1/9 17:13:49
基于 Spring Boot + jQuery 实现留言板功能（完整实战教程）
本教程将手把手教你使用Spring Boot 3.x作为后端 +jQuery作为前端交互，实现一个简洁美观的留言板系统。功能包括：
- 查看所有留言（分页可选）
- 提交新留言（姓名 + 内容）
- 实时刷新显示最新留言
- 基本的表单校验
技术栈：Spring Boot（后端 REST API） + Thymeleaf（可选） + jQuery（Ajax 交互） + Bootstrap（美化）
项目结构概览
messageboard ├── src │ ├── main │ │ ├── java/com/example/messageboard │ │ │ ├── MessageboardApplication.java │ │ │ ├── entity/Message.java │ │ │ ├── repository/MessageRepository.java │ │ │ └── controller/MessageController.java │ │ └── resources │ │ ├── static/css/style.css │ │ ├── static/js/main.js │ │ └── templates/index.html │ └── ... └── pom.xml步骤 1：创建 Spring Boot 项目
使用 https://start.spring.io/ 生成项目，添加依赖：
- Spring Web
- Spring Data JPA
- H2 Database（嵌入式数据库，方便测试）
- Thymeleaf（模板引擎）
- Lombok（简化代码）
步骤 2：实体类与数据库配置
Message.java
packagecom.example.messageboard.entity;importjakarta.persistence.*;importlombok.Data;importjava.time.LocalDateTime;@Entity@DatapublicclassMessage{@Id@GeneratedValue(strategy=GenerationType.IDENTITY)privateLongid;privateStringname;@Column(columnDefinition="TEXT")privateStringcontent;privateLocalDateTimecreateTime=LocalDateTime.now();}application.yml（resources 下）
spring:datasource:url:jdbc:h2:mem:messageboarddriver-class-name:org.h2.Driverusername:sapassword:h2:console:enabled:true# 访问 http://localhost:8080/h2-console 查看数据jpa:hibernate:ddl-auto:updateshow-sql:true步骤 3：Repository 接口
packagecom.example.messageboard.repository;importcom.example.messageboard.entity.Message;importorg.springframework.data.jpa.repository.JpaRepository;importorg.springframework.data.jpa.repository.Query;importjava.util.List;publicinterfaceMessageRepositoryextendsJpaRepository<Message,Long>{@Query("SELECT m FROM Message m ORDER BY m.createTime DESC")List<Message>findAllOrderByCreateTimeDesc();}步骤 4：Controller 实现 REST API
packagecom.example.messageboard.controller;importcom.example.messageboard.entity.Message;importcom.example.messageboard.repository.MessageRepository;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.http.ResponseEntity;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.*;importjava.util.List;@ControllerpublicclassMessageController{@AutowiredprivateMessageRepositorymessageRepository;// 主页（返回 Thymeleaf 模板）@GetMapping("/")publicStringindex(Modelmodel){return"index";// 返回 templates/index.html}// 获取所有留言（按时间倒序）@GetMapping("/api/messages")@ResponseBodypublicList<Message>getMessages(){returnmessageRepository.findAllOrderByCreateTimeDesc();}// 提交新留言@PostMapping("/api/messages")@ResponseBodypublicResponseEntity<?>addMessage(@RequestBodyMessagemessage){if(message.getName()==null||message.getName().trim().isEmpty()||message.getContent()==null||message.getContent().trim().isEmpty()){returnResponseEntity.badRequest().body("姓名和内容不能为空！");}messageRepository.save(message);returnResponseEntity.ok(message);}}步骤 5：前端页面（index.html）
放在src/main/resources/templates/index.html
<!DOCTYPEhtml><htmllang="zh-CN"xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>留言板</title><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"th:href="@{/css/style.css}"></head><bodyclass="bg-light"><divclass="container py-5"><divclass="row"><divclass="col-lg-8 mx-auto"><divclass="card shadow"><divclass="card-header bg-primary text-white"><h3class="mb-0">留言板</h3></div><divclass="card-body"><!-- 留言表单 --><formid="messageForm"><divclass="mb-3"><labelclass="form-label">姓名</label><inputtype="text"class="form-control"id="name"required></div><divclass="mb-3"><labelclass="form-label">留言内容</label><textareaclass="form-control"id="content"rows="4"required></textarea></div><buttontype="submit"class="btn btn-primary">提交留言</button></form><hr><!-- 留言列表 --><h5class="mt-4">所有留言</h5><divid="messageList"class="mt-3"><!-- jQuery 动态加载 --></div></div></div></div></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptth:src="@{/js/main.js}"></script></body></html>步骤 6：jQuery 实现前后端交互（main.js）
放在src/main/resources/static/js/main.js
$(document).ready(function(){// 页面加载时获取留言loadMessages();// 提交表单$('#messageForm').submit(function(e){e.preventDefault();constname=$('#name').val().trim();constcontent=$('#content').val().trim();if(!name||!content){alert('姓名和内容不能为空！');return;}$.ajax({url:'/api/messages',type:'POST',contentType:'application/json',data:JSON.stringify({name:name,content:content}),success:function(newMessage){$('#name').val('');$('#content').val('');// 新留言插入到最顶部prependMessage(newMessage);alert('留言成功！');},error:function(){alert('提交失败，请重试');}});});// 加载所有留言functionloadMessages(){$.get('/api/messages',function(messages){$('#messageList').empty();messages.forEach(message=>{appendMessage(message);});});}// 添加一条留言到列表functionappendMessage(message){consttime=newDate(message.createTime).toLocaleString();consthtml=`<div class="border rounded p-3 mb-3 bg-white"> <div class="d-flex justify-content-between"> <strong>${escapeHtml(message.name)}</strong> <small class="text-muted">${time}</small> </div> <p class="mt-2 mb-0">${escapeHtml(message.content)}</p> </div>`;$('#messageList').append(html);}// 新留言插入顶部functionprependMessage(message){consttime=newDate(message.createTime).toLocaleString();consthtml=`<div class="border rounded p-3 mb-3 bg-white animate__animated animate__fadeIn"> <div class="d-flex justify-content-between"> <strong>${escapeHtml(message.name)}</strong> <small class="text-muted">${time}</small> </div> <p class="mt-2 mb-0">${escapeHtml(message.content)}</p> </div>`;$('#messageList').prepend(html);}// 防止 XSS 攻击functionescapeHtml(text){return$('<div>').text(text).html();}// 可选：每10秒自动刷新// setInterval(loadMessages, 10000);});步骤 7：可选美化样式（style.css）
body{min-height:100vh;}.animate__fadeIn{animation:fadeIn 0.5s;}@keyframesfadeIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}运行与测试
- 启动项目 → 访问 http://localhost:8080
- 输入姓名和内容 → 点击提交
- 新留言实时显示在顶部
- 刷新页面数据持久（H2 内存数据库，重启会丢失，可换 MySQL）
扩展建议
- 换成 MySQL 持久化存储
- 添加分页（Pageable）
- 支持回复、删除（需登录）
- 使用 Vue/React 替换 jQuery
- 添加验证码防刷
这个留言板项目简单优雅，非常适合初学者练习 Spring Boot + 前端 Ajax 交互！
需要完整源码或进一步升级（如登录、富文本编辑器），随时告诉我，我继续帮你完善！🚀