博客的评论与回复功能的实现

分类：菜鸟笔记作者：Zou_05

你好呀，我是小邹。

在之前的文章中，提到了个人博客的简单回复功能的实现，今天记录一下完整的评论功能的实现。

实现思路

数据库设计：评论表需要定义出当前博客id以便做关联，因为评论需要有回复功能，则需要定义当前评论有无上一级评论，需要定义出上级评论id。

代码方面：点击评论需要获取当前博客id与自己评论数据进行插入，点击回复按钮需要获取上一条评论的id以及用户姓名作为回复，回复成功后，后台在数据库中查找出所有parentCommentId为-1的值进行遍历，因为上级id为-1则证明当前评论无父节点。在通过对父节点id的遍历查询出所有对应评论的子节点。

页面效果

实现的关键在于：新提交的评论排在最上面，三级评论排在二级评论的下面。

在这里插入图片描述

代码实现

实体类

package com.zou.blog.model.domain;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * @author: 邹祥发
 * @date: 2022/7/12 08:01
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("article_comments")
public class Comments {
    @TableId
    private Integer id;
    private String nickname;
    private String email;
    private String content;
    private Date createTime;
    private Integer blogId;
    private Integer isVisible;
    private String avatar;
    private String blogUrl;
    private String province;
    private String ip;
    private Date updateTime;
    private Integer sort;
    //评论的父节点id
    private Integer parentId;
    private String parentName;
    //回复评论
    @TableField(exist = false)
    private List<Comments> replyComments = new ArrayList<>();
    @TableField(exist = false)
    private Comments parentComment;
}

评论表单页面

<form target="myiframe" style="padding-top: 20px">
    <input type="hidden" name="blogid" value="1"/>
    <input type="hidden" name="blogUrl" value="about"/>
    <input type="hidden" name="parentCommentId" value="-1">
    <div id="comment-form" class="ui form">
        <div class="field">
            <textarea id="aaa" name="content" placeholder="欢迎高质量的留言和交流，低俗和无意义的留言不会过审" 		                       required="required">
            </textarea>
        </div>
        <div class="fields">
            <div class="field m-mobile-wide m-margin-bottom-small">
                <div class="ui left icon input">
                    <img id="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=1565453341&s=100"
                         class="ui mini circular image" style="margin-top: 11px">
                </div>
            </div>
            <div class="field m-mobile-wide m-margin-bottom-small" style="padding-top: 10px">
                <div class="ui left icon input">
                    <i class="qq icon"></i>
                    <input type="text" id="QQ" name="qq" placeholder="输入QQ号自动获取昵称头像"
                           required="required"/>
                </div>
            </div>
            <div class="field m-mobile-wide m-margin-bottom-small" style="padding-top: 10px">
                <div class="ui left icon input">
                    <i class="user icon"></i>
                    <input type="text" id="nickname" name="nickname" placeholder="昵称"
                           required="required"/>
                </div>
            </div>
            <div class="field m-mobile-wide m-margin-bottom-small" style="padding-top: 10px">
                <div class="ui left icon input">
                    <input type="text" id="ccc" name="email" placeholder="邮箱"
                           hidden="hidden" required="required">
                </div>
            </div>
            <div class="field m-margin-bottom-small m-mobile-wide" style="padding-top: 10px">
                 <button id="comment-btn" type="submit" class="ui violet button m-mobile-wide "><i
                         class="edit icon"></i>发布
                 </button>
            </div>
        </div>
    </div>
</form>

点击发布

js有些多余的代码，会前端的可以自己删。

