首页
学习
活动
专区
工具
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 语言中递归的实现,结合多层菜单和评论盖楼的数据结构,我们演示了前端拿到数据后的处理方法。 在使用递归时,要注意其安全性,确保递归调用深度适中且对输入进行验证,以避免潜在的问题。

8710

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

我想了一下,下载了个番茄小说发现,他们都是按照每一行的内容分别进行评论的,Hexo可以实现类似于每一段落一个Url,也就是#[段落名]的格式,但是Twikoo并不能将这些段落分开,而且本来评论就很少了,...所以我想是否可以利用我的说说页面中的,点击评论按钮后后会在评论区添加一个:> + “文本”,从而实现类似引用的功能,那么也就实现了仿段落评论,同时所有的评论都会在评论区显示,避免了因为都在段落评论而导致主评论区没人的尴尬局面...解决好友imsyy提出的弹窗中再次点击打开弹窗会导致无法关闭的问题:点击跳转 解决好友imsyy提出的弹窗中点击刷新按钮会退出的问题:点击跳转 欢迎测试:请选中你想评论的段落并右键,点击:“评论选中段落...妥协方案 下面我们需要实现该功能,刚开始我选择的时使用和说说页面类似的效果,当点击评论后,找到评论区输入框,将选中文字放到输入框中,进行类似于回复段落的效果,但是由于我设置的懒加载,当评论区没有滚入到页面视野内时不会自动加载...,但是因为他的评论区是只引入了一个twikoo,而我的评论区是双评论(其实屁用没有,不过当摆设倒是很高大上),导致他的样式和主题加载出来的有些不同,这里我没有记录截图,现在回退回去也有点麻烦,所以我就放一张正常的

8520

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

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

24930

php实现文章评论系统

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

1.9K10

vue + element-ui + scss 仿简书评论模块

回复功能可以回复当前评论本身,也可以回复其他用户对这条评论评论,我们称之为子评论。所有子评论都挂载最初的父评论下。...点击添加新评论是添加对本条评论的子评论,不是对文章的新评论,所以文章末尾处应该还有一个输入框,用来发表新评论。 三、数据结构设计 参照的效果图有了,接下来就是设计数据了。...数据库设计就不在这里说了,本项目把评论模块分了两张表,分别存放评论和回复。...所有关于母评论的子评论都挂载在母评论的 reply 字段下。 四、代码封装 新建 comment.vue 作为评论组件 <!...} }, created() { this.commentData = CommentData.comment.data; }, } 以上就是仿简书的评论模块

87820

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

二、盖楼评论 盖楼评论顾名思义就是利用评论盖楼,每一条回复都会连同前面所有的评论和回复一起生成一条新的评论,这种评论样式的好处一是能看到所有回复的内容,整个评论看起来比较连贯,二是对于那些对评论区比较重视的应用...盖楼评论的弊端和评论的回复量是成正比关系的,一条评论回复越多,盖楼评论越显得力不从心。...因为这两个问题的存在,加之盖楼评论结构比其他方式复杂一些,所以使用这种方式的应用并不多。...四、截取评论 回复的内容,连同被回复的那条内容(不管这条内容是原本的评论,还是评论的回复)生成一条新的评论,这种方式可以看做是针对盖楼评论的两个缺点做的一种优化,不会在评论区产生过多的冗余内容,也不用担心显示的问题...上述各种评论样式没有孰优孰劣,只有适不适合,当你希望提升评论区活跃度时,盖楼评论是一个好选择;当你希望项目快速上马时,禁止回复是一个最快速的开发方式;当你想兼顾评论区的活跃与整洁时,主题评论值得一试

3.2K60

php无限级分类实现评论及回复功能

经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止,从技术角度分析很容易想到运用无限级分类技术存储数据...一、效果需求分析: 1.在头部可以直接发布一级评论,最新发表的评论显示在最上面,如下效果图 ? 2.对发表的评论可以回复,回复显示在上级评论下边,形成层级关系,如下效果图 ?...3.页面操作细节:点击某个评论的回复按钮时,显示回复文本输入框,同时其他评论的回复文本输入框消失,当再次点击该回复按钮时,该文本框消失 4.在最后一级评论(这里设置是第三级)关闭回复功能 5.即时显示评论总数...<html lang="en" <head <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" <title php...测试用数据 var replyswitch = $(this).attr("replyswitch");//获取回复开关锁属性 $.ajax({ type:"POST", url:"/index.php

2K30

京东商品和评论的分布爬虫

爬取京东商品和评论的分布爬虫来进行数据分析。 完整代码下载地址: 1、转发本文至朋友圈 2、关注微信公众号 datayx 然后回复 京东 即可获取。...商品评论 商品的评论也是以 sku-id 为参数通过异步的方式进行请求的,构造请求的方法跟价格类 似,也不需过多赘述。只是想要吐嘈一下的是,京东的评论是只能一页页向后翻的,不能 跳转。...这个就涉及到分布的爬虫的问题。...既然爬虫从单机变成了分布,新的问题随之而来:如何监控分布爬虫呢?...所以我将爬虫拆分成两只爬虫,即使无法爬取 商品信息的时候,还可以爬取商品的评论信息。 小结 在爬取一天之后,爬虫成果: 评论 ? 评论总结 ? 商品信息 商品信息加上评论数约 150+w. ?

1.5K10

Android仿微信朋友圈点击评论自动定位到相关行功能

实现的代码 本文涉及到的相关代码已经上传到 https://github.com/r17171709/android_demo/tree/master/WeixinEditText 打开你的微信朋友圈,点击评论...wrap_content" android:textSize="12sp" / <TextView android:id="@+id/tv_comment" android:text="<em>评论</em>...图中红色部分为键盘展现之前某条信息<em>评论</em>区所在位置;蓝色部分为键盘,当键盘打开的时候,我们需要将红色的部分移动到黄色的位置。...这样黄色顶部与红色顶部中间的区域高度,就是RecyclerView需要滚动的数值这样就好办了,我们使用getLocationOnScreen去获取差值,再加上<em>评论</em>区域高度就行了 fun showInputComment...总结 以上所述是小编给大家介绍的Android<em>仿</em>微信朋友圈点击<em>评论</em>自动定位到相关行功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

1.5K60
领券