评论区功能的简单实现思路
评论区功能是社交类项目中的核心组成部分,它涉及到前端的交云和后端的数据处理。基于你的技术栈(前端 Vue3,后端 Java),下面是一个具体的实现思路和数据库设计建议,并探索一下知乎的评论系统。
数据库设计
评论功能的数据库设计是整个功能实现的基础。你需要设计至少两个表:comments(评论表)和 users(用户表)。如果还没有用户表,考虑添加它,因为评论系统通常需要与用户直接关联。
用户表 (users)
user_id:用户唯一标识符。username:用户名称。- 其他字段,如
email、password_hash等,根据需要添加。
评论表 (comments)
comment_id:评论唯一标识符。parent_id:父级评论的 ID。对于一级评论,该字段可以为 NULL 或 0 表示没有父评论。content:评论内容。user_id:发表评论的用户 ID,外键关联到users表。post_id:评论所属帖子的 ID,如果你的项目中有帖子的概念。creation_time:评论创建时间。- 其他可能的字段,如
is_deleted(标记评论是否被删除)等。
后端逻辑
接收和存储评论
- 当用户提交评论时,后端接收到评论内容、用户
ID、(如果有的话)父评论ID和帖子ID。 - 根据这些信息,在
comments表中创建一个新条目。
检索评论
- 为了展示评论和它们的回复,你可以采用递归查询或者在应用层处理嵌套。一种方法是,在检索帖子的评论时,首先获取所有一级评论(
parent_id为 NULL 或 0),然后对每个一级评论,检索其子评论。 - 另一种方式是使用数据库的递归查询功能(如果支持,如
MySQL8.0版本),一次性检索所有相关评论,并在应用层组织它们的层级结构。
通知机制
- 当用户对某个帖子或评论进行评论时,应该通知原帖子的发布者和被回复的评论者。
- 这可以通过在后端逻辑中检查
post_id和parent_id,并查询这些 ID 对应的用户,然后向他们发送通知(例如,通过邮件、应用内通知等)实现。
前端展示
展示评论
使用 Vue3,你可以构建一个递归组件来展示评论和它们的回复。这个组件应该能够显示一个评论,并检查是否有回复。如果有,就为每个回复再次调用自己。
提交评论
提供一个表单让用户写评论。如果是回复某个评论,确保能够捕捉到被回复的 comment_id 作为 parent_id 发送到后端。
实时更新和通知
考虑使用 WebSocket 或轮询机制来实时更新评论区,以及通知用户他们的评论有了回复。
通过这种设计,你可以有效地实现一个具有嵌套评论功能的评论系统。这只是一个基本的实现思路,具体细节可能需要根据你的项目需求进行调整。
以知乎评论为例
可以看看知乎的评论系统,首先点开评论,会获取到喜欢数最高(order_by=score)一级评论10个(limit=20?),可以通过控制台看到的接口是(/root_comment):
https://www.zhihu.com/api/v4/comment_v5/answers/3078325945/root_comment?order_by=score&limit=20&offset=

一级评论会分页(offset=),下方点击查看全部评论:

获取一级评论的接口也会获取每个一级评论喜欢数最多的前两个评论(不管是当前一级评论的回复,还是一级评论的回复的回复):
每个一级评论下之展示喜欢数最多的前两个回复,更多回复需要调获取子评论的接口(/child_comment):
https://www.zhihu.com/api/v4/comment_v5/comment/10650367730/child_comment?order_by=ts&limit=20&offset=
通过分页的形式查看全部回复,此时是按照评论时间排序(order_by=ts):
通过分页的形式查看全部回复,此时是按照评论时间排序(order_by=ts):

