Vue.js 音乐排行榜开发：完整教程和源代码分享一步步教你用 Vue.js 构建一个酷炫的音乐排行榜应用新手友好：用 Vue.js 开发功能丰富的音乐排行榜页面 Vue.js 项目实战：创建互动

效果图

在这里插入图片描述

博客教程：Vue.js 音乐排行榜页面开发详解

简介

在本教程中，我们将使用 Vue.js 实现一个现代风格的音乐排行榜页面，具有展示歌曲名、歌手名、专辑名、播放次数、时长等功能，并加入了用户互动功能（如播放、收藏、分享），还可以通过按钮切换不同的排行榜类型如每日榜、周榜、月榜等。此外，排行榜中的歌曲会根据排名变化展示上升、下降或持平的箭头标志。这个项目非常适合前端开发新手学习 Vue.js 的基础知识。

新建项目结构

首先，创建一个 HTML 文件来承载 Vue.js 应用。文件名可以命名为 music-ranking.html，并在文件中引入 Vue.js。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音乐排行榜</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    /* 样式将在后续部分详细介绍 */
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    new Vue({
      
      
      el: '#app',
      data: {
      
      
        // 数据将在后续详细介绍
      },
      methods: {
      
      
        // 方法将在后续详细介绍
      }
    });
  </script>
</body>
</html>

构建界面布局

在 HTML 文件中，我们需要构建排行榜的基本布局。页面主要分为三个部分：

排行榜切换按钮组
歌曲列表（含歌曲封面、歌曲信息等）
控制按钮（播放、收藏、分享）

为此，我们在 Vue 的 template 中加入如下内容：

<div id="app">
  <h2>音乐排行榜</h2>

  <!-- 排行榜类型切换 -->
  <div class="button-group">
    <button @click="setRankingType('daily')">每日榜</button>
    <button @click="setRankingType('weekly')">周榜</button>
    <button @click="setRankingType('monthly')">月榜</button>
  </div>

  <!-- 歌曲列表 -->
  <ul class="song-list">
    <li v-for="(song, index) in songs" :key="song.id" :class="{
     
     'top-three': index < 3}" class="song-item">
      <div class="song-info">
        <div class="song-cover"></div>
        <div class="song-details">
          <div class="song-title">{
   
   { song.title }}</div>
          <div class="song-artist">{
   
   { song.artist }} - {
   
   { song.album }}</div>
          <div class="song-duration">时长: {
   
   { song.duration }}</div>
          <div class="play-count">播放次数: {
   
   { song.playCount }}</div>
        </div>
      </div>

      <!-- 控制按钮和排名变化 -->
      <div>
        <div class="controls">
          <button class="control-btn">播放</button>
          <button class="control-btn">收藏</button>
          <button class="control-btn">分享</button>
        </div>
        <div class="rank-change">
          <span>{
   
   { song.rank }}位</span>
          <span :class="getArrowClass(song.change)" class="arrow">
            <template v-if="song.change === 'up'">↑</template>
            <template v-else-if="song.change === 'down'">↓</template>
            <template v-else>→</template>
          </span>
        </div>
      </div>
    </li>
  </ul>
</div>

实现歌曲列表功能

我们将使用 Vue.js 的 data 属性来定义页面中显示的歌曲数据，v-for 指令用于渲染每一首歌曲。以下是数据结构的定义：

data: {
    
    
  rankingType: 'daily',
  songs: [
    {
    
     id: 1, title: 'Song One', artist: 'Artist A', album: 'Album A', rank: 1, change: 'up', duration: '3:45', playCount: 1000 },
    {
    
     id: 2, title: 'Song Two', artist: 'Artist B', album: 'Album B', rank: 2, change: 'same', duration: '4:15', playCount: 850 },
    {
    
     id: 3, title: 'Song Three', artist: 'Artist C', album: 'Album C', rank: 3, change: 'down', duration: '3:30', playCount: 900 },
    {
    
     id: 4, title: 'Song Four', artist: 'Artist D', album: 'Album D', rank: 4, change: 'up', duration: '4:00', playCount: 700 },
    {
    
     id: 5, title: 'Song Five', artist: 'Artist E', album: 'Album E', rank: 5, change: 'down', duration: '3:50', playCount: 600 },
  ]
}

添加排名变化与用户互动

每首歌曲旁边的箭头会显示排名的变化，我们通过以下方法实现排名变化箭头的显示：

methods: {
    
    
  getArrowClass(change) {
    
    
    if (change === 'up') {
    
    
      return 'up';
    } else if (change === 'down') {
    
    
      return 'down';
    } else {
    
    
      return 'same';
    }
  }
}

此外，每首歌曲还包含“播放”、“收藏”、“分享”等按钮，可以通过以下代码实现用户的互动功能：

<div class="controls">
  <button class="control-btn">播放</button>
  <button class="control-btn">收藏</button>
  <button class="control-btn">分享</button>
</div>

排行榜类型切换

用户可以通过点击按钮来切换不同类型的排行榜，代码如下：

methods: {
    
    
  setRankingType(type) {
    
    
    this.rankingType = type;
    alert(`切换到${
      
      type === 'daily' ? '每日' : type === 'weekly' ? '周榜' : '月榜'}!`);
    // 在此处实现不同排行榜类型的切换逻辑
  }
}

美化页面样式

我们使用渐变背景和不同的颜色来美化页面。在 CSS 中可以加入如下样式来优化用户体验：

