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

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

news 2026/3/27 2:03:37

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

apt-offline终极指南：离线环境下的APT包管理解决方案

apt-offline终极指南&#xff1a;离线环境下的APT包管理解决方案 【免费下载链接】apt-offline Offline APT Package Manager 项目地址: https://gitcode.com/gh_mirrors/ap/apt-offline 你是否曾面临这样的困境&#xff1f;服务器在安全隔离的网络中&#xff0c;无法直…...

编程新知 2026/3/27 1:07:41

ROS Noetic + RealSense D435i：从驱动安装到RVIZ点云显示的完整工作流解析

ROS Noetic RealSense D435i&#xff1a;从驱动安装到RVIZ点云显示的完整工作流解析 在机器人视觉项目的初期搭建阶段&#xff0c;开发者往往面临一个关键挑战&#xff1a;如何将深度相机从"硬件连接"快速推进到"可用数据流"状态。以Intel RealSense D435…...

编程新知 2026/3/27 0:53:39

摆脱论文困扰!高效论文写作全流程AI论文写作软件推荐（2026 最新）

论文写作全流程可拆解为文献调研→选题/开题→大纲/初稿→文献综述→降重/去AI味→润色/格式→查重/投稿七大环节&#xff0c;2026年AI论文写作软件按环节精准匹配&#xff0c;兼顾中文适配、降重能力、去AI痕迹、学术合规四大核心需求&#xff0c;覆盖免费/付费、通用/垂直场景…...

编程新知 2026/3/27 0:37:33

用过才敢说 AI论文平台测评：2026年最值得尝试的几款工具

2026年真正好用的AI论文平台&#xff0c;核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测&#xff0c;千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队&#xff0c;覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 一、…...

编程新知 2026/3/27 0:37:33

Qwen3.5-35B-A3B-AWQ-4bit开源镜像实战：法律合同关键条款图示定位与文本提取

Qwen3.5-35B-A3B-AWQ-4bit开源镜像实战&#xff1a;法律合同关键条款图示定位与文本提取 1. 引言&#xff1a;当AI遇到法律合同 想象一下&#xff0c;你是一位法务人员&#xff0c;面前摆着一份长达50页的PDF合同。老板急着要你找出所有关于“违约责任”的条款&#xff0c;并…...

编程新知 2026/3/27 0:35:33

深度学习助力图像增强：多算法与PyTorch复现

深度学习图像低光照增强算法低照度增强3DLUT,DeepUPT,DeepLPF,RetinexNet,Zero-DCE,EnlightenGAN,RetinexFormer等 图像调色增强算法HDRNet,StarEnhancer,CSRNet等 水下增强算法UWGAN,UIEGAN等 pytorch架构复现&#xff0c;有代码和benchmark数据集在图像处理领域&#xff0c;针…...

编程新知 2026/3/26 23:37:05

【经验贴】运营岗考过CDA数据分析师一级经验分享

终于把CDA一级拿下了&#xff01;查成绩那一刻真的挺开心的&#xff0c;不是多难&#xff0c;但全程自己一点点学出来&#xff0c;特别有成就感。今天就把我整个备考过程老老实实写出来&#xff0c;给正在准备的小伙伴一个参考。一、备考原因我最开始考CDA&#xff0c;完全是因…...

编程新知 2026/3/26 22:46:22

foobox-cn个性化定制指南：打造专属foobar2000音乐界面

foobox-cn个性化定制指南&#xff1a;打造专属foobar2000音乐界面 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn foobox-cn是一款为foobar2000播放器设计的DUI&#xff08;自定义用户界面&#xff0…...

编程新知 2026/3/26 20:39:48

高效转换CSDN博客为Markdown：自动化工具与批量处理技巧

1. 为什么需要将CSDN博客转为Markdown格式 作为一个写了多年技术博客的老鸟&#xff0c;我深刻理解Markdown格式对技术写作的重要性。CSDN的富文本编辑器虽然方便&#xff0c;但存在几个致命问题&#xff1a;格式锁定在平台内、排版灵活性差、迁移成本高。而Markdown作为轻量级…...

编程新知 2026/3/26 20:37:47

【SpringBoot】scanBasePackages实战：从默认扫描到精准控制的进阶指南

1. 为什么需要自定义组件扫描路径 第一次用SpringBoot开发项目时&#xff0c;我发现只要把启动类放在顶层包下&#xff0c;所有子包的组件都能自动注册。这种"开箱即用"的特性确实方便&#xff0c;但后来接手一个老项目时遇到了问题&#xff1a;启动耗时长达2分钟&am…...

编程新知 2026/3/26 20:29:45