無限級評論 - 邱乘屹的個人技術博客

無限極評論

什麼叫做無限極評論呢？

這種結構，叫做無限極評論 無限極評論 表的構造

無限極評論 表的構造情況 如下

無限級評論，實現過程(實例代碼)
[{},{},{},{},{}]
[{ “child”: {“child”:[ {} , {} ] } },{id:5, child:[{ child:[{}],{}] } ]
django將數據封裝爲樹結構
def change_comments(data):
    list = []
    tree = {}
    root = ''
    p_id = ''

    for i in data:
        #將data循環，然後加入一個dict中，key爲每條數據的ID，val對應爲整條數據
        tree[i["id"]] = i
    #{  1:{id:1},  2:{id:2},  3:{id:3}  }  
        # print(tree)

    for i in data:
      #p_id==None，他就是祖先
        if i["p_id"] == None:
            root = tree[i["id"]]  #i.di爲tree裏的key，將key對應的val取出
            list.append(root)
        else:
            p_id = i["p_id"]
            # 判斷父級是否有孩子字段（childlist），如果有將當前數據加入，如果沒有添加（childlist）後再加入
            if "childlist" not in tree[p_id]:
                tree[p_id]['childlist'] = []
            tree[p_id]["childlist"].append(tree[i["id"]])

    return list


from .ser import *
class GetComment(APIView):
    def get(self,request):
        #查詢
        comment = Comment.objects.all()
        #序列化
        comment_ser = CommentSer(comment,many=True)
        #向 change_comments() 方法傳遞數據(序列化好的數據)
        a = change_comments(comment_ser.data)
        return Response({'data':a})
vue使用父子組件遞歸展示
<!-- zizujian.vue -->

<template>
    <div>
        <li>{{data.content}}
            <ul v-if="data.childlist && data.childlist.length>0">
            <zi v-for="i in data.childlist" :key="i.id" :data="i" />
            </ul>
        </li>
    </div>
</template>


<script>
export default {
    name:"zi",
    props:["data"]
}
</script>

<style>
    
ul{
    list-style: none;
    padding-left: 20px
}

</style>
<!-- fuzujian.vue -->

<template>
    <div>
        <zi :data="data" />
        <!-- <zizujian :data="data" /> -->
    </div>
</template>


<script>
import zi from './zi'
import axios from 'axios'

export default {
    name:"showzi",
    data() {
        return {
            data:''
        }
    },
    components:{
        zi
    },
    methods:{
        get_info(){