body {
    
    
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: linear-gradient(135deg, #f5b5fc, #d2e7f2);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
    
    
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 900px;
  width: 100%;
}

.song-item:hover {
    
    
  background-color: #e5e5e5;
}

.top-three {
    
    
  background-color: #ffeeba;
}

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音乐排行榜</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    body {
      
      
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background: linear-gradient(135deg, #f5b5fc, #d2e7f2);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #app {
      
      
      background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      max-width: 900px;
      width: 100%;
    }
    h2 {
      
      
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }
    .song-list {
      
      
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .song-item {
      
      
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      margin-bottom: 10px;
      background-color: #f5f5f5;
      border-radius: 8px;
      transition: background-color 0.3s;
    }
    .song-item:hover {
      
      
      background-color: #e5e5e5;
    }
    .top-three {
      
      
      background-color: #ffeeba;
    }
    .song-info {
      
      
      display: flex;
      align-items: center;
    }
    .song-cover {
      
      
      width: 50px;
      height: 50px;
      border-radius: 8px;
      margin-right: 10px;
      background-color: #ddd;
    }
    .song-details {
      
      
      font-size: 16px;
    }
    .song-title {
      
      
      font-weight: bold;
    }
    .song-artist {
      
      
      color: #777;
    }
    .song-duration, .play-count {
      
      
      font-size: 14px;
      color: #666;
    }
    .controls {
      
      
      display: flex;
      justify-content: space-between;
      width: 100px;
    }
    .control-btn {
      
      
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      padding: 5px 10px;
    }
    .control-btn:hover {
      
      
      background-color: #45a049;
    }
    .rank-change {
      
      
      display: flex;
      align-items: center;
    }
    .arrow {
      
      
      margin-left: 10px;
    }
    .up {
      
      
      color: green;
    }
    .down {
      
      
      color: red;
    }
    .same {
      
      
      color: gray;
    }
    .button-group {
      
      
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .button-group button {
      
      
      padding: 10px;
      margin: 0 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    .button-group button:hover {
      
      
      background-color: #0056b3;
    }
  </style>
</head>
<body>
<div id="app">
  <h2>音乐排行榜</h2>

  <!-- 排行榜类型切换 -->
  <div class="button-group">
    <button @click="setRankingType('daily')">每日榜</button>
    <button @click="setRankingType('weekly')">周榜</button>
    <button @click="setRankingType('monthly')">月榜</button>
  </div>

  <ul class="song-list">
    <li v-for="(song, index) in songs" :key="song.id" :class="{
     
     'top-three': index < 3}" class="song-item">
      <div class="song-info">
        <div class="song-cover"></div>
        <div class="song-details">
          <div class="song-title">{
   
   { song.title }}</div>
          <div class="song-artist">{
   
   { song.artist }} - {
   
   { song.album }}</div>
          <div class="song-duration">时长: {
   
   { song.duration }}</div>
          <div class="play-count">播放次数: {
   
   { song.playCount }}</div>
        </div>
      </div>

      <!-- 控制按钮和排名变化 -->
      <div>
        <div class="controls">
          <button class="control-btn">播放</button>
          <button class="control-btn">收藏</button>
          <button class="control-btn">分享</button>
        </div>
        <div class="rank-change">
          <span>{
   
   { song.rank }}位</span>
          <span :class="getArrowClass(song.change)" class="arrow">
            <template v-if="song.change === 'up'">↑</template>
            <template v-else-if="song.change === 'down'">↓</template>
            <template v-else>→</template>
          </span>
        </div>
      </div>
    </li>
  </ul>
</div>

<script>
new Vue({
      
      
  el: '#app',
  data: {
      
      
    rankingType: 'daily',
    songs: [
      {
      
       id: 1, title: 'Song One', artist: 'Artist A', album: 'Album A', rank: 1, change: 'up', duration: '3:45', playCount: 1000 },
      {
      
       id: 2, title: 'Song Two', artist: 'Artist B', album: 'Album B', rank: 2, change: 'same', duration: '4:15', playCount: 850 },
      {
      
       id: 3, title: 'Song Three', artist: 'Artist C', album: 'Album C', rank: 3, change: 'down', duration: '3:30', playCount: 900 },
      {
      
       id: 4, title: 'Song Four', artist: 'Artist D', album: 'Album D', rank: 4, change: 'up', duration: '4:00', playCount: 700 },
      {
      
       id: 5, title: 'Song Five', artist: 'Artist E', album: 'Album E', rank: 5, change: 'down', duration: '3:50', playCount: 600 },
    ]
  },
  methods: {
      
      
    getArrowClass(change) {
      
      
      if (change === 'up') {
      
      
        return 'up';
      } else if (change === 'down') {
      
      
        return 'down';
      } else {
      
      
        return 'same';
      }
    },
    setRankingType(type) {
      
      
      this.rankingType = type;
      alert(`切换到${ 
        type === 'daily' ? '每日' : type === 'weekly' ? '周榜' : '月榜'}!`);
      // 在此处实现不同排行榜类型的切换逻辑
    }
  }
});
</script>
</body>
</html>

结语

在本教程中，我们学习了如何使用 Vue.js 实现一个音乐排行榜页面，涵盖了排行榜的显示、排名变化、用户互动、以及不同类型的排行榜切换。希望这个项目能帮助你更好地理解 Vue.js 的基础用法并提升前端开发技能。