Springboot搭建我的博客网站过程记录(四)

2021年11月20日 阅读数:2
这篇文章主要向大家介绍Springboot搭建我的博客网站过程记录(四),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

文章评论功能的实现

前端代码的实现

思路:数据库绑定文章的id,用户的id和评论的id,须要的时候就根据文章的id去查评论,评论id去查用户去联查就行了,用户和评论的关系是一对多的关系。即一个用户有多条评论,但一条评论只能属于一个用户。javascript

实现:发布发布评论按钮时,获取当文章的id,评论的内容,判断评论的内容是否为空,
若是为空提醒用户输入评论内容,反之发送一个ajax请求到后台,先判断用户是否登录,若是用户没有登录,提醒用户登录并跳转到登录页面。css

Springboot搭建我的博客网站过程记录(四)_博客搭建

后台代码

判断用户是否登录,若是用户登录,保存评论
Springboot搭建我的博客网站过程记录(四)_分享_02
建立一个评论的实现类,填充实现类,添加到数据库
Springboot搭建我的博客网站过程记录(四)_分享_03
mapper接口和SQL
Springboot搭建我的博客网站过程记录(四)_分享_04
若是添加记录成功,就返回一个评论的dto对象,返回给前端,让js填充评论内容
beanCopier 是cglib下的bean复制工具,复制的对象拥有的属性能够比被复制的属性少,可是其余属性必定要同样。还有两个对象都须要由getter方法,用于反射取值。
Springboot搭建我的博客网站过程记录(四)_分享_05
评论的dto对象
Springboot搭建我的博客网站过程记录(四)_分享_06
填充评论的js代码
想要源码的能够私信我,这里就贴出来给大家看html


