
// 文章评论相关请求模块
import request from '@/utils/request'
 
// 获取文章列表
export const getComments = params => {
  return request({
    method: 'GET',
    url: '/app/v1_0/comments',
    params
  })
}

cmment-list.vue组件中onLoad事件处理函数


    async onLoad() {
      // 1.请求获取数据
      const { data } = await getComments({
        //评论类型,a-对文章article的评论,c-对评论comment的回复
        type: "a",
        // 源id,文章id或评论id
        source: this.source,
        // 获取评论数据的偏移量,值为评论id,表示从此id的数据向后取,不传表示从第一页开始读取数据
        offset: this.offset,
        // 获取的评论数据个数,不传表示采用后端服务设定的默认每页数据量
        limit: this.limit
      });
      console.log(data);
      // 2. 把数据放到列表中
      const { results } = data.data;
      this.list.push(...results);
      // 3.将本次的loading关闭
      this.log = false;
      // 4.判断是否有数据
      if (results.length) {
         若有则更新获取下一页数据的页码
        this.offset = data.data.last_id;
      } else {
         若没有则将finished设置为true,不再触发加载更多
        this.finished = true;
      }
    }

补充：

需要请求不同源的资源，避开跨域限制：

JSONP
CORS
服务器代理

1.3 文章评论项

新建article/components/cmment-item.vue组件

cmment-list.vue中注册组件，并把comment传给cmment-item.vue组件，cmment-item.vue组件用props属性接收该对象


    <CommentItem
        :comment="comment"
        v-for="(comment, index) in list"
        :key="index"
      />

utils/dayjs.js 处理文章评论项的时间格式


// 文章评论项的时间,根据传的参数控制时间格式
Vue.filter('datetime', (value, format) => {
  return dayjs(value).format(format)
})

二、评论点赞

配置数据接口


// 对评论事评论回复点赞
export const addCommentLike = commentId => {
  return request({
    method: 'POST',
    url: '/app/v1_0/comment/likings',
    data: {
      target: commentId
    }
  })
}
// 取消对评论事评论回复点赞
export const deleteCommentLike = commentId => {
  return request({
    method: 'DELETE',
    url: `/app/v1_0/article/likings/${commentId}`
  })
}

onCommentLike事件处理函数


async onCommentLike() {
      const commentId = this.comment.com_id.toString();
      if (this.comment.is_liking) {
        // 取消点赞
        await deleteCommentLike(commentId);
        this.comment.like_count--;
      } else {
        // 添加点赞
        await addCommentLike(commentId);
        this.comment.like_count++;
      }
      this.comment.is_liking = !this.comment.is_liking;
    }

三、发布文章评论

3.1 准备弹出层


    <!-- 发布评论 -->
    <van-popup v-model="isPostShow" position="bottom">1242 内容 </van-popup>

3.2 封装组件

新建article/components/post-comment.vue组件

article/index.vue中注册组件

3.3 请求发布

封装数据接口


// 发布评论,添加评论或评论回复
export const addComment = data => {
  return request({
    method: 'POST',
    url: '/app/v1_0/comments',
    data
  })
}

onPost事件处理函数


 async onPost() {
      const { data } = await addComment({
        // 评论的目标id(评论文章即为文章id,对评论进行回复则为评论id)
        target: this.target.toString(),
        // 评论的内容
        content: this.message,
        // 文章id,对评论内容发表回复时需要传递此参数,表明所属文章id,对文章进行评论,不需要传此参数
        art_id: this.articleId ? this.articleId.toString() : null
      });
      console.log(data);
    }

3.4 发布成功处理

1.article/index.vue的发布评论事件函数onPostSuccess、comment-list.vue、post-comment.vue的的onPost事件函数等三个组件

2.article/index.vue父组件向comment-list.vue子组件传commentList数组里的数据

补充：

展示文章评论总数量 total_count

1.在comment-list.vue列表子组件发送自定义事件 this.$emit("update-total-count", data.data.total_count);

2.父组件监听接收数据


    <comment-list
        :source="articleId"
        :list="commentList"
        @update-total-count="totalCommentCount = $event"
      />

3.数据绑定并展示


<!-- 评论 -->
<van-icon name="chat-o" :info="totalCommentCount" color="#777" />

4.更新评论的总数量 this.totalCommentCount++;

四、评论回复

4.1 准备回复弹出层

创建组件comment-reply.vue


    <!-- 评论回复  -->
    <van-popup v-model="isReplyShow" position="bottom">
      <comment-reply />
    </van-popup>

点击的时候展示弹出层


    onReplyClick(comment) {
      console.log("onReplyClick", comment);
      // 展示回复内容
      this.isReplyShow = true;
    }

4.2 处理点击回复按钮

这里涉及到了子组件要传值给爷爷组件，要通过父组件作为桥梁。

下面是子组件发送一个自定义点击事件给父组件 @click="$emit('reply-click', comment)"

父组件接收子组件的事件并继续向父组件的父组件，即爷爷组件传自定义事件 @reply-click="$emit('reply-click', $event)"

爷爷组件接收父组件的事件 @reply-click="onReplyClick"

为了测试是否传递事件成功，在爷爷组件的onReplyClick事件打印了下

4.3 传递当前点击回复的评论项

需求：点击“回复”按钮显示当前回复评论项的用户信息

1.点击"回复"拿到当前评论项的信息 this.replyComment = comment;

2.父组件index.vue将replyComment数据传给子组件comment-reply.vue :comment="replyComment"

3.子组件接收数据，又加为当前评论项与之前写好的comment-item组件相同，直接复用组件

<comment-item :comment="comment" />

效果：

4.4 展示评论回复列表

index.vue、comment-reply.vue、comment-list.vue

4.5 解决弹出层中组件内容不更新问题

添加v-if属性：v-if="isReplyShow"


    <comment-reply
        v-if="isReplyShow"
        :comment="replyComment"
        @close="isReplyShow = false"
      />

4.6 发布回复

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/988041