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

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

news 2025/6/26 20:31:13

🧸欢迎来到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;

相关文章：

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

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信你对这篇博客也感兴趣o (ˉ▽ˉ&#xff1b;) 用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证&#xff08;带前后端源码&#xff09;全方位全流程超详细教程 目录 项目前端页面展…...

编程日记 2023/10/31 9:46:57

【海德教育】报考建筑八大员需要满足下列条件：

1 、初级(具备以下条塌氏件之一) ( 1 )本专业或相关专业中专以上学历竖陆。 ( 2 )从事本职业工作 2 年以上。 2 、中级(具备以下条件之一) ( 1 )本专业或相关专业大专以上学历。 ( 2 )连续从事本职业工作 4 年以上。 ( 3 )取得余衫顷本职业初级证书&#xff0c;从事本职业工作 …...

编程日记 2023/10/31 9:45:56

酷开科技，让家庭更有温度！

生活中总有一些瞬间&#xff0c;会让我们感到无比温暖和幸福。一个拥抱、一句问候、一杯热茶&#xff0c;都能让我们感受到家庭的温馨和关爱。酷开科技也用自己的方式为我们带来了独属于科技的温暖&#xff0c;通过全新的体验将消费者带进一个充满惊喜的世界&#xff0c;让消费…...

编程日记 2023/10/31 9:44:55

九州未来入选“2023边缘计算产业图谱”三大细分领域

10月26日&#xff0c;边缘计算社区正式发布《2023边缘计算产业图谱》&#xff0c;九州未来凭借深厚的技术积累、优秀的产品服务、完善的产品解决方案体系以及开源贡献&#xff0c;实力入选图谱——边缘计算平台、边缘计算开源、边缘云服务提供商三大细分领域&#xff0c;充分彰…...

编程日记 2023/10/31 9:43:54

centos ubantu IP一直变化,远程连接不上问题

文章目录 一、为什么IP地址会变1.主机DHCP导致 二、解决IP地址变化1.centos2.ubantu 总结 虚拟机能连接为互联网,但下一次启动IP地址再发生变化,无法使用ssh远程连接 一、为什么IP地址会变 1.主机DHCP导致 虚拟机系统(ubantu,centos…)启动后会向本地申请IP地址租约,租聘的I…...

编程日记 2023/10/31 9:41:52

多线程---JUC

文章目录 什么是JUC&#xff1f;Callable接口ReentrantLockReentrantLock VS synchronized 原子类线程池信号量SemaphoreCountDownLatch 什么是JUC&#xff1f; JUC是&#xff1a;java.util.concurrent这个包名的缩写。它里面包含了与并发相关&#xff0c;即与多线程相关的很多…...

编程日记 2023/10/31 9:40:52

事务隔离级别

隔离级别 概念理解 事务的概念 事务是数据库管理系统中的一个基本单位&#xff0c;它代表了一组数据库操作。 事务是一个不可分割的工作单元&#xff0c;要么全部成功执行&#xff0c;要么全部失败回滚。 事务的目标是确保数据库的一致性、隔离性、持久性和原子性&#xff…...

编程日记 2023/10/31 9:39:49

centos7安装配置及Linux常用命令

目录 一.centos7的安装 1.1centos7的简介 1.2步骤 ​编辑 1.3登录 ​编辑 1.4MobaXterm使用 二.Linux常用命令&模式 1.1 常用命令 1.2 三种模式 命令模式 编辑模式 末行模式 1.3 命令使用&换源 换源 1.4 拍照备份 一.centos7的安装 1.1centos7的简…...

编程日记 2023/10/31 9:38:46

C语言调用lua

C语言是一种非常流行的编程语言&#xff0c;而Lua是一种基于C语言开发的脚本语言。相信大家都知道&#xff0c;Lua可以使用C语言来扩展其功能&#xff0c;进而实现更复杂的功能。而在Lua的各种实现中&#xff0c;luajit也是其中一种非常流行的实现。在本篇博客中&#xff0c;我…...

编程日记 2023/10/31 9:37:45

算法通关村第十二关黄金挑战——最长公共前缀问题解析

大家好&#xff0c;我是怒码少年小码。 最长公共前缀 LeetCode 14&#xff1a;编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 “”。 示例&#xff1a; 输入&#xff1a;strs [“flower”,“flow”,“flight”]输出&#xff…...

编程日记 2023/10/31 9:35:42

Python运维学习Day02-subprocess/threading/psutil

文章目录 1. 检测网段在线主机2. 获取系统变量的模块 psutil 1. 检测网段在线主机 import subprocessdef checkIP(ip):cmd fping -n 1 -w 1 {ip}null open(nlll,modewb)status subprocess.call(cmd,shellTrue,stdoutnull,stderrnull)if status 0:print(f"主机[{ip}]在…...

编程日记 2023/10/31 9:34:41

开源库存管理系统InvenTree的安装

本文是应网友 shijie880500 要求折腾的&#xff1b; 什么是 InvenTree &#xff1f; InvenTree 是一个开源的库存管理系统&#xff0c;提供强大的低级别库存控制和零件跟踪。InvenTree 系统的核心是 Python/Django 数据库后端&#xff0c;它提供了一个管理界面&#xff08;基于…...

编程日记 2023/10/31 9:33:39

[双指针] (二) LeetCode 202.快乐数 和 11.盛最多水的容器

[双指针] (二) LeetCode 202.快乐数 和 11.盛最多水的容器 快乐数 202. 快乐数 题目解析 (1) 判断一个数是不是快乐数 (2) 快乐数的定义&#xff1a;将整数替换为每个位上的和&#xff1b;如果最终结果为1&#xff0c;就是快乐数 (3) 这个数可能变为1&#xff0c;也可能无…...

编程日记 2023/10/31 9:31:37

前端、HTTP协议(重点)

什么是前端 前端是所有跟用户直接打交道的都可以称之为是前端 比如&#xff1a;PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容 能够用肉眼看到的都是前端 为什么要学前端 学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等) 咱…...

编程日记 2023/10/31 9:30:36

软件开发项目文档系列之六概要设计：构建可靠系统的蓝图

概要设计是软件开发项目中至关重要的阶段&#xff0c;它为整个系统提供了设计蓝图和技术方向。它的重要性在于明确项目目标、规划系统结构、确定技术选择、识别风险、以及为团队提供共同的视角&#xff0c;确保项目在后续开发阶段按计划进行。概要设计的主要内容包括项目的背景…...

编程日记 2023/10/31 9:29:35

[C++]命名空间等——喵喵要吃C嘎嘎

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;大大会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…...

编程日记 2023/10/31 9:28:34

安装ora2pg遇到如下问题

通过源码安装ora2pg成功后&#xff0c;查询帮助信息报错 [rootlocalhost bin]# ora2pg --help Cant locate open.pm in INC (you may need to install the open module) (INC contains: /usr/local/lib64/perl5 /usr/local/share/perl5 /usr/lib64/perl5/vendor_perl /usr/shar…...

编程日记 2023/10/31 9:27:33

x86-32-Linux下栈溢出攻击原理

在x86-32-Linux下构造一个栈溢出攻击 栈缓冲区溢出攻击&#xff1a;向栈上的数组写入超过数组长度的数据导致覆盖到正常数据{栈帧上的返回地址}。 IA-32下C函数调用约定&#xff1a; 调用者将参数从右向左入栈&#xff0c;构造参数call 指令短跳转&#xff0c;会将call指令下一…...

编程日记 2023/10/31 9:26:31

GPS学习（一）：在ROS2中将GPS经纬度数据转换为机器人ENU坐标系，在RVIZ中显示坐标轨迹

文章目录 一、GPS模块介绍二、坐标转换转换原理参数解释&#xff1a; 增加回调函数效果演示 本文记录在Ubuntu22.04-Humbel中使用NMEA协议GPS模块的过程&#xff0c;使用国产ROS开发板鲁班猫(LubanCat )进行调试。 一、GPS模块介绍 在淘宝找了款性价比较高的轮趣科技GPS北斗双…...

编程日记 2023/10/31 9:23:27

chatgpt生成文本的底层工作原理是什么？

文章目录 &#x1f31f; ChatGPT生成文本的底层工作原理&#x1f34a; 一、数据预处理&#x1f34a; 二、模型结构&#x1f34a; 三、模型训练&#x1f34a; 四、文本生成&#x1f34a; 总结 &#x1f4d5;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN…...

编程日记 2023/10/31 9:22:27

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/6/26 3:26:26

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/6/24 3:17:34

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/6/26 11:26:17

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/6/21 14:21:07

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/6/19 5:37:49

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/6/25 15:50:42

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/6/24 4:03:32

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/6/21 3:33:03

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/6/21 8:18:07

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/6/26 1:50:36