二级评论列表功能

一:需求场景

我的个人网站留言列表在开发时,因为本着先有功能的原则。留言列表只有一级,平铺的。

当涉及多人回复,或者两个人多次对话后, 留言逻辑看着非常混乱。如下图

于是,我就打算将平铺的列表,改造为二级列表。效果图如下

二:实现方案

因为我是前端开发,对数据库查询语言的认知还停留在

select * from table

我对数据库的使用,之前真真就是把它当个持久存放数据的仓库。查询语句都停留在最简单的增删改查。

于是我在考虑如何实现功能时,第一个想法又是,在原有表结构的基础上添加一个parent字段。

如果是顶级留言parent字段存放空值,二级或者三级都存放父级的id。

然后接口返回数据给前端,前端JS再把数据处理两级的结构。虽然个人网站的前后端都是我自己。但是还是感觉JS更加顺手

后来考虑到存在分页,如上方案是解决不了分页问题的。

三: 数据库查询语句

因为后端是用Node.js配合MongoDB开发的,于是去查了查用Mongodb的查询语句直接完成两级结构。

然后我打开了一个新世界的大门~~~

数据库的查询语句可比JS在哪处理数据的效率高上几个维度,如下为使用Mongodb的管道聚合的查询语句。一个语句搞定JS无数个循环,且逻辑清晰!

javascript 复制代码
DB.collection(Collection).aggregate([
    {
        $sort: {
            _id: -1
        }
    },
    {
        $lookup: { // 将评论文档与其父级文档关联
            from: Collection,
            localField: "_id",
            foreignField: "parentId",
            as: "son"
        }
    },
    {
        $match: { // 筛选出只有父级文档的评论文档,排除顶级评论档
            parentId: { $in: ["", null] }
        }
    },
    {
        $skip: data.Skip
    }, // 跳过(page-1)*page_size条文档数
    {
        $limit: data.Limit// 限制返回的文档数为page_size
    }
])
相关推荐
前端大卫18 分钟前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘34 分钟前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare35 分钟前
浅浅看一下设计模式
前端
Lee川38 分钟前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
Ticnix1 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人1 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl1 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人1 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼1 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端