博客园-评论树

评论数据的处理

我们可以取到的评论数据形式

comment_list=[

    {"id":1,"content":"111","Pid":None},
    {"id":2,"content":"222","Pid":None},
    {"id":3,"content":"333","Pid":None},
    {"id":4,"content":"444","Pid":1},
    {"id":5,"content":"555","Pid":1},
    {"id":6,"content":"666","Pid":4},
    {"id":7,"content":"777","Pid":3},
    {"id":8,"content":"888","Pid":7},
    {"id":9,"content":"999","Pid":None},

]

首先，给每条数据添加一个children_list(空列表)

for i in comment_list:
    i["children_list"] = []

得到新的列表

comment_list = [
    {'id': 1, 'content': '111', 'Pid': None, 'children_list': []},
    {'id': 2, 'content': '222', 'Pid': None, 'children_list': []},
    {'id': 3, 'content': '333', 'Pid': None, 'children_list': []},
    {'id': 4, 'content': '444', 'Pid': 1, 'children_list': []},
    {'id': 5, 'content': '555', 'Pid': 1, 'children_list': []},
    {'id': 6, 'content': '666', 'Pid': 4, 'children_list': []},
    {'id': 7, 'content': '777', 'Pid': 3, 'children_list': []},
    {'id': 8, 'content': '888', 'Pid': 7, 'children_list': []},
    {'id': 9, 'content': '999', 'Pid': None, 'children_list': []}
]

然后通过变量引用的方法将子评论的内容加到对应的跟评论中

ret = []
for i in comment_list:
    if i["Pid"]:
        for j in comment_list:
            if j["id"] == i["Pid"]:
                j["children_list"].append(i)
    else:
        ret.append(i)

得到了我们需要的结果ret

ret = [
    {'id': 1, 'content': '111', 'Pid': None, 'children_list': [{'id': 4, 'content': '444', 'Pid': 1, 'children_list': [{'id': 6, 'content': '666', 'Pid': 4, 'children_list': []}]}, {'id': 5, 'content': '555', 'Pid': 1, 'children_list': []}]},
    {'id': 2, 'content': '222', 'Pid': None, 'children_list': []},
    {'id': 3, 'content': '333', 'Pid': None, 'children_list': [{'id': 7, 'content': '777', 'Pid': 3, 'children_list': [{'id': 8, 'content': '888', 'Pid': 7, 'children_list': []}]}]},
    {'id': 9, 'content': '999', 'Pid': None, 'children_list': []}
]

# 结论：一旦某个数据引用了一个可变数据类型，这个可变数据类型发生变化，则这个数据也会发生变化

 得到该结果后可以将数据发给前端，通过前端创建标签和递归的方法展示

直接在数据库取数据然后到前端处理的方法

前端页面

<div class="comment_tree">
        <p class="show_tree">评论树：</p>

</div>

<script>
// 请求comment_list
        $(".show_tree").click(function () {
            $.ajax({
                url: "/blog/get_comment_tree/"+{{ article_obj.pk }},
                success: function (data) {
                    var comment_html = "";
                    $.each(data, function (index,comment) {
                        var nid = comment.nid;
                        var content = comment.content;
                        var pid = comment.parent_comment_id;
                        var username = comment.user__username;
                        var create_time = comment.create_time
                        comment_html = '<div class="comment_item"><span>'+username+'</span>&nbsp;&nbsp;<span>'+create_time+'</span>&nbsp;&nbsp;<span class="content" tree_comment_id="'+nid+'">'+content+'</span></div>'
                        if (pid){
                            $("[tree_comment_id="+pid+"]").after(comment_html)
                        }else{
                            $(".comment_tree").append(comment_html)
                        }

                    })
                }

            })
        })


</script>

这里通过点击评论树的标签，往后端发送ajax请求，后端在数据库取到数据，我们将后端的数据拿到前端来处理

通过自己拼接标签，来生成显示的样式，如果为根评论，就直接加到评论树的div内，如果是子评论，则找到有子评论pid属性的根评论内的span标签，将生成的标签添加到该span标签后面

最后给每个comment_item的div标签添加一个margin-left就可以看出层级了

视图函数

def get_comment_tree(request, article_id):
    comment_list = list(models.Comment.objects.filter(article_id=article_id).values("nid", "content", "parent_comment_id", "user__username", "create_time"))
    for comment in comment_list:
        comment["create_time"] = comment["create_time"].strftime("%Y-%m-%d %H:%M")
    return JsonResponse(comment_list, safe=False)

由于create_time在数据库中取出后是一个时间对象，无法直接通过json序列化，我们需要将他处理成字符串再通过json序列化