第三方評論系統(如多說和友言)的實現原理?

背景:

我比較喜歡折騰,本來想自己寫一個博客網站,但是最近比較忙,後來自己想了一下,自己想寫一個博客的主要原因是不想把數據放在友言多說這些第三方的平台上(我是做數據研發的,放他們那心裡不踏實),因此想自己做一個評論系統,然後隨便買個雲服務跑上去,這樣數據就可以完全自己管理了。

個人技能:

主要搞java的,python、c、scala、ruby都什麼會一點;html、js、css其實也搞過一點,只是套框架用了,不是特別熟。

期望:

想做一個類似多說這種系統,完全自己用,不用太厲害的功能,先把流程跑通,樣式什麼的慢慢來。

我不太懂這種需求該怎麼做,比如在後端應該怎麼提供服務,假設我用java或者ruby寫一個後台的服務來讀寫資料庫,那麼在博客(假設博客是在github上)那一端怎麼來調用這個服務呢?前端js該怎麼搞呢?

求指點,告訴我思路,如果有現成的項目學習一下也好。


第一次被邀請,很榮幸~

關於「不想把數據放在友言多說這些第三方的平台上」,其實現在我們日常大部分的數據都已經在雲上了,建議題主要適應雲時代的生活。當然喜歡折騰是好事,能學到很多東西,主要看是否必要。

關於多說友言類系統的原理,我也只是用過而已,這裡以多說為例,僅就自己的理解作答:

1 獲取代碼

註冊多說之後,需要獲取相關代碼,置入自己的博客中。

其中,多說評論框部分需要關聯博客文章的ID、標題及URL。

還需要將一段JS代碼引入到博客頁面中,這段JS的作用主要是動態載入多說的核心JS文件embed.js。你的疑問「前端js該怎麼搞呢?」,答案就在這個文件里。

2 發布評論

發布評論之前,多說要求通過QQ、微博等第三方社交平台登錄,然後通過如下圖所示的方式提交請求到多說伺服器(以在多說官網上的一篇文章下發表評論為例):

提交的行為就是剛才的embed.js完成的,API為create.json。

3 載入評論

JS通過請求特定的URL獲取評論數據,並動態append到博客頁面相應的位置。還以上面這篇文章為例,其載入數據如下:

API為listPosts.json,通過傳遞特定的參數,即可通過GET方法載入此文章所有的評論數據。可以通過這個URL 查看這篇文章的評論列表。我覺得以上是多說的基本原理,理解了之後,就可以動手模擬開始做了。核心是:後端寫好API,前端JS生成動態請求和內容展示。


推薦閱讀:

視差滾動效果設計的網頁跟傳統的點擊樣式對比有何優勢?
Web 前端分為哪幾個大方向,工資待遇如何,辛苦嗎?
CSS 定位體系中的 Normal flow 應該如何翻譯比較好?
CSS中屬性的快捷寫法是如何被識別的?
Adobe Muse 會改變前端設計師這個職業嗎?

TAG:網頁設計 | 前端開發 | 個人博客 |