Django學(xué)習(xí)與實(shí)戰(zhàn)（六）：文章評論

程派微信號：codingpy

本文系作者 Django學(xué)習(xí)小組?授權(quán)編程派原創(chuàng)發(fā)表，并經(jīng)編程派編輯，轉(zhuǎn)載請注明出處及微信ID（codingpy）。

通過前五周的時間我們開發(fā)了一個簡單的個人 Blog，本周我們將實(shí)現(xiàn) blog 文章的評論功能。（快速查看前五期內(nèi)容，請點(diǎn)擊文末鏈接）

實(shí)現(xiàn)思路

首先需要為評論（Comment）設(shè)計一個數(shù)據(jù)庫表，并編寫相應(yīng)的 Model，將評論與文章關(guān)聯(lián)，再編寫發(fā)表評論的視圖，設(shè)置相應(yīng)的 url 即可。

評論的 Model 設(shè)計

請點(diǎn)擊閱讀原文，查看詳細(xì)代碼

參照大部分博客評論的樣式，我們的 BlogComment Model 包含這些字段：

user_name：用戶在評論前先要填寫他們想使用的昵稱
user_email：用戶在評論前先要填寫他們想使用的郵箱
body：用戶提交的評論內(nèi)容
created_time：評論提交時間
article：評論關(guān)聯(lián)的文章，因?yàn)橐粋€評論只能關(guān)聯(lián)某一篇文章，而一篇文章下可能有多個評論，因此是一對多的關(guān)系，使用 ForeignKey

評論的表單

表單用來給服務(wù)器后臺提交用戶填寫的數(shù)據(jù)，例如平時我們看到的填寫登錄、注冊信息的頁面就是一個登錄、注冊表單，用戶填寫表單信息后，點(diǎn)擊提交按鈕，表單中填寫的內(nèi)容就會打包發(fā)送給服務(wù)器后臺。

我們需要為用戶填寫評論設(shè)置一個表單，django 的 form 模塊為我們提供了自動生成表單的功能，如果對表單不熟悉請參閱：官方文檔：表單概述，以了解基本的表單使用方法（如果你對表單感覺很陌生的話）。

下面我們使用 Django 的 ModelForm （ django ModelForm 介紹）類為我們自動生成表單。首先在 blog 目錄下新建一個 forms.py （和 models.py 同一目錄）文件用來存放 form 的代碼：

請點(diǎn)擊閱讀原文，查看詳細(xì)代碼

視圖函數(shù)

這里我們一如既往堅持使用基于類的通用視圖，由于涉及到評論表單的提交處理，因此我們使用 FormView。這里對 FormView 的使用稍作講解。

在 Django 的基于函數(shù)的視圖中，涉及表單的處理的視圖其邏輯一般是這樣的：

請點(diǎn)擊閱讀原文，查看詳細(xì)代碼

即，首先判斷用戶是否通過表單 POST 了數(shù)據(jù)過來，如果是，則根據(jù) POST 過來的數(shù)據(jù)構(gòu)建一個表單，如果數(shù)據(jù)驗(yàn)證合法（form.is_valid），則創(chuàng)建評論，否則返回表單提交頁。如果沒有 POST 數(shù)據(jù)，則做其他相應(yīng)的事情。FormView 把這些邏輯做了整合，無需寫那么多 if else 語句：

請點(diǎn)擊閱讀原文，查看詳細(xì)代碼

為了方便地重定向回原來提交評論的文章詳情頁面，我們?yōu)槲恼拢ˋrticle）的模型新增一個方法：get_absolute_url，調(diào)用該方法將得到該 Article 對應(yīng)的 url，例如這是文章 1 的 url：http://localhost:8000/article/1，則調(diào)用后返回 /article/1，這樣調(diào)用 HttpResponseRedirect 后將返回該 url 下的文章詳情頁。

請點(diǎn)擊閱讀原文，查看詳細(xì)代碼

同時為了在詳情頁渲染一個評論表單，稍微修改一下 ArticleDetailView 的視圖函數(shù)，把評論表單 form 插入模板上下文中：

