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

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中,⼀旦服务器重启,数据仍然会丢失.要想数据不丢失,需要把数据存储在数据库中
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63438.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端】React_Next.js

定期更新&#xff0c;建议关注、收藏&#xff01; 安装 要使用react的框架&#xff0c;都应当安装node.js conda install nodejs选择Next.js 并创建项目 npx create-next-applatest可以看到目录结构生成如下 作为网页中的一个子路由 想让其嵌入已经写好的项目中&#xf…

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

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

物品识别 树莓派 5 YOLO v5 v8 v10 11 计算机视觉

0. 要实现的效果 让树莓派可以识别身边的一些物品&#xff0c;比如电脑&#xff0c;鼠标&#xff0c;键盘&#xff0c;杯子&#xff0c;行李箱&#xff0c;双肩包&#xff0c;床&#xff0c;椅子等 1. 硬件设备 树莓派 5 raspberrypi.com/products/raspberry-pi-5/树莓派官方摄…

爬取豆瓣电影的数据-----爬虫实战案例(爬取文字)

爬取豆瓣电影的数据 首先打开"豆瓣电影TOP250"网页&#xff1a; 右击鼠标&#xff0c;找到检查点击&#xff0c;然后再点击网络向上拉动&#xff0c;找到名称栏中的第一个&#xff0c;点击打开可以在标头里看到请求URL和请求方式&#xff0c;复制URL&#xff08;需…

MySQL 8.0 新特性汇总

文章目录 前言1. 运维管理 1.1 可持久化变量1.2 管理员端口1.3 资源组1.4 数据库粒度只读1.5 show processlist 实现方式1.6 加速索引创建速度1.7 控制连接的内存使用量1.8 克隆插件1.9 mysqldump 新增参数1.10 慢日志增强1.11 快速加列1.12 InnoDB 隐藏主键1.13 Redo 配置1.14…

使用PHPUnit使用本地调试代替远程调试,快速提高开发效率

Laravel 是一个在 Linux 环境下表现非常出色的 PHP 框架&#xff0c;但它在 Windows 环境下可能会遇到一些兼容性和配置问题。为了调试或没试的方便可以在 Windows 环境下进行 Laravel PHPUnit进行本地调试和测试。 本地主要针对断点调试效果非常高效。 在 Laravel 中&#x…

【BUG】VMware|vmrest正在运行此虚拟机,无法配置或删除快照

VMware版本&#xff1a;VMware 16 文章目录 省流版问题解决方案 详细解释版问题解决方案总结 省流版 问题 只读&#xff0c;因为vmrest正在运行虚拟机。 解决方案 参考&#xff1a;虚拟机设置&#xff0c;只读&#xff0c;因为vmrest正在运行此虚拟机。有谁遇到过这种问题吗&…

HTML表单-第二部分

HTML表单 表单元素是允许用户在表单中输入内容&#xff0c;比如&#xff1a;文本域&#xff0c;下拉列表&#xff0c;单选框&#xff0c;复选框等等‘ 使用<from>标签创建 例如 <from> . input . </from> HTML表单-输入元素 <input>标签创建&#xff…

声音克隆GPT-SoVITS

作者&#xff1a;吴业亮 博客&#xff1a;wuyeliang.blog.csdn.net 一、原理介绍 GPT-SoVITS&#xff0c;作为一款结合了GPT&#xff08;生成预训练模型&#xff09;和SoVITS&#xff08;基于变分信息瓶颈技术的歌声转换&#xff09;的创新工具&#xff0c;正在声音克隆领域掀…

008-MAC地址表配置

MAC地址表配置 MAC地址表中对于接口的相关配置&#xff0c;目前只能在二层以太网端口、二层聚合接口等二层接口上进行。本章节内容只涉及单播的静态、动态、黑洞MAC地址表项的配置。有关静态组播MAC地址表项的相关介绍和配置内容&#xff0c;请参见“IP组播配置指导”中的“IGM…

2024-10-13-B fd 重定向 缓冲区

