Alice Re-Code
发布于

评论设计实现,完全模范bilibili实现评论功能,表的设计、sql如何查找,以及前端的一些设计

如图,bilibili 的评论主要分为根评论(顶级评论)和子评论(回复评论),名称我乱说的哈哈,这里的顶级评论就是最顶级的意思,他不是任何评论的回复评论,bilibili 前端显示也没有那种层层递进,但我相信表的结构设计肯定是有所体现的

红色为顶级评论,蓝色为子评论

1.表结构设计
废话不多说,首先是表结构的设计,一般评论应该有的属性字段我就不说了,这里主要考虑说明的是根评论与子评论(回复评论)是一个表还是两个表的问题,考虑到如果是两张表话,那就必须得为子评论再加一张子评论点赞表以及子评论又有子评论呢,就会发现问题又回到了原点,所以基于这两点考虑我将他们设计成一张表;

那么我们需要干些什么呢?

1.如何区分子评论和顶级评论:给表添加一个 rootCommentId 字段,如果为 null 则为顶级评论,如果不为空则为顶级评论的 id

2.子评论回复的哪个评论(可能为子评论,可能为顶级评论):给表添加一个 toCommentId 字段,如果为 null 则为顶级评论,否则为目标评论 id,这样一来就有层层递进的设计,能溯源

最终我的表结构如下:

当然我这里应该还要有回复目标用户昵称的字段如下图:据我的观察这个值有两点要注意:1,子评论的回复评论才有这个字段,2.不是动态的,而是回复目标评论用户某一时刻昵称,也就是说之后回复目标评论用户改变昵称,这个字段的值也不会改变

这样就很简单,只需要添加就完事了

2.如何进行 SQL 查找

还是研究第一张图片的评论结构,我们还是发现主要两部分,根评论、根评论子评论总数以及他们各自的子评论(如果多于 3 条就只找前三条)

红色为顶级评论,蓝色为子评论

如何做呢?

1.分页获取顶级评论列表以及各自的子评论总数,这个 SQL 比较好写

2.根据顶级评论的 id 列表,获取他们各自前三条子评论(以时间排序升序),一条 SQL 语句就能办到,如下

这里有几点关键点要说一下

1.蓝色框为顶级评论分组获取前三的关键

2.分组的关键为绿色框内,按 rootCommentId 分组

3.获取前三的关键是红色框,这里要特别说的是 videoCommentId 一定是要不能重复,否则假如有四个子评论且 videoCommentId 都是一样的就会获取为空的尴尬结果(需要改进),我这里是自增主键,所以能代表按时间排序

4.那么效率如何呢,先给 rootCommentId 添加索引,再使用 explain 试试

可以看到查询效率是不错的,所以查询效率没问题。

3.根据 rootCommentId 分页获取子评论,SQL 好写

后端代码设计到这里结束;

前端设计:

这里值得一说的就是,就是红色框内的分页组件

仔细观察你会发现有这些情况:

只有一页的情况:

两页的情况:

三页的情况:

四页的情况:

五页的情况:

六页的几种情况:

七页的几种情况:

大于七页的几种情况:

总结一下:

1.首先子评论是否多于两页,少于两页分页组件为空,不继续,否则继续

2.输出分页组件,如下:红色框内为必定会有的,这里说明一下 5 代表当前页也为中心点,1 和 19 分别代表首页跟尾页

3.这里主要说明下蓝色框算法如何实现:

a.选一个中心点:首先判断当前页如果是首页或者尾页就进行加 1 或减 1 作为中心点,否则当前页就是中心点

b.两个循环外的变量用来分别判断是否输出左右的两个省略号,各自的值将会是下面的第二次循环左右跳后的值

c.以中心点循环进行两次左右横跳(加一减一,加二减二),左右各跳一次为一次循环

d.循环:初始化一个循环内的临时变量(初始值为 false)用来判断是否继续下次循环,左跳一次后判断如果小于等于首页就不输出,否则输出,临时变量置 true;右跳一次后判断如果大于等于尾页就不输出,否则输出,临时变量置 true;

e.判断是否需要输出左右的省略号:大于 2 输左省略号出,否则不输出,小于尾页-1 输出右省略号,否则不输出

算法结束;

至此前后端完成。

效果如下,这是我的毕业项目,模仿 bilibili 的视频直播网站

原文地址

评论(2)