回复和评论功能的实现

springboot 专栏收录该内容
3 篇文章 0 订阅

帖子的回复和评论功能

有许多人在开发一些小项目的时候需要用到评论和回复功能,其实评论和回复的实现也特别简单,我做的一个项目需要用到帖子,所以我就自己写了个,以下是我自己做的帖子的评论和回复功能
*
我用的是springboot框架加mybatis写的,我就直接把代码粘贴出来


首先把数据库表创建好

评论表
在这里插入图片描述

因为我自己搭建的是一个博客系统 所以articleId是文章的id 根据文章id获取文章的评论commentContent和来自哪个人fromId 发表评论的时间commentTime;

回复表
在这里插入图片描述
回复的内容replyContent和来自于哪个用户fromUId和到哪个评论toComId和发表回复的时间

Controller

@RequestMapping("/getAllComment")
@ResponseBody
public JSONArray getAllComment(BigInteger articleId){
    return showBlogService.getCommentByArticleId(articleId);
}

ServiceImpl

/**
 * 查询所有的评论和回复
 * @param articleId
 * @return
 */
@Override
public JSONArray getCommentByArticleId(BigInteger articleId) {
    List<Comment> comments=showBlogDao.getCommentByArticleId(articleId);
    List<Map<String, Object>> newComments = new ArrayList<>();
    List<Map<String, Object>> newReplys;
    Map<String, Object> map;
    Map<String, Object> replymap;
    for(Comment comment:comments){
        map=new HashMap<>();
        map.put("id",comment.getId());
        //根据评论id查询所有回复进行封装
        List<Reply> replys=showBlogDao.getReplyById(comment.getId());
        newReplys = new ArrayList<>();
        if(replys!=null){
            for(Reply reply:replys){
                replymap=new HashMap<>();
                replymap.put("replyName",showBlogDao.findNameById(reply.getFromUId()).getUsername());
                replymap.put("replyContent",reply.getReplyContent());
                replymap.put("replyTime",reply.getReplyTime());
                newReplys.add(replymap);
            }
            map.put("Replys",newReplys);
        }
        map.put("commentContent",comment.getCommentContent());
        map.put("fromUId",comment.getFromUId());
        User user=showBlogDao.getUserByFromUId(comment.getFromUId());
        map.put("username",user.getUsername());
        map.put("avatarImgUrl",user.getAvatarImgUrl());
        map.put("commentTime",comment.getCommentTime());
        newComments.add(map);
    }
    JSONArray jsonArray=JSONArray.fromObject(newComments);
    return jsonArray;
}

Mapper

//获取文章的所有评论
List<Comment> getCommentByArticleId(@Param("articleId")BigInteger articleId);

User getUserByFromUId(int fromUId);

//获取一条评论的所有回复
List<Reply> getReplyById(int toComId);

User findNameById(int id);

剩下的sql语句需要自己去实现

接下来前端界面html,自己通过js去实现填充

<div class="comment" id="J_Comment6337232328259750900">
    <div class="common-avatar J_User" data-userid="15850091">
        <img src="../img/blogTitle.jpg" width="100%" height="100%" />
    </div>
    <div class="comment-block" id="J_CommentBlock6337232328259750900">
        <div class="topic">
            <p class="comment-user"> <span class="comment-username J_User" data-userid="15850091"> 冯佐 </span> <span class="comment-time">1天前</span> </p>
            <div class="comment-content J_CommentContent">
                China  No.1!!!
            </div>
        </div>
        <div class="reply J_ReplyBlock">
            <div class="J_ReplyLatest">
                <div class="reply-title">
                    <p class="reply-title-text">更多回复</p>
                    <span class="reply-title-mark"></span>
                    <div class="reply-title-line">
                        <span></span>
                    </div>
                </div>
                <div class="J_ReplyLatestBlock">
                    <div class="reply-block">
                        <!--<div class="common-avatar J_User" data-userid="15850091">-->
                            <!--<img src="../img/blogTitle.jpg" width="100%" height="100%" />-->
                        <!--</div>-->
                        <p class="reply-content"> <span class="reply-user"> 豆子 :&nbsp;</span> 123 </p>
                        <div class="reply-operate" data-id="6337676401185313214" data-targetid="2234842266">
                            <span class="J_Vote reply-operate-item reply-up"><i></i></span>
                            <i class="reply-dot">&middot;</i>

                            <!--<span class="J_Reply reply-operate-item" id="J_Reply6337676401185313214" data-nick="人生如茶" data-userid="100254186">回复</span>-->
                            <!--<i class="reply-dot">&middot;</i>-->
                            <span class="J_Reply reply-operate-item" id="J_Reply6337676401185313214" data-nick="人生如茶" data-userid="100254186">回复</span>
                            <i class="reply-dot">&middot;</i>

                            <span>刚刚</span>
                            <i class="reply-dot reply-operate-report-dot">&middot;</i>

                            <!--<span class="reply-operate-item reply-operate-report J_ReplyReport" id="J_ReplyReport6337676401185313214" data-userid="100254186" data-targetid="2234842266" data-id="6337676401185313214">举报</span>-->
                            <span class="reply-operate-item reply-operate-report J_ReplyReport" id="J_ReplyReport6337676401185313214" data-userid="100254186" data-targetid="2234842266" data-id="6337676401185313214">举报</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="commentreply">
            <div class="comment-operate J_CommentOperate clearfix" data-targetid="2234842266" data-id="6337232328259750900">
                <span class="J_Vote comment-operate-item comment-operate-up"><i>16</i></span>
                <span class="J_Reply comment-operate-item comment-operate-reply J_ReplyVisited" onclick="replay_show(this);" id="J_Reply6337232328259750900">回复</span>
            </div>

            <div class="reply-box J_ReplyBox hidden" id="J_ReplyBox6337232328259750900" th:if="${session.user}">
                <div class="reply-box-block">
                    <textarea class="reply-box-textarea J_ReplyTextArea"></textarea>
                </div>
                <!--<div class="reply-box-btn J_ReplyBtn" cmt_id="123" id="J_ReplyBtn" onclick="cmt_reply(this);" data-targetid="2234842266" data-id="6337232328259750900" data-nick="" data-userid="">-->
                <div class="reply-box-btn J_ReplyBtn" cmt_id="123" id="J_ReplyBtn"  data-targetid="2234842266" data-id="6337232328259750900" data-nick="" data-userid="">
                    回复
                </div>
            </div>
        </div>
    </div>


    <div class="J_Report comment-report" id="J_Report6337232328259750900" data-userid="15850091" data-targetid="2234842266" data-id="6337232328259750900">
    举报
    </div>
</div>

演示效果

在这里插入图片描述
以上就是帖子的评论和回复功能的实现

  • 6
    点赞
  • 3
    评论
  • 36
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值