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

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

news 2025/9/16 13:41:03

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

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

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

一：项目实现准备

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

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/9/15 5:15:46

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...

编程新知 2025/9/3 20:40:45

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征封装性： 隐藏字段的实现细节提供对字段的受控访问访问控制： 可单独设置get/set访问器的可见性可创建只读或只写属性计算属性： 可以在getter中执行计算逻辑不需要直接对应一个字段验证逻辑： 可以…...

编程新知 2025/6/16 10:20:03

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/9/12 22:46:10

C++.OpenGL （20/64）混合（Blending）

混合（Blending）透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42

算术操作符与类型转换：从基础到精通

目录前言：从基础到实践——探索运算符与类型转换的奥秘算术操作符超级详解算术操作符：、-、*、/、% 赋值操作符：和复合赋值单⽬操作符：、--、、- 前言：从基础到实践——探索运算符与类型转换的奥秘在先前的文…...

编程新知 2025/9/4 16:15:41

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2025/9/14 9:57:43

python打卡第47天

昨天代码中注意力热图的部分顺移至今天知识点回顾： 热力图作业：对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图，展示模…...

编程新知 2025/7/17 16:18:18

EEG-fNIRS联合成像在跨频率耦合研究中的创新应用

摘要神经影像技术对医学科学产生了深远的影响，推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下，基于神经血管耦合现象的多模态神经影像方法，通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里，本研…...

编程新知 2025/9/9 10:01:49

前端打包工具简单介绍

前端打包工具简单介绍一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry（入口） 指定应用的起点文件，比如 src/index.js。 Module（模块） Webpack 把项目当作模块图，模块可以是 JS、CSS、图片等…...

编程新知 2025/8/24 20:46:53

一：项目实现准备

1：需求

2：准备工作

（1）加入前端代码

3：预期结果

二：约定前后端交互接⼝

1：需求分析

（1）提交留⾔

（2）展⽰留⾔

2：接口定义

（1） 获取全部留⾔

①路径和格式

②响应

③留言信息形式

④总结

（2）发表新留⾔

①路径和格式

②响应

③总结

三：服务器代码实现

1：定义留⾔对象MessageInfo类

2：创建MessageController类

四：完善前端代码

五：测试

相关文章：

（1）获取全部留⾔