表白墙/留言墙 —— 初级SpringBoot项目,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学

🧸欢迎来到dream_ready的博客,📜相信你对这篇博客也感兴趣o (ˉ▽ˉ;)

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程

目录

项目前端页面展示: 

首先,定义前后端交互接口

然后,创建一个SpringBoot项目

编写前端页面

编写后端代码

        1、封装实体类 —— MessageInfo(单独创建一个.Java文件)

2、逻辑代码 

方法publishMessage处理逻辑:

方法getMessageInfo处理逻辑:

后端项目代码中需要导入的包代码


项目前端页面展示: 

首先,定义前后端交互接口

讲解:

  1.         此项目注重前后端信息的交互,舍去了登录的操作
  2.         提交留言 —— 点击提交后,前端从输入框获取三个参数的值,向后端发送这MessageInfo的三个参数的值,后端接收后保存
  3.         查看所有留言 —— 前端发送无参的请求,后端向前端返回一个List集合,前端遍历集合将数据展示到前端页面上

然后,创建一个SpringBoot项目

如何创建一个SpringBoot项目 —— 超详细教程

编写前端页面

        在resource目录下的static目录下创建表白墙的html页面,此处我将其命名为 messagewall.html

如图红框位置:

表白墙页面(messagewall.html):

<!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>// 页面加载时,请求后端,获取留言列表$.ajax({url: "/message/getMessageInfo",type: "get",success:function (message){for(var m of message){// 2. 拼接节点的 htmlvar divE = "<div>"+ m.from +"对" + m.to + "说:" + m.message+"</div>";//3. 把节点添加到页面上$(".container").append(divE);}}});function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}// 发送请求$.ajax({url: "/message/publish",type: "post",data: {"from": from,"to": to,"message": say},success: function(result){if(result){// 添加成功// 2. 拼接节点的 htmlvar divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else{// 添加失败alert("留言发布成功")}}});}</script>
</body></html>

代码逻辑:

  1.         从input输入框内获取from,to,message三个参数,向后端发送post请求并将参数发送过去,后端接收参数并保存,前端页面也将这段数据直接展示在页面上
  2.         每次刷新页面,前端向后端发送get请求,后端响应回封装成List集合的所有数据,前端遍历集合,并将其展示在前端页面上

编写后端代码

        1、封装实体类 —— MessageInfo(单独创建一个.Java文件)

          内部三个参数,分别对应from,to,message三个参数,用来定义成集合中泛型对应的类型,存放前端传来的数据

@Data    // 组合注解,集成了@Getter @Setter @ToString 等注解
public class MessageInfo {private String from;private String to;private String message;}

2、逻辑代码 

         创建Class文件,我将其命名为MessageController.Java

以下是全部代码:

@RequestMapping("/message")
@RestController
public class MessageController {private List<MessageInfo> messageInfos = new ArrayList<>();@RequestMapping("/publish")public Boolean publishMessage(MessageInfo messageInfo){// 进行参数的校验if(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getMessage())){return false;}// 添加留言messageInfos.add(messageInfo);return true;}@RequestMapping("/getMessageInfo")public List<MessageInfo> getMessageInfo(){return messageInfos;}
}

        private List<MessageInfo> messageInfos = new ArrayList<>();定义了一个存放MessageInfo类型的集合来存放表白墙内的数据

方法publishMessage处理逻辑:

  1. 接收前端传来的数据,自动将其封装为MessageInfo类型
  2. 进行参数的校验,判断三个参数是否有空,若有空,返回false(失败)
  3. 若参数正确,则添加留言,往集合中添加messageInfo,并返回true

方法getMessageInfo处理逻辑:

