设计思路

• 首先需要设计评论信息的实体类（对应评论表）
  
• 主要分为以下2个功能：

显示所有评论
当我们进入文章详情页的时候，页面就会通过 ajax 发送请求给服务器，这个请求中就带有这篇文章的 id ，服务器就可以通过文章的 id 获取评论数据，最后返回给客户端。

增加评论
当用户在评论框中输入评论，点击评论按钮就会触发 ajax 请求，请求中就带有这篇文章的 id 和用户评论的信息，服务器接收到请求后，通过 session 获取用户的 id 数据，将 用户 id 、文章 id 、评论信息、用户名这4个数据增加到评论表中的一条数据中，最后通过 js 刷新页面，重新展示评论信息。

获得的评论数
当我们进入文章详情页的时候，页面就会通过 ajax 发送请求给服务器，这个请求中就带有这篇文章的 id ，服务器就可以通过文章 id 获取该篇文章的评论总数，最后返回给客户端。

增加评论

 function addComment() {
            //非空校验
            var inputComment = jQuery("#input-comment");
            if (inputComment.val() == "") {
                alert("评论不能为空!");
                inputComment.focus();
                return;
            }
            var aid = getURLParam("id");
                if(aid != null && aid >0){
            jQuery.ajax({
                type: "POST",
                url: "/comment/add",
                data: {
                    "aid": aid,
                    "comment": inputComment.val()
                },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data == 1) {
                        alert("评论成功!");
                        //刷新当前页面
                        location.href = location.href;
                    } else {
                        alert(result.msg);
                    }
                }
            });
        }

        } 

@RequestMapping("/add")
    public Object add(HttpServletRequest request, CommentInfo commentInfo) {
        //非空校验
        if(commentInfo == null  || !StringUtils.hasLength(commentInfo.getComment())) {
            return AjaxResult.fail(-1, "参数错误!");
        }
        //获取当前用户 id
        UserInfo userInfo = SessionUtil.getLoginUser(request);
        if(userInfo == null || !StringUtils.hasLength(userInfo.getUsername()) ||
                !StringUtils.hasLength(userInfo.getPassword())) {
            return AjaxResult.fail(-1, "请登录后评论!");
        }
        //设置 uid后存储评论数据
        commentInfo.setUid(userInfo.getId());
        commentInfo.setUsername(userInfo.getUsername());
        return AjaxResult.success(commentService.add(commentInfo));
    }

显示评论

 function showComment() {
        var aid = getURLParam("id");
            jQuery.ajax({
                type: "POST",
                url: "/comment/show",
                data: {"aid": aid},
                success: function (result) {
                    if (result != null && result.code == 200) {
                        var CommentListDiv = "";
                        for (var i = 0; i < result.data.length; i++) {
                            var CommentInfo = result.data[i];
                            CommentListDiv += '<div class="card">';
                            CommentListDiv += '<span class="reviewer"><a href="myblog_list.html?id='+CommentInfo.uid+'" target="_blank">' + CommentInfo.username + '：</a></span>';
                            CommentListDiv += '<span id="createtime">' + CommentInfo.createtime + '</span>'
                            CommentListDiv += '<p class="comment">';
                            CommentListDiv += CommentInfo.comment;
                            CommentListDiv += '</p>';
                            CommentListDiv += '</div>';
                        }
                        //将 html 填充进去
                        jQuery("#commentDiv").html(CommentListDiv);
                    } else {
                        alert("评论信息获取失败!");
                    }
                }
            });
        }
        showComment();

 @RequestMapping("/show")
    public Object show(Integer aid) {
        //非空校验
        if(aid == null) {
            return AjaxResult.fail(-1, "参数错误!");
        }
        //通过文章 id 获取所有该文章的评论
        return AjaxResult.success(commentService.showCommentByAid(aid));
    }

评论总数

 @RequestMapping("/myComment")//查询单篇文章评论
    public  Integer myComment(Integer aid){
        if(aid == null) {
            return 0;
        }
        //通过文章 id 获取所有该文章的评论
        int total = commentService.getCommentsByAid(aid);
        return  total;
    }

 var total=0;//评论总数
    function myComment(){
        var aid = getURLParam("id");
        if(aid != null && aid >0){
        jQuery.ajax({
                url:"/comment/myComment",
                type:"POST",
                data:{ "aid": aid},
                success:function(result){
                     if(result.code ==200 && result.data != null){
                        total = result.data;
                        jQuery("#commentsCount").text(total);
                     }
                },
                error:function(err){
                }

            })
        }
     }
     myComment();