首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue使用组件递归实现评论盖楼功能笔记

注意为了避免死循环,需要指定终止条件 下面是一个vue脚手架创建的示例 如图: image.png 现在可以将这个组件引入到home中看看效果 image.png 就有了下图效果 image.png 2.用组件递归实现评论盖楼的功能...目标:将下面这段评论数据以楼层的形式渲染到页面 comments: [ // parent 为回复的用户信息 { content: "奥利给,兄弟萌..., user: "铁蛋", }, ] 2.1-用vue脚手架搭建一个基本的结构 创建两个组件: Comments:展示用户评论的组件 Floor:展示用户回复的用户评论...(即我们需要递归的组件) image.png 2.2-在Home首页引入Comments组件,进行第一层评论数据渲染 image.png 2.3-Comments组件获取评论数据进行渲染 假设comments...为后台获取的评论数据 image.png 页面上就可以渲染出第一层的评论数据 image.png 2.4-引入Floor递归渲染回复用户的楼层 当评论数据中有parent的时候意味着有回复用户信息,因此需要引入

2.2K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    评论盖楼、多层菜单,递归讲解(2024版)go语言

    递归是一种强大的编程技巧,用于处理具有层次结构的数据,如多层菜单和评论盖楼。...在本文中,我们将深入讨论 Go 语言中递归的实现,结合多层菜单和评论盖楼的数据结构,演示前端拿到数据后的处理方法,并关注递归的安全性及其处理方法。...设计一个评论盖楼的数据结构,每个评论包含内容和可能的子评论。...printComment(rootComment, "") } 第三章:前端处理多层菜单及评论盖楼数据 3.1 前端接收数据 前端通过 API 获取多层菜单及评论盖楼数据,通常是 JSON...通过深入探讨 Go 语言中递归的实现,结合多层菜单和评论盖楼的数据结构,我们演示了前端拿到数据后的处理方法。 在使用递归时,要注意其安全性,确保递归调用深度适中且对输入进行验证,以避免潜在的问题。

    12910

    关于无限极(类似楼盖楼评论回复系统的想法与构思

    评论系统 缘起 最近正在准备设计自己的社区网站,到设计评论这里的时候,引出了很多疑惑,于是记录一下,希望大佬们可以多多提出自己的想法,集思广益。...正文 一般我们的个人项目中,评论方式基本是一对一,或者有限的一对多,类似于网易云音乐的评论: 这种设计比较简单。...我的解决思路是这样的,每一条评论记录除主体内容之外,还记录parent_id,也就是父级评论,当parent_id为0则为主体评论,这样一张表即可解决数据存储的问题。...接下来,我们不能直接把这样的list给前端,因为要考虑到分页的情况,而我们根本不知道每一条主体评论的层级深度。 于是现在出现了两种做法:1.先筛选出几条主体评论,然后依次用ajax取出下面的回复。...ok,如果是有限的话就简单很多了,最近刚刚发现一个很吊的思路:参考左右值无限层级存储方法https://segmentfault.com/a/1190000000329012 在消除了递归操作的前提下实现了无限分组

    31230

    MongoDB实现评论

    , 用户可以发出自己的提问,其他用户来解答, 同时楼主可以回复别人的评论,别人依然可以回复楼主 数据结构 mongodb可以存储文档啊, 其实我们要做的就是构建一个合适的类,评论帮也就成功一大半了 问题...当时是按照不同的用户分组, 同一个用户的全部评论,已经楼主对它的回复,以及别人对它的回复都放在一起, 所以需要一个字段,group(我选的用户id), 专门存储分组的标志....如果前端想在页面的分左右两部分展示自己的评论和别人的评论,就需要一个标记,既然上面都已经在遍历了,多加一个判断也无妨, 拿着前端提交过来的用户id和Answer中的userId比对, 如果相等,就把这个评论的...flag标记为true, 前端根据这个标记区分, 从而给用户更多的权限,比如删除自己的评论 局限性 如果没个问题都像网易音乐那种,上万条评论,这样的话,估计就废了,虽然使用stream会快,但是也扛不住量啊..., 但是数量小的话,还是可以接受的, 其实理想的状态是评论可以以分页的形式获取出来, 感觉才正宗。

    23110

    twikoo仿段落评论实现快速评论功能

    碎碎念 前几天在twikoo的交流群中,有人提到了这样一个问题:twikoo可以实现段落评论吗?...我想了一下,下载了个番茄小说发现,他们都是按照每一行的内容分别进行评论的,Hexo可以实现类似于每一段落一个Url,也就是#[段落名]的格式,但是Twikoo并不能将这些段落分开,而且本来评论就很少了,...所以我想是否可以利用我的说说页面中的,点击评论按钮后后会在评论区添加一个:> + “文本”,从而实现类似引用的功能,那么也就实现了仿段落评论,同时所有的评论都会在评论区显示,避免了因为都在段落评论而导致主评论区没人的尴尬局面...问题提出番茄小说Hexo段落链接说说卡片回复卡片回复效果 内容简述 实现亮暗模式适配 实现高分辨率适配,设置上下阈值,基本确保不会超出屏幕 动画效果适配 自动将节选段落放置在评论框中 解决文本中含有回车导致函数失效的问题...妥协方案 下面我们需要实现该功能,刚开始我选择的时使用和说说页面类似的效果,当点击评论后,找到评论区输入框,将选中文字放到输入框中,进行类似于回复段落的效果,但是由于我设置的懒加载,当评论区没有滚入到页面视野内时不会自动加载

    12520

    Disqus评论框改造工程-最近评论实现

    最近从多说迁移到了 Disqus,确实老东家做的插件会好得多,唯一的麻烦就是需要一些步骤才能看到评论框。 大多功能都还凑合。唯一不满意的就是 CSS 风格。...本来也没多在意,也就一个 Disqus 的 Logo 放在那儿还看得过去,今天试着用他们 Advanced Usage 里面加了个最近评论框,同样也是 Iframe,不过各种padding加起来之后丑得不行...是时候研究一下 Disqus 的 API 了 毕竟是最大的三方评论供应商,他们的 API 及其详细。1....一章内介绍了如何进行请求,实际上就是告诉你记得把 Key 传过去 从Documents 页面找到我们需要的 call,也就是Forums/listPosts 注意还有其他的listPosts的需求,当前我们使用的是全站评论.../评论内容,甚至一同返回了纯文本和富文本两种内容,最后将返回的数据进行渲染一下: $.ajax({ url: 'https://disqus.com/api/3.0/forums

    46530

    纯代码实现WP评论添加@评论者功能

    对于使用WordPress默认评论框的同学来说,常常会遇到这样一个问题,就是当我们回复评论者消息的时候偶尔会搞不清楚到底是回复的谁,当然我们可以通过嵌套评论来区分不同的话题,但是当大家一块参与话题互相讨论的时候还是会分不清谁回复的谁...,这时候我们就可以通过@评论者来告诉对方我是在和你交流了。...网上关于此功能的实现方法很多,这里收集整理了两种亲测可用的方法推荐给大家。...将@信息写入数据库//添加@评论者功能function qgg_comment_add_at( $commentdata ) { if( $commentdata[\'comment_parent\'...return $commentdata;}add_action( \'preprocess_comment\' , \'qgg_comment_add_at\', 20);不将@信息写入数据库//添加@评论者功能

    20430

    php实现文章评论系统

    最近工作中需要完成一个评论的功能,上网查找了几个评论系统的展示样式。最后参考“多说”和“畅言”等评论系统,自己使用PHP语言实现了一个简单的评论系统。...并记录了两种方式(递归方式和非递归方式)的实现过程,以及分析两种方式的优缺点,但前端如何实现就没有展现了。...具体实现方案如下(在ThinkPHP框架上实现): 1、递归方式 优点:实现代码简单,而且如果评论的层级固定在5个层次一下的话,建议使用该种方法,这样前端通过这种数据结果实现简单。...缺点:如果评论的层级没有固定的话,前端将无法展示评论信息了,而且如果层级太多的话,将会极大的消耗内存,更要命的是每次递归都得查询数据库,性能将大大的降低。...2、非递归方式(堆栈方式实现) 优点:只查询一次数据库,性能较好。可以实现n层级的评论,前端也能很好的展示 缺点:代码稍微复杂,对于固定的层级评论,前端展示评论较为复杂。

    2K10

    树形递归实现多级评论

    最近在想将博客网站做成小程序版本,之前只是实现了文章列表和文章详情的展示,这两天在进行评论的改写。...在评论中是一个多级嵌套的方式来进行展示的,也就是说每一条评论有一个自己的评论id,然后有一个父ID,指向父级的评论ID,孙子节点和祖父节点之间没有相应的关联。...这样形成一个多级嵌套的模式,具体实现的效果为下图所示 ?...的节点取出,这些节点为最外层节点,然后将子节点依次插入,我们需要进行排序,由于后台返回的数据已经按照时间进行了排序,孙子节点产生的时间必然要晚于子节点,所以依次插入的时候无需担心会有节点漏掉 下面来看具体实现代码...child.map(item=>{ parent = insertNode(parent, item); }); console.log(parent); 至此,一个完整的树形递归实现多级评论就算是完成了

    1.4K10

    自动评论csdn博客文章实现

    今天我们来用java代码爬取csdn博客网站,然后自动评论,这一波操作可以说是相当风骚了,话不多说,咱上代码。.../** * 登录csdn页面,评论当然需要登录了 * * @throws Exception */ public static void loginCsdnPager()...这里我们只取每个分类下初始页的文章列表url(当然还可以自行实现鼠标下拉时的分页,以获取到更多的文章列表),这里定义了一个名为FETCHPAGES的数组常量,管理所需爬取的分类列表。...", "")); nvps.add(new BasicNameValuePair("content", "加Wei信ammlysouw 免费领取java...url,以及请求参数,发起post请求,评论上三次以后就会被网站服务器限制,提示评论太快,需要睡眠2秒钟再继续,最后会把评论成功的url和数量记录到本地文件中,便于查看。

    85320

    评论功能的简单实现

    没有互动型 这种类型只能评论评论之间没有互动,类似于问答形式。提出问题,然后回答,一对多关系。这些回答之间没有任何联系 ?...id', PRIMARY KEY (`comment_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 这里主要说明评论功能的实现,表会尽可能简单的设计,像点赞,...id即可,将查询的内容放入其评论区完成,这种评论较为简单,评论之间没有互动,适用于少数场景(像笔者这次写的问答功能,但该问答有非法关键词,官方回答,锁定,审核,等功能,也不简单) 3....小一评论博客,小二紧接着回复小一的评论,小三又回复小二的评论,小一又回了小三的评论,像俄罗斯套娃层层套 数据库设计 这里笔者用单表来实现,笔者称评论与回复这二者为父子关系,评论为父级,回复为子级,这种关系在数据里增多一个...1楼和2楼同级,属于父级评论,直接挂载的博客下 A属于1楼评论的子级 B属于A的子级 C属于B的子级 二层的示意图: ?

    1.5K11

    WordPress 站点实现评论秒回复

    很多站长都很好奇明月博客的评论回复都是“秒回复”的速度是如何实现的,今天明月就给大家分享一下,其实想实现“秒回复”博客评论并不复杂,原理很简单就是借助手机上的 WordPress 客户端和邮箱客户端来实现的...,邮箱客户端主要是接受博客站点评论提醒的,WordPress 客户端主要是方便及时的回复、修改、删除、屏蔽评论的。...这样在手机上有了 WordPress 手机客户端和 QQ 邮箱客户端后,就可以实现 WordPress 博客站点评论的秒收和秒回复了,开启 QQ 邮箱客户端在手机上邮件提醒通知就可以不错过每一个博客站点评论的提醒...有关 WordPress 站点评论重要性的文章: 『百度开始在搜索结果中展示站点社交内容——评论数量』 『还在给你的博客站点评论设置障碍的注意了!』 『再说说博客评论这些事儿!』...『说说博客评论的那些事儿』 『如何判断一个网站的价值?』

    77930

    4种主流评论功能设计:虎扑最悬疑,豆瓣最人性

    二、盖楼评论 盖楼评论顾名思义就是利用评论盖楼,每一条回复都会连同前面所有的评论和回复一起生成一条新的评论,这种评论样式的好处一是能看到所有回复的内容,整个评论看起来比较连贯,二是对于那些对评论区比较重视的应用...(或者老板),使用盖楼评论时,评论区看起来会比较火爆。...盖楼评论的弊端和评论的回复量是成正比关系的,一条评论回复越多,盖楼评论越显得力不从心。...其次是内容显示的问题,盖楼评论为了显示出楼层的效果,一般回进行一定程度的缩进,越往前的楼层缩进越多,所以当一条评论达到成百上千楼的时候,最前面的评论已经缩进的不能看了,当然这种评论出现的几率是非常小的...因为这两个问题的存在,加之盖楼评论结构比其他方式复杂一些,所以使用这种方式的应用并不多。

    3.4K60
    领券