首页
学习
活动
专区
工具
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.1K00
您找到你想要的搜索结果了吗?
是的
没有找到

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

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

8210

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

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

24030

MongoDB实现评论

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

19610

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

43330

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

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

13030

php实现文章评论系统

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

1.9K10

树形递归实现多级评论

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

1.3K10

自动评论csdn博客文章实现

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

81720

评论功能的简单实现

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

1.4K11

WordPress 站点实现评论秒回复

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

73730

Valine 实现评论“撤回”重新编辑

(想法来自 @Zsedczy 的评论重新编辑和撤销删除) 非撤回再编辑 具体实现 既然又是 leancloud 那就先聊下,因为 leancloud 官方文档里有写到一个 revert() 方法可以撤销尚未保存的修改...,不过我捣鼓半天没看懂这玩意咋能套进 Valine 实现保存数据前修改再保存,所以放弃了这个思路,转而像更简单粗暴的“数据更新”方法。...实现思路 同样的,利用 leancloud 数据储存的数据更新方法,对已经成功储存的指定数据进行修改再储存,简单来说就是更新数据(和之前更新点赞数据相似)当 Valine 提交评论后我们提供按钮对指定...del() : false; //删除逻辑 }; 问题修复 以上代码是已经可以实现重复编辑和撤销评论的逻辑了,不过这时候发现更新数据提交后没有响应,打开控制台才发现报了 400 错误,一看是有关于 ACL...拓展 要实现评论是否被重复编辑,一个是记录并判断评论提交时间,不过太麻烦,还有一个就和置顶 topset 的实现是一样的,在 leancloud 控制台新建一个 isEdited 列默认值 flase

9010

ajax实现看视频无刷新评论

5.在页面加载函数中,这里分两个部分来写:(完全可以放在一个一般处理程序中的,只是需要一个参数action判断就可以了) 1.页面加载,显示已有的评论。...;在success函数中进行for循环遍历所有的评论,对象;绑定到ul标签中; 2.添加评论ajax: 在data键值对中传递,评论内容,和action:'addNew';在...(二).新建一个CommentsTest.ashx; 1.设置把报文返回类型为application/json 2.根据ajax请求请求的action的类型判断是添加评论还是展示评论...json context.Response.ContentType = "application/json"; //2)..根据ajax请求参数的action的值判断是添加评论还是展示评论...{ //1>.从浏览器的请求报文中获得评论内容msg和Ip地址。

2.4K21
领券