摘要：我們?cè)谑褂玫暮芏嘣u(píng)論系統(tǒng)中，目前比較流行的就是樓中樓的方式了，比如百度貼吧，等等。同時(shí)，無(wú)論一級(jí)評(píng)論，還是樓中樓的評(píng)論，都有可能產(chǎn)生分頁(yè)的情況，因此這里也要做好分頁(yè)處理。

文章內(nèi)容由蚊子的博客進(jìn)行發(fā)布，或許你想看看他其他的博客呢： https://www.xiabingbao.com/comments/2017/09/01/blog-comments.html

在經(jīng)歷過(guò)多說(shuō)和網(wǎng)易云跟帖后，總算是下定決心自己要寫一個(gè)評(píng)論系統(tǒng)了。

我們?cè)谑褂玫暮芏嘣u(píng)論系統(tǒng)中，目前比較流行的就是樓中樓的方式了，比如百度貼吧，wordpress等等。在這以前，一般都是按照時(shí)間順序進(jìn)行1樓、2樓、3樓的展示，如果要回復(fù)某個(gè)人，使用@符號(hào)標(biāo)識(shí)出這個(gè)用戶的名字，然后回復(fù)內(nèi)容。可是這樣存在一個(gè)很大的問(wèn)題，討論問(wèn)題沒(méi)有集中在一起，其他用戶根本不知道你們?cè)谟懻撌裁矗髡咴?樓發(fā)表評(píng)論，你進(jìn)來(lái)回復(fù)這個(gè)用戶的評(píng)論時(shí)，已經(jīng)到10樓了，原作者再回復(fù)你又到20樓了。其他用戶看到10樓時(shí)，早已經(jīng)忘記原作者說(shuō)了什么了。

百度貼吧在改版之前就是這種方式，后來(lái)在新版中啟用了樓中樓的方式，這種方式，關(guān)于某個(gè)話題的討論就能集中在一塊了。

同時(shí)，知乎也對(duì)他的評(píng)論系統(tǒng)進(jìn)行了一次改版，不過(guò)不是改版成樓中樓，而是在每個(gè)有對(duì)話評(píng)論的后面加上一個(gè)彈窗鏈接查看對(duì)話，點(diǎn)擊鏈接后彈窗能看到這兩個(gè)人之間互動(dòng)的所有評(píng)論。

采用時(shí)間順序倒序或者正序平鋪的方式展示評(píng)論，這種方式實(shí)現(xiàn)起來(lái)簡(jiǎn)單，但是閱讀困難；采用樓中樓的方式展示評(píng)論，對(duì)用戶的閱讀習(xí)慣比較友好，但是實(shí)現(xiàn)起來(lái)可能比較困難。不過(guò)，最后仍然決定采用樓中樓的方式來(lái)，雖然本人博客的評(píng)論量也少的可憐，不過(guò)還是決定要實(shí)現(xiàn)一下。

先說(shuō)下前后端使用的語(yǔ)言和框架，前端考慮到頁(yè)面渲染和比較多的事件調(diào)用，使用了vue框架，vue應(yīng)該說(shuō)不是最好的選擇，畢竟對(duì)一個(gè)評(píng)論的前端部門來(lái)說(shuō)，可能有點(diǎn)大材小用，不過(guò)為了快速開(kāi)發(fā)，也就選擇了vue。后端使用的是php語(yǔ)言，數(shù)據(jù)庫(kù)使用的是mysql。

數(shù)據(jù)庫(kù)表的設(shè)計(jì)，既要考慮到可以導(dǎo)入以前的數(shù)據(jù)，又能方便以后添加新的評(píng)論。這里我創(chuàng)建了3個(gè)表： 文章表，用戶表，評(píng)論表。

在網(wǎng)易云跟帖關(guān)閉之前，我把自己的數(shù)據(jù)導(dǎo)出來(lái)了（多說(shuō)的數(shù)據(jù)已經(jīng)丟失，不知道導(dǎo)出的格式是什么了），我們來(lái)看下網(wǎng)易云跟帖里導(dǎo)出數(shù)據(jù)的格式：

