继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

一张表实现短视频"评论区"完整功能

北桥苏
关注TA
已关注
手记 87
粉丝 1
获赞 8

前言

        现如今,不管是哪种类型的应用,评论区都少不了。从工具类的到媒体信息流类的,评论留言都是最基本的互动环节。比如抖音短视频下,针对视频每个用户都可以发表自己的观点;而针对用户的评论,其他的用户又可以对其进行评论,依次回复下去。

        那么,一个视频的评论回复的表如何设计?功能如何实现呢?如标题,这里是用一张表完成,但是在我完成功能后发现拆成两个张更合适(评论表和回复表),这个后面已经改了,最后也会说一下。

http://img4.mukewang.com/64b52f5200015d8307430388.jpg

效果

        页面上展示是,视频下分页展示第一级的评论列表,评论下的评论是进行折叠,点击“查看全部”分页显示所有层级的评论。一张表的设计下,评论下的评论下……的评论是通过关联上一级主键的,也就是递归的方式。但是下面的是只要是对评论进行评论都放在第一级的评论下,而递归是树形结构。虽然也能通过对树形结构数据处理拉伸到二季下,但是在底下评论特别多的情况就会体验特别差。所以针对这个我对表格加了一个面包屑字段,表结构如下,然后再分次完成评论数据的如何添加,按页面方式查询的。


表结构

CREATE TABLE `short_video_comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pid` int(11) DEFAULT '0' COMMENT '父级ID',
  `crumbs` json DEFAULT NULL COMMENT '面包屑',
  `video_id` int(11) DEFAULT '0',
  `user_id` int(11) DEFAULT '0',
  `commented_user_id` int(11) DEFAULT '0' COMMENT '被评论者用户ID',
  `is_pubisher` tinyint(1) DEFAULT '0' COMMENT '是否作者',
  `content` varchar(255) DEFAULT '' COMMENT '评论',
  `state` int(1) DEFAULT '1' COMMENT '1. 显示  0. 隐藏',
  `like_count` int(11) DEFAULT '0' COMMENT '点赞数',
  `create_time` int(11) DEFAULT '0' COMMENT '创建时间',
  `delete_time` int(11) DEFAULT '0' COMMENT '删除时间',
  `update_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=282 DEFAULT CHARSET=utf8mb4 COMMENT='用户评论记录表';


http://img1.mukewang.com/64b52f680001f3bf08250264.jpg

        如上图的 “crumbs” 字段是一个数组方式的json,也就是添加时会记录当前评论的关系链,从最顶层ID到最近的上一级。而实现分页显示第二级下的所有评论,只需要把 “crumbs” 索引为1的pid作为查询条件就能找到该id下的所有评论,如下是查询二级评论ID为285的所有评论列表。

select * from short_video_comment where json_extract(crumbs, "$[1]") = 285

http://img1.mukewang.com/64b52f890001bc1506240275.jpg        

而对于关于crumbs如何存入和谁回复谁,就只需要在评论添加的时候,对上一级评论ID进行递归查询所有上级ID放入 "crumbs", 被回复者就更好办了,查询上一级评论的评论者ID(user_id),放入当前评论记录的 "commented_user_id",展示的时候只需要关联一下用户信息表就可以了,接下来就是业务代码演示了。

 

代码演示

▲评论添加

public static function commentAdd($videoInfo, $userId, $content, $commentInfo = [])
{
    $commentId = 0;
    $videoId = $videoInfo['id'] ?? 0;
    $publisherId = $videoInfo['user_id'] ?? 0;    try {
        $crumbs = [0];        if ($commentInfo) {
            $pid = $commentInfo['id'] ?? 0;
            $insert['commented_user_id'] = $commentInfo['user_id'] ?? 0;
            $insert['pid'] = $pid;
            $crumbs = ShortVideoComment::getCrumbs($pid);
        }

        $insert['video_id'] = $videoId;
        $insert['user_id'] = $userId;
        $insert['is_pubisher'] = $userId == $publisherId ? 1 : 0;
        $insert['content'] = $content;
        $insert['state'] = ShortVideoComment::STATE['SHOW'];
        $insert['create_time'] = time();
        $insert['crumbs'] = json_encode($crumbs);

        $commentId = ShortVideoComment::insertGetId($insert);        if ($commentId && $videoId) {
            $map[] = ['id', '=', $videoId];
            ShortVideoModel::where($map)->setInc('comment_count');

            $userId && self::setRating(6, $userId, $videoId);
        }
    } catch (\Exception $e) {
        $preFileName = str::snake(__FUNCTION__);
        $path = self::getClassName();
        write_log("msg:" . $e->getMessage(), $preFileName . "_error", $path);
    }    return $commentId;
}


▲获取面包屑

public static function getCrumbs($cateId = 0, &$ids = [])
{
    $idArr = array_merge((array)$cateId, $ids);
    $info = self::where('id', $cateId)->find();    if ($info['pid'] != 0) {
        $idArr = self::getCrumbs($info['pid'], $idArr);
    } else {
        array_unshift($idArr, 0);
    }    return $idArr;
}

▲数据查询

public static function getList($map, $page = 1, $size = 30, $pid = 0)
{
    $where[] = ['delete_time', '=', 0];
    $where[] = ['state', '=', self::STATE['SHOW']];
    $map = array_merge($where, $map);

    $field = ['id,crumbs,pid,video_id,user_id,commented_user_id,content'];
    $queryObj = self::field($field)        ->with([            'user' => function ($query) {
                $query->withField('id, nickname, avatar, mobile');
            },            'commented_user' => function ($query) {
                $query->withField('id, nickname, avatar, mobile');
            }
        ])        ->where($map);

    $pid && $queryObj->whereRaw("JSON_EXTRACT(`crumbs` ,'$[1]') = $pid");

    $list = $queryObj->page($page, $size)        ->order('like_count desc')        ->select();    return $list;
}

 

写在最后

        以上是初版时候根据业务设计的表格,后来的评论区完全仿照某音,所以也就对表格进行了拆分。分成了评论表和回复表,只要是对评论进行评论就是回复,这样在后面数据庞大的时候,性能会更好一点。但是如何是前期设计的就是一张表,而迭代的时候也要有某音评论的效果,可以作为解决方法尝试滴。


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP