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

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

news 2026/2/7 18:21:49

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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/3 0:14:42

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2026/2/1 10:59:33

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

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

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

编程新知 2025/12/13 4:04:33

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2026/1/25 10:01:01

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/5 5:47:53