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

「MyBatis」实现留言板

news 来源：原创 2024/9/19 8:56:40

效果预览

界面长这样，每次提交之后，会在下面生成一条记录，刷新页面或者关掉后重新打开，这些记录仍然存在

思路

我们需要在数据库中保存一条一条的消息，那就需要一个类

@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 {@Autowiredprivate 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;//不为空就加入 listlist.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>