从0开始码第一个Spring Boot项目（javaweb个人博客系统）之完成文章一级/二级评论功能

最新推荐文章于 2024-05-03 13:13:36 发布
最新推荐文章于 2024-05-03 13:13:36 发布
阅读量1.6k 收藏 18
点赞数 1
分类专栏： 从0开始创建Spring Boot项目 文章标签： java js spring boot mysql mybatis
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_33418407/article/details/104875469
版权

目录

1. 效果预览

1.1进入首页

进入首页后点击一篇文章进入：
点击文章进入

1.2 测试评论功能

进入文章详细列表后，上方为文章内容区域，下方为文章评论区域
文章评论区域
对此评论框做了数据校验，如果评论内容为空，给出提示并返回，否则评论成功，我们输入一条评论信息，然后点击回复，如下：
评论成功
测试二级评论功能：
显示二级评论
我们点击一级评论下的评论图标，如果有二级评论则显示二级评论和二级评论框，如果没有只显示二级评论框
二级评论框
测试二级评论：
二级评论成功
评论数增加

2. 功能实现

2.1 文章详情页布局(articleDetail.html)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 踩过的坑，springboot引入静态资源路径不要加/static/，否则会报404-->
    <title th:text="${ArticleDetail.title}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/community.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1643567_yxz5icboc4.css">
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap-theme.min.css">
    <script src="/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/community.js"></script>

</head>
<body>

<div th:replace="navigation :: nav"></div>

<div class="row main">
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 col-left">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class=""> <h4 th:text="${ArticleDetail.title}"></h4></div>
            <hr>
            <div class="detail-msg">
            作者： <span th:text="${ArticleDetail.user.name}"></span> | 发布时间：<span th:text="${#dates.format(ArticleDetail.createTime,'yyyy-MM-dd')}"></span> | 阅读数： <span th:text="${ArticleDetail.readCount}"></span>
                <div class="link-items" th:if="${session.user !=null && ArticleDetail.user.id==session.user.id}" >
                    <a th:href="@{/article/edit(id=${ArticleDetail.getId()})}"><i class="iconfont icon-fabu2"></i>&nbsp;编辑</a>
                </div>
            </div>
            <div>
                <span th:text="${ArticleDetail.description}"></span>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="comment">
                <h4><span th:text="${ArticleDetail.getAnswerCount()}"></span> 个回复</h4>
            </div>

            <div class="media media_list" th:each="comment :${comments}">
                <div class="comment-head">
                    <div class="media-left">
                        <a href="#">
                            <img class="img-rounded img-comment" th:src="${comment.getUser().getAvatarUrl()}"  >
                        </a>
                    </div>
                    <div class="media-body">
                        <span class="media-heading" th:text="${comment.getUser().getName()}"></span>
                        <span class="float-right" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd')}"></span>
                    </div>

                </div>
                <div class="comment-style comment-body" th:text="${comment.getContent()}">

                </div>
                <div class="comment-style comment-footer">
                    <div>
                        <span class="operate like">
                        <i class="iconfont icon-z-like" th:like-id="${comment.getId()}" onclick="like(this)"></i>
                        <span id="likeCount" th:text="${comment.getLikeCount()==0?'':comment.getLikeCount()}"></span>
                        </span>
                        <span class="operate answer" th:data-id="${comment.getId()}" onclick="showChildComment(this)">
                        <i class="iconfont icon-pinglun"></i>
                        <span th:id="${'commentCount-'+comment.getId()}"  th:text="${comment.commentCount==0?'':comment.commentCount}"></span>
                        </span>
                    </div>

                    <div class="collapse childCol col-lg-12 col-md-12 col-sm-12 col-xs-12" th:id="${'comment-'+comment.getId()}">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-comment"   th:if="${session.user!=null}">
                            <input type="text" class="form-control" th:id="${'childComment-'+comment.getId()}" name="childComment" placeholder="说说你的看法...">
                            <button type="button" class="btn btn-success btn-comment" th:data-parentId="${comment.getId()}" onclick="subComment(this)">评论</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <!-- 评论 -->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">

            <div class="comment" th:if="${session.user!=null}">
                <input type="hidden" id="parentId" th:value="${ArticleDetail.getId()}">
                <div class="d-flex">
                    <div class="media">
                        <div class="media-comment">
                            <a href="#">
                                <img class="img-rounded img-comment" th:src="${ArticleDetail.user.getAvatarUrl()}"  >
                            </a>
                        </div>
                    </div>
                    <textarea id="commentArea" name="description"  class="comment-content open" maxlength="1000"></textarea>
                </div>
                <button type="button" class="btn btn-success btn-comment" onclick="postComment();">回复</button>
            </div>
            <div class="notLogin" th:if="${session.user==null}">
                要回复问题请先<a onclick="toLogin()">登录</a>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
        <div>
            <p>发起人</p>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object img-rounded" th:src="${ArticleDetail.user.getAvatarUrl()}"  >
                    </a>
                </div>
                <div class="media-body">
                    <span class="media-heading" th:text="${ArticleDetail.user.name}"></span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
