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

news2024/10/7 12:28:31

1，评论回复模块的样式布局

1.1 在detail页面添加uview中的 Empty 内容为空组件
    <!-- 评论区 -->
    <view class="comment">
      <u-empty mode="comment" icon="http://cdn.uviewui.com/uview/empty/comment.png">
      </u-empty>
    </view>
1.2 创建评论子组件comment-item和comment-frame

comment-item子组件：

<template>
  <view>
    <view class="comment-item">
      <view class="avatar">
        <u-avatar src="../../static/images/panda.jpg" size="26"></u-avatar>
      </view>

      <view class="wrap">
        <view class="username">王五</view>
        <view class="comment-content">评论的详细内容</view>
        <view class="info">
          <view class="reply-btn">3回复 </view>
          <view>
            <uni-dateformat :date="Date.now() - 35444582" :threshold="[60000,3600000*24*30]">
            </uni-dateformat>
          </view>
          <view>北京市</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "comment-item",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss" scoped>
  .comment-item {
    display: flex;

    .wrap {
      flex: 1;
      padding-left: 20rpx;
      padding-bottom: 20rpx;

      .username {
        font-size: 26rpx;
        color: #666;
        padding: 10rpx 0;
      }

      .comment-content {
        font-size: 34rpx;
        color: #111;
        line-height: 1.8em;
      }

      .info {
        font-size: 26rpx;
        color: #666;
        display: flex;
        padding: 10rpx 0;
        align-items: center;

        view {
          margin-right: 25rpx;
        }

        .reply-btn {
          padding: 6rpx 18rpx;
          background: #e4e4e4;
          border-radius: 30rpx;
        }
      }
    }
  }
</style>

comment-frame子组件：

<template>
  <view>
    <view class="commentFrame">
      <uni-easyinput ref="uipt" @confirm="goComment" suffixIcon="paperplane" v-model="replyContent"
        :placeholder="placeholder" @iconClick="goComment">
      </uni-easyinput>
    </view>
  </view>
</template>

