企业官网建设流程全解析

一键免费搭建手机网站,wordpress教程php二次开发,斌果主题wordpress,东莞网站制作个性化基于 Spring Boot jQuery 实现留言板功能#xff08;完整实战教程#xff09; 本教程将手把手教你使用 Spring Boot 3.x 作为后端 jQuery 作为前端交互#xff0c;实现一个简洁美观的留言板系统。功能包括#xff1a; 查看所有留言#xff08;分页可选#xff09;提交…基于 Spring Boot jQuery 实现留言板功能完整实战教程本教程将手把手教你使用Spring Boot 3.x作为后端 jQuery作为前端交互实现一个简洁美观的留言板系统。功能包括查看所有留言分页可选提交新留言姓名 内容实时刷新显示最新留言基本的表单校验技术栈Spring Boot后端 REST API Thymeleaf可选 jQueryAjax 交互 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 WebSpring Data JPAH2 Database嵌入式数据库方便测试Thymeleaf模板引擎Lombok简化代码步骤 2实体类与数据库配置Message.javapackagecom.example.messageboard.entity;importjakarta.persistence.*;importlombok.Data;importjava.time.LocalDateTime;EntityDatapublicclassMessage{IdGeneratedValue(strategyGenerationType.IDENTITY)privateLongid;privateStringname;Column(columnDefinitionTEXT)privateStringcontent;privateLocalDateTimecreateTimeLocalDateTime.now();}application.ymlresources 下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步骤 3Repository 接口packagecom.example.messageboard.repository;importcom.example.messageboard.entity.Message;importorg.springframework.data.jpa.repository.JpaRepository;importorg.springframework.data.jpa.repository.Query;importjava.util.List;publicinterfaceMessageRepositoryextendsJpaRepositoryMessage,Long{Query(SELECT m FROM Message m ORDER BY m.createTime DESC)ListMessagefindAllOrderByCreateTimeDesc();}步骤 4Controller 实现 REST APIpackagecom.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){returnindex;// 返回 templates/index.html}// 获取所有留言按时间倒序GetMapping(/api/messages)ResponseBodypublicListMessagegetMessages(){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!DOCTYPEhtmlhtmllangzh-CNxmlns:thhttp://www.thymeleaf.orgheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1title留言板/titlelinkhrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/css/bootstrap.min.cssrelstylesheetlinkrelstylesheetth:href{/css/style.css}/headbodyclassbg-lightdivclasscontainer py-5divclassrowdivclasscol-lg-8 mx-autodivclasscard shadowdivclasscard-header bg-primary text-whiteh3classmb-0留言板/h3/divdivclasscard-body!-- 留言表单 --formidmessageFormdivclassmb-3labelclassform-label姓名/labelinputtypetextclassform-controlidnamerequired/divdivclassmb-3labelclassform-label留言内容/labeltextareaclassform-controlidcontentrows4required/textarea/divbuttontypesubmitclassbtn btn-primary提交留言/button/formhr!-- 留言列表 --h5classmt-4所有留言/h5dividmessageListclassmt-3!-- jQuery 动态加载 --/div/div/div/div/div/divscriptsrchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/scriptscriptth:src{/js/main.js}/script/body/html步骤 6jQuery 实现前后端交互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){consttimenewDate(message.createTime).toLocaleString();consthtmldiv classborder rounded p-3 mb-3 bg-white div classd-flex justify-content-between strong${escapeHtml(message.name)}/strong small classtext-muted${time}/small /div p classmt-2 mb-0${escapeHtml(message.content)}/p /div;$(#messageList).append(html);}// 新留言插入顶部functionprependMessage(message){consttimenewDate(message.createTime).toLocaleString();consthtmldiv classborder rounded p-3 mb-3 bg-white animate__animated animate__fadeIn div classd-flex justify-content-between strong${escapeHtml(message.name)}/strong small classtext-muted${time}/small /div p classmt-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.cssbody{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 交互需要完整源码或进一步升级如登录、富文本编辑器随时告诉我我继续帮你完善