請點(diǎn)擊閱讀原文，查看詳細(xì)代碼

URL 設(shè)置

設(shè)置模板文件

新增了一個 comment.html 文件以渲染評論表單和評論列表，并且修改了 detail.html 文件以在文章詳情頁顯示評論表單和評論列表，修改了blog/tatic 下的 style.css 為評論添加樣式，由于代碼比較多，就不貼出來了，主要是 html 和 css 的前端相關(guān)代碼，請到 GitHub 倉庫更新相關(guān)的模板和靜態(tài)資源文件。

至此，整個評論功能的框架做好了，顯示效果如下：

當(dāng)然這只是一個評論的框架，很多細(xì)節(jié)有待處理和完善，但無論如何，用戶已經(jīng)可以為我們的文章發(fā)表評論意見了。

前情回顧

第一周：Django學(xué)習(xí)與實(shí)戰(zhàn)（一）：編寫博客的 Model 和首頁面
第二周：Django學(xué)習(xí)與實(shí)戰(zhàn)（二）：博客詳情頁面和分類頁面
第三周：Django學(xué)習(xí)與實(shí)戰(zhàn)（三）：文章列表分頁和代碼語法高亮
第四周：Django學(xué)習(xí)與實(shí)戰(zhàn)（四）：基于類的通用視圖詳解
第五周：Django學(xué)習(xí)與實(shí)戰(zhàn)（五）：標(biāo)簽云與文章歸檔

于怎樣實(shí)現(xiàn)樓中樓的評論系統(tǒng)具體操作

1. 實(shí)現(xiàn)前的思考

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

我們在使用的很多評論系統(tǒng)中，目前比較流行的就是樓中樓的方式了，比如百度貼吧，wordpress等等。在這以前，一般都是按照時間順序進(jìn)行1樓、2樓、3樓的展示，如果要回復(fù)某個人，使用@符號標(biāo)識出這個用戶的名字，然后回復(fù)內(nèi)容。可是這樣存在一個很大的問題，討論問題沒有集中在一起，其他用戶根本不知道你們在討論什么，原作者在1樓發(fā)表評論，你進(jìn)來回復(fù)這個用戶的評論時，已經(jīng)到10樓了，原作者再回復(fù)你又到20樓了。其他用戶看到10樓時，早已經(jīng)忘記原作者說了什么了。

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

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

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

2. 數(shù)據(jù)表的設(shè)計

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

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

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

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

2.1 用戶表

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

字段	類型	說明
id	int	自增，主鍵
wid	int	用戶原有的userid
nickname	varchar(50)	昵稱
avatar	varchar(100)	頭像
status	int	狀態(tài)

設(shè)計好用戶表后，將原數(shù)據(jù)中所有的用戶都單獨(dú)拿出來，然后使用userid作為key存儲到一個數(shù)組中，這樣也能起到一個去重的效果。把拿到的所有的用戶數(shù)據(jù)存儲到用戶表

2.2 評論表

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

評論必須依托于文章和用戶才能存在，因此評論的外鍵是文章標(biāo)識和userid，留言板是一個文章內(nèi)容為空的評論形式;
我想以后新的評論能使用自增id，而不是跟隨原有評論的cid來產(chǎn)生新的評論id，因此這次評論表的主鍵是id，原有的評論id只作為其中的一個字段wid來構(gòu)造樓中樓的關(guān)系，這些舊評論插入到數(shù)據(jù)表時都會有新的評論id；
樓中樓的評論是處在某個評論下的，同時，樓中樓里還有相互之前的互動回復(fù)。因此這個評論的pid(parentid)表示當(dāng)前評論處于哪個評論之下，同時replyid表示是回復(fù)的哪個評論；若直接回復(fù)的父級評論，則pid與replyid相同，都是父級評論的id，若回復(fù)的不是父級評論，則pid為父級評論的id，replyid為回復(fù)評論的id；pid或replyid為0時，則表示直接對文章發(fā)表評論。

因此我們的評論表是這樣設(shè)計的：

