(二十五)、实现评论功能(5)【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

news2024/11/24 5:58:34

1,实现二级回复的入库操作

1.1 两个子组件(comment-item和comment-frame)与父组件reply之间的属性传值

comment-item:

    props: {
      item: {
        type: Object,
        default () {
          return {}
        }
      }
    },

comment-frame:

    props: {
      commentObj: {
        type: Object,
        default: () => {
          return { }
        }
      },
      placeholder: {
        type: String,
        default: "评论点什么吧~"
      }
    },

reply:

    <!-- 评论回复组件  一级评论 -->
    <view class="top">
      <comment-item :item="replyItem"></comment-item>
    </view>
    <!-- 输入框回复子组件 -->
    <view>
      <comment-frame placeholder="回复 张三"></comment-frame>
    </view>
1.2 引入封装类tools.js中的getName方法

reply:

import {giveName,giveAvatar} from "../../utils/tools.js"
    <!-- 输入框回复子组件 -->
    <view>
      <comment-frame :placeholder="`回复:${giveName(this.replyItem)}`"></comment-frame>
    </view>

定义commentObj并赋值:

				commentObj:{
					article_id:"",
					comment_type:1,
					reply_user_id:"",
					reply_comment_id:""
				},
    onLoad(e) {
      let replyItem = uni.getStorageSync("replyItem");
      if (!replyItem) return uni.navigateBack();
      this.replyItem = replyItem || {}
      this.commentObj.article_id=this.replyItem.article_id;
      this.commentObj.reply_user_id=this.replyItem.user_id[0]._id;
      this.commentObj.reply_comment_id=this.replyItem._id;
    },

2,筛选二级回复的列表数据渲染

2.1 在detail页面筛选一级评论数据

依据quanzi-comment.schema:

    "comment_type": {
      "bsonType": "int",
      "description": "回复类型: 0 针对文章的回复  1 针对评论的回复"
    },

加入筛选条件comment_type为0的显示在detail一级评论列表中:

let commentTemp = db.collection("quanzi_comment")
          .where(`article_id == "${this.artid}" && comment_type==0`).orderBy("comment_date desc")
2.2 在reply页面中添加方法 获取二级评论数据
      //获取二级评论列表
      async getComment() {
        let commentTemp = db.collection("quanzi_comment")
          .where(`article_id == "${this.replyItem.article_id}" && comment_type==1`).orderBy("comment_date desc")
          .limit(20).getTemp();
        let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp()

        let res = await db.collection(commentTemp, userTemp).get()
        console.log(res.result.data)
      },
2.3 在reply页面渲染数据

定义

childReplyArr:[]

赋值:

this.childReplyArr=res.result.data

渲染:

    <!-- 评论回复子组件 二级评论 -->
    <view class="list">
      <view class="row" v-for="item in childReplyArr">
        <comment-item :item="item"></comment-item>
      </view>
    </view>

评论后实时刷新:

<comment-frame :commentObj="commentObj" @commentEnv="commentEnv" :placeholder="`回复:${giveName(this.replyItem)}`">
      //评论成功后的回调
      commentEnv() {
        this.childReplyArr = [];
        this.getComment();
      },

二次筛选:

let commentTemp = db.collection("quanzi_comment")
          .where(`article_id == "${this.replyItem.article_id}" && comment_type==1 && 
reply_comment_id == "${this.replyItem._id}"`).orderBy("comment_date desc")

3,goupField分组统计回复求和

jql语法 分组统计groupby

        //获取当前文章所有评论的id
        let idArr = res.result.data.map(item => {
          return item._id
        })
        //分组统计   筛选:回复评论id在所有id中的数据
        let replyArr = await db.collection("quanzi_comment").where({
            reply_comment_id: db.command.in(idArr)
          }).groupBy('reply_comment_id')
          .groupField('count(*) as totalReply').get();

        console.log(replyArr)

打印输出结果:
在这里插入图片描述

        //数组对比
        res.result.data.forEach(item => {
          let index = replyArr.result.data.findIndex(find => {
            return find.reply_comment_id == item._id
          })
          console.log(index)
          if (index > -1) item.totalReply = replyArr.result.data[index].totalReply
        })

