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

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

news 2026/2/8 11:35:21

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

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

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

一：项目实现准备

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

地震勘探——干扰波识别、井中地震时距曲线特点

目录干扰波识别反射波地震勘探的干扰波井中地震时距曲线特点干扰波识别有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。地震勘探中，有效波和干扰波是相对的。例如，在反射波…...

编程新知 2026/2/2 3:20:56

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名转换路径 …...

编程新知 2026/1/20 14:36:39

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

SpringTask-03.入门案例

一.入门案例启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

dify打造数据可视化图表

一、概述在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

2025季度云服务器排行榜

在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。方法一：使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

一：项目实现准备

1：需求

2：准备工作

（1）加入前端代码

3：预期结果

二：约定前后端交互接⼝

1：需求分析

（1）提交留⾔

（2）展⽰留⾔

2：接口定义

（1） 获取全部留⾔

①路径和格式

②响应

③留言信息形式

④总结

（2）发表新留⾔

①路径和格式

②响应

③总结

三：服务器代码实现

1：定义留⾔对象MessageInfo类

2：创建MessageController类

四：完善前端代码

五：测试

相关文章：

（1）获取全部留⾔