評論系統開發小結

以前用disqus作爲評論，由於牆的原因導致無法訪問，就一直沒有加上新的評論系統，國內的評論系統有些已經關掉了，也無法使用，所以就想自己寫一個簡單的評論系統，只是實現了最基本的功能，還有大量的工作沒有做。先整理成如下筆記。

演示地址

一、設計

• 前端

  • 前端只需引入一個js文件就直接可以使用，類似disqus
  • 一個用戶多個站點的評論分別保存，不互相干擾
  • 評論只有兩級，避免嵌套層級太多導致樣式問題
  • 採用github登陸（以後添加更多登陸方式）
  • 技術棧: javascript + scss + webpack，儘量減少第三包的引入，加快加載速度

• 後端

  • 後端採用微服務的方式，認證、用戶、評論模塊作爲單獨的系統，通過gateway來進行接口的轉發和權限驗證。
  • 技術棧：golang + postgres + docker

二、開發

###後端

數據結構

站點數據結構

• ID: 數據唯一標識
• OperatorID：用戶id
• domain：站點域名，比如abc.com

評論數據結構

• FromID: 評論者用戶id （必須）
• ToID： 被評論者用戶id
• Content: 內容 （必須）
• ParentID：父級評論id
• Url： 評論對應的頁面url，此處刪除了http/https，比如: abc.com?id=xxx（必須）
• WebsiteID: 站點id（必須）
• ReplyID: 回覆評論的id

返回結構

FromName、FromAvatar、ToName、ToAvatar分別代表對應用戶的暱稱和頭像，Children代表子評論列表

後端流程

1. 註冊站點拿到站點id
2. 在創建評論時首先判斷前端傳過來的websiteID(站點id) 和 domain(域名)能否找站點的數據，能則創建評論，否則返回錯誤信息。
3. 評論成功後會進行郵件通知

前端

先上一個效果圖：

在站點加上如下代碼

<div id="vcomment-go"></div>
<script src="//comment.vwood.xyz/vcomment.js?u_id=xxxxxxxxxxxxxxxxxxxxxxxxxx"></script>

代碼執行後會將u_id的數據以及頁面的url設置到iframe的src數據中，iframe就可以拿到評論了。

發佈評論時需要先登陸，所以接入了github，具體的接入方式看官網。

PS: 由於採用iframe來展示評論，避免與網站的樣式產生衝突，注意由於iframe的高度不會與內容的高度自適應，所以採用了**postMessage**來通知父級窗口設置iframe高度。

總結

本次只是做了評論系統的一點點功能，還有很多需要添加，比如：數據緩存、前端腳本注入、評論敏感字過濾等等，以及後臺關係系統。

demo地址