项目前端页面展示：
首先，定义前后端交互接口
讲解：
- 此项目注重前后端信息的交互，舍去了登录的操作
- 提交留言 —— 点击提交后，前端从输入框获取三个参数的值，向后端发送这MessageInfo的三个参数的值，后端接收后保存
- 查看所有留言 —— 前端发送无参的请求，后端向前端返回一个List集合，前端遍历集合将数据展示到前端页面上
然后，创建一个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. 拼接节点的 html
var 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. 拼接节点的 html
var 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;