{
    "title": "從0到1學(xué)習(xí)node(七)之express搭建簡(jiǎn)易論壇",
    "url": "www.xiabingbao.com/node/2017/02/20/node-express-forum.html",
    "sourceId": "",
    "ctime": 1487581007000,
    "comments": [
        {
            "cid": "72813956",
            "ctime": 1493107384000,
            "content": "這個(gè)論壇對(duì)node 的版本有要求嗎  我的node比較老 下載你的源碼   訪問(wèn)出錯(cuò)",
            "pid": "0",
            "ip": "xxx",
            "port": 0,
            "sc": "web",
            "vote": 0,
            "against": 0,
            "anonymous": false,
            "user": {
                "userId": "1074123",
                "nickname": "有態(tài)度網(wǎng)友06q23q",
                "avatar": "",
                "anonymous": false
            }
        },
        {
            "cid": "77196403",
            "ctime": 1493714822000,
            "content": "不太清楚，我這里node版本是6.9.4，npm版本是3.10.10，你試一下升級(jí)node版本",
            "pid": "72813956",
            "ip": "xxx",
            "port": 0,
            "sc": "web",
            "vote": 0,
            "against": 0,
            "anonymous": false,
            "user": {
                "userId": "2414123",
                "nickname": "小小dd蚊子",
                "avatar": "http://cms-bucket.nosdn.127.net/1d6faddedb544cee93ff426a4aa2fe7620170322162349.jpg",
                "anonymous": false
            }
        }
    ]
}

從上面的數(shù)據(jù)里，可以看到，每個(gè)文章都有標(biāo)題，url和評(píng)論，評(píng)論的每一項(xiàng)都有自己對(duì)應(yīng)的id，其回復(fù)的評(píng)論pid，內(nèi)容content，該評(píng)論的用戶userid, nickname和avatar。我這里也就只摘取主要的信息錄入到數(shù)據(jù)庫(kù)中。

用戶表相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，要考慮的就是原有的userid也要作為字段進(jìn)行保存，方便在導(dǎo)入評(píng)論數(shù)據(jù)時(shí)能找到對(duì)應(yīng)的用戶，在評(píng)論數(shù)據(jù)也導(dǎo)入完成后即可將該字段刪除，以后新添加的注冊(cè)用戶用不到這個(gè)字段了。用戶表的設(shè)計(jì)：

設(shè)計(jì)好用戶表后，將原數(shù)據(jù)中所有的用戶都多帶帶拿出來(lái)，然后使用userid作為key存儲(chǔ)到一個(gè)數(shù)組中，這樣也能起到一個(gè)去重的效果。把拿到的所有的用戶數(shù)據(jù)存儲(chǔ)到用戶表

在設(shè)計(jì)評(píng)論表，主要考慮如下的因素：

評(píng)論必須依托于文章和用戶才能存在，因此評(píng)論的外鍵是文章標(biāo)識(shí)和userid，留言板是一個(gè)文章內(nèi)容為空的評(píng)論形式;

我想以后新的評(píng)論能使用自增id，而不是跟隨原有評(píng)論的cid來(lái)產(chǎn)生新的評(píng)論id，因此這次評(píng)論表的主鍵是id，原有的評(píng)論id只作為其中的一個(gè)字段wid來(lái)構(gòu)造樓中樓的關(guān)系，這些舊評(píng)論插入到數(shù)據(jù)表時(shí)都會(huì)有新的評(píng)論id；

樓中樓的評(píng)論是處在某個(gè)評(píng)論下的，同時(shí)，樓中樓里還有相互之前的互動(dòng)回復(fù)。因此這個(gè)評(píng)論的pid(parentid)表示當(dāng)前評(píng)論處于哪個(gè)評(píng)論之下，同時(shí)replyid表示是回復(fù)的哪個(gè)評(píng)論；若直接回復(fù)的父級(jí)評(píng)論，則pid與replyid相同，都是父級(jí)評(píng)論的id，若回復(fù)的不是父級(jí)評(píng)論，則pid為父級(jí)評(píng)論的id，replyid為回復(fù)評(píng)論的id；pid或replyid為0時(shí)，則表示直接對(duì)文章發(fā)表評(píng)論。

因此我們的評(píng)論表是這樣設(shè)計(jì)的：

