当前位置：首页 > VUE

vue实现音乐评论

2026-02-17 01:01:49VUE

实现音乐评论功能的基本思路

音乐评论功能通常包含评论列表展示、发表评论、回复评论等模块。Vue.js 的响应式特性和组件化开发能高效实现这一需求。

核心组件结构

CommentList.vue      // 评论列表组件
CommentItem.vue      // 单条评论组件
CommentForm.vue      // 评论表单组件
ReplyList.vue        // 回复列表组件

数据模型设计

音乐评论数据通常采用嵌套结构：

comments: [
  {
    id: 1,
    content: '这首歌很好听',
    user: {
      id: 101,
      name: '用户A',
      avatar: 'url'
    },
    time: '2023-07-15',
    likes: 10,
    replies: [
      {
        id: 101,
        content: '我也觉得',
        user: { /* 用户信息 */ },
        replyTo: { name: '用户B' }
      }
    ]
  }
]

评论列表实现

<template>
  <div class="comment-list">
    <comment-item 
      v-for="comment in comments"
      :key="comment.id"
      :comment="comment"
      @reply="handleReply"
    />
    <comment-form @submit="addComment" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: []
    }
  },
  methods: {
    addComment(content) {
      const newComment = {
        id: Date.now(),
        content,
        user: currentUser,
        time: new Date().toISOString(),
        likes: 0,
        replies: []
      }
      this.comments.unshift(newComment)
    },
    handleReply({ commentId, content }) {
      // 找到对应评论并添加回复
    }
  }
}
</script>

评论表单组件

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

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    submit() {
      if (!this.content.trim()) return
      this.$emit('submit', this.content)
      this.content = ''
    }
  }
}
</script>

评论项组件

<template>
  <div class="comment-item">
    <div class="user-info">
      <img :src="comment.user.avatar" />
      <span>{{ comment.user.name }}</span>
    </div>
    <div class="content">{{ comment.content }}</div>
    <div class="actions">
      <button @click="$emit('reply', comment.id)">回复</button>
      <button @click="likeComment">点赞 {{ comment.likes }}</button>
    </div>
    <reply-list :replies="comment.replies" />
  </div>
</template>

后端数据交互

通过axios与后端API交互：

import axios from 'axios'

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