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

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

news 2025/11/7 17:54:08

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

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

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

一：项目实现准备

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

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/11/7 9:55:28

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/11/7 14:02:16

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2025/10/19 0:02:23

cf2117E

原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置或，也可以在执行上述操作前执行一次删除任意和。求…...

编程新知 2025/11/6 21:11:45

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/10/27 13:42:02

sqlserver 根据指定字符解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/10/27 21:06:53

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/10/5 6:09:34

一：项目实现准备

1：需求

2：准备工作

（1）加入前端代码

3：预期结果

二：约定前后端交互接⼝

1：需求分析

（1）提交留⾔

（2）展⽰留⾔

2：接口定义

（1） 获取全部留⾔

①路径和格式

②响应

③留言信息形式

④总结

（2）发表新留⾔

①路径和格式

②响应

③总结

三：服务器代码实现

1：定义留⾔对象MessageInfo类

2：创建MessageController类

四：完善前端代码

五：测试

相关文章：

（1）获取全部留⾔