表中的aid(文章的標(biāo)識(shí))可以是文章的url，文章的id或者其他任何能夠唯一識(shí)別該文章的東東都可以。這里我們使用的是文章的uri來(lái)作為唯一標(biāo)識(shí)，比如上面數(shù)據(jù)中的文章，我們使用/node/2017/02/20/node-express-forum.html來(lái)標(biāo)識(shí)文章。其他文章同理。

將這些評(píng)論寫入表時(shí)，我們還要注意的是，原數(shù)據(jù)中，每個(gè)評(píng)論都對(duì)應(yīng)著一個(gè)用戶，在我設(shè)計(jì)的系統(tǒng)里，用戶與評(píng)論分來(lái)了，只使用uid來(lái)進(jìn)行關(guān)聯(lián)。新的用戶與新的評(píng)論都是使用自有的自增主鍵，因此在原有評(píng)論進(jìn)行入庫(kù)時(shí)，需要將原來(lái)的userid轉(zhuǎn)換為新用戶表中的主鍵id，新舊數(shù)據(jù)進(jìn)行統(tǒng)一。

文章表不做解釋。

前端部分主要是負(fù)責(zé)展示每個(gè)文章的評(píng)論，同時(shí)讓登錄用戶可以添加評(píng)論。

我們已經(jīng)對(duì)每個(gè)評(píng)論都添加了文章標(biāo)識(shí)，前端只要根據(jù)aid就能拿到當(dāng)前文章所有的評(píng)論。不過(guò)我們的評(píng)論是要樓中樓的方式展示的，不能一股腦的把數(shù)據(jù)平鋪到頁(yè)面中。我們?cè)?.2中也說(shuō)了，pid為0的評(píng)論都是直接對(duì)文章進(jìn)行評(píng)論的，這些評(píng)論應(yīng)該是作為一級(jí)評(píng)論展示的；pid為其他數(shù)據(jù)的，必然是屬于某個(gè)評(píng)論之下，應(yīng)當(dāng)作為樓中樓展示。

同時(shí)，無(wú)論一級(jí)評(píng)論，還是樓中樓的評(píng)論，都有可能產(chǎn)生分頁(yè)的情況，因此這里也要做好分頁(yè)處理。

那么最終，我們前端拿到的結(jié)構(gòu)應(yīng)該大致是這樣的：

{
    code : 0,
    data : [
        {// 一級(jí)評(píng)論
            id : 1,
            content : "蚊子的博客棒棒的",
            createtime : "2017年08月08日00:26",
            nickname : "匿名者",
            reply : {// 樓中樓
                data : [
                    id : 1,
                    content : "謝謝，一起學(xué)習(xí)",
                    createtime : "2017年08月08日00:36",
                    nickname : "蚊子"
                ],
                page : {
                    cur_page : 1,
                    all_page : 1
                }
            }
        }
    ],
    page : {
        cur_page : 1,
        all_page : 1
    }
}

前端拿到接口返回的數(shù)據(jù)后，就可以渲染頁(yè)面了。在頭像的處理上，也考慮到了https的環(huán)境，因此返回的頭像鏈接都是//開(kāi)頭的形式。

用戶對(duì)文章或者某個(gè)評(píng)論產(chǎn)生了共鳴，需要留言討論一番，我們就需要用戶能夠把自己的評(píng)論也添加進(jìn)去。

評(píng)論的類型，細(xì)分的話，可以分為3類：

直接對(duì)文章發(fā)表評(píng)論，pid與replyid為空；

對(duì)一級(jí)評(píng)論進(jìn)行回復(fù)，pid與replyid均為一級(jí)評(píng)論的id;

對(duì)樓中樓進(jìn)行回復(fù)，pid為一級(jí)評(píng)論的id，replyid為你回復(fù)的評(píng)論的id

我這里前端的實(shí)現(xiàn)參考了oschina(開(kāi)源中國(guó))的評(píng)論方式。直接對(duì)文章評(píng)論，是直接在頂部的評(píng)論窗口進(jìn)行輸入；對(duì)其他評(píng)論進(jìn)行回復(fù)時(shí)，采用彈窗的方式來(lái)進(jìn)行回復(fù)。彈窗回復(fù)的好處就是，頁(yè)面不用滾動(dòng)，用戶對(duì)某個(gè)評(píng)論的感知也能停留在這個(gè)位置；同時(shí)也不用增加各種不必要的小輸入框來(lái)讓用戶輸入評(píng)論。