字段	類型	說明
id	int	自增，主鍵
wid	int	評論原有的主鍵cid
uid	int	用戶id
replyid	int	該評論回復(fù)的評論id，沒有則為0
pid	int	該評論所在的父級id，沒有則為0
aid	varchar(100)	文章的標(biāo)識
content	varchar(300)	評論內(nèi)容
createtime	int	評論時間的時間戳

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

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

文章表不做解釋。

3. 具體實(shí)現(xiàn)

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

3.1 展示評論

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

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

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

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

3.2 參與評論

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

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

直接對文章發(fā)表評論，pid與replyid為空；
對一級評論進(jìn)行回復(fù)，pid與replyid均為一級評論的id;
對樓中樓進(jìn)行回復(fù)，pid為一級評論的id，replyid為你回復(fù)的評論的id

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

3.3 登錄

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

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

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

3.4 添加郵箱功能

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

3.5 特別注意

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

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

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

4. 總結(jié)

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

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

?前面給大家介紹了Vue的組件功能，本文我們通過一個評論列表的案例來鞏固下組件的內(nèi)容，具體效果如下:

在這里插入圖片描述

Vue組件案例

1.基本頁面

??我們先來整理下基礎(chǔ)的頁面如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        })
    </script>
</body>
</html>

2.列表效果

??在基礎(chǔ)頁面的基礎(chǔ)上我們來添加底部的評論列表，用bootstrap來實(shí)現(xiàn)。如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app">
        <ul class="list-group">
            <!--循環(huán)取出列表數(shù)據(jù)-->
            <li class="list-group-item" v-for="(item ,i) in list" :key="item.id">
                <span class="badge">{{item.name}}</span>
                {{item.content}}
            </li>
        </ul>
    </div>


    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                        {id: Date.now(),name:"波波烤鴨1",content:"非常棒..."},
                        {id: Date.now(),name:"波波烤鴨2",content:"非常棒..."},
                        {id: Date.now(),name:"波波烤鴨3",content:"非常棒..."}
                    ]
            },
            methods: {}  
        })
    </script>
</body>
</html>

在這里插入圖片描述

3.添加評論組件

??現(xiàn)在我們通過Vue的組件來添加評論的頭部，

在這里插入圖片描述

組件使用

在這里插入圖片描述

效果

在這里插入圖片描述

4.實(shí)現(xiàn)效果

??組件添加好后，我們通過點(diǎn)擊發(fā)表評論來添加內(nèi)容到評論列表中。實(shí)現(xiàn)的邏輯是

通過點(diǎn)擊發(fā)表評論觸發(fā)點(diǎn)擊事件調(diào)用組件中methods中定義的方法
在methods中定義的方法中加載保存中 localStorage中的列表數(shù)據(jù)到list中
將錄入的信息添加到list中，然后將數(shù)據(jù)保存到 localStorage中
調(diào)用父組件中的方法來刷新列表數(shù)據(jù)

在這里插入圖片描述

效果

在這里插入圖片描述

添加的效果是實(shí)現(xiàn)了，但是在第一次刷新的時候顯示的還是固定的數(shù)據(jù)，這時我們可以在Vue實(shí)例的生命周期的方法的 created 中再顯示的調(diào)用一次加載數(shù)據(jù)的方法

在這里插入圖片描述

這樣開始加載的就是 localStorage中的數(shù)據(jù)了。搞定~

完整代碼

在線咨詢

上一篇：網(wǎng)頁前端設(shè)計-16邊框樣式
下一篇：WordPress 代碼要這么寫才規(guī)范，5000多字的編碼規(guī)范吐血整理

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Django學(xué)習(xí)與實(shí)戰(zhàn)（六）：文章評論

于怎樣實(shí)現(xiàn)樓中樓的評論系統(tǒng)具體操作

1. 實(shí)現(xiàn)前的思考

2. 數(shù)據(jù)表的設(shè)計

3. 具體實(shí)現(xiàn)

4. 總結(jié)

Vue組件案例

1.基本頁面

2.列表效果

3.添加評論組件

4.實(shí)現(xiàn)效果

您的項目需求