網易式評論箱的實現原理分析

網易式評論箱的實現是許多站長非常想做到的一個東西了，今天我們來看看網易式評論箱的實現原理吧，具體的如下所示。 預覽 實現 基礎

1. 表的設計
2. 前端的實現

由於每個回復的展示都需要完整的引用路徑，我們需要一個字段來記錄本條回復所回復的回復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>

優化

分庫分表
通用計數組件
緩存
靜態化
通過查詢場景來決定分庫分表的策略

根據articleId查詢最新的評論
根據articleId 和 commentId更新計數
根據articleId 和 quoteId寫入新的評論
展示某個用戶(userId)所有的評論
其中有兩個分表的路由key articleId 和 userId