Vue3网抑云音乐项目实战教程（四）：首页功能实现（一）

前言

在前几节课中，我们已经完成了项目的搭建并实现了播放音乐的功能，相当于为我们的项目做了一个热身。从这一课开始，我们将正式进入开发状态，开始实现一些更复杂的功能。

本节课目标

在本节课中，我们将实现以下几个功能：

1. 左侧导航：这个导航栏将显示所有主要的应用程序部分，如音乐库、播放列表和设置。
2. 顶部导航：这个导航栏将显示当前正在播放的歌曲信息，以及一些控制播放的按钮。
3. 登录/注销：这个功能将允许用户登录和注销应用程序。
4. banner：这个横幅将显示在应用程序的主页上，并可以用来显示专辑封面或其他相关图像。

实现步骤

1. 左侧导航

首先，我们来实现左侧导航。这个导航栏将显示所有主要的应用程序部分，如音乐库、播放列表和设置。

1. 在 src/components 文件夹中创建一个名为 Sidebar.vue 的新文件。
2. 在这个文件中，添加以下代码：

<template>
  <nav class="sidebar">
    <ul>
      <li>
        <a href="#">音乐库</a>
      </li>
      <li>
        <a href="#">播放列表</a>
      </li>
      <li>
        <a href="#">设置</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Sidebar'
}
</script>

<style>
.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f5f5f5;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px;
}

.sidebar a {
  text-decoration: none;
  color: #000;
}
</style>

3. 在 src/App.vue 文件中，添加以下代码：

<template>
  <div id="app">
    <Sidebar />

    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue'

export default {
  name: 'App',
  components: {
    Sidebar
  }
}
</script>

<style>
#app {
  height: 100%;
}

.main-content {
  flex: 1;
  overflow: auto;
}
</style>

4. 现在，你应该可以看到左侧导航栏了。

2. 顶部导航

接下来，我们来实现顶部导航。这个导航栏将显示当前正在播放的歌曲信息，以及一些控制播放的按钮。

1. 在 src/components 文件夹中创建一个名为 Topbar.vue 的新文件。
2. 在这个文件中，添加以下代码：

<template>
  <nav class="topbar">
    <div class="left">
      <a href="#">
        <img src="./logo.png" alt="网易云音乐" />
      </a>

      <div class="search-bar">
        <input type="text" placeholder="搜索歌曲">
        <button type="submit">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </div>

    <div class="right">
      <div class="player-controls">
        <button type="button" @click="prevSong()">
          <i class="fas fa-step-backward"></i>
        </button>

        <button type="button" @click="playPause()">
          <i class="fas fa-play-circle"></i>
        </button>

        <button type="button" @click="nextSong()">
          <i class="fas fa-step-forward"></i>
        </button>
      </div>

      <div class="user-info">
        <a href="#">
          <img src="./user.png" alt="用户头像">
        </a>

        <div class="dropdown">
          <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown">
            用户名
          </button>

          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">个人中心</a></li>
            <li><a class="dropdown-item" href="#">设置</a></li>
            <li><a class="dropdown-item" href="#">退出</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Topbar',
  setup() {
    const currentSong = ref(null)

    const prevSong = () => {
      // 播放上一首歌曲
    }

    const playPause = () => {
      // 播放/暂停当前歌曲
    }

    const nextSong = () => {
      // 播放下一首歌曲
    }

    return {
      currentSong,
      prevSong,
      playPause,
      nextSong
    }
  }
}
</script>

<style>
.topbar {
  height: 60px;
  background-color: #212121;
  color: #fff;
}

.topbar .left {
  display: flex;
  align-items: center;
}

.topbar .left a {
  margin-right: 10px;
}

.topbar .left .search-bar {
  flex: 1;
  margin-left: 10px;
}

.topbar .left .search-bar input {
  width: 100%;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.topbar .left .search-bar button {
  margin-left: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #212121;
  color: #fff;
}

.topbar .right {
  display: flex;
  align-items: center;
}

.topbar .right .player-controls {
  margin-right: 20px;
}

.topbar .right .player-controls button {
  margin-right: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #212121;
  color: #fff;
}

.topbar .right .user-info {
  margin-right: 20px;
}

.topbar .right .user-info a {
  margin-right: 5px;
}

.topbar .right .user-info .dropdown {
  position: relative;
}

.topbar .right .user-info .dropdown-toggle {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #212121;
  color: #fff;
}

.topbar .right .user-info .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  display: none;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0