2.2 一级/二级评论回复功能

点击回复按钮事件

function postComment() {
    var parentId = $("#parentId").val();
    var content = $("#commentArea").val();
    var data = {"parentId":parentId,"content":content,"type":1};
    if(content==undefined||content==""){
        alert("评论内容不能为空");
        return;
    }
    $.ajax({
        type:"POST",
        url:"/comment",
        data:JSON.stringify(data),
        dataType:"json",
        contentType:"application/json",
        success:function (result) {
            if(result.code==200){
                //$("#commentArea").val("");
                window.location.reload();
                alert(result.message);
            }else {
                alert(result.message)
            }
        }
    });

}

通过ajax请求到后端“/comment”路径（CommentController.java）

//控制层处理前端提交过来的回复评论请求
@PostMapping("/comment")
    @ResponseBody
    public RespDTO doComment(@RequestBody Comment comment,
                             HttpServletRequest request){
        User user = (User) request.getSession().getAttribute("user");
        if(user==null){
            return RespDTO.error(CustomizeErrorCode.NOT_LOGIN.getMessage());
        }
        comment.setCreateTime(System.currentTimeMillis());
        comment.setModifiedTime(System.currentTimeMillis());
        comment.setCommentor(user.getId());
        comment.setLikeCount(0);
        comment.setCommentCount(0);
        //做提交操作
        commentService.insert(comment);
        return RespDTO.ok(CustomizeErrorCode.COMMENT_SUCCESS.getMessage(),user);
    }

Service层进行提交逻辑处理（CommentService.java）

/**
通用的评论回复处理，可以回复一级评论和二级评论
*/
//使用事务
@Transactional
public void insert(Comment comment){
   Long parentId = null;
   Article article1 = articleMapper.selectByPrimaryKey(comment.getParentId());
   if(comment.getType()==null || !CommentType.isExist(comment.getType())){
       throw new CustomizeException(CustomizeErrorCode.COMMENT_TYPE_WRONG);
   }

   //类型为ARTICLE,对文章进行评论
   if(comment.getType()==CommentType.ARTICLE.getType()){
       if(comment.getParentId()==null || articleMapper.selectByPrimaryKey(comment.getParentId())==null){
           throw new CustomizeException(CustomizeErrorCode.COMMENT_ARTICLE_ID_NOT_FOUND);
       }
       parentId = comment.getParentId();
   }else {
   //否则处理二级评论
       Comment parentComment = commentMapper.selectByPrimaryKey(comment.getParentId());
       if(parentComment!=null){
           parentId = parentComment.getParentId();
       }else {
           throw new CustomizeException(CustomizeErrorCode.COMMENT_ARTICLE_ID_NOT_FOUND);
       }
       Comment updateComment = new Comment();
       updateComment.setCommentCount(1);
       updateComment.setId(comment.getParentId());
       commentExtMapper.incSubCommentCount(updateComment);
       if(comment.getParentId()==null || commentMapper.selectByPrimaryKey(comment.getParentId())==null){
           throw new CustomizeException(CustomizeErrorCode.COMMENT_NOT_FOUND);
       }
   }
   //添加评论内容
   commentMapper.insert(comment);
   Article article = new Article();
   //文章总评论数递增
   article.setId(parentId);
   article.setAnswerCount(1);
   articleExtMapper.incComment(article);
}
2.3 二级评论显示功能

