Jun 5, 2020

Vue实现一个简单的评论系统

~~上次表示要接着看源码来着,但是看了上次写的post，有点看不懂，真是:talk is cheap，show code please!~~ 暂且用起。

目标是实现一个评论系统。

数据结构

因为还没有学后端，所以先自己实践一个。

import {reactive} from "vue"
const list=reactive([
    {
        name:'xx',
        comment:"xxx",
        like:5,
        child:[
            {
             name:"23",
             comment:"3ef",
             like:0,
             parent_name:'xx',
             child:[...]
            },
            {
             name:"2113",
             comment:"311ef",
             like:0,
             parent_name:'xx',
             child:[]
            },
        ]
    },
    {
        name:'x11x',
        comment:"x1xx",
        like:51,
        child:[]
    }
])

大致如是,一个嵌套的数组,一层数组表示一级评论,一级评论表示对文章的评论,二级评论表示对一级评论的评论,放在一级评论的里面,用child字段表示,并加一个parent_name 的属性,用来指向它的父评论,应该用一个id来表示,但是为了方便,就偷懒用父评论的name了.

当然后端的数据库不会这样表示,这个只是为了用vue的组件方便,因为组件也可以嵌套.对于嵌套的数据结构,我想应该可以用递归把它拍平,具体代码,就坑了吧.

vue实践

一个简单的评论系统起码应该分成两部分,一个用来展示评论,一个用来回复,对应的vue组件的话,展示部分用两个组件,一个负责一级评论,一个负责剩下的级别.因为二者展示的方式不同,如果放在一个组件里面,用组件的自嵌套的话,逻辑比较复杂. 分开成俩后,一个包含嵌套,一个不包含,可能复用性会好一点,当然这些都是我实践完后的想法,当时,肯定是因为~~实现起来比较复杂~~.

回复部分就一个组件,虽然对文章的评论与对评论的评论,在数据结构上面不一样,但是复杂度不高,而且这本来就是一个自己编的数据结构,所以…

其他的像时间,点赞数之类的小挂件,在数据结构上添加相应的字段即可,暂且不提.