打印输出结果:

在这里插入图片描述
渲染回复数量:

<view class="reply-btn">{{item.totalReply}}回复 </view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/365758.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LoRaWAN模块在车辆跟踪定位中的应用

目前 GPS已经在资产的管理中得到了越来越多的运用&#xff0c;如车辆跟踪、车队跟踪、资产监控等&#xff1b;人员跟踪&#xff0c;宠物跟踪&#xff0c;等等。在所有追踪装置中&#xff0c;最重要的是它的电池期望和监视距离。鉴于 LoRaWAN的功率消耗很小&#xff0c;而且能在…

Allegro如何快速检查走线是否跨分割操作指导

Allegro如何快速检查走线是否跨分割操作指导 在做PCB设计的时候,信号线跨分割的情况需要尽量避免,尤其是信号速率较高的情况,Allegro可以快速的检查PCB上哪个位置跨分割了,并且以高亮的形式报出来,类似下图 TOP层走线跨了L2层参考层空洞, 如何检查,具体操作步骤如下 点…

ArkUI实战,自定义饼状图组件PieChart

本节笔者带领读者实现一个饼状图 PieChart 组件&#xff0c;该组件是根据笔者之前封装的 MiniCanvas 实现的&#xff0c; PieChart 的最终演示效果如下图所示&#xff1a; 饼状图实现的拆分 根据上图的样式效果&#xff0c;实现一个饼状图&#xff0c;实质就是绘制一个个的实…

如何保护 IP 地址的隐私问题

是不是只有运营商才能查到某个人的住址信息呢&#xff1f;在大数据时代的今天&#xff0c;各种互联网应用收集了大量的数据信息&#xff0c;它们其实也可以根据这些信息&#xff0c;推断出某个人的大致地址位置。例如百度地图会一直用 App SDK 以及网页的方式记录 IP 和地址位置…

MySQL-redo log和undo log

什么是事务 事务是由数据库中一系列的访问和更新组成的逻辑执行单元 事务的逻辑单元中可以是一条SQL语句&#xff0c;也可以是一段SQL逻辑&#xff0c;这段逻辑要么全部执行成功&#xff0c;要么全部执行失败 举个最常见的例子&#xff0c;你早上出去买早餐&#xff0c;支付…

位运算(C/C++)

1. 基础知识 程序中的所有数在计算机内存中都是以二进制的形式储存的。位运算就是直接对整数在内存中的二进制位进行操作。比如&#xff0c;and运算本来是一个逻辑运算符&#xff0c;但整数与整数之间也可以进行and运算。举个例子&#xff0c;6的二进制是110&#xff0c;11的二…

Python概述 基础语法 判断 循环

Python概述常用快捷键第二章-Python基础语法01-字面量02-注释03-变量04-数据类型05-数据类型转换06-标识符07-运算符08-字符串的三种定义方式09-字符串的拼接10-字符串格式化11-字符串格式化的精度控制 12-字符串格式化-快速写法13-对表达式进行格式化14-字符串格式化练习题讲解…

【Jmeter】ForEach控制器

一、什么是ForEach控制器 ForEach控制器是遍历某个数组读取不同的变量值&#xff0c;来控制其下的采样器或控制器执行一次或多次。而这个数组可以是用户自定义变量&#xff0c;也可以是从前面接口请求中提取到需要的数据&#xff0c;然后进行遍历循环。 二、ForEach控制器相关…

【概念辨析】二维数组传参的几种可能性

一、二维数组传参竟然不是用二级指针进行接收&#xff1f; 今天进行再一次的二级指针学习时&#xff0c;发现了一条以前没怎么注意过的知识点&#xff1a;二维数组进行传参只能用二维数组&#xff08;不能省略列&#xff09;进行接收或者是数组指针。 问题复现代码如下&#xf…

深度卷积对抗神经网络 进阶 第三部分 GANs Unpaired Translation with Cycle GAN 模型

