uniapp 云开发小程序评论与回复功能的简单设计

1.前端视图与云端数据的关系

字段commentList是数组类型,评论内容与昵称为对象类型。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
注意 :如果在小程序端调用数据库API,需要把集合的数据权限修改为自定义安全规则 “write” : true 其他用户才能回复评论
在这里插入图片描述

2.实现添加评论的代码

        addComment() {
        	let data = {
				avatar:avatarUrl,
				nickName:nickName,
				addTime:new Date(),
				commentList:[{
					comment:comment,
					nickName: nickName
				}]
			}
			
			// 在数组前面插入数据,使页面实时显示新增加的评论
			this.commentData.unshift(data)
			
			// 把评论保存到云数据库
			wx.cloud.database()
			.collection('videoComment')  //集合名称
			.add({
				data: data,
				success(res) {
					console.log('增加成功:', res)
				},
				fail(err) {
					console.log('增加出错:' , err)
				}
			})
        },

3.实现回复评论的代码

		replyComment() {	
			const db = wx.cloud.database()
			const com = db.command
			let replyData = {						
				comment: comment,
				nickName: nickName						
			}
			
			// 回复内容追加到本地数组里面的commentList数组中,使页面实时显示追加的评论
			this.commentData[commentIndex].commentList.push(replyData)
			
			// 回复内容保存到云数据库
			db.collection('videoComment')  //集合名称
			.where({ _id: id })  //评论的id
			.update({
				data:{					
					commentList: com.push({  //追加数据到commentList字段
						comment : comment,
						nickName : nickName
					})					
				},
				success(res) {
					console.log('回复成功:', res)
				},
				fail(err) {
					console.log('回复出错:' , err)
				}
			})
		},
  • 7
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值