当前位置：首页 > news >正文

【Spring项目】表白墙，留言板项目的实现

news 2026/5/16 10:13:33

阿华代码，不是逆风，就是我疯

你们的点赞收藏是我前进最大的动力！！

希望本文内容能够帮助到你！！

一：项目实现准备

1：需求

2：准备工作

（1）加入前端代码

3：预期结果

二：约定前后端交互接⼝

1：需求分析

（1）提交留⾔

（2）展⽰留⾔

2：接口定义

（1）获取全部留⾔

①路径和格式

②响应

③留言信息形式

④总结

（2）发表新留⾔

①路径和格式

②响应

③总结

三：服务器代码实现

1：定义留⾔对象MessageInfo类

2：创建MessageController类

四：完善前端代码

五：测试

一：项目实现准备

1：需求

（1）输⼊留⾔信息,点击提交.后端把数据存储起来.
（2）⻚⾯展⽰输⼊的表⽩墙的信息

2：准备工作

（1）加入前端代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上    $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}</script>
</body></html>

3：预期结果

二：约定前后端交互接⼝

1：需求分析

后端需要提供两个服务

（1）提交留⾔

⽤⼾输⼊留⾔信息之后,后端需要把留⾔信息保存起来

（2）展⽰留⾔

⻚⾯展⽰时,需要从后端获取到所有的留⾔信息

2：接口定义

（1）获取全部留⾔

①路径和格式

请求路径：/message/getList
请求格式：GET

②响应

JSON格式返回

③留言信息形式

全部留⾔信息,我们⽤List来表⽰,可以⽤JSON来描述这个List数据

④总结

浏览器给服务器发送⼀个GET /message/getList这样的请求,就能返回当前⼀共有哪些留⾔
记录.结果以json的格式返回过来.

（2）发表新留⾔

①路径和格式

请求路径： /message/publish
请求格式：POST

②响应

JSON格式返回.

③总结

我们期望浏览器给服务器发送⼀个 POST /message/publish 这样的请求,就能把当前的留⾔提
交给服务器

三：服务器代码实现

1：定义留⾔对象MessageInfo类

@Data
public class MessageInfo {//@Getter//@Setterprivate String from;private String to;private String message;
}

2：创建MessageController类

使⽤List<MessageInfo>来存储留⾔板信息

@RestController
@RequestMapping("/message")
public class MessageController {//定义一个集合来存储留言信息private List<MessageInfo> messageInfos = new ArrayList<>();@RequestMapping("/publish")public boolean publish(MessageInfo messageInfo){System.out.println("打印publish日志"+messageInfo);//1:参数校验，存储结果if(!StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getMessage())){return false;}messageInfos.add(messageInfo);return true;}@RequestMapping("/getList")public List<MessageInfo> getList(){System.out.println("打印getList日志");return messageInfos;}
}

四：完善前端代码

（1）添加load函数,⽤于在⻚⾯加载的时候获取数据