非配对的图像转换应用 Unpaired Image-to-Image Translation Unpaired image-to-image translation 主要用于学习两组图像之间的对应关系&#xff0c;检查和寻找两堆数据中的共同内容&#xff08;content&#xff09;以及每堆独有的特点&#xff08;style&#xff09;。而这个…

FinClip 的 2022 与 2023

相比往年&#xff0c;今年复盘去年与展望新年的文章来的稍慢一点。不过也希望能够借这篇文章&#xff0c;和关注 FinClip 的用户朋友们一起聊聊&#xff0c;我们在去年和今年的想法与计划。 2022 在过去的一年中&#xff0c;我们的身边发生了很多事情&#xff0c;这些事情在不…

英语二-电子邮件邀请短文写作

1. 邮件模板 Dear 邀请人, Hope you have a great day. I am writing this email to invite you to attend 主题. Please kindly find the following information for your reference: Time: 时间 Address: 地点 We hope that nothing will prevent you from coming, as…

如何轻松学习Python数据分析?

今天这篇文章来聊聊如何轻松学习『Python数据分析』&#xff0c;我会以一个数据分析师的角度去聊聊做数据分析到底有没有必要学习编程、学习Python&#xff0c;如果有必要&#xff0c;又该如何学习才能做到毫不费力。 1.实际的工作 如果你是一名数据分析师&#xff0c;我相信你…

【Linux】环境变量与进程优先级

文章目录&#x1f3aa; 进程优先级&#x1f680;1.孤儿进程&#x1f680;2.优先级查看&#x1f680;3.优先级修改&#x1f3aa; 环境变量&#x1f680;1.常见环境变量&#x1f680;2.环境变量获取&#x1f680;3.main中的命令行参数&#x1f3aa; 进程优先级 每个进程都有相应…

Idea修改Git账号及密码的方法

IDEA修改git账号及密码的方法&#xff1a;1、file->settings->passwords2、重启IDEA3、执行一次提交或更新当执行提交或更新之后&#xff0c;idea会自动提示输入账号、密码&#xff0c;如下&#xff1a;4、以上如果还修改不了&#xff0c;请尝试如下方式解决办法&#xf…

一文揭晓:手机号码归属地api的作用是什么?

随着手机的普及&#xff0c;手机号码的归属地已经成为很多网站和App中调用的重要数据资源。而手机号码归属地API可以帮助开发者快速获取手机号码归属地信息。目前&#xff0c;这种API已经被广泛地使用&#xff0c;用于各种不同的应用场景。这对于用户及开发者来说是非常重要的&…

nodejs基于vue个人需求和地域特色的外卖订餐推荐系统

1.1课题背景 1 1.2课题研究现状 1 1.3初步设计方法与实施方案 2 1.4本文研究内容 2 2 系统开发环境 4 3 系统分析 6 3.1系统可行性分析 6 3.1.1经济可行性 6 3.1.2技术可行性 6 3.1.3运行可行性 6 3.2系统现状分析 63.3功能需求分析 7 3.4系统设计规则与运行环境 8 3.5系统流程…

BP神经网络参数总结,BP神经训练窗口详解,基于BP神经网络的火灾识别,1000案例之17

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于B P神经网络的火灾识别 数据集 MATLAB编程BP神经网络代码&#xff0c;并附有GUI窗口 效果图…

Android 实现 NFC 读取卡片信息

效果图&#xff1a;因为朋友需要个读取NFC卡片数据的功能,所以最近看了一下Android 系统下NFC 读取卡片信息的操作。NFC(近距离无线通信 ) 是一组近距离无线技术,通常只有在距离不超过 4 厘米时才能启动连接.借助 NFC&#xff0c;您可以在 NFC 标签与 Android 设备之间或者两台…

jenkins使用SSH拉取gitlab代码

jenkins机器上操作 1 创建密钥对 ssh-keygen (一路回车生成密钥对) ssh-copy-id -i id_rsa.pub xxx.xxx.xxx.xxx 2 查看公钥配置gitlab ssh cat /root/.ssh/id_rsa.pub 配置gitlab ssh 3 在jenkins配置私钥 cat /root/.ssh/id_rsa 完成以上操作后 在jenkins机器上执行git…