博客系统评论功能的实现

Posted 2022-11-14 Kira~~

由于后端传来的评论数据是列表的形式，而前端要实现将评论按层级展示，直观地看出评论的回复情况。

同时为了兼顾功能和美观，要将子评论显示级数限定在二级，而三级之后的评论通过显示回复的评论者的名字来找出其父评论。

思路：

1. 通过parent_id的将返回的评论列表转为子树的形式，父子之间通过children属性来关联
2. 将二层之后的子节点转为其父节点的兄弟节点。
3. 将所有子评论按时间顺序排列

列表转换为子树的代码如下：

let parents = this.blog.comments.filter(value => value.parentComment === null).sort((a, b) => 
                return a.createTime.localeCompare(b.createTime)
            )
            let children = this.blog.comments.filter(value => value.parentComment !== null)
            let translator = (parents, children) => 
                parents.forEach(parent => 
                    children.forEach((child, index) => 
                        if (child.parentComment.id === parent.id) 
                            let temp = JSON.parse(JSON.stringify(children))
                            temp.splice(index, 1)
                            translator([child], temp)
                            typeof parent.children != 'undefined' ? parent.children.push(child) : parent.children = [child]
                        
                    )
                )
            
translator(parents, children)

二级之后子树打平代码如下：

let getChildList = (children) => 
    let cds = []
    let dfs = (children) => 
        if (children === undefined) return
        children.forEach((child) => 
            cds.push(child)
            if (child.children === undefined) return
            dfs(child.children)
        )
    
    dfs(children)
    return cds.sort((a, b) => 
        return a.createTime.localeCompare(b.createTime)
    )

parents.forEach((parent) => 
    parent.children = getChildList(parent.children)
)