1 一切皆文件 1.1 虚拟文件系统 在系统层面&#xff0c;做了一层软件的封装&#xff0c;struct file 里有操作表&#xff08;即函数指针的集合&#xff09;&#xff0c;可以调用底层的读写方法。虚拟文件系统&#xff08;VFS&#xff09;是一种神奇的抽象&#xff0c;它使得…

Metasploit使用

最近在学Metasploit&#xff0c;Metasploit是一个免费的、可下载的渗透测试框架&#xff0c;通过它可以很容易地获取、开发并对计算机软件漏洞实施攻击&#xff0c;是一个集成了渗透测试全流程的渗透工具。 图一 模块&#xff1a;模块组织按照不同的用途分为7种类型的模块 &am…

Github 2024-12-01 开源项目月报 Top20

根据Github Trendings的统计,本月(2024-12-01统计)共有20个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10TypeScript项目9Go项目2HTML项目1Shell项目1Jupyter Notebook项目1屏幕截图转代码应用 创建周期:114 天开发语言:TypeScript, Py…

MongoDB集群的介绍与搭建

MongoDB集群的介绍与搭建 一.MongoDB集群的介绍 注意&#xff1a;Mongodb是一个比较流行的NoSQL数据库&#xff0c;它的存储方式是文档式存储&#xff0c;并不是Key-Value形式&#xff1b; 1.1集群的优势和特性 MongoDB集群的优势主要体现在以下几个方面&#xff1a; (1)高…

Facebook:筑牢隐私安全堡垒,守护社交净土

在全球社交媒体平台中&#xff0c;Facebook一直是风靡全球的佼佼者。然而&#xff0c;随着数字化信息的迅速膨胀&#xff0c;用户隐私保护的重要性日益凸显。面对用户对数据安全性的高度重视&#xff0c;Facebook致力于通过一系列措施来确保隐私保护&#xff0c;守护每位用户的…

多系统萎缩锻炼如何好起来?

多系统萎缩&#xff08;Multiple System Atrophy, MSA&#xff09;是一种复杂的神经系统退行性疾病&#xff0c;影响着患者的自主神经系统、运动系统和平衡功能等多个方面。面对这一挑战&#xff0c;科学、合理的锻炼对于缓解症状、提高生活质量至关重要。本文将详细介绍多系统…

实现RAGFlow-0.14.1的输入框多行输入和消息框的多行显示

一、Chat页面输入框的修改 1. macOS配置 我使用MacBook Pro&#xff0c;chip 是 Apple M3 Pro&#xff0c;Memory是18GB&#xff0c;macOS是 Sonoma 14.6.1。 2. 修改chat输入框代码 目前RAGFlow前端的chat功能&#xff0c;输入的内容是单行的&#xff0c;不能主动使用Shift…

11.17【大数据】Hadoop【DEBUG】

列出hdfs文件系统所有的目录和文件 主节点上 子结点 是一样的 *为什么能登进 slave 02 的主机,但是 master 当中依然显示 slave 02 为 DeadNode?* hadoop坏死节点的重启_hadoop3 子节点重启-CSDN博客 注意hadoop-daemon.sh 实际上位于 Hadoop 的 sbin 目录中&#xff0c;而不…

网络测速工具

1. SPEEDTEST https://www.speedtest.net/ 2. 测速网 测速网 - 专业测网速, 网速测试, 宽带提速, 游戏测速, 直播测速, 5G测速, 物联网监测,Wi-Fi 7,Wi-Fi 6,FTTR,全屋Wi-Fi - SpeedTest.cn 3. 字节比特换算 bps&#xff08;bits per second&#xff09; 字节和比特的换算…

快速构建NLP理论知识体系

NLP理论知识体系 一句话解释NLPNLP模型及原理简述1、Rag 一句话解释NLP 如果我们要实现机器翻译、情感分析、问答系统、文本摘要、聊天机器人、构造智能化的辅助文件填写模板&#xff0c;NLP可以通过现成的模型对输入的语音、文字、图片进行处理&#xff08;分词、标词性、去停…