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

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

news 2025/8/3 21:39:46

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

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

项目前端页面展示：

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

然后，创建一个SpringBoot项目

编写前端页面

编写后端代码

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

2、逻辑代码

方法publishMessage处理逻辑：

方法getMessageInfo处理逻辑：

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

项目前端页面展示：

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

讲解：

此项目注重前后端信息的交互，舍去了登录的操作
提交留言 —— 点击提交后，前端从输入框获取三个参数的值，向后端发送这MessageInfo的三个参数的值，后端接收后保存
查看所有留言 —— 前端发送无参的请求，后端向前端返回一个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>

代码逻辑：

从input输入框内获取from，to，message三个参数，向后端发送post请求并将参数发送过去，后端接收参数并保存，前端页面也将这段数据直接展示在页面上
每次刷新页面，前端向后端发送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处理逻辑：

接收前端传来的数据，自动将其封装为MessageInfo类型
进行参数的校验，判断三个参数是否有空，若有空，返回false(失败)
若参数正确，则添加留言，往集合中添加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.lryc.cn/news/212450.html