  • 向后端返回集合MessageInfo,集合中存放所有的表白墙数据

后端项目代码中需要导入的包代码

(可以手动导入我的,也可以自己导入,放在各自文件的最上面)

MessageInfo.Java:

import lombok.Data;

MessageController.Java:

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;

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

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

相关文章

CTFHub | MySQL流量、Redis流量、MongoDB流量的WriteUp

文章目录 MySQL流量题目题解 Redis流量题目题解 MongoDB流量题目题解 数据库类流量题需要用到Wireshark截取数据包&#xff0c;然后进行分析。 WireShark是非常流行的网络封包分析工具&#xff0c;可以截取各种网络数据包&#xff0c;并显示数据包详细信息。常用于开发测试过程…

python采集电商jd app搜索商品数据(2023-10-30)

一、技术要点&#xff1a; 1、cookie可以从手机app端用charles抓包获取&#xff1b; 2、无需安装nodejs&#xff0c;纯python源码&#xff1b; 3、搜索接口为&#xff1a;functionIdsearch&#xff1b; 4、clientVersion "10.1.4"同时也支持更高的版本&#xff1b; …

“道法自然——徐铭中国画展”在中国美术馆隆重开幕

10月28日上午&#xff0c;“道法自然——徐铭中国画作品展”在中国美术馆隆重开幕。本次展览由中国科学院大学、民盟中央美术院联合主办。第十四届全国人大常委会委员、财政经济委员会副主任委员、民盟中央副主席谢经荣&#xff0c;第十四届全国政协副秘书长、民盟中央副主席、…

数字孪生智慧工厂三维可视化系统解决方案,打造新一代智慧工厂

在制造业的快速发展和数字化转型的时代&#xff0c;智慧工厂已经成为制造企业前进的必经之路。数字孪生技术&#xff0c;作为工业数字化转型的核心动力&#xff0c;为打造智慧工厂提供了关键支持。其中&#xff0c;数字孪生智慧工厂三维可视化系统解决方案无疑是制造企业的得力…

2023深耕kotlin,谈谈前景

为什么学习kotlin&#xff1f; Kotlin 早就已经是 Google 官方推荐的开发语言了&#xff0c;而且 Android 新的 Compose 框架只支持 Kotlin &#xff0c;在 Google 那里&#xff0c;Android开发中 Java 其实已经被淘汰了。Java 和 Kotlin 虽然都属于高级语言&#xff0c;但是 …

Python 自动化测试全攻略:五种自动化测试模型实战详解!

随着移动互联网的发展&#xff0c;软件研发模型逐步完善&#xff0c;软件交付质量越来越受到软件公司的重视&#xff0c;软件测试技术特别是自动化测试技术开始在软件系统研发过程中发挥着越来越重要的作用。 与传统的手工测试技术相比&#xff0c;自动化测试具备了良好的可操…

iPhone无法关机未必是坏了!如何修复无法关闭的iPhone

iPhone运行很慢且发热是一个比较罕见的情况&#xff0c;但如果它发生在你身上&#xff0c;下面解释了发生的原因以及你如何修复它。 iPhone无法关闭的原因 iPhone无法关闭的最可能原因是&#xff1a; 由于软件问题&#xff0c;它被冻结了。 睡眠/唤醒按钮坏了。 屏幕坏了&a…

服务器感染了.mxdown-V-XXXXXXXX勒索病毒,如何确保数据文件完整恢复?

尊敬的读者&#xff1a; 在当今数字化时代&#xff0c;网络犯罪的阴谋在虚拟世界中蔓延&#xff0c;mxdown-V-XXXXXXXX、.vollhavhelp-V-XXXXXXXX、.arricklu-V-XXXXXXXX勒索病毒是其中的恶梦般存在&#xff0c;这三种勒索病毒均属于同一个勒索病毒家族旗下。这种勒索病毒以其…

真心话坦白局系统源码

它具有匿名信息的神秘感 但又会给你一点小提示 能让你有无限挖掘下去的好奇感 也能让你说出那些不敢说出口的话 敢来一场坦白局吗&#xff01; 坦白局这个功能类似于悄悄话&#xff0c;只不过是匿名的悄悄话。 有时候我们有些话是开不了口的&#xff0c;坦白局给了我们一个…

【音视频|PCM】PCM格式详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

jenkins详细安装教程

这里写目录标题 一、Jenkins安装与部署1-1、Jenkins的简介1-2、下载需要的软件1-2-1 jekins.war1-2-2 tomcat安装方式 1-3、使用11版本的jdk1-4、开启jenkins1-5、获取密码1-5 修改镜像(可改可不改) 二、卸载Jenkins 一、Jenkins安装与部署 1-1、Jenkins的简介 Jenkins是一个…

比较浮点数时,我被绊倒了

&#x1f4e2;欢迎点赞 &#xff1a;&#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0c;赐人玫瑰&#xff0c;手留余香&#xff01;&#x1f4e2;本文作者&#xff1a;由webmote 原创&#x1f4e2;作者格言&#xff1a;新的征程&#xff0c;我们面对的不是…

C++之string

C之string #include <iostream>using namespace std;/*string();//创建一个空的字符串string(const char* s);//使用字符串s初始化string(const string& str);//使用一个string对象初始化另外一个string对象string(int n,char c);//使用n个字符c初始化*/void test1()…

【计算机网络】浏览器的通信能力

1. 用户代理 浏览器可以代替用户完成http请求&#xff0c;代替用户解析响应结果&#xff0c;所以我们称之为用户代理 user agent。 浏览器两大核心能力&#xff1a; 自动发送请求的能力自动解析响应的能力 1.1 自动发送请求的能力 用户在地址栏输入了一个url地址&#xff0…

eslint提示 xxx should be listed in the project's dependencies

有时候手动安装了一个npm包A&#xff0c;npm包A里面包含了npm包B&#xff0c;这时候如果 import xxx from npm包B;eslint会报错&#xff0c;提示 npm包B 不在 package.json 里面 解决方法&#xff1a;在 eslintrc.js 增加配置 module.exports {rules: {import/no-extraneous-d…

GEO生信数据挖掘(十一)STRING数据库PPI蛋白互作网络 Cytoscape个性化绘图【SCI 指日可待】

GEO生信数据挖掘&#xff08;十&#xff09;肺结核数据-差异分析-WGCNA分析&#xff08;900行代码整理注释更新版本&#xff09; 通过 前面十篇文章的学习&#xff0c;我们应该已经可以获取到一个”心仪的基因列表“了&#xff0c;相较于原始基因数量&#xff0c;这个列表的数…

目标检测算法发展史

前言 比起图像识别&#xff0c;现在图片生成技术要更加具有吸引力&#xff0c;但是要步入AIGC技术领域&#xff0c;首先不推荐一上来就接触那些已经成熟闭源的包装好了再提供给你的接口网站&#xff0c;会使用别人的模型生成一些图片就能叫自己会AIGC了吗&#xff1f;那样真正…

定档11月2日,YashanDB 2023年度发布会完整议程公布

数据库作为支撑核心业务的关键技术&#xff0c;对数字经济的发展有着重要的支撑作用&#xff0c;随着云计算、AI等技术的迅猛发展和数据量的爆发式增长&#xff0c;推动着数据库技术的加速创新。 为了应对用户日益复杂的数据管理需求&#xff0c;赋能行业国产化建设和数字化转型…

Windows详细安装和彻底删除RabbitMQ图文流程

RabbiitMQ简介 RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff1a;Advanced Message Queue Protocol&#xff09;的开源消息代理软件&#xff08;亦称面向消息的中间件&#xff09;。RabbitMQ服务器是用Erlang语言编写的&#xff0c;而聚类和故障转移是构建在开放…