前端组件封装 - 用Vue2构建评论系统，实现评论、点赞等功能，助力你的项目更加丰富多彩！

2023-09-11 16:48:54

引子：
评论系统是网站或应用程序中必不可少的功能之一。它允许用户发表自己的想法，与他人交流，并提供了一种收集反馈的渠道。因此，构建一个功能强大、用户友好的评论系统至关重要。

一、搭建Vue2项目
首先，你需要创建一个新的Vue2项目。可以使用Vue CLI或其他工具来快速创建一个项目。

// 使用Vue CLI创建项目
vue create my-comment-system

二、安装依赖
项目创建好之后，你需要安装Vue2和Element-UI。

// 安装Vue2
npm install vue@2.6.12
// 安装Element-UI
npm install element-ui@2.13.2

三、创建评论组件
接下来，你需要创建一个评论组件。这个组件将负责显示评论、回复、点赞等功能。

// 创建一个名为Comment.vue的组件
<template>
  <el-card class="comment">
    <div class="comment-header">
      <div class="comment-author">
        <el-image :src="comment.avatar" class="comment-avatar"></el-image>
        <span class="comment-author-name">{{ comment.author }}</span>
      </div>
      <div class="comment-date">{{ comment.date }}</div>
    </div>
    <div class="comment-content">
      {{ comment.content }}
    </div>
    <div class="comment-actions">
      <el-button type="text" @click="likeComment(comment)">
        <el-icon><Like /></el-icon>
        {{ comment.likes }}
      </el-button>
      <el-button type="text" @click="replyComment(comment)">
        <el-icon><Reply /></el-icon>
        回复
      </el-button>
      <el-button type="text" @click="deleteComment(comment)">
        <el-icon><Delete /></el-icon>
        删除
      </el-button>
    </div>
    <div class="comment-replies" v-if="comment.replies">
      <Comment v-for="reply in comment.replies" :key="reply.id" :comment="reply"></Comment>
    </div>
    <el-form v-if="isReplying">
      <el-form-item>
        <el-input v-model="replyContent"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addReply(comment)">回复</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isReplying: false,
      replyContent: ''
    }
  },
  methods: {
    likeComment(comment) {
      // 调用点赞接口
      this.$http.post(`/api/comments/${comment.id}/like`)
        .then(response => {
          // 更新评论的点赞数
          comment.likes = response.data.likes
        })
    },
    replyComment(comment) {
      this.isReplying = true
    },
    addReply(comment) {
      // 调用回复接口
      this.$http.post(`/api/comments/${comment.id}/replies`, { content: this.replyContent })
        .then(response => {
          // 将新回复添加到评论的回复列表中
          comment.replies.push(response.data.reply)
          // 重置回复表单
          this.isReplying = false
          this.replyContent = ''
        })
    },
    deleteComment(comment) {
      // 调用删除接口
      this.$http.delete(`/api/comments/${comment.id}`)
        .then(() => {
          // 从评论列表中删除评论
          this.$emit('delete-comment', comment)
        })
    }
  }
}
</script>

四、使用评论组件
在你的项目中，你可以在需要的地方使用评论组件。例如，在博客文章的底部，你可以使用评论组件来显示评论列表。

<template>
  <div class="comments">
    <Comment v-for="comment in comments" :key="comment.id" :comment="comment"></Comment>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        {
          id: 1,
          author: 'John Doe',
          avatar: 'https://gravatar.com/avatar/1234567890?s=100',
          date: '2023-01-01',
          content: 'This is the first comment.',
          likes: 10,
          replies: [
            {
              id: 2,
              author: 'Jane Doe',
              avatar: 'https://gravatar.com/avatar/9876543210?s=100',
              date: '2023-01-02',
              content: 'This is a reply to the first comment.',
              likes: 5
            }
          ]
        },
        {
          id: 3,
          author: 'Bob Smith',
          avatar: 'https://gravatar.com/avatar/1122334455?s=100',
          date: '2023-01-03',
          content: 'This is another comment.',
          likes: 15
        }
      ]
    }
  }
}
</script>