转载

网易式评论箱的实现

预览

网易式评论箱的实现

实现

基础

表的设计
前端的实现

由于每个回复的展示都需要完整的引用路径，我们需要一个字段来记录本条回复所回复的回复 quote_id ，在一个列表中如果每次都递归获取引用的评论，性能上会有很大的瓶颈，所以我们冗余一个字段，记录本条回复的引用路径 quote_path

CREATE TABLE `pre_comments` (   `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,   `article_id` bigint(20) unsigned NOT NULL DEFAULT '0',   `quote_id` bigint(20) unsigned NOT NULL DEFAULT '0',   `quote_path` varchar(255) NOT NULL DEFAULT '',   `user_id` bigint(20) unsigned NOT NULL DEFAULT '0',   `username` char(15) NOT NULL DEFAULT '',   `content` varchar(1024) NOT NULL,   `up` bigint(20) NOT NULL DEFAULT '0',   `down` bigint(20) NOT NULL DEFAULT '0',   `created_at` datetime NOT NULL,   `updated_at` datetime NOT NULL,   `deleted_at` datetime DEFAULT NULL,   PRIMARY KEY (`id`),   KEY `idx_article_id` (`article_id`),   KEY `idx_user_id` (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

数据展示流程:

获取最新的10条评论
获取与最新的10条评论相关被引用的评论
组装数据，返回json
Reactjs渲染数据

网易式评论箱的实现

用伪代码可以表示为如下结构

<CommentBox>   <CommentList>     <CommentItem>       <CommentQuote>         <CommentQuote>           <CommentToolBar>             <CommentForm></CommentForm>           </CommentToolBar>         </CommentQuote>         <CommentToolBar>           <CommentForm></CommentForm>         </CommentToolBar>       </CommentQuote>       <CommentToolBar>         <CommentForm></CommentForm>       </CommentToolBar>     </CommentItem>   </CommentList>   <CommentForm></CommentForm> </CommentBox>