博客系统评论功能的实现

Posted 2021-08-08 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)
})