文章详情页面-评论展示组件制作

一、界面结构搭建

下载日期格式化组件，下载地址：https://ext.dcloud.net.cn/plugin?id=3279 (opens new window)

二、定义云函数，进行内容获取

1. 前端进行云函数请求

    async _getCommentList () {
         const res = await this.$http.get_comments({ articleId: this.formData._id })
       }
   

2. 定义云函数 get_comments

   'use strict';
   const db = uniCloud.database();
   exports.main = async (event, context) => {
     const {
       articleId,
       pageSize = 10,
       page = 1
     } = event;
   
     const list = await db.collection('article')
       .aggregate()
       .match({
         _id: articleId,
       })
       .unwind('$comments') // 从指定的节点进行内容的获取
       .project({
         _id: 0,
         comments: 1
       })
       .replaceRoot({
         newRoot: '$comments'
       })
       .skip(pageSize * (page - 1))
       .limit(pageSize)
       .end()
   
     //返回数据给客户端
     return {
       code: 0,
       msg: '数据请求成功',
       data: list.data
     }
   };
   
   

3. 前端进行内容渲染

    <view class="comment-box">
       <view class="comment-header">
         <view class="comment-header-logo">
           <image :src="commentData.author.avatar" mode="aspectFill"></image>
         </view>
         <view class="comment-header-info">
           <view class="title">
             {{commentData.author.author_name}}
           </view>
           <view class="">
             <uni-dateformat :date="commentData.create_time" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
           </view>
         </view>
       </view>
       <!-- 内容部分 -->
       <view class="comment-content">
         <view class="">
           {{commentData.comment_content}}
         </view>
         <view class="comment-info">
           <view class="comment-button">
             回复
           </view>
         </view>
       </view>
     </view>