<script type="application/javascript">
    <!--根据QQ自动获取头像信息-->
    $('#QQ').blur(function () {
        var QQ = $("#QQ").val();
        $.ajax({
            url: "https://api.usuuu.com/qq/" + QQ,
            type: "GET",
            dataType: "json",
            success: function (result) {
                console.log(result["data"].name, result["data"].avatar);
                $("#nickname").val(result["data"].name);
                var obj = document.getElementById("avatar");
                obj.src = result["data"].avatar;
                $("#avatar").val(result["data"].avatar);
                $("[name='email']").val(QQ + '@qq.com');
            }
        });
    });

    $(function () {
        $('#comment-btn').click(function () {
            var blogid = $("input[name='blogid']").val().trim();
            var blogUrl = $("input[name='blogUrl']").val().trim();
            var content = $("textarea[name='content']").val().trim();
            var nickname = $("input[name='nickname']").val().trim();
            var email = $("input[name='email']").val().trim();
            var avatar = $("#avatar").val();
            var parentId = $("input[name='parentCommentId']").val();
            if (reply1 != null) {
                var parentName = reply1;
            } else {
                parentName = nickname;
            }
            var data = {
                blogid: blogid,
                blogUrl: blogUrl,
                content: content,
                nickname: nickname,
                email: email,
                avatar: avatar,
                parentId: parentId,
                parentName: parentName
            };
            if (content !== "" && content !== null && content !== undefined && nickname !== "" && nickname !== null && nickname !== undefined) {
                //验证邮箱格式
                const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if (!emailReg.test(email)) {
                    alert('邮箱格式错误');
                    return;
                }
                $.ajax({
                    type: "POST",
                    url: '/comments',
                    data: data,
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    success: function (req) {
                        console.log(req)
                    },
                    error: function (e) {
                        console.log(e)
                    }
                })
                alert('您的评论已成功投递至召田最帅boy，请耐心等待他审核吧！');
                $('#aaa').val('');
            } else {
                alert("昵称和评论内容不能为空！")
                return;
            }
        })
    })
</script>

点击回复按钮，在评论区显示回复给哪个用户

在这里插入图片描述

<a class="reply" data-commentid="1" data-commentnickname="zou" th:attr="data-commentid=${reply.id}, data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>

对应函数

	//回复
    var reply1;

    function reply(obj) {
        let commentId = $(obj).data('commentid');
        let commentNickname = $(obj).data('commentnickname');
        reply1 = commentNickname;
        //添加信息到评论表单
        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
        $("[name='parentCommentId']").val(commentId);
        //滚动到评论表单
        $(window).scrollTo($('#comment-form'), 500);
    }

后端controller层代码

	/**
     * 发表评论
     */
    @ResponseBody
    @PostMapping(value = {"comments"})
    public void comments(HttpServletRequest request, @RequestBody @RequestParam("blogid") Integer blogId,
                         @RequestBody @RequestParam("blogUrl") String blogUrl,
                         @RequestBody @RequestParam("content") String content,
                         @RequestBody @RequestParam("nickname") String nickname,
                         @RequestBody @RequestParam("email") String email,
                         @RequestBody @RequestParam("avatar") String avatar,
                         @RequestBody @RequestParam("parentId") Integer parentId,
                         @RequestBody @RequestParam("parentName") String parentName) throws Exception {
        String ip = IpUtils.getIpAddr(request);
        String province = IpUtils.getIpPossession(ip);
        Comments comments = new Comments();
        comments.setId(Integer.parseInt(String.valueOf(System.currentTimeMillis() / 1000)));
        comments.setContent(content);
        comments.setEmail(email);
        comments.setCreateTime(new Date());
        comments.setBlogId(blogId);
        comments.setBlogUrl(blogUrl);
        comments.setProvince(province);
        comments.setIp(ip);
        comments.setUpdateTime(new Date());
        //数值越大则优先展示
        if (parentId == -1) {
            comments.setSort(1);
        } else {
            comments.setSort(Integer.parseInt(String.valueOf(System.currentTimeMillis() / 990)));
        }
        //未审核的评论默认不可见
        //暂时可见
        comments.setIsVisible(CommentStatus.VISIBLE.getStatus());
        //设置父节点id，-1为首节点
        comments.setParentId(parentId);
        comments.setParentName(parentName);
        comments.setNickname(nickname);
        comments.setAvatar(avatar);
        commentService.save(comments);
    }
    
    //根据文章id查询评论列表
    model.addAttribute("comments", commentService.listCommentByBlogId(article.getId()));

评论列表-展示层级关系

