个人博客网站

2023-12-27 05:29| 来源: 网络整理| 查看: 265

文章目录新增留言留言显示重点：多层留言功能实现通常情况下，在博客网站中，无论是文章下的评论还是单独的留言，都会有多级的回复功能。这里我们主要介绍多级回复功能的留言实现。在这里插入图片描述

新增留言

在这里的新增留言，由留言板块、姓名板块和邮箱板块组成，其中隐藏获取了用户的电脑和浏览器内核版本。

发布

这里的js主要是：通过调用Browser这个函数，获取用户的浏览器和电脑内核信息。

var info = new Browser(); currentTimeHtml1 = ' ' + info.os + ' ' + info.osVersion + ' '; currentTimeHtml2 = ' ' + info.browser + info.version + ' '; document.getElementById("win1_lei").value = currentTimeHtml1; document.getElementById("win2_lei").value = currentTimeHtml2;

这里是对评论表单的input进行规范

//评论表单验证 $('.ui.form').form({ fields: { title: { identifier: 'content', rules: [{ type: 'empty', prompt: '请输入评论内容' } ] }, content: { identifier: 'nickname', rules: [{ type: 'empty', prompt: '请输入你的大名' }] }, type: { identifier: 'email', rules: [{ type: 'email', prompt: '请填写正确的邮箱地址' }] } } }); $('#messagepost-btn').click(function () { var boo = $('.ui.form').form('validate form'); if (boo) { console.log('校验成功'); postData(); } else { console.log('校验失败'); } });

给后端发送评论的数据（分为两种：一种是单独的留言；另一种是回复留言的留言）

//发送请求给后端 function postData() { $("#message-container").load(/*[[@{/messages}]]*/"", { "parentMessage.id": $("[name='parentMessage.id']").val(), // "blog.id" : $("[name='blog.id']").val(), "nickname": $("[name='nickname']").val(), "email": $("[name='email']").val(), "content": $("[name='content']").val(), "windowName": $("[name='window.name']").val(), "browserName": $("[name='browser.name']").val() }, function (responseTxt, statusTxt, xhr) { // $(window).scrollTo($('#message-container'),500); clearContent(); }); }

后端处理得到的留言（多层留言一会再说）

//新增留言 @PostMapping("/message") public String post(Message message, HttpSession session, Model model){ User user = (User) session.getAttribute("user"); //设置头像 if(user != null){ message.setAvatar(user.getAvatar()); message.setAdminMessage(true); } else { message.setAvatar(avatar); } if(message.getParentMessage().getId()!=null){ message.setParentMessageId(message.getParentMessage().getId()); } //System.out.println(message); messageService.saveMessage(message); List messages = messageService.listMessage(); model.addAttribute("messages",messages); return "message :: messageList"; } 留言显示

留言显示的主要模块有：留言人的姓名，（被留言的人），留言的时间，电脑和浏览器内核，留言的内容，回复按钮等部分。这里包含父级留言和子级留言。

留言 Matt 栈主今天下午 5:42 ; Windows10 ;; ; Chrome 97.0.4692.71 ; 太赞了！回复删除小红栈主 ;@ 小白今天下午 5:42 ; Windows10 ;; ; Chrome 97.0.4692.71 ; 太赞了！回复删除

打开页面后，先初始化加载留言的内容。

// 初始化加载 $(function () { $("#message-container").load(/*[[@{/messagecomment}]]*/"messagecomment"); });

调用后端，查询到留言

//查询留言 @GetMapping("/messagecomment") public String messages(Model model) { List messages = messageService.listMessage(); model.addAttribute("messages", messages); return "message::messageList"; }

回复功能的js：先从html中获取要回复留言的id和该发送者的name，作为parentid和parentname。然后在要填写的留言内容上，添加“@+parentname”；并且记录parentid的id。之后就和普通的发送留言一样，点击发布调取后端。

function reply(obj) { var messageId = $(obj).data('messageid'); var messageNickname = $(obj).data('messagenickname'); $("[name='content']").attr("placeholder", "@" + messageNickname).focus(); $("[name='parentMessage.id']").val(messageId); $(window).scrollTo(0, 500); } 重点：多层留言功能实现

首先清楚我们向后端发送的数据种类，这里的parentmessage.id是看是否有父级，要是有父级的话，id为父级留言id，无则为null 在这里插入图片描述

然后主要是后端对多层留言的处理：这里首先判断父级id，然后set进值。之后的service方法直接调用了message。在这里插入图片描述在service中，直接把message的信息存入数据库中即可。

@Override public int saveMessage(Message message) { message.setCreateTime(new Date()); return messageDao.saveMessage(message); }

到这里都没有问题，就是简单的获取数据，存放在数据库中。主要是对留言的展示处理：在这里插入图片描述调用后端查询留言，这里的messages用List存储，调用messageservice中的listmessage()方法。

这里的messageservice中的三个方法很重要，listMessage、combineChildren、recursively。分别的功能是查询留言、查询出子留言、迭代查询出子集回复。

我们先看listMessage()方法：先查询出所有parentid为-1的的message，这些message为父留言。分别对每个parentid=-1的留言进行处理，先获得该message的id和name。然后查询以该留言的id作为parentid的留言，查询的子级留言为childmessage。然后调用combineChildren(childMessages, parentNickname1)方法。把存储该留言的所有子留言、多层留言的tempReplys存入ReplyMessages中，作为父级留言下面的所有留言。

private List tempReplys = new ArrayList(); @Override public List listMessage() { //查询出父节点 List messages = messageDao.findByParentIdNull(Long.parseLong("-1")); for(Message message : messages){ Long id = message.getId(); String parentNickname1 = message.getNickname(); List childMessages = messageDao.findByParentIdNotNull(id); //查询出子留言 combineChildren(childMessages, parentNickname1); message.setReplyMessages(tempReplys); tempReplys = new ArrayList(); } return messages; }

我们再看combineChildren方法：传入了childmessage和parentnickname，对childmessage>0的进行处理。先获取第一层子留言的id和name，然后存入tempReplys中。然后调用recursively(childId, parentNickname)方法。

private void combineChildren(List childMessages, String parentNickname1) { //判断是否有一级子回复 if(childMessages.size() > 0){ //循环找出子留言的id for(Message childMessage : childMessages){ String parentNickname = childMessage.getNickname(); childMessage.setParentNickname(parentNickname1); tempReplys.add(childMessage); Long childId = childMessage.getId(); //查询二级以及所有子集回复 recursively(childId, parentNickname); } } }

再看trecursively()方法：传入childid和childname，然后查询所有parentid为childid的留言。查询该留言的id和name，存入tempReplys中。然后再调用trecursively()方法，迭代查询以该留言作为父类留言的留言。

private void recursively(Long childId, String parentNickname1) { //根据子一级留言的id找到子二级留言 List replayMessages = messageDao.findByReplayId(childId); if(replayMessages.size() > 0){ for(Message replayMessage : replayMessages){ String parentNickname = replayMessage.getNickname(); replayMessage.setParentNickname(parentNickname1); Long replayId = replayMessage.getId(); tempReplys.add(replayMessage); //循环迭代找出子集回复 recursively(replayId,parentNickname); } } }

然后返回list类型的messages，通过model.addAttribute()发送给前端。在这里插入图片描述然后是留言的展示，首先是一级留言：（这里的messages中的每一个message都是一级留言）然后是重要的多级留言展示：

【本文地址】

公司简介

联系我们