django实现多级评论

实现原理：

在页面加载完成后，jQuery调用initComments()函数，initComments()函数会向后端发起Ajax请求，后端收到请求后，会把所有评论的数据以JSON格式返回到前端，然后前端再把评论的数据在页面上进行展示，评论的层级关系通过父级id来进行识别。

首先来看一下评论的表结构：

# 评论表
class Comment(models.Model):
    # 要评论哪篇文章，外键指向文章表
    comment_which_article = models.ForeignKey(to='Article', on_delete=models.CASCADE, verbose_name='评论的文章', related_name='comment')
    # 评论内容，任意内容
    comment_content = models.TextField(verbose_name='评论内容')
    # 父级评论，指向评论表自己
    # 如果父级评论为空，则为一级评论，否则为子级评论，可以有多级
    parent_comment = models.ForeignKey(to="self", on_delete=models.CASCADE, related_name='son_comment', null=True, blank=True, verbose_name="父级评论")
 
    def __str__(self):
        return self.comment_content

然后看一下HTML页面的内容：

首先准备一个显示评论的区域：

<!-- 此处是将要展示评论内容的区域 -->
    <!-- 先放一个div，作为评论的显示div块 -->
    <div id="comment_div">
        <!-- ul部分才是真正要展示评论的区域 -->
        <!-- 评论将以列表的样式进行显示，先在这里放一个<ul>标签，拿到评论数据后，直接在<ul>下面添加<li>即可 -->
        <!-- 设置id="comment_list"，供后面选择标签时使用 -->
        <ul id="comment_list">
            <!-- 后面的评论以<li>的样式放在此处 -->
        </ul>
    </div>

当页面加载完成后，调用 initComments() 函数向后端发起请求：

// 页面加载完成后执行的操作
    // 页面加载完成后，向后端发起请求，请求评论的数据
    $(function (){
        initComments();
    });

再看看后端的视图如何给前端返回JSON数据：

from django.http import JsonResponse
 
# 收到Ajax请求后的处理函数：comment()
def comment(request):
    # 首先，获取到前端传过来的文章ID【article_id】， 才知道是那一篇文章的评论
    article_id = request.GET.get('article_id')
    '''
        找到这篇文章下的所有评论数据；
        以前都是获取到一个querySet，也就是类似一个列表，里面放了每一个评论数据的object对象；
        但是这里，使用了.values()方法，获取到的数据将是下面这样的：
            [
                {'id': 1, 'comment_which_article_id': 1, 'comment_content': '31232', 'parent_comment_id': None},
                {'id': 2,'comment_which_article_id': 1,'comment_content': '123123123213','parent_comment_id': None},
                {'id': 3, 'comment_which_article_id': 1, 'comment_content': '49831743141', 'parent_comment_id': 1},
                {'id': 4, 'comment_which_article_id': 1, 'comment_content': '917491739491', 'parent_comment_id': 3},
                {'id': 5, 'comment_which_article_id': 1, 'comment_content': '12313213213', 'parent_comment_id': 2},
                {'id': 6, 'comment_which_article_id': 1, 'comment_content': '21321321321', 'parent_comment_id': 4}
            ]
        这样的数据看似是一个列表，但是实际上还是一个querySet对象，因此将它转换成列表list();
        所以最后得到的comments，就是一个列表，列表的样子就是上面的数据的样子。
    '''
    comments = list(Comment.objects.filter(comment_which_article=article_id).values())
 
    # 使用JsonResponse，将comments以JSON的形式返回给前端
    # 这里必须加上safe=False,如果不加的话, 就会报错【具体为什么，我还没搞懂】
    return JsonResponse(comments, safe=False)

最后看看这个前端的函数initComments() ，它向后端请求数据，并把数据在页面进行展示：

    // initComments函数
    function initComments() {
        // 通过jQuery的$.ajax({}) 向后端发送Ajax异步请求
        $.ajax({
            // 请求的路径是comment
            // 将文章的id传到后端，才能通过id获取到评论的数据
            url: '/comment/?article_id={{ articleDetail.pk }}',
            // 请求的方法为：GET方法
            type: 'GET',
            // 接受的返回的数据格式为：JSON格式
            dataType: 'JSON',
            // 回调函数，请求成功后执行的操作
            // 参数data，用于接收后端返回的JSON数据
            success: function(data){
                console.log(data);
                /*
                * $.each，循环遍历data数据，每循环一次，拿到数据的索引index和数据的值item，
                * item就是每一条数据，即：{'id': 1, 'comment_which_article_id': 1, 'comment_content': '31232', 'parent_comment_id': None}
                * */
                $.each(data, function(index, item){
                    /*
                    * 这里的变量 li，就是将要添加到已经准备好的<ul>标签中的<li>标签，其实就是评论的内容
                    *
                    * $("<li>")：
                    * 创建一个<li>标签
                    *
                    * .attr('id', "id_" + item.id)：
                    * 将这个<li>标签的id属性值设置为 "id_" + item.id，【其中item.id就是评论自己的id值】
                    *
                    * .append($('<a href="#">').text(item.comment_content))：
                    * 在这个<li>标签里面再创建一个<a>标签，<a>标签的内容就是要显示的评论内容
                    * 【.text(item.comment_content)：就是设置<a>标签的内容为评论的内容content】
                    *
                    * .append($('<ul>'))：
                    * 由于每一条评论下面可能还有子评论，所以又在每一个<li>标签里面创建一个空的<ul>标签，用于放它的子评论
                    *
                    * */
                    var li = $("<li>").attr('id', "id_" + item.id).append($('<a href="#">').text(item.comment_content)).append($('<ul>'));
 
                    // 判断一下，如果没有父级评论，那就是一级评论
                    // 直接展示就可以了
                    if (!item.parent_comment_id){
                        // $('#comment_list').append(li): 展示一级评论
                        // 找到前面已经准备好的，id=comment_list的<ul>标签
                        // .append(li)：在<ul>标签里面添加上面的 li
                        $('#comment_list').append(li);
 
                    }else {
                        // else: 如果有父级评论，那就是子级评论
                        // 那就在父级评论对应的<li>下面的<ul>中添加 li
                        // $("#id_" + item.parent_comment_id)：找到父级评论对应的<li>
                        // $("#id_" + item.parent_comment_id).children('ul')：找到父级评论对应的<li>里面的<ul>
                        // .append(li)：在找到的这个<ul>里面添加 li
                        $("#id_" + item.parent_comment_id).children('ul').append(li);
                    }
                })
            }
        })
    }
</script>