【Spring项目】表白墙,留言板项目的实现
阿华代码,不是逆风,就是我疯
你们的点赞收藏是我前进最大的动力!!
希望本文内容能够帮助到你!!
目录
一:项目实现准备
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)…...
分布式事务-nacos/seata在windows环境下部署及开发
参考资料: nacos的windows环境部署 seata和nacos的结合及seata开发 参考demo及资料 nacos在windows环境下的部署: nacos在windows下的部署参考文章 seata加入nacos配置: 首先下载seata安装包:Release v1.7.0(Not Apache relea…...
分布式微服务架构下的密码安全性方案
在 Spring Cloud 微服务架构中,涉及登录或注册时的密码安全性问题,通常需要从传输过程中的安全性和存储过程中的安全性两个方面进行保护。以下是主流的安全性保证方案: 传输过程中的安全性 HTTPS 加密传输: 使用 HTTPS 协议来保…...
基于pytorch的深度学习基础4——损失函数和优化器
四.损失函数和优化器 4.1 均值初始化 为减轻梯度消失和梯度爆炸,选择合适的权重初值。 十种初始化方法 Initialization Methods 1. Xavie r均匀分布 2. Xavie r正态分布 4. Kaiming正态分布 5. 均匀分布 6. 正态分布 7. 常数分布 8. 正交矩阵初…...
网络安全信息收集(总结)更新
目录 重点: 前言: 又学到了,就是我们什么时候要子域名收集,什么时候收集域名,重点应该放前面 思考: 信息收集分为哪几类,什么是主域名,为什么要收集主域名,为什么要收…...
web斗地主游戏实现指北
前后端通信 作为一个即时多人游戏,不论是即时聊天还是更新玩家状态,都需要服务端有主动推送功能,或者客户端轮询。轮询的时间间隔可能导致游玩体验差,因为不即时更新,而且请求数量太多可能会打崩服务器。 建议在cs间…...
SpringMVC其他扩展
一、全局异常处理机制: 1.异常处理两种方式: 开发过程中是不可避免地会出现各种异常情况的,例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题,甚至直接导致程序崩溃。因此,在开发过程中,…...
【Linux】网络服务
声明,以下内容均学习自《Linux就该这么学》一书 1、创建网络会话 Linux系统使用NetworkManager提供网络服务,它是一种动态管理网络配置的守护进程,能够让网络设备保持连接状态。 nmcli nmcli是一款基于命令行的网络配置工具,它…...
工作:SolidWorks从3D文件导出2D的DWG或DXF类型文件方法
工作:SolidWorks从3D文件导出2D的DWG或DXF类型文件方法 SolidWorks从3D文件导出2D的DWG或2D DXF类型文件方法(一)打开3D文件(二)从装配体到工程图(三)拖出想要的角度的图型(四&#…...
IDL学习笔记(五)MODIS数据(Grid)
IDL学习笔记(四) MODIS Grid数据的重投影 正弦投影 是以 米 为单位的 经纬度网格 是以 度 为单位的 但是转换之后,不会一一对应,所以需要对中间空缺位置需要进行一个填补。 核心问题: 把一个点从一个空间参考系放到另一个空间参…...
JavaScript语言介绍
JavaScrip是一门编程语言 浏览器的工作原理 所以得域名都会被解析成ip地址,ip地址就是服务器地址,服务器地址会返回一个html文件,解析html遇到css文件和JavaScript标签就会把相应内容下载下来进行解析。 认识浏览器的内核 浏览器的渲染过程 …...
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…...
LLM - 开源视觉多模态 LLaVA-CoT(o1) 深度推理模型 测试与源码 教程
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/144304351 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 LLaVA-…...
Ansible的yum和saltstack的哪个功能相似
Ansible的yum和saltstack的哪个功能相似 在 Ansible 和 SaltStack 中,Ansible 的 yum 模块 和 SaltStack 的 pkg 模块 功能相似。它们都用于管理软件包,支持安装、升级、删除和查询等操作。 Ansible 的 yum 模块 用途: 专门用于基于 Red Hat …...
paimon0.9记录
启动paimon -- 本地模式演示 bin/start-cluster.sh-- 启动sqlclient bin/sql-client.sh示例 -- 创建catalog,每次都要创建,创建一个已经存在的catalog相当于使用 CREATE CATALOG fs_catalog WITH (typepaimon,warehousefile:/data/soft/paimon/catalog…...
Java 中 List 接口的学习笔记
1. 什么是 List? 在 Java 中,List 是一个接口,属于 Java Collections Framework。它表示一个有序的集合,可以包含重复元素。List 接口允许通过索引访问元素,提供了多种实现方式,如 ArrayList 和 LinkedLis…...
【原生js案例】webApp实现鼠标移入移出相册放大缩小动画
图片相册这种动画效果也很常见,在我们的网站上。鼠标滑入放大图片,滑出就恢复原来的大小。现在我们使用运动定时器来实现这种滑动效果。 感兴趣的可以关注下我的系列课程【webApp之h5端实战】,里面有大量的css3动画效果制作原生知识分析&…...
LVGL9 定时器模块
文章目录 前言定时器系统概述特点 定时器的创建函数:lv_timer_create函数:lv_timer_create_basic 定时器的控制函数:lv_timer_ready函数:lv_timer_reset 定时器的参数设置函数:lv_timer_set_cb函数:lv_time…...
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…...
网页设计--axios作业
根据以下mock地址中的json数据,使用axios异步方式获取并显示在页面中。 https://apifoxmock.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId171582689 {"code": 1,"msg": "success","data": [{"id": …...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 (1)输入单引号 (2)万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