//填充文章评论和回复
function putInComment(data) {
    $('#comment').val('');
    var comment = $('.comment');
    var commentBottom = $('.comment-bottom');
    commentBottom.html('');

    if (data.length == 0) {
        var comments = $('<div class="comments">' +
            '<span class="noComment" style="color: black">尚未评论,快来抢沙发吧!</span>' +
            '</div>');
        commentBottom.append(comments);
        comment.append(commentBottom);
    }
    else {
        var articleComment = $('<div class="article-comment"></div>');
        var articleCommentTop = $('<div class="article-comment-top">' +
            '<span class="article-comment-word">评论</span>' +
            '<div class="article-comment-line"></div>' +
            '</div>');
        var newComment = $('<div class="new-comment">' +
            '<i class="all-comment zi zi_list"></i>所有评论(<span class="commentNum">' + '' + '</span>)' +
            '</div>');
        articleComment.append(articleCommentTop);
        articleComment.append(newComment);
        var allComments = $('<div class="all-comments"></div>');
        $.each(data, function (index, obj) {
            var visitorReplies = $('<div class="visitorReplies"></div>');
            if (obj.replies != null) {
                $.each(obj.replies, function (index1, obj1) {
                    var visitorReply = $('<div id="p' + obj1.replyId + '" class="visitorReply"></div>');
                    var visitorReplyWords = $('<div class="visitorReplyWords">' +
                        '<a class="answerer">' + obj1.user.userName + '</a>: <a class="respondent">@' + obj1.user.userName + ' </a>' + obj1.replyContent +
                        '</div>');
                    var visitorReplyTime = $('<div class="visitorReplyTime">' +
                        '<span class="visitorReplyTimeTime">' + obj1.replyTime + '</span>' +
                        '<a>' +
                        '<i class="replyReply zi zi_msgchat">&nbsp;&nbsp;回复</i>' +
                        '</a>' +
                        '</div>');
                    visitorReply.append(visitorReplyWords);
                    visitorReply.append(visitorReplyTime);
                    visitorReply.append($('<hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>'));
                    visitorReplies.append(visitorReply);
                });
            }
            var subCommentList = $('<div class="sub-comment-list" id = "' + obj.commentId + '"></div>');
            var moreComment = $('<div class="more-comment">' +
                '<a>' +
                '<i class="moreComment zi zi_msgchat"> 添加新评论</i>' +
                '</a>' +
                '</div>');
            subCommentList.append(visitorReplies);
            subCommentList.append(moreComment);
            var subComment = $('<div class="sub-comment" id = "' + obj.commentId + '"></div>');
            if (obj.replies != null) {
                subComment.append(subCommentList);
            }
            subComment.append($('<div class="reply-sub-comment-list am-animation-slide-bottom">' +
                '<div class="replyWord">' +
                '<div class="replyWordBtn">' +
                '<textarea class="replyWordTextarea" placeholder="写下你的评论..."></textarea>' +
                '<button type="button" class="sendReplyWordBtn btn btn-success">发送</button>' +
                '<button type="button" class="quitReplyWordBtn btn btn-secondary">取消</button>' +
                '</div>' +
                '</div>' +
                '</div>'));

            var amG = $('<div class="row"></div>');
            amG.append($('<div class="visitorCommentImg col-sm-2 col-lg-1">' +
                '<img src="' + obj.user.avatarUrl + '">' +
                '</div>'));
            var amUSm10 = $('<div class="col-sm-10 col-lg-11"></div>');
            var visitorInfo = $('<div class="visitorInfo">' +
                '<span class="visitorFloor">#' + (index + 1) + '楼</span>' +
                '<span class="visitorName">' +
                obj.user.userName +
                '</span>' +
                '<span class="visitorPublishDate">' +
                obj.commentTime +
                '</span>' +
                '</div>');
            var visitorSay = $('<div class="visitorSay">' +
                obj.commentContent +
                '</div>');
            var toolGroup1 = $('<div class="tool-group">' +
                '<a>' +
                '<i class="like zi zi_digg">&nbsp;&nbsp;<span>' + obj.comment_like_count + '</span>人赞</i>' +
                '</a>' +
                '<a>' +
                '<i class="reply zi zi_msgchat">&nbsp;&nbsp;回复</i>' +
                '</a>' +
                '</div>');
            var toolGroup2 = $('<div class="tool-group">' +
                '<a>' +
                '<i class="like zi zi_digg text-success">&nbsp;&nbsp;<span>' + obj.comment_like_count + '</span>人赞</i>' +
                '</a>' +
                '<a>' +
                '<i class="reply zi zi_msgchat">&nbsp;&nbsp;回复</i>' +
                '</a>' +
                '</div>');
            amUSm10.append(visitorInfo);
            amUSm10.append(visitorSay);
            if (obj.comment_like_count > 0) {
                amUSm10.append(toolGroup2);
            } else {
                amUSm10.append(toolGroup1);
            }
            amUSm10.append(subComment);
            amG.append(amUSm10);
            var visitorComment = $('<div class="visitorComment" id="' + obj.commentId + '"></div>');
            visitorComment.append(amG);
            visitorComment.append($('<hr>'));
            allComments.append(visitorComment);
        });
        articleComment.append(allComments);
        commentBottom.append(articleComment);
        comment.append(commentBottom);
        //添加评论数
        $('.commentNum').html(data.length);
    }

效果展现

Springboot搭建我的博客网站过程记录(四)_博客搭建_07

评论中回复的实现

思路:基本实现下来和评论差很少,绑定的对象是评论和用户,不用考虑文章,由于每一条回复属于一个文章,也属于一个用户,文章和回复的关系是一对多的关系。即一条评论能够有多个回复。一条回复也属于一个用户,也是一对多。
实现:和评论基本一致,点击发送回复按钮,检查内容是否为空,不为空发送一个ajax到后端,判断用户是否登录,没有登录提醒用户登录并跳转到登录页面。前端

前台代码


    //发送评论中的回复
    $('.sendReplyWordBtn').click(function () {
        var $this = $(this);
        var replyContent = $this.parent().parent().find($('.replyWordTextarea')).val();
        var pId = $this.parent().parent().parent().parent().attr("id");
        if (replyContent == "") {
            toastr.warning("留白我咋知道你想啥呢");
        } else {
            $.ajax({
                type: 'POST',
                url: '/article/comment/publishReply',
                dataType: 'json',
                data: {
                    replyContent: replyContent,
                    articleId: $(".likeBtn").attr('id'),
                    parentId: pId
                },
                success: function (data) {
                    if (data == null) {
                            toastr.warning('请先登录噢');
                            window.location.replace("/login");
                    } else {
                        toastr.success('发布评论回复成功,+1条回复');
                        var sub_comment = $this.parent().parent().parent().parent();
                        var visitorReply = $('<div id=p' + data.replyId + ' class="visitorReply"></div>');
                        var visitorReplyWords = $('<div class="visitorReplyWords">' +
                            '<a class="answerer">' + data.user.userName + '</a>: <a class="respondent">@' + respondent + ' </a>' + data.replyContent + '' +
                            '</div>');
                        var visitorReplyTime = $('<div class="visitorReplyTime">' +
                            '<span class="visitorReplyTimeTime">' + data.replyTime + '</span>' +
                            '<a>' +
                            '<i class="replyReply zi zi_msgchat">&nbsp;&nbsp;回复</i>' +
                            '</a>' +
                            '</div>');
                        visitorReply.append(visitorReplyWords);
                        visitorReply.append(visitorReplyTime);
                        visitorReply.append('<hr data-am-widget="divider" style="" class="am-divider am-divider-dashed" />');

                        if (sub_comment.find('.sub-comment-list').length > 0) {
                            sub_comment.find('.visitorReplies').append(visitorReply);
                        } else {
                            var visitorReplies = $('<div class="visitorReplies"></div>');
                            var sub_comment_list = $('<div class="sub-comment-list"></div>');
                            visitorReplies.append(visitorReply);
                            sub_comment_list.append(visitorReplies);
                            sub_comment_list.append($('<div class="more-comment">' +
                                ' <a>' +
                                '<i class="moreComment zi zi_msgchat"> 添加新评论</i>' +
                                '</a>' +
                                '</div>'));
                            sub_comment.prepend(sub_comment_list);
                        }

                        //给新加入的评论中的回复和下面的添加新评论添加点击事件
                        $this.parent().parent().parent().parent().find('.visitorReplies>div:last-child').find('.replyReply ').click(function () {
                            respondent = $(this).parent().parent().prev().find($('.answerer')).html();
                            $(this).parent().parent().parent().parent().parent().next().css("display", "block");
                            $(this).parent().parent().parent().parent().parent().next().find($('.replyWordTextarea')).val('@' + respondent + ' ');
                            $(this).parent().parent().parent().parent().parent().next().find($('.replyWordTextarea')).focus();
                        });
                        $this.parent().parent().parent().parent().find('.sub-comment-list').find('.more-comment').find('.moreComment').click(function () {
                            $(this).parent().parent().parent().next().find($('.replyWordTextarea')).val('');
                            $(this).parent().parent().parent().next().css("display", "block");

                            respondent = $(this).parent().parent().parent().parent().parent().find('.visitorInfo').find('.visitorName').html();
                        });
                        $this.parent().find($('.replyWordTextarea')).val('');
                        $this.parent().parent().parent().css("display", "none");
                    }
                },
                error: function () {
                    toastr.error("回复失败!");
                }
            });
        }

    });

后端代码

Springboot搭建我的博客网站过程记录(四)_踩坑_08
也是返回一个dto对象,用来填充回复
Springboot搭建我的博客网站过程记录(四)_博客搭建_09java

效果图

Springboot搭建我的博客网站过程记录(四)_踩坑_10