栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

SpringBoot + Thymeleaf 实现评论显示

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

SpringBoot + Thymeleaf 实现评论显示

 本文章按照仿牛客网里显示评论功能记录下里面的这个主要逻辑。

 公众号:恩故事还在继续

1️⃣ 效果展示

2️⃣ 功能说明

如上图所示,在实际的应用场景中,我们需要对某个帖子或者文字评论,我们不仅能对该帖子评论而且其他用户也可以对我们自己的评论进行回复。
比如: 有A、B、C三个用户,A 对 帖子进行评论
然后B可以对A的评论进行回复,C也可以对B的评论进行回复,A也可以对自己回复。

3️⃣ 数据库设计

CREATE TABLE `comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `entity_type` int(11) DEFAULT NULL,
  `entity_id` int(11) DEFAULT NULL,
  `target_id` int(11) DEFAULT NULL,
  `content` text,
  `status` int(11) DEFAULT NULL,
  `create_time` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `index_user_id` (`user_id`) ,
  KEY `index_entity_id` (`entity_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

4️⃣ 实体类

package org.example.community.entity;

import java.util.Date;

public class Comment {
    private int id;
    private int userId; // 用户id
    private int entityType; // 评论的类型(评论目标类),比如:1-帖子、2-评论、3-用户、4-课程、5-视频
    private int entityId; // 具体的评论id,比如具体是哪个id的帖子
    private int targetId; // 指向评论id,比如我评论了帖子,我当前这条评论可被其他人评论 我是A,其他人是B B->A
    private String content; // 评论内容
    private int status; // 评论状态 0-正常 1-禁言
    private Date createTime; // 回帖时间
	
	// 后面省略 get set 方法
}

✏️ 实体属性解读

对于上面的 entityType 属性, 这个属性代表的是我们评论的类型,比如: 帖子、视频、用户等
然后我们标记 1 - 帖子、 2 - 用户
entityType = 1 则为对帖子的评论
entityType = 2 代表的是对用户的评论、或者是用户对用户的回复
然后我们接着说一下 entityId 这个代表的是帖子ID 也就是用户对哪个帖子的评论
最后就是 targetId 这个代表的是回复人的ID 

如下图所示:

5️⃣ 后端代码实现

	@RequestMapping(path = "/detail/{discussPostId}", method = RequestMethod.GET)
    public String getDiscussPost(@PathVariable("discussPostId") int discussPostId, Model model, Page page) {
        // 帖子
        DiscussPost post = discussPostService.findDisPostById(discussPostId);
        model.addAttribute("post", post);
        // 用户
        User user = userService.findUserById(post.getUserId());
        model.addAttribute("user", user);
        // 评论分页信息
        page.setLimit(5); // 每页显示五条评论
        page.setPath("/discuss/detail/" + discussPostId);
        page.setRows(post.getCommentCount());

        // 评论列表: 给帖子的评论
        List commentList = commentService.findCommentsByEntity(ENTITY_TYPE_POST, post.getId(), page.getOffset(), page.getLimit());
        // 回复: 给评论的评论
        List> commentVoList = new ArrayList<>();

        if(commentList != null){
            for(Comment comment : commentList){
                // 存放评论视图对象
                Map commentVo = new HashMap<>();
                // 一条评论
                commentVo.put("comment", comment);
                // 用户
                commentVo.put("user", userService.findUserById(comment.getUserId()));
                // 回复列表
                List replyList = commentService.findCommentsByEntity(ENTITY_TYPE_COMMENT, comment.getId(),0, Integer.MAX_VALUE);
                // 回复Vo列表
                List> replyVoList = new ArrayList<>();
                if(replyList != null){
                    for(Comment replay : replyList){
                        Map replayVo = new HashMap<>();
                        // 回复
                        replayVo.put("replay", replay);
                        // 作者
                        replayVo.put("user", userService.findUserById(replay.getUserId()));
                        // 回复目标
                        User target = userService.findUserById(replay.getTargetId());
                        replayVo.put("target", target);

                        replyVoList.add(replayVo);
                    }
                }

                commentVo.put("replays", replyVoList);
                // 获取回复数量
                int replayCount = commentService.findCommentCount(ENTITY_TYPE_COMMENT, comment.getId());
                commentVo.put("replayCount", replayCount);
                commentVoList.add(commentVo);
            }
        }

        model.addAttribute("comments", commentVoList);
        return "/site/discuss-detail";
    }

 思维导向

上面的代码我们主要看评论那一部分,这一部分我也是理解了很久, 所以画了个图方面直观理解,如下图所示:
1. 获取所有评论: commentList 
2. 将每条评论存储到视图对象中,主要与前端交互: commentVoList 
3. 通过遍历 commentList 然后将每条评论存入到: commentVo
4. 首先遍历得到的是帖子对应的评论,可以获得的属性是: user、comment 然后添加到 commentVo
5. 其次,我们需要获取每条评论下的回复; replayList
6. 将每条评论下的回复存放到视图视图对象中: replayVoList
7. 通过遍历 replayList 获取每条回复下的 replay、 target、 user
8. 最后用 replayVoList 将 replay、 target、user属性存放 => replyVoList.add(replayVo)
9. 遍历完成每条评论之后直接添加到  commentVo.put("replays", replyVoList)
10. 然后再获取每条帖子下的评论数:  commentVo.put("replayCount", replayCount)
11. 最后直接添加到:commentVoList.add(commentVo)

✏️ 下面这个图是我们渲染给前端的返回值, 可以通过下面这个图直接来取值

6️⃣ 前端渲染


  • 用户头像
    掉脑袋切切 1#
    这开课时间是不是有点晚啊。。。
    #dates.format(cvo.comment.createTime,'yyyy-MM-dd HH:mm:ss')}">发布于 2019-04-15 15:32:18
    • 寒江雪:   Sissi 回复 :寒江雪   这个是直播时间哈,觉得晚的话可以直接看之前的完整录播的~
      #dates.format(rvo.replay.createTime, 'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18

> :seven:  联系 

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/846861.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号