点击查看二级评论，通过ajax向后台请求数据：

function showChildComment(ele) {
    var parentId =$(ele).attr("data-id");
    $(ele).toggleClass("operateBgColor");
    var childComment = $("#comment-"+parentId);
    //控制二级评论div显示还是隐藏
    childComment.toggleClass("in ");
    var data = {childId:parentId};
    //如果二级评论框显示，开始请求数据
    if(childComment.hasClass("in")){
        $.ajax({
            type:"get",
            url:"/childComment",
            data:data,
            dataType:"json",
            contentType:"application/json",
            success:function (result) {
                var obj = result.obj;
                $.each(obj,function (i, o) {
                    console.log(o.createTime);
                    var time = new Date(o.createTime).format("yyyy-MM-dd");
                    pushCommentHtml(parentId,o.user.avatarUrl,o.user.name,o.content,time);
                });
            }
        });

    }else{
    	//防止评论框关闭，再次点击内容重复叠加，每次都清空二级评论
        $("#comment-"+parentId +" .comment-detail").remove()

    }

}

二级评论内容拼接到html：

function pushCommentHtml(id,imgurl,uname,content,time) {
    var html = "<div class='comment-detail col-lg-12 col-md-12 col-sm-12 col-xs-12'>" +
        "           <div class='comment-head'>" +
        "               <div class='media-left'>" +
        "                   <a href='#'>" +
        "                       <img class='img-rounded img-comment' src='" + imgurl + "'>" +
        "                   </a>" +
        "               </div>" +
        "               <div class='media-body'>" +
        "                   <span class='media-heading'>" + uname + "</span>" +
        "                   <span class='float-right'>" + time + "</span>"+
        "               </div>" +
        "           </div>" +
        "        <div class='comment-style comment-body'>" + content + "</div>" +
        "   </div>"

    var ele = $("#comment-" + id);
    ele.prepend(html);


}

前端请求“/childComment”路径开始获取二级评论内容：

 @GetMapping("/childComment")
    @ResponseBody
    public RespDTO getChildComments(@Param("childId") Long childId, HttpServletRequest request){
        User user = (User) request.getSession().getAttribute("user");
        if(user==null){
            return RespDTO.error(CustomizeErrorCode.NOT_LOGIN.getMessage());
        }
        if(StringUtils.isEmpty(childId)){
            return RespDTO.error(CustomizeErrorCode.COMMENT_NOT_FOUND.getMessage());
        }
        List<CommentDTO> commentDTOS = commentService.selectCommentsById(childId, CommentType.COMMENT.getType());
        return RespDTO.ok("获取二级评论成功",commentDTOS);
    }

Service层处理获取评论功能（包括一级评论和二级评论）,一级评论是在进入详情页就开始获取，二级评论则是用户操作获取：

public List<CommentDTO> selectCommentsById(long id,int type) {

        List<CommentDTO> commentDTOS  = new ArrayList<>();
        /** 查询出当前文章的所有一级评论 **/
        CommentExample commentExample = new CommentExample();
        commentExample.createCriteria().andParentIdEqualTo(id).andTypeEqualTo(type);
        if(type==CommentType.ARTICLE.getType()){

            commentExample.setOrderByClause("create_time desc");
        }else if(type == CommentType.COMMENT.getType()){
            commentExample.setOrderByClause("create_time asc");
        }
        List<Comment> comments = commentMapper.selectByExample(commentExample);
        if(comments.size()<=0){
            return new ArrayList<>();
        }
        /** 使用lambda表达式获取用户id  **/
        Set<Long> ids = comments.stream().map(c -> c.getCommentor()).collect(Collectors.toSet());
        UserExample user = new UserExample();
        user.createCriteria().andIdIn(new ArrayList<>(ids));
        List<User> users = userMapper.selectByExample(user);
        //将获取到的用户List转为map
        Map<Long, User> userMap = users.stream().collect(Collectors.toMap(User::getId, u -> u, (k1, k2) -> k1));
        //遍历并拷贝赋值
        comments.stream().forEach(comment -> {
            CommentDTO commentDTO = new CommentDTO();
            BeanUtils.copyProperties(comment,commentDTO);
            commentDTO.setUser(userMap.get(comment.getCommentor()));
            commentDTOS.add(commentDTO);
        });

        return commentDTOS;
    }
