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

news/2024/4/20 18:05:30/文章来源:https://blog.csdn.net/weixin_43025151/article/details/129162721

1,删除评论的样式和实现逻辑

1.1 添加删除评论的样式

在comment-item组件中:

			<view class="username">{{giveName(item)}}<text class="iconfont icon-a-43-guanbi" @click.stop="delComment"></text></view>

添加样式:

        .iconfont {font-size: 20rpx;padding: 10rpx;color: #999;}

效果:
在这里插入图片描述

1.2 实现删除功能

添加delcomment方法:

 //点击删除评论方法delComment() {let uid = uniCloud.getCurrentUserInfo().uidif (uid == this.item.user_id[0]._id ||this.uniIDHasRole('admin') ||this.uniIDHasRole('role01')) {uni.showModal({title: "是否确认删除",success: res => {if (res.confirm) {this.removeComment();}}})return;}uni.showToast({title: "权限不够",icon: "error"})},//删除评论方法removeComment() {db.collection("quanzi_comment").doc(this.item._id).remove().then(res => {uni.showToast({title: "删除成功"})})}
1.3 实现无感删除

业务逻辑:在子组件comment-item 删除方法中,当执行删除某条评论后,用$emit方法把所删除的文章id传递到父组件detail,然后在detail父组件做无感删除操作------通过从子组件传递过来的id,使用findindex函数查询索引,再通过splice函数,通过索引删除detail组件中的对应的数值。

detail组件:

    <!-- 评论输入框子组件 --><comment-frame :commentObj="commentObj" @commentEnv="PcommentEnv" @removeEnv="PremoveEnv"></comment-frame>

comment-item子组件:

            //向父组件detail传递方法this.$emit("removeEnv", {id: this.item._id})

detail组件:

      //删除评论的回调PremoveEnv(e) {console.log(e);//通过已删除的文章id找到数组中的索引 findindex方法返回值就是索引let index = this.commentList.findIndex(item => {return item._id == e.id})//删除索引值对应的值this.commentList.splice(index, 1)},

2,判断删除权限以及增减评论数量

2.1 在评论表的schema中:
  "permission": {"read": true,"create": "auth.uid != null","update": "doc.user_id == auth.uid || 'role01' in auth.role","delete": "doc.user_id == auth.uid || 'role01' in auth.role"},

删除操作的权限是:只有当前用户和拥有role01角色的用户才可以进行删除操作。

2.2 权限校验
 if (uid == this.item.user_id[0]._id ||this.uniIDHasRole('admin') ||this.uniIDHasRole('role01'))

在这里插入图片描述

2.3 使用云对象实现增减评论数量
  1. 增加评论数量

在comment-frame组件中引入云对象:

	const utilsObj=uniCloud.importObject("utilsObj",{customUI: true});	

在发布评论方法中使用云对象方法:

utilsObj.operation("quanzi_article","comment_count",this.commentObj.article_id,1)
  1. 减少评论数量

在comment-item组件中引入云对象:

	const utilsObj=uniCloud.importObject("utilsObj",{customUI: true});	

在发布评论方法中使用云对象方法:

            //调用云对象方法if (this.item.comment_count > 0) {utilsObj.operation("quanzi_articles", "comment_count", this.item.article_id, -1)}

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

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

相关文章

【总结】python3启动web服务引发的一系列问题

背景 在某行的实施项目&#xff0c;需要使用python3环境运行某些py脚本。 由于行内交付的机器已自带python3 &#xff0c;没有采取自行安装python3&#xff0c;但是运行python脚本时报没有tornado module。 错误信息 ModuleNotFoundError&#xff1a;No module named ‘torn…

计算机网络第3章(数据链路层)学习笔记

❤ 作者主页&#xff1a;欢迎来到我的技术博客&#x1f60e; ❀ 个人介绍&#xff1a;大家好&#xff0c;本人热衷于Java后端开发&#xff0c;欢迎来交流学习哦&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 如果文章对您有帮助&#xff0c;记得关注、点赞、收藏、…

JVM面试总结

文章目录栈帧中存放的信息&#xff1a;对象的创建过程对象的内存布局&#xff1f;对象的访问定位方式&#xff1f;如何判断对象已死&#xff1f;可以作为GC Root的点&#xff1a;谈一下引用对象再被回收时如何逃脱&#xff1f;回收方法区如何判断常量是否废弃&#xff1f;垃圾回…

Redis的安装部署和配置文件的修改

1、准备安装环境 由于 Redis 是基于 C 语言编写的&#xff0c;因此首先需要安装 Redis 所需要的依赖&#xff1a; yum install -y gcc tcl gcc-c make 2、上传安装文件 将下载好的 redis-6.2.7.tar.gz 安装包上传到虚拟机的任意目录&#xff08;一般推荐上传到 /usr/local/s…

Mysql 索引(三)—— 不同索引的创建方式(主键索引、普通索引、唯一键索引)

了解了主键索引的底层原理&#xff0c;主键索引其实就是根据主键字段建立相关的数据结构&#xff08;B树&#xff09;&#xff0c;此后在使用主键字段作为条件查询时&#xff0c;会直接根据主键查找B树的叶子结点。除了主键索引外&#xff0c;普通索引和唯一键索引也是如此&…

stm32f103封装 入门教学(一)LED程序CubeMX

本文代码使用 HAL 库。 文章目录前言一、LED 原理图二、CubeMX创建工程三、LED 相关函数1. 输出电平函数&#xff1a;2. 延时函数&#xff1a;3. 翻转电平函数&#xff1a;四、详细代码实验现象 &#xff1a;总结代码 源码&#xff1a;前言 从这篇文章开始&#xff0c;我们讲解…

了解Axios及其运用方式

Axios简介 axios框架全称&#xff08;ajax – I/O – system&#xff09;&#xff1a; 基于promise用于浏览器和node.js的http客户端&#xff0c;因此可以使用Promise API 一、axios是干啥的 说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时&#xff0c;…

醒醒吧,外包测试哪有前途,你只是一块干电池而已,随时会被替换掉

我25岁的时候&#xff0c;外包测试&#xff0c;薪资13.5k&#xff0c;人在深圳。 内卷什么的就不说了&#xff0c;而且人在外包那些高级精英年薪大几十的咱也接触不到&#xff0c;就说说外包吧。假设以我为界限&#xff0c;25岁一线城市13.5k&#xff0c;那22-24大部分情况下是…

URP渲染管线光照机制剖析

上一节通过剖析URP 摄像机了解摄像机的机制&#xff0c;本节来分析URP的光照的主要机制&#xff0c;并通过与内置的向前渲染管线做对比&#xff0c;来比较它们的与不同。 对啦&#xff01;这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白&#xff0c;也有一些…

小程序电商商城怎么搭建?

做电商的企业商家都会首先搭建好自己的电商商城&#xff0c;尤其是现在小程序盛行的时代&#xff0c;小程序电商商城更是做电商的企业商家的必备媒介。那么小程序电商商城怎么搭建&#xff1f;下面给大家说说一些流程作为参考。 一、准备事项 搭建小程序电商商城&#xff0c;…

打不过就拉拢!ChatGPT和MidJourney已经成我小秘书!太爽了

大家好&#xff0c;我是晓衡。这两周&#xff0c;我战斗力爆棚了&#xff01;每天大概睡了四~五个小时&#xff0c;而且中午也没有休息过&#xff0c;但精神却还很亢奋。直到周一下午&#xff0c;身体才有种被掏空的感觉&#xff0c;晚上 10 点就睡了。可能是兴奋劲还在&#x…

git 的使用方法(上 - 指令)

目录前言&#xff1a;一、Git 是什么&#xff1f;二、SVN与Git的最主要的区别&#xff1f;三、Git 安装四、git 配置1. 创建仓库 - repository2. 配置3. 工作流与基本操作五、Git 的使用流程1. 仓库中创建 1.txt文件2. 查看工作区的文件状态3. 添加工作区文件到暂存区4. 创建版…

蓝桥杯:聪明的猴子

题目链接&#xff1a;聪明的猴子https://www.lanqiao.cn/problems/862/learning/ 目录 题目描述 输入描述 输出描述 输入输出样例 运行限制 解题思路&#xff1a; 最小生成树 AC代码&#xff08;Java&#xff09;: 课后练习&#xff1a; 题目描述 在一个热带雨林中生存…

C++11 条件变量(condition_variable)

一、总述 在C11中&#xff0c;我们可以使用条件变量&#xff08;condition_variable&#xff09;实现多个线程间的同步操作&#xff1b;当条件不满足时&#xff0c;相关线程被一直阻塞&#xff0c;直到某种条件出现&#xff0c;这些线程才会被唤醒。 主要成员函数如下&#x…

【java】Spring Cloud --Spring Cloud Alibaba 微服务解决方案

文章目录1、Spring Cloud Alibaba 是什么先说说 Spring CloudSpring Cloud Alibaba和Spring Cloud 的区别和联系Spring Cloud Alibaba2、Spring Cloud Alibaba 包含组件阿里开源组件阿里商业化组件集成 Spring Cloud 组件3、Spring Cloud Alibaba 功能服务注册与发现支持多协议…

教你如何搭建培训机构-学员管理系统,demo可分享

1、简介1.1、案例简介本文将介绍&#xff0c;如何搭建培训机构-学员管理。1.2、应用场景学员信息报表展示所有正式学员信息&#xff0c;可对学员进行分配班级、转课、续课、扩科、退课、阶段测评等操作。2、设置方法2.1、表单搭建1&#xff09;新建表单【学员】&#xff0c;字段…

和日期相关的代码和bug——一道力扣题中的小发现

目录 Day of the Week 题目大意 常规方法 Python代码 Golang代码 C代码 基姆拉尔森公式 Python代码 Golang代码 C代码 使用库函数 Python代码 Golang代码 C代码 Day of the Week Given a date, return the corresponding day of the week for that date. The inp…

微信协议网页版微信协议解析

最近在做个微信机器人&#xff0c;所以研究了网页版的微信协议及相关接口&#xff0c;在这里简单总结一下。从表面上看&#xff0c;对于网页版微信我们的使用流程是这样的&#xff1a;很简单&#xff0c;只有四步&#xff0c;但如果细化到内里细节的话&#xff0c;上面这简单四…

华为OD机试真题 用 C++ 实现 - 服务依赖

最近更新的博客 华为OD机试 - 入栈出栈(C++) | 附带编码思路 【2023】 华为OD机试 - 箱子之形摆放(C++) | 附带编码思路 【2023】 华为OD机试 - 简易内存池 2(C++) | 附带编码思路 【2023】 华为OD机试 - 第 N 个排列(C++) | 附带编码思路 【2023】 华为OD机试 - 考古…

ADC模数转换器(基于STM32F407)

简介 Analog-to-digital converters&#xff08;模拟数字转换器&#xff09;&#xff0c;我的STM32F407中内置3个ADC&#xff0c;每个 ADC 有 12 位、10 位、8 位和 6 位可选&#xff0c;ADC 具有独立模式、双重模式和三重模式&#xff0c;对于不同 AD 转换要求几乎都有合适的…