效果预览
界面长这样，每次提交之后，会在下面生成一条记录，刷新页面或者关掉后重新打开，这些记录仍然存在
思路
我们需要在数据库中保存一条一条的消息，那就需要一个类
@Data
public class MessageInfo {
private Integer id;
private String from; //谁留言
private String to; //留言对谁说
private String message; //留言的内容
private Integer deleteFlag; //删除的标志
private Date createTime;
private Date updateTime;
}主体要实现两个功能：发布留言、查看所有留言
先来写 Mapper 接口
由于要实现持久化存储，所以发布留言就是将留言放进数据库的表中，即 insert 操作；而对于查看留言，其实就是查询表中所有留言
@Mapper
public interface MessageInfoMapper {
//发布留言：把留言放进数据库
@Insert("insert into message_info (`from`,`to`,`message`) values (#{from},#{to},#{message})")
public Integer insertMessage(MessageInfo messageInfo);
@Select("select from,to,message from message_info where delete_flag = 0")
public List<MessageInfo> selectAllList();
}接下来写 Service，调用接口那两个方法就 ok 了：
@Service
public class MessageService {
@Autowired
private MessageInfoMapper messageInfoMapper;
//发布留言
public Integer publishMessage(MessageInfo messageInfo) {
return messageInfoMapper.insertMessage(messageInfo);
}
//查询留言
public List<MessageInfo> getMessageList() {
return messageInfoMapper.selectAllList();
}
}再来写 Controller 实现接口中的方法
@RestController
@RequestMapping("MessageBoard")
public class MessageController {
private List<MessageInfo> list = new ArrayList<>();
@RequestMapping("/getList")
public List<MessageInfo> getList() {
return list;
}
//发布留言，就是把留言信息加入 list
@RequestMapping("/publish")
public boolean publish(MessageInfo messageInfo) {
System.out.println("接收参数"); //打日志
//检查留言是否为空
if(!StringUtils.hasLength(messageInfo.getTo())
|| !StringUtils.hasLength(messageInfo.getFrom())
|| !StringUtils.hasLength(messageInfo.getMessage()))
return false;
//不为空就加入 list
list.add(messageInfo);
return true;
}
}最后是前端部分的代码，这部分直接粘贴下面的代码就 ok 了，如果要改 UI 的话，可以到 BootStrap 上面拿现成的模板改一下
网址：BootStrap
<!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: mediumpurple;
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="message">
</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: "/MessageBoard/getList",
type: "get",
success: function (messageInfos) {
var finalHtml = "";
for(var message of messageInfos) {
finalHtml += '<div>' + message.from + '对' + message.to + '说：' + message.message + '</div>';
}
$(".container").append(finalHtml);
}
});
submit();
function submit(){
console.log("发布留言");
//1. 获取留言的内容
var from = $('#from').val();
var to = $('#to').val();
var message = $('#message').val();
if (from== '' || to == '' || message == '') {
return;
}
//发送ajax请求
$.ajax({
url: "/MessageBoard/publish",
type: "post",
data: {
from: $('#from').val(),
to: $('#to').val(),
message: $('#message').val()
},
success: function(result) {
if(result) {
//2. 构造节点
var divE = "<div>"+from +"对" + to + "说:" + message + "</div>";
//3. 把节点添加到页面上
$(".container").append(divE);
//4. 清空输入框的值
$('#from').val("");
$('#to').val("");
$('#message').val("");
} else {
alert("输入不合法，请重新输入");
}
}
});
}
</script>
</body>
</html>