<div class="comment" th:each="comment : ${comments}">
    <a class="avatar">
        <img th:src="@{${comment.avatar}}">
    </a>
	<div class="content">
         <a class="author">
            <span th:text="${comment.nickname}"></span>
         </a>
         <div class="metadata">
              <span class="date" th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">					  </span>
         </div>&nbsp;
         <span th:text="'来自'+${#strings.substring(comment.province,0,2)}"
               style="color: darkgray"></span>
         <div class="text" th:text="${comment.content}"></div>
         <div class="actions">
              <a class="reply" data-commentid="1" data-commentnickname="zou" th:attr="data-commentid=${comment.id}, data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
        </div>
    </div>
    <div class="comments" th:if="${#arrays.length(comment.replyComments)} gt 0">
         <div class="comment" th:each="reply : ${comment.replyComments}">
              <a class="avatar">
                 <img th:src="@{${reply.avatar}}">
              </a>
              <div class="content">
                   <a class="author">
                      <span th:text="${reply.nickname}"></span>&nbsp;
                   </a>
                   <span th:text="|@ ${reply.parentName}|" class="m-grey"></span>
                   <div class="metadata">
                   <span class="date" th:text="${#dates.format(reply.createTime, 'yyyy-MM-dd HH:mm')}">						</span>
             </div>&nbsp;
             <span th:text="'来自'+${#strings.substring(reply.province,0,2)}"
                   style="color: darkgray"></span>
             <div class="text" th:text="${reply.content}"></div>
                  <div class="actions">
                       <a class="reply" data-commentid="1" data-commentnickname="zou"
                          th:attr="data-commentid=${reply.id}, data-commentnickname=${reply.nickname}"
                              onclick="reply(this)">回复</a>
                  </div>
             </div>
        </div>
    </div>
</div>

后端service层代码

先获取顶级的数据，在一层一层往下找、放入集合

	@Override
    public List<Comments> listCommentByBlogId(Integer blogId) {
        QueryWrapper<Comments> wrapper = new QueryWrapper<Comments>().eq("blog_id", blogId).eq("is_visible", CommentStatus.VISIBLE.getStatus()).orderByAsc("sort").orderByDesc("create_time");
        wrapper.select("id", "nickname", "content", "create_time", "avatar", "parent_id", "province", "blog_id", "parent_name");
        List<Comments> comments = commentsMapper.selectList(wrapper);
        return firstComment(comments);
    }

    public List<Comments> firstComment(List<Comments> comments) {
        //存储父评论为根评论-1的评论
        ArrayList<Comments> list = new ArrayList<>();
        for (Comments comment : comments) {
            //其父id等于-1则为第一级别的评论
            if (comment.getParentId() == -1) {
                //我们将该评论下的所有评论都查出来
                comment.setReplyComments(findReply(comments, comment.getId()));
                //这就是我们最终数组中的Comment
                list.add(comment);
            }
        }
        return list;
    }

    /**
     * @param comments 我们所有的该博客下的评论
     * @param targetId 我们要查到的目标父id
     * @return 返回该评论下的所有评论
     */
    public List<Comments> findReply(List<Comments> comments, int targetId) {
        //第一级别评论的子评论集合
        ArrayList<Comments> reply = new ArrayList<>();
        for (Comments comment : comments) {
            //发现该评论的父id为targetId就将这个评论加入子评论集合
            if (find(comment.getParentId(), targetId)) {
                reply.add(comment);
            }
        }
        return reply;
    }

    public boolean find(int id, int target) {
        //不将第一节评论本身加入自身的子评论集合
        if (id == -1) {
            return false;
        }
        //如果父id等于target，那么该评论就是id为target评论的子评论
        if (id == target) {
            return true;
        } else {
            //否则就再向上找
            return find(commentsMapper.selectById(id).getParentId(), target);
        }
    }

总结

本文较全面地介绍了博客评论以及回复功能的实现。实现逻辑：因为是个人博客普通用户不需要登录即可浏览，所以没有做普通用户登录功能，评论时只需输入自己的QQ号，自动拉取头像和昵称进行评论。

相关链接：评论如何获取IP地址？

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

htmlspringboot

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot