摘要：現(xiàn)在我們的博客已經(jīng)具有評論功能了。處理請求處理其他請求僅接受請求。前面寫視圖的時(shí)候，二級評論提交成功后會(huì)返回，回調(diào)函數(shù)接收到這個(gè)信號后，就會(huì)調(diào)用方法，刷新當(dāng)前的父頁面即文章所在的頁面，實(shí)現(xiàn)了數(shù)據(jù)的更新。

現(xiàn)在我們的博客已經(jīng)具有評論功能了。隨著文章的評論者越來越多，有的時(shí)候評論者之間也需要交流，甚至部分評論還能合并成一個(gè)小的整體。因此最好是有某種方法可以將相關(guān)的評論聚集到一起，這時(shí)候多級評論就非常的有用了。

多級評論意味著你需要將模型重新組織為樹形結(jié)構(gòu)。“樹根”是一級評論，而眾多“樹葉”則是次級評論。本教程會(huì)以第三方庫django-mptt為基礎(chǔ)，開發(fā)多級評論功能。

django-mptt模塊包含了樹形數(shù)據(jù)結(jié)構(gòu)以及查詢、修改樹形數(shù)據(jù)的眾多方法。
任何需要樹形結(jié)構(gòu)的地方，都可以用 django-mptt 來搭建。比如目錄。

注意：本章新知識點(diǎn)較多，請讀者做好心理準(zhǔn)備，一定要耐心閱讀。

既然要建立樹形結(jié)構(gòu)，老的評論模型肯定是要修改了。

首先安裝django-mptt：

(env) > pip install django-mptt

安裝成功后，在配置中注冊：

my_blog/settings.py

...
INSTALLED_APPS = [
    ...
    "mptt",

    ...
]
...

這些你已經(jīng)輕車熟路了。

接下來，修改評論模型：

comment/models.py

...
# django-mptt
from mptt.models import MPTTModel, TreeForeignKey

# 替換 models.Model 為 MPTTModel
class Comment(MPTTModel):
    ...
    
    # 新增，mptt樹形結(jié)構(gòu)
    parent = TreeForeignKey(
        "self",
        on_delete=models.CASCADE,
        null=True,
        blank=True,
        related_name="children"
    )

    # 新增，記錄二級評論回復(fù)給誰, str
    reply_to = models.ForeignKey(
        User,
        null=True,
        blank=True,
        on_delete=models.CASCADE,
        related_name="replyers"
    )
    
    # 替換 Meta 為 MPTTMeta
    # class Meta:
    #     ordering = ("created",)
    class MPTTMeta:
        order_insertion_by = ["created"]

    ...

先引入MPTT相關(guān)模塊，然后改動(dòng)下列幾個(gè)位置：

模型不再繼承內(nèi)置的models.Model類，替換為MPTTModel，因此你的模型自動(dòng)擁有了幾個(gè)用于樹形算法的新字段。（有興趣的讀者，可以在遷移好數(shù)據(jù)之后在SQLiteStudio中查看）

parent字段是必須定義的，用于存儲數(shù)據(jù)之間的關(guān)系，不要去修改它。

reply_to外鍵用于存儲被評論人。

將class Meta替換為class MPTTMeta，參數(shù)也有小的變化，這是模塊的默認(rèn)定義，實(shí)際功能是相同的。

這些改動(dòng)大部分都是django-mptt文檔的默認(rèn)設(shè)置。需要說明的是這個(gè)reply_to。

先思考一下，多級評論是否允許無限級數(shù)？無限級數(shù)聽起來很美好，但是嵌套的層級如果過多，反而會(huì)導(dǎo)致結(jié)構(gòu)混亂，并且難以排版。所以這里就限制評論最多只能兩級，超過兩級的評論一律重置為兩級，然后再將實(shí)際的被評論人存儲在reply_to字段中。

舉例說明：一級評論人為 a，二級評論人為 b（parent 為 a），三級評論人為 c（parent 為 b）。因?yàn)槲覀儾辉试S評論超過兩級，因此將 c 的 parent 重置為 a，reply_to 記錄為 b，這樣就能正確追溯真正的被評論者了。

模型修改完了，添加了很多非空的字段進(jìn)去，因此最好先清空所有的評論數(shù)據(jù)，再進(jìn)行數(shù)據(jù)遷移。

遷移時(shí)出現(xiàn)下面的提示也不要慌，一律選第 1 項(xiàng)、填入數(shù)據(jù) 0 就可以了：

(env) > python manage.py makemigrations

You are trying to add a non-nullable field "level" to comment without a default; we can"t do that (the database needs something to populate existing rows).
Please select a fix:
 1) Provide a one-off default now (will be set on all existing rows with a null value for this column)
 2) Quit, and let me add a default in models.py

Select an option: 1
Please enter the default value now, as valid Python
The datetime and django.utils.timezone modules are available, so you can do e.g. timezone.now
Type "exit" to exit this prompt
>>> 0

要還不行，就把數(shù)據(jù)庫文件刪了重新遷移吧。開發(fā)階段用點(diǎn)笨辦法也沒關(guān)系。

數(shù)據(jù)遷移還是老規(guī)矩：

(env) > python manage.py makemigrations
(env) > python manage.py migrate

這就完成了。

前面章節(jié)已經(jīng)寫過一個(gè)視圖post_comment用于處理評論了，我們將復(fù)用它，以求精簡代碼。

改動(dòng)較大，代碼全貼出來，請對照改動(dòng)：

comment/views.py

...
# 記得引入 Comment ！
from .models import Comment

...
@login_required(login_url="/userprofile/login/")
# 新增參數(shù) parent_comment_id
def post_comment(request, article_id, parent_comment_id=None):
    article = get_object_or_404(ArticlePost, id=article_id)

    # 處理 POST 請求
    if request.method == "POST":
        comment_form = CommentForm(request.POST)
        if comment_form.is_valid():
            new_comment = comment_form.save(commit=False)
            new_comment.article = article
            new_comment.user = request.user

            # 二級回復(fù)
            if parent_comment_id:
                parent_comment = Comment.objects.get(id=parent_comment_id)
                # 若回復(fù)層級超過二級，則轉(zhuǎn)換為二級
                new_comment.parent_id = parent_comment.get_root().id
                # 被回復(fù)人
                new_comment.reply_to = parent_comment.user
                new_comment.save()
                return HttpResponse("200 OK")

            new_comment.save()
            return redirect(article)
        else:
            return HttpResponse("表單內(nèi)容有誤，請重新填寫。")
    # 處理 GET 請求
    elif request.method == "GET":
        comment_form = CommentForm()
        context = {
            "comment_form": comment_form,
            "article_id": article_id,
            "parent_comment_id": parent_comment_id
        }
        return render(request, "comment/reply.html", context)
    # 處理其他請求
    else:
        return HttpResponse("僅接受GET/POST請求。")

主要變化有3個(gè)地方：

視圖的參數(shù)新增了parent_comment_id=None。此參數(shù)代表父評論的id值，若為None則表示評論為一級評論，若有具體值則為多級評論。

如果視圖處理的是多級評論，則用MPTT的get_root()方法將其父級重置為樹形結(jié)構(gòu)最底部的一級評論，然后在reply_to中保存實(shí)際的被回復(fù)人并保存。視圖最終返回的是HttpResponse字符串，后面會(huì)用到。

新增處理GET請求的邏輯，用于給二級回復(fù)提供空白的表單。后面會(huì)用到。

很好，現(xiàn)在視圖中有一個(gè)parent_comment_id參數(shù)用于區(qū)分多級評論，因此就要求有的url傳入此參數(shù)，有的不傳入，像下面這樣：

comment/urls.py

...
urlpatterns = [
    # 已有代碼，處理一級回復(fù)
    path("post-comment/", views.post_comment, name="post_comment"),
    # 新增代碼，處理二級回復(fù)
    path("post-comment//", views.post_comment, name="comment_reply")
]

兩個(gè)path都使用了同一個(gè)視圖函數(shù)，但是傳入的參數(shù)卻不一樣多，仔細(xì)看。第一個(gè)path沒有parent_comment_id參數(shù)，因此視圖就使用了缺省值None，達(dá)到了區(qū)分評論層級的目的。

在前端的邏輯上，我們的理想很豐滿：

二級回復(fù)同樣要使用富文本編輯器

回復(fù)時(shí)不能離開當(dāng)前頁面

多個(gè)ckeditor加載時(shí)，不能有性能問題

然而理想越豐滿，代碼寫得就越痛苦。

首先就是detail.html的代碼要大改，主要集中在顯示評論部分以及相關(guān)的JavaScript。

需要改動(dòng)的地方先全部貼出來：

templates/article/detail.html

...



{% load mptt_tags %}
共有{{ comments.count }}條評論

    
    {% recursetree comments %}
        
        {% with comment=node %}
            

                

                

                    
                        {{ comment.user }}
                     

                    {% if comment.reply_to %}
                        
                        
                            {{ comment.reply_to }}
                         
                    {% endif %}

                
                
