🧸欢迎来到dream_ready的博客,📜相信你对这篇博客也感兴趣o (ˉ▽ˉ;)
用户登录前后端开发(一个简单完整的小项目)------SpringBoot与session验证(带前后端源码)全方位全流程超详细教程
目录
[1、封装实体类 ------ MessageInfo(单独创建一个.Java文件)](#1、封装实体类 —— MessageInfo(单独创建一个.Java文件))
项目前端页面展示:
首先,定义前后端交互接口
讲解:
- 此项目注重前后端信息的交互,舍去了登录的操作
- 提交留言 ------ 点击提交后,前端从输入框获取三个参数的值,向后端发送这MessageInfo的三个参数的值,后端接收后保存
- 查看所有留言 ------ 前端发送无参的请求,后端向前端返回一个List集合,前端遍历集合将数据展示到前端页面上
然后,创建一个SpringBoot项目
如何创建一个SpringBoot项目 ------ 超详细教程
编写前端页面
在resource目录下的static目录下创建表白墙的html页面 ,此处我将其命名为 messagewall.html
如图红框位置:
表白墙页面(messagewall.html):
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三个参数 ,用来定义成集合中泛型对应的类型,存放前端传来的数据
java
@Data // 组合注解,集成了@Getter @Setter @ToString 等注解
public class MessageInfo {
private String from;
private String to;
private String message;
}
2、逻辑代码
创建Class文件,我将其命名为MessageController.Java
以下是全部代码:
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:
java
import lombok.Data;
MessageController.Java:
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;