文章评论回复的设计思路

零、前言

之前做过一款小程序，其中包含用户发布动态、评论、回复评论的功能，当时不知道怎么设计，一直在网上百度也没有找到好的设计，现在把之前的设计思路放出来。如果你更好的设计思路，请在评论区放上文章链接。

一、表结构设计

(以下表结构是精简过的)

一共两张表，一张是用户发布的动态表(news)，一张是评论表(news_comment)

额外提醒一点：如果要存储emoji表情，数据库字段的编码格式要是：utf8mb4_unicode_ci

CREATE TABLE `news` (
  `id` int NOT NULL AUTO_INCREMENT,
  `uid` int DEFAULT NULL COMMENT '用户id',
  `uname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户昵称',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
  `context` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci COMMENT '文本内容',
  `good` int DEFAULT '0' COMMENT '点赞数',
  `comment` int DEFAULT '0' COMMENT '评论数',
  `look` int DEFAULT '0' COMMENT '浏览数',
  `time` datetime DEFAULT NULL COMMENT '发表时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

CREATE TABLE `news_comment` (
  `id` int NOT NULL AUTO_INCREMENT,
  `nid` int DEFAULT NULL COMMENT '动态id',
  `uid` int DEFAULT NULL COMMENT '用户ID',
  `uname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户昵称',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户头像',
  `context` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '评论内容',
  `time` datetime DEFAULT NULL COMMENT '发布时间',
  `reply_id` int DEFAULT '0' COMMENT '回复评论的根节点(0代表是评论的根节点)',
  `reply_uid` int DEFAULT NULL COMMENT '回复的对象的id',
  `reply_uname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '回复的对象的昵称',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

二、数据存取

news表没什么好说的，重点说下news_comment表

1.添加评论

对于评论文章的评论，将reply_id设置为0，然后插入

对于回复某个评论的评论，将reply_id设置为根节点的评论的ID，即这条评论所关联的最初那条评论文章的评论的ID

2.查询某条动态的评论

先查询这条动态reply_id=0的评论

SELECT * FROM `news_comment` where reply_id=0 and  nid=#{nid} 

再查每一条评论的根节点下有哪些评论

SELECT * FROM `news_comment` where reply_id=#{reply_id} and  nid=#{nid} 

这样每条跟评论下面都挂着0到n条子评论，数据结构大概如下所示

{
    NewsComment comment;
    List<NewsComment> child;
}

三、前端渲染

前端先渲染每一条根评论，再根据每条跟评论下是否有非空的child来决定是否渲染评论回复，查询的时候没有设置排序条件，所以默认是按id排的。数据也做了一定的冗余，每条评论都可以知道是谁回复谁的。

四、最终效果

最终效果类似QQ的评论回复