wanik666
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
spring boot 商品：一二级评论 ajax
n20164206199的博客
02-10 495
效果图 spring boot 框架+thymeleaf渲染+ajax实现 前端 production.html /*回复商品按钮（一级评论）*/ <!--回复--> <input type="hidden" id="production_id" th:value="${productiondto.id}"> <textarea class="form-cont...
基于javaWeb个人记账管理系统设计与实现.docx
05-06
本论文详细阐述了一个基于JavaWeb技术的个人记账管理系统的开发过程，旨在提供一个用户友好的、功能完善的个人财务管理平台。该系统结合了Java编程语言、Web技术和MySQL数据库，为用户提供便捷的收支记录、统计分析...
多级留言/评论的功能实现——SpringBoot3后端篇
最新发布
道阻且长 心态要好
05-03 2498
想要实现类似bilibili的评论区那样，在药材、方剂、文章详情页都实现多级留言/评论功能，但是不以递进的方式来展现层级关系
java 一级和二级评论的实现
weixin_40918145的博客
07-28 1214
import java.util.Date; import java.util.List; import com.fasterxml.jackson.annotation.JsonInclude; import com.fasterxml.jackson.annotation.JsonProperty; import lombok.Data; import lombok.Getter; import lombok.Setter; @Data @JsonInclude(JsonInclude.Inclu.
springboot + mybaties-plus + thymeleaf实现二级评论区
qq_43710588的博客
05-05 1038
最近在写一个论坛项目，想做一个评论区，但是在网上也搜不到写的比较好的，就寻思那自己构思写一个吧。 先上效果图： 这个评论区是仿知乎做的，虽然做的比较丑吧，日期也没有做个格式化，但是该有的东西应该是有了。其中点击评论图标，会将隐藏的评论框显示出来。 那么先上后台代码 数据库表分两个 root_comment aid即文章id，uid即发布者的id，text即评论文本 son_comment pid表示根评论的id，而psid表示这条评论是回复的哪一条子评论，为null表示回
构建一个Bootstrap WordPress主题#13 开启评论功能
QY的博客
05-04 1479
我们要做的最后一件事是在我们的文章详情页面添加一些评论功能： 打开 single.php 文件，我们要在类名为panel-body的div底部再添加一个评论模板， 添加comments_template() 方法: &amp;amp;lt;?php endif; ?&amp;amp;gt; &amp;amp;lt;?php comments_template(); ?&amp;amp;gt; &amp;amp;lt;/div&amp;amp;
react 学习--结合bootstrap实现评论功能
小鹏要逆袭的博客
10-24 3046
Title // 定义评论发送消息的子组件 var Content = React.createClass({ getInitialState:function () { return { inputText:""
基于javaweb的购物商城系统项目
08-20
虽然这个项目可能更适合初学者，但它提供了从零开始搭建一个完整系统的实践经验。 二、技术栈 1. Java：作为后端开发语言，Java以其稳定性和跨平台特性，是构建Web应用的首选。 2. Servlet与JSP：作为JavaWeb的基础...
基于JavaWeb的高职二级院系任务积分管理系统的设计.docx
10-31
总的来说，这篇基于JavaWeb的高职二级院系任务积分管理系统设计的论文，全面覆盖了从需求分析到系统实现的全过程，为读者展示了如何利用JavaWeb技术构建一个实用的教务管理系统，对于相关专业的毕业生来说，具有很高...
Java项目之springboot家具商城系统（源码）
04-24
"Java项目之springboot家具商城系统（源码）" 是一个基于Java技术栈，利用Spring Boot框架构建的电子商务应用，专门针对家具销售行业。此项目提供了完整的源代码，允许开发者深入研究其架构和实现细节，或者直接用于...
react结合bootstrap实现评论功能
10-15
主要为大家详细介绍了react结合bootstrap实现评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap图标实现移动端的星星评分功能
04-30
利用Bootstrap图标实现移动端的星星评分功能，兼容各大平台系统，测试通过安卓和苹果手机！
微博web端一级评论和二级评论接口的响应体
04-26
微博weibo.com 端一级评论和二级评论接口返回的相应体，因为这个是unicode编码的，看不到中文，这里已经解码过，可以使用bs4等工具直接提取内容
本科毕业设计，一个基于Android的APP作为客户端，服务器端则是JavaWeb项目。.zip
10-05
本篇将详细解析一个本科毕业设计项目，该设计是一个基于Android的APP客户端与JavaWeb服务器端相结合的应用。首先，我们要理解这个项目的两个核心组成部分：Android客户端和JavaWeb服务器。 **一、Android客户端** ...
基于jQuery+bootstrap的评论回复功能
reg183的专栏
03-17 2051
效果如下： 主要代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>评论插件</title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> <link rel="stylesheet" type="text/
mongoose 实现评论功能（一级和二级评论）
Zhooson的博客
12-09 2722
创建数据，可以创建一级和二级评论， 查询返回数据整合数据返回，具体实现效果如下。具体启动node，连接mongodb ，创建router，controller等操作自行处理。 最终的数据结构 1. 创建model 一级评论 parentId：0， 二级评论为 parentId：_id from to 可以关联User表，这里为了演示，只当输入字段处理 const mongoose =...
基于SSM和Boostrap实现的电影评论网站设计
毕业作品网站
09-30 805
但对于用户一个良好的用户界面非常重要，普通用户根本不会关心你的界面时怎么实现的，他所关心的是UI是否美丽、大方、好看。管理员拥有对节目单表的增删改查等操作，并且对网站内电影有简单的处理功能，意在对网站进行管理与维护；3.内容多样：通过管理员对信息的掌握程度以及采集速度的保证，每天进行更新内容的操作，并且通过挑选分类，精心的编排到各个模块。1.网站界面：在界面上不追求奢华或者繁杂的功能，只追求两个字：“简洁”，通过干净的首页、功能、观看页面，让观看者体会到舒适的观看环境。4.2 获取图片功能的实现 12。
微信公众号文章增加评论功能
weixin_34342207的博客
10-22 421
       开通微信认证的公众号可进入微信发布后台，进行评论申请，在微信后台出现评论管理市即可进行评论。默认发布文章是没有评论功能的。另外公众号运营者可以选择精选评论，公众帐号文章只显示被运营者放入精选的评论。       目前公众号的开通评论功能还在内测阶段，只开放给以媒体类型申请的公众号，个人或企业暂时还没有。...
javaWeb项目--二级评论完整思路
Dennis_nafla的博客
08-06 1658
其中List中的TwoComment表示一个二级评论对象，二级评论的属性有：该二级评论的id，发布该二级评论的用户的完整信息，发布时间，评论的内容，父级评论者的详细信息，父级评论的内容。其中，OneComment对象表示一个一级评论，一级评论的属性有：该一级评论的id，发布该一级评论的用户的完整信息，发布时间，评论的内容,以及一个List,需要获取的内容：（只有博客id，评论者id，评论时间，level是1，评论的内容，没有父级评论的id和内容。
写一个个人博客论坛系统写帖子 评论帖子javaweb
06-09
好的，那么首先我们需要确定这个系统的基本功能和模块，然后再逐步实现。 1. 基本功能和模块 - 用户管理：包括用户注册、登录、修改密码、查看个人信息等。 - 文章管理：包括文章的发布、编辑、删除、查看等。 - ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值