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

news/2024/4/25 15:41:27/文章来源:https://blog.csdn.net/weixin_43025151/article/details/129181398

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

        //获取当前文章所有评论的idlet 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.luyixian.cn/news_show_73129.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

儿童饰品发夹发卡出口美国办理什么认证?

亚马逊美国站上传新产品&#xff0c;很多时候都是需要类目审核的&#xff0c;后台给出要求提供认证&#xff0c;产品类目不同&#xff0c;所需要提供的认证证书是不一样&#xff0c;儿童产品需要提交的是CPC认证&#xff0c;玩具&#xff0c;母婴用品&#xff0c;儿童书包&…

PDF文件怎么转图片格式?转换有技巧

PDF文件有时为了更美观或者更直观的展现出效果&#xff0c;我们会把它转成图片格式&#xff0c;这样不论是归档总结还是存储起来都会更为高效。有没有合适的转换方法呢&#xff1f;这就来给你们罗列几种我个人用过体验还算不错的方式&#xff0c;大家可以拿来参考一下哈。1.用电…

Apifox = Postman + Swagger + Mock + JMeter

目录 可视化API设计 高效 & 零学习成本 可复用的“数据模型” 遵循 OpenAPI(Swagger) 规范 可导入 Swagger 等 20 数据格式 具体使用尝鲜 多项目管理 支持多环境切换 支持IDEA、浏览器、桌面应用 Idea插件 公共API hub库 如题&#xff1a;一款非常好用的API管理测…

Wi-Fi 7技术揭秘

引言 2022年4月7日&#xff0c;紫光股份旗下新华三集团全球首发企业级智原生Wi-Fi 7 AP新品 WA7638和WA7338。仅在同年的6月15日&#xff0c;在东京举行的第29届日本网络通信展览会&#xff08;Interop Tokyo 2022&#xff0c;简称Interop展&#xff09;中&#xff0c;WA7638就…

D1s RDC2022纪念版开发板开箱评测及点屏教程

作者new_bee 本文转自&#xff1a;https://bbs.aw-ol.com/topic/3005/ 目录 芯片介绍开发板介绍RT-Smart用户态系统编译使用感想引用 1. 芯片介绍 RISC-V架构由于其精简和开源的特性&#xff0c;得到业界的认可&#xff0c;近几年可谓相当热门。操作系统方面有RT-Thread&am…

Firebase常用功能和官方Demo简介

一、Firebase简介Firebase刚开始是一家实时后端数据库创业公司&#xff0c;它能帮助开发者很快的写出Web端和移动端的应用。自2014年10月Google收购Firebase以来&#xff0c;用户可以在更方便地使用Firebase的同时&#xff0c;结合Google的云服务。现在的Firebase算是谷歌旗下的…

模拟信号4-20mA /0-5V/0-75mV/0-100mV转RS-485/232,数据采集A/D转换模块 YL21

特点&#xff1a;● 模拟信号采集&#xff0c;隔离转换 RS-485/232输出● 采用12位AD转换器&#xff0c;测量精度优于0.1%● 通过RS-485/232接口可以程控校准模块精度● 信号输入 / 输出之间隔离耐压3000VDC ● 宽电源供电范围&#xff1a;8 ~ 32VDC● 可靠性高&#xff0c;编程…

界面控件DevExpress WinForm——轻松构建类Visual Studio UI(二)

DevExpress WinForm拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜任…

海思SD3403/SS928V100开发(5)MIPI_YUV相机vio sample开发----修改思路

1. 前言 sensor输出格式: YUV422 8bit 硬件连接: MIPI_YUV相机(4lane MIPI) -> SS928V100 MIPI0(4lane) 框图: 2. 几个问题 基于SS928 SDK中的 vio sample修改; 但是sample里面都是基于RAW RGB sensor开发的sample, 没有现成的MIPI_YUV sensor的参考,需要自己…

CentOS 8利用Apache安装部署下载服务器

1&#xff1a;部署的目的是做一个类似下面开源镜像网站&#xff0c;把一些软件或者资料上传到服务器上面&#xff0c;减少用户在互联网上下载资料&#xff0c;提高效率&#xff0c;减少病毒。 2&#xff1a;使用下面的命令配置本机的IP地址主机名等信息。后期使用IP地址进行访问…

