评论模块在很多系统中都有,CodeRiver河码 作为类似程序员客栈的沟通协作平台自然也不会少。
前端界面是参考了简书的评论模块,专门写了一篇文章介绍实现步骤:
vue + element-ui + scss 仿简书评论模块
感兴趣的可以看看。
项目地址:https://github.com/cachecats/coderiver
代码在 根目录/java/comments-service
文章将分三部分介绍:
- 前端界面分析
- 数据库设计
- 功能实现
一、前端界面分析
先看看前端界面长什么样,知道了前端需要什么数据,就知道数据库该怎么设计了。
首先评论的主体可以是人、项目、资源,所以要有一个 type
字段标明这条评论的类型。
以项目为例,一个项目下面可能会有多条评论。每条评论其实分为两种,一种是直接对项目的评论,称之为父评论吧;另一种是对已有评论的评论,称为子评论。
梳理一下关系,每个项目可能有多个父评论,每个父评论可能有多个子评论。项目与父评论,父评论与子评论,都是一对多的关系。
由此可知数据库应该分为两个表,一个存储父评论,一个存储子评论。
再看都需要什么字段,先分析主评论。必须要有的是项目id,得知道是对谁评论的,叫 ownerId 吧。还有评论者的头像、昵称、id,还有评论时间、内容、点赞个数等。
子评论跟父评论的字段差不多,只是不要点赞数量。
二、数据库设计
分析了界面,知道需要什么字段,就开始设计数据库吧。
评论主表(父评论表)
CREATE TABLE `comments_info` (
`id` varchar(32) NOT NULL COMMENT '评论主键id',
`type` tinyint(1) NOT NULL COMMENT '评论类型:对人评论,对项目评论,对资源评论',
`owner_id` varchar(32) NOT NULL COMMENT '被评论者id,可以是人、项目、资源',
`from_id` varchar(32) NOT NULL COMMENT '评论者id',
`from_name` varchar(32) NOT NULL COMMENT '评论者名字',
`from_avatar` varchar(512) DEFAULT '' COMMENT '评论者头像',
`like_num` int(11) DEFAULT '0' COMMENT '点赞的数量',
`content` varchar(512) DEFAULT NULL COMMENT '评论内容',
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
PRIMARY KEY (`id`),
KEY `owner_id` (`owner_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='评论主表';
评论回复表(子评论表)
CREATE TABLE `comments_reply` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`comment_id` varchar(32) NOT NULL COMMENT '评论主表id',
`from_id` varchar(32) NOT NULL COMMENT '评论者id',
`from_name` varchar(32) NOT NULL COMMENT '评论者名字',
`from_avatar` varchar(512) DEFAULT '' COMMENT '评论者头像',
`to_id` varchar(32) NOT NULL COMMENT '被评论者id',
`to_name` varchar(32) NOT NULL COMMENT '被评论者名字',
`to_avatar