基于 SpringBoot + jQuery 实现留言板功能

基于 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);}}