11技术太卷我学APEX-数据加载

11技术太卷我学APEX-数据加载 0 所谓的数据加载 就是导入数据到数据库表中&#xff0c;本示例就采用Excel导入数据到《技术太卷我学APEX》的apex_learn表。表结构大概是这样的 CREATE TABLE "APEX_LEARN" ( "P_ID" NUMBER(17,0) NOT NULL ENABLE, &quo…

【Elasticsearch】安装配置与使用

一、下载与安装Elasticsearch下载地址&#xff1a;https://www.elastic.co/cn/downloads/elasticsearch#ga-release前端管理界面&#xff1a;https://github.com/mobz/elasticsearch-head这两个文件都是解压即可。二、配置与启动1.elasticsearch6以上的版本已经内置jdk&#xf…

2023年Java进阶架构师的必备思维导图,让你少走弯路!

架构师是什么&#xff1f;要做什么&#xff1f; 架构师 &#xff1a;是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物。架构师不是一个人&#xff0c;他需要建立高效的体系&#xff0c;带领团队去攻城略地&#xff0c;在规定的时间内…

一文速学-Adaboost模型算法原理以及实现+Python项目实战

目录 前言 一、Adaboost算法概述 二、Adaboost模型原理 类推 计算原理 特点 适应较小量数据集&#xff0c;训练时间长 三、Python实例运用 AdaBoostClassifier分类 参数 实例实现分类 导入数据集 划分数据集 训练模型 评估算法 模型效果 前言 集成学习的方法在全…

[NOIP2002 普及组] 过河卒

题目描述&#xff1a; 棋盘上 A 点有一个过河卒&#xff0c;需要走到目标 B 点。卒行走的规则&#xff1a;可以向下、或者向右。同时在棋盘上 C 点有一个对方的马&#xff0c;该马所在的点和所有跳跃一步可达的点称为对方马的控制点。因此称之为“马拦过河卒”。 棋盘用坐标表…

干测试5年,经常被开发看不起,现在总算证明了自己····

测试不止是点点点 我感觉我是一个比较有发言权的人吧&#xff0c;我在测试行业摸爬滚打5年&#xff0c;以前经常听到开发对我说&#xff0c;天天的点点点有意思没&#xff1f; 和IT圈外的同学、朋友聊起自己的工作&#xff0c;往往一说自己是测试&#xff0c;无形中也会被大家…

利用global mapper导出等高线 在sketch up制作三维模型

为了做一个地形模型&#xff0c;绞尽脑汁实验了所有能查到的教程&#xff0c;在免费的基础上总体尝试失败&#xff0c;一是需要花钱的插件例如bitmap to mesh&#xff0c;即便能下载到&#xff0c;也是无法安装使用。如果你能下到且安装上&#xff0c;别忘了分享给我。 二是有的…

什么是品牌营销?学会正确推广您的业务

什么是品牌营销&#xff1f; 品牌营销涉及长期战略规划&#xff0c;以推广整个品牌&#xff0c;而不是营销单个产品或服务。它分享了一个引人入胜的故事&#xff0c;以在潜在客户中产生品牌知名度并建立声誉。 面向消费者的品牌使用品牌智能软件来了解人们对其品牌的看法&#…

超级详细的Maven教程

超级详细的 Maven 教程&#xff08;基础高级&#xff09; 1. Maven 是什么 Maven 是 Apache 软件基金会组织维护的一款专门为 Java 项目提供构建和依赖管理支持的工具。 一个 Maven 工程有约定的目录结构&#xff0c;约定的目录结构对于 Maven 实现自动化构建而言是必不可少…

10套“2023年软考备考资料”送给你

距离软考考试越来越近了&#xff0c;备考的形势越发紧张了。考点那么多&#xff0c;我们需要抓出常考的大部分知识点。 ​为此&#xff0c;为大家整理了《2023年软考免费备考资料》&#xff0c;内含软考各科目不同类型共10套备考资料。 ​ 第1套&#xff1a;早鸟学习计划&am…