当前位置：首页 > VUE

vue实现音乐评论

2026-01-15 23:46:54VUE

Vue 实现音乐评论功能

音乐评论功能通常包括评论列表展示、发表评论、回复评论等模块。以下是基于 Vue 的实现方案。

数据结构设计

评论数据通常采用嵌套结构，包含主评论和子评论（回复）：

comments: [
  {
    id: 1,
    content: "这首歌真好听",
    user: {
      id: 101,
      name: "用户A",
      avatar: "/avatar/a.jpg"
    },
    time: "2023-05-01 10:00",
    replies: [
      {
        id: 11,
        content: "我也觉得",
        user: { id: 102, name: "用户B" },
        replyTo: { id: 101, name: "用户A" }
      }
    ]
  }
]

评论列表组件

创建评论列表组件展示评论内容：

<template>
  <div class="comment-list">
    <div v-for="comment in comments" :key="comment.id" class="comment-item">
      <div class="comment-header">
        <img :src="comment.user.avatar" class="avatar">
        <span class="username">{{ comment.user.name }}</span>
        <span class="time">{{ comment.time }}</span>
      </div>
      <div class="comment-content">{{ comment.content }}</div>
      <button @click="showReply(comment.id)">回复</button>

      <!-- 回复列表 -->
      <div v-if="comment.replies && comment.replies.length">
        <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
          <span class="reply-user">{{ reply.user.name }}</span>
          回复
          <span class="reply-to">{{ reply.replyTo.name }}</span>：
          {{ reply.content }}
        </div>
      </div>

      <!-- 回复输入框 -->
      <div v-if="activeReply === comment.id" class="reply-box">
        <textarea v-model="replyContent"></textarea>
        <button @click="submitReply(comment.id)">提交</button>
      </div>
    </div>
  </div>
</template>

发表评论功能

实现发表新评论的表单：

<template>
  <div class="comment-form">
    <textarea v-model="newComment" placeholder="写下你的评论..."></textarea>
    <button @click="submitComment">发表评论</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newComment: '',
      replyContent: '',
      activeReply: null
    }
  },
  methods: {
    submitComment() {
      if (!this.newComment.trim()) return

      const comment = {
        id: Date.now(),
        content: this.newComment,
        user: { id: 1, name: "当前用户" },
        time: new Date().toLocaleString(),
        replies: []
      }

      this.$emit('add-comment', comment)
      this.newComment = ''
    },
    showReply(commentId) {
      this.activeReply = commentId
    },
    submitReply(commentId) {
      // 提交回复逻辑
    }
  }
}
</script>

样式优化

添加基础样式提升用户体验：

.comment-list {
  margin: 20px 0;
}

.comment-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.reply-item {
  padding: 8px 0 8px 20px;
  border-left: 2px solid #ddd;
  margin: 10px 0;
  color: #666;
}

.reply-box {
  margin-top: 10px;
}

textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

数据持久化

将评论数据保存到后端API：

methods: {
  async fetchComments() {
    try {
      const res = await axios.get('/api/comments')
      this.comments = res.data
    } catch (error) {
      console.error('获取评论失败', error)
    }
  },
  async submitComment() {
    try {
      const res = await axios.post('/api/comments', {
        content: this.newComment
      })
      this.comments.unshift(res.data)
      this.newComment = ''
    } catch (error) {
      console.error('发表评论失败', error)
    }
  }
},
created() {
  this.fetchComments()
}