（2）修改原来的点击事件函数.在点击按钮的时候给服务器发送添加留⾔请求

    <script>load();function load(){$.ajax({type: "get",url: "/message/getList",success: function(result){for(var message of result){//类似for(Message message : messageInfos)var finalHtml = "<div>" + message.from +"对" + message.to + "说:" + message.message+"</div>";$("#container").append(finalHtml);}}});}function submit(){//测试：//1. 获取留言的内容，前端校验var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//发送ajax请求$.ajax({url: "/message/publish",type: "post",data: { //左侧是后端参数，有点像给MessageInfo这个类进行初始化from: $('#from').val(),to: $('#to').val(),message : $('#say').val()},success: function(result){if(result){//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上    $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else{alert("输入不合法")}}});}</script>

五：测试

此时在浏览器通过URL： http://127.0.0.1:8080/messagewall.html 访问服务器
此时我们每次提交的数据都会发送给服务器，每次打开⻚⾯的时候⻚⾯都会从服务器加载数据.，因此即使关闭⻚⾯,数据也不会丢失.

但是数据此时是存储在服务器的内存中List中，⼀旦服务器重启,数据仍然会丢失.要想数据不丢失,需要把数据存储在数据库中

【Spring项目】表白墙，留言板项目的实现

阿华代码，不是逆风，就是我疯你们的点赞收藏是我前进最大的动力！！ 希望本文内容能够帮助到你！！ 目录一：项目实现准备 1：需求 2：准备工作 （1）…...

编程日记 2024/12/9 19:49:19

分布式事务-nacos/seata在windows环境下部署及开发

参考资料： nacos的windows环境部署 seata和nacos的结合及seata开发参考demo及资料 nacos在windows环境下的部署： nacos在windows下的部署参考文章 seata加入nacos配置： 首先下载seata安装包：Release v1.7.0(Not Apache relea…...

编程日记 2024/12/9 19:48:16

分布式微服务架构下的密码安全性方案

在 Spring Cloud 微服务架构中，涉及登录或注册时的密码安全性问题，通常需要从传输过程中的安全性和存储过程中的安全性两个方面进行保护。以下是主流的安全性保证方案： 传输过程中的安全性 HTTPS 加密传输： 使用 HTTPS 协议来保…...

编程日记 2024/12/9 19:45:11

基于pytorch的深度学习基础4——损失函数和优化器

四．损失函数和优化器 4.1 均值初始化为减轻梯度消失和梯度爆炸，选择合适的权重初值。十种初始化方法 Initialization Methods 1. Xavie r均匀分布 2. Xavie r正态分布 4. Kaiming正态分布 5. 均匀分布 6. 正态分布 7. 常数分布 8. 正交矩阵初…...

编程日记 2024/12/9 19:39:01

网络安全信息收集（总结）更新

目录重点： 前言： 又学到了，就是我们什么时候要子域名收集，什么时候收集域名，重点应该放前面思考： 信息收集分为哪几类，什么是主域名，为什么要收集主域名，为什么要收…...

编程日记 2024/12/9 19:38:00

web斗地主游戏实现指北

前后端通信作为一个即时多人游戏，不论是即时聊天还是更新玩家状态，都需要服务端有主动推送功能，或者客户端轮询。轮询的时间间隔可能导致游玩体验差，因为不即时更新，而且请求数量太多可能会打崩服务器。建议在cs间…...

编程日记 2024/12/9 19:36:59

SpringMVC其他扩展

一、全局异常处理机制: 1.异常处理两种方式: 开发过程中是不可避免地会出现各种异常情况的，例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题，甚至直接导致程序崩溃。因此，在开发过程中，…...

编程日记 2024/12/9 19:35:56

【Linux】网络服务

声明，以下内容均学习自《Linux就该这么学》一书 1、创建网络会话 Linux系统使用NetworkManager提供网络服务，它是一种动态管理网络配置的守护进程，能够让网络设备保持连接状态。 nmcli nmcli是一款基于命令行的网络配置工具，它…...

编程日记 2024/12/9 19:34:55

工作：SolidWorks从3D文件导出2D的DWG或DXF类型文件方法

工作：SolidWorks从3D文件导出2D的DWG或DXF类型文件方法 SolidWorks从3D文件导出2D的DWG或2D DXF类型文件方法（一）打开3D文件（二）从装配体到工程图（三）拖出想要的角度的图型（四&#…...

编程日记 2024/12/9 19:30:50

IDL学习笔记（五）MODIS数据（Grid）

IDL学习笔记（四） MODIS Grid数据的重投影正弦投影是以米为单位的经纬度网格是以度为单位的但是转换之后，不会一一对应，所以需要对中间空缺位置需要进行一个填补。核心问题: 把一个点从一个空间参考系放到另一个空间参…...

编程日记 2024/12/9 19:27:46

JavaScript语言介绍

JavaScrip是一门编程语言浏览器的工作原理所以得域名都会被解析成ip地址，ip地址就是服务器地址，服务器地址会返回一个html文件，解析html遇到css文件和JavaScript标签就会把相应内容下载下来进行解析。认识浏览器的内核浏览器的渲染过程 …...

编程日记 2024/12/9 19:26:44

Lua使用点号和冒号的区别

首先建立一个table，再分别定义两个方法，如下： local meta {}function meta:test1(...)print(self)print("")for k,v in pairs({...}) doprint(v)end endfunction meta.test2(...)print(self)print("")for k,v in pairs…...

编程日记 2024/12/9 19:21:38

LLM - 开源视觉多模态 LLaVA-CoT(o1) 深度推理模型测试与源码教程

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/144304351 免责声明：本文来源于个人知识与公开资料，仅用于学术交流，欢迎讨论，不支持转载。 LLaVA-…...

编程日记 2024/12/9 19:19:36

Ansible的yum和saltstack的哪个功能相似

Ansible的yum和saltstack的哪个功能相似在 Ansible 和 SaltStack 中，Ansible 的 yum 模块和 SaltStack 的 pkg 模块功能相似。它们都用于管理软件包，支持安装、升级、删除和查询等操作。 Ansible 的 yum 模块用途： 专门用于基于 Red Hat …...

编程日记 2024/12/9 19:16:32

启动paimon -- 本地模式演示 bin/start-cluster.sh-- 启动sqlclient bin/sql-client.sh示例 -- 创建catalog，每次都要创建，创建一个已经存在的catalog相当于使用 CREATE CATALOG fs_catalog WITH (typepaimon,warehousefile:/data/soft/paimon/catalog…...

编程日记 2024/12/9 19:14:27

Java 中 List 接口的学习笔记

1. 什么是 List？ 在 Java 中，List 是一个接口，属于 Java Collections Framework。它表示一个有序的集合，可以包含重复元素。List 接口允许通过索引访问元素，提供了多种实现方式，如 ArrayList 和 LinkedLis…...

编程日记 2024/12/9 19:13:26

【原生js案例】webApp实现鼠标移入移出相册放大缩小动画

图片相册这种动画效果也很常见，在我们的网站上。鼠标滑入放大图片，滑出就恢复原来的大小。现在我们使用运动定时器来实现这种滑动效果。感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析&…...

编程日记 2024/12/9 19:12:23

LVGL9 定时器模块

文章目录前言定时器系统概述特点定时器的创建函数：lv_timer_create函数：lv_timer_create_basic 定时器的控制函数：lv_timer_ready函数：lv_timer_reset 定时器的参数设置函数：lv_timer_set_cb函数：lv_time…...

编程日记 2024/12/9 19:11:21

Qt学习笔记第51到60讲

第51讲记事本实现打开功能回到第24个功能文件Notepad，给UI中的各个控件添加槽函数。 ①开始按钮 void Widget::on_btnOpen_clicked() {QString fileNameQFileDialog::getOpenFileName(this,tr("Open File"),"E:\\6_Qt Projects\\24_Notepad\\fi…...

编程日记 2024/12/9 19:09:18

网页设计--axios作业

根据以下mock地址中的json数据，使用axios异步方式获取并显示在页面中。 https://apifoxmock.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId171582689 {"code": 1,"msg": "success","data": [{"id": …...

编程日记 2024/12/9 19:07:16