在登錄問(wèn)題上，我也是糾結(jié)了不少的時(shí)間，究竟是使用自己的登錄系統(tǒng)呢，還是使用第三方登錄呢，或者是用戶不用注冊(cè)登錄，只要輸入郵箱和昵稱就能進(jìn)行評(píng)論呢？

使用自己的評(píng)論系統(tǒng)，那么就需要開(kāi)發(fā)一套注冊(cè)和登錄流程，開(kāi)發(fā)麻煩，而且對(duì)于想要回復(fù)一句話的用戶來(lái)說(shuō)，可能就直接放棄注冊(cè)了；若只要輸入郵箱和昵稱就能評(píng)論，我考慮到可能會(huì)引起用戶的無(wú)限評(píng)論，無(wú)法控制。因此，最后還是考慮接入第三方的登錄，這里選擇了使用微博作為第三方登錄的入口，后續(xù)會(huì)考慮加入github的帳號(hào)登錄。

關(guān)于如何接入微博的第三方登錄，我們下篇文章再講，文檔齊全，對(duì)不熟悉的開(kāi)發(fā)者來(lái)說(shuō)，剛開(kāi)始可能有點(diǎn)懵逼，不過(guò)應(yīng)該問(wèn)題不大。

用戶在第三方登錄成功后，在名字旁邊有個(gè)小的input輸入框，可以讓用戶輸入郵箱來(lái)接收回復(fù)提醒，這個(gè)輸入完全是自愿的，不輸入郵箱也依然可以評(píng)論。也是考慮到本站是個(gè)小站，訪問(wèn)量極低，用戶可能一時(shí)興起評(píng)論了兩句，事后又想起這個(gè)網(wǎng)站來(lái)，又不知道怎么找了。因此就想著添加一個(gè)郵件提醒功能，不讓大神的評(píng)論石沉大海。

前端部門引入了vue框架，評(píng)論模塊在每個(gè)文章頁(yè)都會(huì)加載。為了防止評(píng)論模塊中的vue庫(kù)對(duì)外部的資源造成影響（比如版本沖突等），我先把全局變量給了wzVue，然后在把Vue注銷掉：

wzVue = Vue;
delete(Vue);
delete(window.Vue);

同時(shí)，在剛開(kāi)始實(shí)現(xiàn)完成評(píng)論功能的時(shí)候，用戶只要進(jìn)到這個(gè)頁(yè)面，評(píng)論就會(huì)加載。但是有個(gè)問(wèn)題就是，用戶不一定會(huì)把你的文章看到底部，不一定就看你的評(píng)論。因此后來(lái)文章就改成了按需加載，只有用戶滾動(dòng)到底部，有想要看評(píng)論的意向時(shí)采取加載評(píng)論。

最終展示的效果就是這樣：

作為一名前端開(kāi)發(fā)，用僅有的后端知識(shí)開(kāi)發(fā)一套博客的評(píng)論系統(tǒng)，顯得是非常的簡(jiǎn)陋，整個(gè)框架的設(shè)計(jì)感覺(jué)也是很糙。同時(shí)緩存系統(tǒng)用的不熟練，不能做到評(píng)論信息的立即更新。這個(gè)系統(tǒng)依然還有很多改進(jìn)的地方。歡迎大家對(duì)蚊子（師少兵）多多提意見(jiàn)和建議。

在寫這篇文章的時(shí)候，想著是以后要改版的時(shí)候，可以做成評(píng)論同步加載的方式進(jìn)行。生成后的文章，更新頻率極低，甚至不太變動(dòng)，那么緩存的就是評(píng)論的內(nèi)容，每當(dāng)有新的評(píng)論時(shí)，就刪除當(dāng)前文章的緩存，重新加載新的數(shù)據(jù)，然后再緩存上新的數(shù)據(jù)，這樣在評(píng)論數(shù)據(jù)更新比較低的時(shí)候，可以緩存的時(shí)間更長(zhǎng)，同時(shí)也有利于搜索引起對(duì)評(píng)論內(nèi)容的抓取。

文章內(nèi)容由蚊子的博客進(jìn)行發(fā)布，或許你想看看他其他的博客呢： https://www.xiabingbao.com/comments/2017/09/01/blog-comments.html