{{ comment.body|safe }}

                

                    
                        {{ comment.created|date:"Y-m-d H:i" }}
                    

                    
                    
                        回復(fù)
                    
                

                
                

                    

                        

                            

                                
回復(fù) {{ comment.user }}：
                            
                            

                        

                    
                

                {% if not comment.is_leaf_node %}
                    

                        {{ children }}
                    
                {% endif %}
            
            

        {% endwith %}
    {% endrecursetree %}


...

{% block script %}
...



{% endblock script %}

這么大段肯定把你看暈了，不要急，讓我們拆開來講解。

第一個(gè)問題，如何遍歷樹形結(jié)構(gòu)？

django-mptt提供了一個(gè)快捷方式：

{% load mptt_tags %}

    {% recursetree objs %}
        

            {{ node.your_field }}
            {% if not node.is_leaf_node %}
                

                    {{ children }}
                
            {% endif %}
        
    {% endrecursetree %}

內(nèi)部的實(shí)現(xiàn)你不用去管，當(dāng)成一個(gè)黑盒子去用就好了。objs是需要遍歷的數(shù)據(jù)集，node是其中的單個(gè)數(shù)據(jù)。有兩個(gè)地方要注意：

{% load mptt_tags %}不要忘記寫

node這個(gè)變量名太寬泛，用{% with comment=node %}給它起了個(gè)別名

Modal是Bootstrap內(nèi)置的彈窗。本文相關(guān)代碼如下：

    回復(fù)




    

        

            

                
回復(fù) {{ comment.user }}：
            
            

        
    

它幾乎就是從Bootstrap官方文檔抄下來的（所以讀者要多瀏覽官網(wǎng)啊）。有點(diǎn)不同的是本文沒有用原生的按鈕，而是用JavaScript加載的Modal；還有就是增加了幾個(gè)容器的id屬性，方便后面的JavaScript查詢。

和之前章節(jié)用的Layer.js相比，Bootstrap的彈窗更笨重些，也更精致些，很適合在這里使用。

最難理解的可能就是這段加載Modal的JavaScript代碼了：

// 加載 modal
function load_modal(article_id, comment_id) {
    let modal_body = "#modal_body_" + comment_id;
    let modal_id = "#comment_" + comment_id;

    // 加載編輯器
    if ($(modal_body).children().length === 0) {
        let content = "";
        $(modal_body).append(content);
    };

    $(modal_id).modal("show");
}

實(shí)際上核心邏輯只有3步：

點(diǎn)擊回復(fù)按鈕時(shí)喚醒了load_modal()函數(shù)，并將文章id、父級評論id傳遞進(jìn)去

$(modal_body).append(content)找到對應(yīng)Modal的容器，并將一個(gè)iframe容器動(dòng)態(tài)添加進(jìn)去

$(modal_id).modal("show")找到對應(yīng)的Modal，并將其喚醒

為什么iframe需要動(dòng)態(tài)加載？這是為了避免潛在的性能問題。你確實(shí)可以在頁面初始加載時(shí)把所有iframe都渲染好，但是這需要花費(fèi)額外的時(shí)間，并且絕大部分的Modal用戶根本不會(huì)用到，很不劃算。

if語句的作用是判斷Modal中如果已經(jīng)加載過，就不再重復(fù)加載了。

最后，什么是iframe？這是HTML5中的新特性，可以理解成當(dāng)前網(wǎng)頁中嵌套的另一個(gè)獨(dú)立的網(wǎng)頁。既然是獨(dú)立的網(wǎng)頁，那自然也會(huì)獨(dú)立的向后臺請求數(shù)據(jù)。仔細(xì)看src中請求的位置，正是前面我們在urls.py中寫好的第二個(gè)path。即對應(yīng)了post_comment視圖中的GET邏輯：

comment/views.py

def post_comment(request, article_id, parent_comment_id=None):
    ...
    # 處理 GET 請求
    elif request.method == "GET":
        ...
        return render(request, "comment/reply.html", context)
    ...

視圖返回的comment/reply.html模板還沒有寫，接下來就把它寫好。

老實(shí)說用iframe來加載ckeditor彈窗并不是很“優(yōu)雅”。單頁面上多個(gè)ckeditor的動(dòng)態(tài)加載、取值、傳參，博主沒能嘗試成功。有興趣的讀者可以和我交流。

在templates中新建comment目錄，并新建reply.html，寫入代碼：

templates/comment/reply.html


{% load staticfiles %}




    
    



    

        {% csrf_token %}
        

            

                {{ comment_form.media }}
                {{ comment_form.body }}
            
        
    
    
    發(fā)送

    
    
    

    
    
    
    

