为自己的 SSM项目设计评论功能

最新推荐文章于 2024-04-19 09:15:37 发布

衬衫的价格..

最新推荐文章于 2024-04-19 09:15:37 发布

阅读量443

点赞数

分类专栏：项目文章标签： java spring spring boot mybatis

本文链接：https://blog.csdn.net/qq_43716934/article/details/132362860

版权

项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细描述了如何为SSM项目设计评论功能，包括显示所有评论、增加评论以及获取评论总数的前后端交互逻辑。涉及到实体类设计、Ajax请求、用户验证等关键步骤。

摘要由CSDN通过智能技术生成

设计思路

在这里插入图片描述

首先需要设计评论信息的实体类（对应评论表）
主要分为以下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();