相关文章:
评论区功能的简单实现思路
评论区功能是社交类项目中的核心组成部分,它涉及到前端的交云和后端的数据处理。基于你的技术栈(前端 Vue3,后端 Java),下面是一个具体的实现思路和数据库设计建议,并探索一下知乎的评论系统。 数据库设计…...
Java自救手册
目录 访问地址 访问地址,发现不通,无法访问: 网络不通一般有两种情况: Maven 拿Maven 拿到Maven以后 Maven单独的报红 Git git注意: 目录 访问地址 访问地址,发现不通,无法访问&…...
ASM-HEMT参数提取和模型验证测试
参数提取程序 直流I-V参数提取 DC模型参数提取流程对于ASM-GaN-HEMT模型可以总结在下图中。 以下步骤描述了该流程: 在模型中设置物理参数,如L(沟道长度)、W(沟道宽度)、NF(栅指数…...
浅压缩、深压缩、双引擎、计算机屏幕编码……何去何从?
专业视听领域尤其显示控制和坐席控制领域,最近几年最激动人心的技术,莫过于分布式了。 分布式从推出之日就备受关注:担心稳定性的,质疑同步性能的,怀疑画面质量的…… 诚然,我们在此前见多了带着马赛克的…...
2020年通信工程师初级专业实务真题
文章目录 一、第1章 现代通信网概述:信令网、同步网、管理网。第10章 通信业务:通信产业链,通信终端的分类,通信业务的定义及分类二、第3章 接入网:无线接入网的优点,接入网的接口(UNIÿ…...
Linux常见面试题汇总
Linux上如何查询某个端口是否被占用? 在Linux上,你可以使用以下几种方法来查询某个端口是否被占用: 使用netstat命令: netstat -tuln | grep <端口号>这个命令会列出当前正在运行的所有TCP和UDP端口,并过滤出指…...
C语言小游戏:贪吃蛇(游戏开发的环境和功能介绍)
❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载,请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主,代码兴国!❤❤❤ 生命不停,学习不止。铁汁们,我是大伟,欢迎来到大伟的游戏时间,…...
ElementUI Form:InputNumber 计数器
ElementUI安装与使用指南 InputNumber 计数器 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue (InputNumber 计数器)页面效果图 项目里el-input-number.vue代码 <script> export default {name: el_input_number,data() {re…...
apk反编译修改教程系列---修改apk的默认颜色 布局颜色 手机电脑同步演示【十】
往期教程: apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…...
响应式开发如何设置断点,小屏幕界面该如何显示(有动图)
Hi,我是贝格前端工场,本期分享响应式开发,如何设置屏幕断点,pc页面布局到了移动端之后该如何布局的问题,微软也提供了设置屏幕断点的动图演示,非常直观。 一、什么是响应式开发,为何要设置屏幕断…...
Java基础 集合(二)List详解
目录 简介 数组与集合的区别如下: 介绍 AbstractList 和 AbstractSequentialList Vector 替代方案 Stack ArrayList LinkedList 前言-与正文无关 生活远不止眼前的苦劳与奔波,它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界…...
UE4运用C++和框架开发坦克大战教程笔记(十七)(第51~54集)
UE4运用C和框架开发坦克大战教程笔记(十七)(第51~54集) 51. UI 框架介绍UE4 使用 UI 所面临的问题以及解决思路关于即将编写的 UI 框架的思维导图 52. 管理类与面板类53. 预加载与直接加载54. UI 首次进入界面 51. UI 框架介绍 U…...
GaussDB新体验,新零售选品升级注入新思路【华为云GaussDB:与数据库同行的日子】
选品思维:低频VS高频 一个的商超,假设有50个左右的品类,每个品类下有2到10个不等的商品。然而如此庞大的商品,并非所有都是高频消费品。 结合自身日常的消费习惯,对于高频和低频的区分并不难。一般大型家电、高端礼盒…...
C语言问题汇总
指针 #include <stdio.h>int main(void){int a[4] {1,2,3,4};int *p &a1;int *p1 a1;printf("%#x,%#x",p[-1],*p1);} 以上代码中存在错误。 int *p &a1; 错误1:取a数组的地址,然后1,即指针跳过int [4]大小的字节…...
QT 的 blockSignals(true) 的作用范围
在 Qt 中,blockSignals 是一个用于控件的方法,它用于阻止控件发出的信号。如果你在一个 MainWindow 对象上调用 blockSignals(true),它会阻止该 MainWindow 对象发出的所有信号。 这意味着,如果 MainWindow 上有任何子控件&#…...
【C++私房菜】类和对象万字详解
目录 一、类与对象 1、类是什么 二、类和对象的基础知识 2.1 定义类:成员变量和成员函数 2.2 创建对象:实例化一个类的对象。 2.3对象的生命周期:构造函数和析构函数。 a. 构造函数 b. 析构函数 c.小结: 三、成员变量和…...
PDF下载添加水印和访问密码
下载接口 ApiOperation(value "下载文件-pdf", notes "下载文件pdf版", httpMethod "GET", response WebResult.class)RequestMapping(value "/downloadPdf", method RequestMethod.GET)public void downloadFilePdf(RequestPar…...
基于SSM+MySQL的的新闻发布系统设计与实现
目录 项目简介 项目技术栈 项目运行环境 项目截图 代码截取 源码获取 项目简介 新闻发布系统是一款基于Servletjspjdbc的网站应用程序,旨在提供一个全面且高效的新闻发布平台。该系统主要包括后台管理和前台新闻展示两个平台,涵盖了新闻稿件的撰写…...
记录首次使用yolov8-obb
1.数据格式 之前使用的数据格式是yolov5_obb的数据格式,然后需要转数据格式: 目前的数据只支持四个坐标点标注的数据,参考:If a corner of the rotate rectangle is out of the image range, How to annotate the image? Issu…...
深度学习环境配置:Anaconda 安装和 pip 源
conda是一种通用包管理系统,与pip的使用类似,环境管理则允许用户方便地安装不同版本的python并可以快速切换。 Anaconda则是一个打包的集合,里面预装好了conda、某个版本的python、众多packages、科学计算工具等等,就是把很多常用…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要: 近期,在使用较新版本的OpenSSH客户端连接老旧SSH服务器时,会遇到 "no matching key exchange method found", "n…...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术,它们扮演着完全不同的角色: Redis: 内存数据库/数据结构存储 本质: 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能: 提供丰…...
Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中,提供了一系列静态方法用于操作数组(如排序、搜索、填充、比较等)。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序(sort) 对数组进行升序…...
五、jmeter脚本参数化
目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...
