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

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

news 2025/7/13 0:36:13

8e19eee2be5648b78d93fbff2488137b.png

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

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

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

目录

一：项目实现准备

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项目】表白墙，留言板项目的实现

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;项目实现准备 1&#xff1a;需求 2&#xff1a;准备工作 &#xff08;1&#xff09;…...

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

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

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

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

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

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

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

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

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

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

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

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

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

web斗地主游戏实现指北

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

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

SpringMVC其他扩展

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

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

【Linux】网络服务

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

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

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

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

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

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

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

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

JavaScript语言介绍

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

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

Lua使用点号和冒号的区别

首先建立一个table&#xff0c;再分别定义两个方法&#xff0c;如下&#xff1a; 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&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/144304351 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 LLaVA-…...

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

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

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

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

paimon0.9记录

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

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

Java 中 List 接口的学习笔记

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

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

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

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

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

LVGL9 定时器模块

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

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

Qt学习笔记第51到60讲

第51讲 记事本实现打开功能 回到第24个功能文件Notepad&#xff0c;给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数据&#xff0c;使用axios异步方式获取并显示在页面中。 https://apifoxmock.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId171582689 {"code": 1,"msg": "success","data": [{"id": …...

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

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/7/10 2:39:03

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/7/12 18:49:43

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/7/11 10:26:35

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/7/12 1:45:43

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/7/8 21:19:20

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2025/7/9 20:05:14

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

编程新知 2025/7/12 1:15:37

Win系统权限提升篇UAC绕过DLL劫持未引号路径可控服务全检项目

应用场景&#xff1a; 1、常规某个机器被钓鱼后门攻击后&#xff0c;我们需要做更高权限操作或权限维持等。 2、内网域中某个机器被钓鱼后门攻击后&#xff0c;我们需要对后续内网域做安全测试。 #Win10&11-BypassUAC自动提权-MSF&UACME 为了远程执行目标的exe或者b…...

编程新知 2025/7/10 8:55:27