<script>
  export default {
    name: "comment-frame",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss" scoped>
  .commentFrame {
    width: 100%;
    background: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
  }
</style>
1.3 detail页面中引入子组件，并添加样式
      <!-- 评论内容子组件 -->
      <view class="content">
        <view class="item" v-for="item in 3">
          <comment-item></comment-item>
        </view>
      </view>
    </view>
    <!-- 评论回复子组件 -->
    <comment-frame></comment-frame>

添加相应的样式：

    .comment {
      padding: 30rpx;
      padding-bottom: 120rpx;

      .item {
        padding: 10rpx 0;
      }
    }
1.4 效果：

在这里插入图片描述

2，创建评论表的schema数据结构

2.1 创建评论表的schema

按照评论模板创建quanzi_comment.schema：

{
	"bsonType": "object",
	"required": ["article_id", "user_id", "comment_content", "comment_type"],
	"permission": {
		"read": true,
		"create": "auth.uid != null",
		"update": "doc.user_id == auth.uid || 'webmaster' in auth.role",
		"delete": "doc.user_id == auth.uid || 'webmaster' in auth.role"
	},
	"properties": {
		"_id": {
			"description": "存储文档 ID（文章 ID），系统自动生成"
		},
		"article_id": {
			"bsonType": "string",
			"description": "文章ID，opendb-news-posts 表中的`_id`字段",
			"foreignKey": "quanzi_articles._id"
		},
		"user_id": {
			"bsonType": "string",
			"description": "评论者ID，参考`uni-id-users` 表",
			"forceDefaultValue": {
				"$env": "uid"
			},
			"foreignKey": "uni-id-users._id"
		},
		"comment_content": {
			"bsonType": "string",
			"description": "评论内容",
			"title": "评论内容",
			"trim": "right"
		},
		"comment_type": {
			"bsonType": "int",
			"description": "回复类型： 0 针对文章的回复  1 针对评论的回复"
		},
		"reply_user_id": {
			"bsonType": "string",
			"description": "被回复的评论用户ID，comment_type为1时有效",
			"foreignKey": "uni-id-users._id"
		},
		"reply_comment_id": {
			"bsonType": "string",
			"description": "被回复的评论ID，comment_type为1时有效",
			"parentKey": "_id"
		},
		"comment_date": {
			"bsonType": "timestamp",
			"description": "评论发表时间",
			"forceDefaultValue": {
				"$env": "now"
			}
		},
		"comment_ip": {
			"bsonType": "string",
			"description": "评论发表时 IP 地址",
			"forceDefaultValue": {
				"$env": "clientIP"
			}
		},
		"province": {
			"bsonType": "string",
			"title": "发布省份",
			"description": "发布省份",
			"label": "发布省份",
			"trim": "both"
		}
	},
	"version": "0.0.1"
}
2.2 输入框子组件补齐data属性和methods方法
<script>
  export default {
    name: "comment-frame",
    data() {
      return {
        replyContent: '',
        placeholder: '评论点什么呢~'
      };
    },
    methods: {
      goComment() {
        console.log(this.placeholder)
      }
    }
  }
</script>
2.3 封装传值公共组件并入库

detail页面：

    <!-- 评论输入框子组件 -->
    <comment-frame :commentObj="commentObj"></comment-frame>

onload中添加：

this.commentObj.article_id = e.id

在组件comment-frame中：

<template>
  <view>
    <view class="commentFrame">
      <uni-easyinput ref="uipt" @confirm="goComment" suffixIcon="paperplane" v-model="replyContent"
        :placeholder="placeholder" @iconClick="goComment">
      </uni-easyinput>
    </view>
  </view>
</template>

<script>
  import {
    getProvince
  } from "@/utils/tools.js"
  const db = uniCloud.database();
  export default {
    name: "comment-frame",
    props: {
      commentObj: {
        type: Object,
        default: () => {
          return {

          }
        }
      },
      placeholder: {
        type: String,
        default: "评论点什么吧~"
      }
    },
    data() {
      return {
        replyContent: '',
      };
    },
    methods: {
      async goComment() {
        let province = await getProvince();
        if (!this.replyContent) {
          uni.showToast({
            title: "评论不能为空",
            icon: "none"
          })
          return;
        }
        db.collection("quanzi_comment").add({
          "comment_content": this.replyContent,
          "province": province,
          ...this.commentObj
        }).then(res => {

          uni.showToast({
            title: "评论成功"
          })
          console.log(res);
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  .commentFrame {
    width: 100%;
    background: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
  }
</style>
2.4 查看数据库

数据库中添加了针对不同的两篇文章的同一用户的评论内容。
在这里插入图片描述

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

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

相关文章

大厂面试官在校招面试中爱问啥？

大厂面试官在校招面试中爱问啥？

如果你在简历中写了这句话&#xff0c;保证能拿到大厂面试机会&#xff1a;扎实的计算机基础&#xff0c;良好的数据结构与算法功底。 然后&#xff0c;你就会被问到头皮发麻。 虽然是段子&#xff0c;但也一定程度上说明了大厂非常注重计算机基础&#xff0c;也是真的喜欢问…
阅读更多...
左耳听风——笔记四：分布式

左耳听风——笔记四：分布式

左耳听风&#xff1a;分布式 分布式系统介绍 分布式系统和单体系统 使用分布式系统主要有两方面原因。 增大系统容量。我们的业务量越来越大&#xff0c;而要能应对越来越大的业务量&#xff0c;一台机器的性能已经无法满足了&#xff0c;我们需要多台机器才能应对大规模的…
阅读更多...
【C语言进阶】指针进阶的详细讲解--(数组指针、指针数组、函数指针、函数指针数组、指向函数指针数组)

【C语言进阶】指针进阶的详细讲解--(数组指针、指针数组、函数指针、函数指针数组、指向函数指针数组)

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C语言进阶 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录1.字符指针&#xf…
阅读更多...
stm32f407探索者开发板（二十）——独立看门狗实验

stm32f407探索者开发板（二十）——独立看门狗实验

文章目录一、独立看门狗概述1.1 独立看门狗二、常用寄存器和库函数配置2.1 独立看门狗框图2.2 键值寄存器IWDG_KR2.3 预分频寄存器IWDG_PR2.4 重装载寄存器IWDG_RLR2.5 状态寄存器IWDG_SR2.6 IWDG独立看门狗操作库函数三、手写独立看门狗实验3.1 操作步骤3.2 iwdg.c3.3 iwdg.h3…
阅读更多...
论文阅读-SegNeXt: 重新思考基于卷积注意力的语义分割

论文阅读-SegNeXt: 重新思考基于卷积注意力的语义分割

论文信息 论文名称&#xff1a;SegNeXt: Rethinking Convolutional Attention Design for Semantic Segmentation 项目GitHub&#xff1a; GitHub - Visual-Attention-Network/SegNeXt: Official Pytorch implementations for "SegNeXt: Rethinking Convolutional Atten…
阅读更多...
知识点滴 - 自行车分类

知识点滴 - 自行车分类

旅行车 旅行自行车&#xff08;Touring bicycle&#xff09;由公路自行车发展而来&#xff0c;适合超远程自给自足的旅行&#xff0c;有较舒适放松的车架几何设计&#xff0c;能够负重&#xff0c;有很低的最低档位&#xff0c;配件选择方面追求可靠耐用。 专业的长途旅行车均以…
阅读更多...
pytorch中padding应用总结

pytorch中padding应用总结

卷积操作作为卷积神经网络的核心模块&#xff0c;在其计算过程中必须考虑图像“边缘像素”的卷积方式。查阅资料发现&#xff0c;我们可以采用“卷积之前进行边界填充”或“卷积之后进行边界填充两种方式”&#xff0c;同时边界填充的具体手段包含常量填充、零填充、镜像填充以…
阅读更多...
大数据处理学习笔记1.3 使用Scala集成开发环境

大数据处理学习笔记1.3 使用Scala集成开发环境

文章目录零、本讲学习目标一、搭建Scala的IntelliJ IDEA开发环境&#xff08;一&#xff09;启动IDEA&#xff08;二&#xff09;安装Scala插件&#xff08;三&#xff09;配置IDEA使用的默认JDK&#xff08;四&#xff09;创建Scala项目1、创建Scala项目 - ScalaDemo2、创建Sc…
阅读更多...
求选择最少的区间数目可以覆盖连续区间 [0,n]：跳跃游戏，视频拼接，灌溉花园的最少水龙头数目

求选择最少的区间数目可以覆盖连续区间 [0,n]：跳跃游戏，视频拼接，灌溉花园的最少水龙头数目

选择最少区间数目覆盖区间。 贪心方法 假设有一个人想过桥&#xff0c;0 和 n 分别是河的两岸&#xff0c;一开始&#xff0c;人在 0 给你一些小区间&#xff0c;我们把这些区间视作桥。一开始我们肯定要选择包含 0 的区间&#xff0c;且要保证尽可能走得远。假如我们已经走到…
阅读更多...
解析Java中的class文件

解析Java中的class文件

解析class文件需要把class文件当成文件流来处理&#xff0c;定义ClassReader结构体 type ClassReader struct {data []byte }go语言中的reslice语法可以跳过已经读过的数据。 同时定义了ClassFile数据结构来描述class文件的各个部分&#xff0c;该数据结构如下所示&#xff1…
阅读更多...
Scala流程控制(第四章:分支控制、嵌套分支、switch分支、for循环控制全、while与do~while、多重与中断)

Scala流程控制(第四章:分支控制、嵌套分支、switch分支、for循环控制全、while与do~while、多重与中断)

文章目录第 4 章 流程控制4.1 分支控制 if-else4.1.1 单分支4.1.2 双分支4.1.3 多分支4.2 嵌套分支4.3 Switch 分支结构4.4 For 循环控制4.4.1 范围数据循环&#xff08;To&#xff09;4.4.2 范围数据循环&#xff08;Until&#xff09;4.4.3 循环守卫4.4.4 循环步长4.4.5 嵌套…
阅读更多...
华为OD机试 - 最小传递延迟（C++） | 附带编码思路 【2023】

华为OD机试 - 最小传递延迟（C++） | 附带编码思路 【2023】

刷算法题之前必看 参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。 华为 OD 清单查看地址：https://blog.csdn.net/hihell/category_12199283.html 华为OD详细说明：https://dream.blog.csdn.net/article/details/128980730 华为OD机试题…
阅读更多...
户外跑步用什么耳机，最适合跑步用蓝牙耳机推荐

户外跑步用什么耳机，最适合跑步用蓝牙耳机推荐

户外运动使用的蓝牙耳机&#xff0c;耳机在佩戴时需要考虑出行安全&#xff0c;耳机完全封闭耳道的耳机&#xff0c;会让我们对周围的情况不能及时做出反应&#xff0c;造成不必要的安全事故。如果在运动当中还不知道选择哪一些运动蓝牙耳机&#xff0c;可以看看下面这些分享~ …
阅读更多...
【Azure 架构师学习笔记】-Azure Data Factory (2)-触发器

【Azure 架构师学习笔记】-Azure Data Factory (2)-触发器

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Data Factory】系列。 接上文【Azure 架构师学习笔记】-Azure Data Factory (1)-调度入门 前言 上文介绍了ADF 的调度&#xff0c;在调度演示中&#xff0c;还有几个小按钮可以深究&#xff0c;如下图&#xff0c;有【…
阅读更多...
小米AI 连接智能生活

小米AI 连接智能生活

近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术在多个领域落地并不断取得发展与突破。在互联网的推动下&#xff0c;AI语音助理、智能家居、眼镜相机等产品相继推出&#xff0c;打造了更加便捷的生活体验。秉承着“技术为本”的理念&#xff0c;小米始终致力于前沿…
阅读更多...
【Go基础】数据库编程

【Go基础】数据库编程

文章目录1. SQL语法简介2. MySQL最佳实践3. Go SQL驱动接口解读4. 数据库增删改查5. stmt6. SQLBuilder6.1 Go-SQLBuilder6.2 Gendry6.3 自行实现SQLBuilder7. GORM8. Go操作MongoDB1. SQL语法简介 SQL&#xff08;Structured Query Language&#xff09;是一套语法标准&#…
阅读更多...
2023美赛参赛经历分享

2023美赛参赛经历分享

今天早上登录MCM: The Mathematical Contest in Modeling (comap.com)发现论文提交已经显示Received。虽然这几天连连有开学恶补的期末考试&#xff0c;但还是忙里偷闲趁着新鲜写一篇关于美赛的参赛个人感受。跟我一起打这次美赛的都是软件等专业的hxd&#xff0c;他们之前没有…
阅读更多...
SpringBoot + Lock4j实现高性能分布式锁

SpringBoot + Lock4j实现高性能分布式锁

1. 简介 在分布式业务开发中&#xff0c;很多场景都需要添加分布式锁。在具体实践过程中&#xff0c;研发人员都需要自行实现&#xff0c;导致实现方式不统一&#xff0c;代码风格迥异&#xff0c;难以维护。 在Mybatis-Plus生态中&#xff0c;Lock4j提供了支持redission、re…
阅读更多...
华为OD机试 - 最大排列（C++） | 附带编码思路 【2023】

华为OD机试 - 最大排列（C++） | 附带编码思路 【2023】

刷算法题之前必看 参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。 华为 OD 清单查看地址：https://blog.csdn.net/hihell/category_12199283.html 华为OD详细说明：https://dream.blog.csdn.net/article/details/128980730 华为OD机试题…
阅读更多...
python--matplotlib(4)

python--matplotlib(4)

前言 Matplotlib画图工具的官网地址是 http://matplotlib.org/ Python环境下实现Matlab制图功能的第三方库&#xff0c;需要numpy库的支持&#xff0c;支持用户方便设计出二维、三维数据的图形显示&#xff0c;制作的图形达到出版级的标准。 其他matplotlib文章 python--matpl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023