這個(gè)模板的作用是提供一個(gè)ckeditor的編輯器，所以沒有繼承base.html。讓我們拆開來講。

用Ajax技術(shù)來提交表單，與傳統(tǒng)方法非常不同。

傳統(tǒng)方法提交表單時(shí)向后端提交一個(gè)請求。后端處理請求后會(huì)返回一個(gè)全新的網(wǎng)頁。這種做法浪費(fèi)了很多帶寬，因?yàn)榍昂髢蓚€(gè)頁面中大部分內(nèi)容往往都是相同的。與此不同，AJAX技術(shù)可以僅向服務(wù)器發(fā)送并取回必須的數(shù)據(jù)，并在客戶端采用JavaScript處理來自服務(wù)器的回應(yīng)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，服務(wù)器回應(yīng)更快了。

雖然本教程只用到Ajax的一點(diǎn)皮毛，但是Ajax的應(yīng)用非常廣泛，建議讀者多了解相關(guān)知識。

這里會(huì)用到Ajax，倒不是因?yàn)槠湫矢撸且驗(yàn)锳jax可以在表單提交成功后得到反饋，以便刷新頁面。

核心代碼如下：

function confirm_submit(article_id, comment_id){
    // 從 ckeditor 中取值
    let content = CKEDITOR.instances["id_body"].getData();
    // 調(diào)用 ajax 與后端交換數(shù)據(jù)
    $.ajax({
        url: "/comment/post-comment/" + article_id + "/" + comment_id,
        type: "POST",
        data: {body: content},
        // 成功回調(diào)
        success: function(e){
            if(e === "200 OK"){
                parent.location.reload();
            }
        }
    })
}

CKEDITOR是編輯器提供的全局變量，這里用CKEDITOR.instances["id_body"].getData()取得當(dāng)前編輯器中用戶輸入的內(nèi)容。

接下來調(diào)用了Jquery的ajax方法與視圖進(jìn)行數(shù)據(jù)交換。ajax中定義了視圖的url、請求的方法、提交的數(shù)據(jù)。

success是ajax的回調(diào)函數(shù)。當(dāng)?shù)玫揭晥D的相應(yīng)后執(zhí)行內(nèi)部的函數(shù)。

前面寫視圖的時(shí)候，二級評論提交成功后會(huì)返回200 OK，回調(diào)函數(shù)接收到這個(gè)信號后，就會(huì)調(diào)用reload()方法，刷新當(dāng)前的父頁面（即文章所在的頁面），實(shí)現(xiàn)了數(shù)據(jù)的更新。

代碼中有這么一行：

沒有這一行，后端會(huì)返回403 Forbidden錯(cuò)誤，并且表單提交失敗。

還記得之前提交傳統(tǒng)表單時(shí)的{% csrf_token %}嗎？Django為了防止跨域攻擊，要求表單必須提供這個(gè)token，驗(yàn)證提交者的身份。

問題是在Ajax中怎么解決這個(gè)問題呢？一種方法就是在頁面中插入這個(gè)csrf.js模塊。

在static目錄中將csrf.js文件粘貼進(jìn)去，并在頁面中引用，就可以解決此問題了。

csrf.js文件可以在我的GitHub倉庫下載。

進(jìn)入文章頁面，評論的邊上多出一個(gè)按鈕，可以對評論者進(jìn)行評論了：

點(diǎn)擊回復(fù)按鈕，彈出帶有富文本編輯器的彈窗：

點(diǎn)擊發(fā)送按鈕，頁面會(huì)自動(dòng)刷新，并且二級評論也出現(xiàn)了：

還可以繼續(xù)對二級評論者評論，不過更高級的評論會(huì)被強(qiáng)制轉(zhuǎn)換為二級評論：

功能正常運(yùn)行了。

有興趣的讀者可以打開SQLiteStudio，研究一下comment數(shù)據(jù)表的結(jié)構(gòu)。

認(rèn)真看完本章并實(shí)現(xiàn)了多級評論的同學(xué)，可以給自己點(diǎn)掌聲了。本章應(yīng)該是教程到目前為止知識點(diǎn)最多、最雜的章節(jié)，涵蓋了MTV、Jquery、Ajax、iframe、modal等多種前后端技術(shù)。

沒成功實(shí)現(xiàn)也不要急躁，web開發(fā)嘛，走點(diǎn)彎路很正常的。多觀察Django和控制臺的報(bào)錯(cuò)信息，找到問題并解決它。

有疑問請?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。

或Email私信我：dusaiphoto@foxmail.com

項(xiàng)目完整代碼：Django_blog_tutorial