網易雲音樂播放器專案實現步驟LCW

專案後端搭建

下載專案所需要的檔案

專案原始碼NeteaseCloudMusicApi-master（後端api原始碼）

下載地址：https://binaryify.github.io/NeteaseCloudMusicApi

執行專案需要的後端檔案

專案建立

通過vue-cli腳手架建立專案：

vue create music001
//專案名稱：music001

選擇自定義模板

選取並下載所需要的依賴包檔案

選擇vue版本

通過終端指令 npm run serve 執行專案

頁面建立之發現頁面的實現

首先建立發現頁面，然後在頁面中分別以元件形式引入：

分為以下幾個元件：

導航欄，輪播圖，發現歌單列表

前置:引入檔案rem.js

在專案中的public/index.html檔案中引入

作用：以控制專案中的文字大小 //物聯網2003李春偉202004870349

rem.js : 檔案控制檔案大小方法通過偵測裝置螢幕寬度，依靠特定函式動態調整

function remSize() {
    var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
    if (deviceWidth >= 750) {
        deviceWidth = 750
    }
    if (deviceWidth <= 320) {
        deviceWidth = 320
    }
    document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
    document.querySelector('body').style.fontSize = 0.3 + 'rem'
        // 設計稿是750px.
        // 設定1半的寬度，那麼就是375px
        // 1rem == 100px的設計稿寬度
        // 表達一半的寬度就是3.75rem
    //物聯網2003李春偉202004870349
}
​
remSize()
​
// 在不同螢幕寬度下，html的font-size大小也會跟著改變
window.onresize = function() {
    remSize()
}
 

導航欄

將導航欄已元件形式新增到頁面上，以此優化專案結構方便後期的開發工作

具體實現步驟

在components中建立元件 topNav.vue

將元件topNav.vue引入預設顯示頁面view資料夾下的HomeView.vue檔案並註冊，使用

網頁編寫（html+css）

使用html5+css3編寫網頁

在特定地方使用阿里巴巴向量圖示以實現特定圖示的渲染（阿里巴巴向量圖示庫地址：https://www.iconfont.cn/）

1，先搜尋需要的圖示，將其新增到你的庫裡

2.點選你的庫，新建一個圖示庫專案，並將你選擇的圖示新增到你的專案裡

3.進入我的專案檢視圖示

4.複製Font class

    <script src="//at.alicdn.com/t/font_3349348_31hro141hsm.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3349348_31hro141hsm.css">

5.特定圖示的渲染

            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao"></use>
                xlink:href="圖示名稱"
             </svg>

輪播圖

下載並使用依賴包 swiper@5與 vue-awesome-swiper以快速簡潔的建立元件

引入swiper.css與swiper檔案

通過swiper.css 與less檔案快速建立元件的css樣式

<style lang="less">
.swipercom {
  width: 7.5rem;
  #swiperIndex.swiper-container {
    width: 7.1rem;
    height: 2.6rem;
    border-radius: 0.1rem;
​
    .swiper-slide img {
      width: 100%;
    }
    .swiper-pagination-bullet-active {
      background-color: orangered;
    }
  }
}
</style>

通過Swiper物件函式 繫結操作物件並對物件下的元素進行輪播

                        //與id名為swiperIndex的標籤繫結
var mySwiper = new Swiper('#swiperIndex',{
        //配置分頁器內容
        pagination:{
            el:'.swiper-pagination', //分頁器與那個標籤關聯
            clickable:true //分頁器是否可以點選
        }
      })

<div class="swiper-container" id="swiperIndex">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                  <img :src="item.pic" alt="">
              </div>
          </div>
          <!-- 分頁器 -->
          <div class="swiper-pagination"></div>

API

輪播的圖片等一系列資料需要使用Ajax向後端請求，後端傳輸資料，前端接收（vue專案中使用axios來使用ajax）為此需要建立一個檔案api/index.js用於使用axios與後端互動

引入axios

import axios from 'axios'

對外丟擲訪問相對應介面的函式,例如

export function getBanner(type=0){
    return axios.get(`${baseUrl}/banner?type=${type}`)
}

//引入axios
import axios from 'axios'
​
let baseUrl = 'http://localhost:3000'
​
//獲取輪播圖的api, /banner?type=2 , type:資源型別，預設為0即PC，
//0：pc 1：android 2：iphone ， 3：ipad
​
export function getBanner(type=0){
    return axios.get(`${baseUrl}/banner?type=${type}`)
}
export function getGeDan(limit=30){
    return axios.get(`${baseUrl}/personalized?limit=${limit}`)
}
​

在元件中呼叫axios方法

先引入

import { getBanner } from '@/api/index.js'

在data裡面先建立一個數組用於存放資料,可以給預設值

 data() {
    return {
      imgs: [
        { pic: require("../assets/swiper1.jpg") },
        { pic: require("../assets/swiper2.jpg") },
        { pic: require("../assets/swiper3.png") },
        { pic: require("../assets/swiper2.jpg") },
        { pic: require("../assets/swiper3.png") },
      ],
    }

在呼叫非同步函式

async mounted() {
      let { data:res } = await getBanner(1)
      this.imgs = res.banners.slice(0,5)
      }

icon列表

iconList元件是個靜態元件

直接用html加css構建就可以程式碼如下：

<template>
    <div class="iconList">
        <div class="iconItem">
             <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tuijian"></use>
            </svg>
            <span>每日推薦</span>
        </div>
        <div class="iconItem">
             <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fm"></use>
            </svg>
            <span>私人FM</span>
        </div>
        <div class="iconItem">
             <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gedan"></use>
            </svg>
            <span>歌單</span>
        </div>
        <div class="iconItem">
             <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-paihang"></use>
            </svg>
            <span>排行榜</span>
        </div>
    </div>
</template>
<script>
​
export default {
    name:'iconList',
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
.iconList{
    width: 7.5rem;
    display: flex;
    justify-content: space-between;
    padding: 0.4rem;
    .iconItem{
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon{
            width: 1.2rem;
            height: 1.2rem;
        }
        span{
            font-size: 0.26rem;
        }
    }
    
}
​
</style>

發現歌單（歌單列表）

和swiper異曲同工，方法一樣

先下載相關依賴，由於和swiper一樣使用swiper所以不用下載直接引用

import "swiper/css/swiper.min.css";
import Swiper from "swiper";

通過swiper.css和less樣式編寫css樣式

<style lang="less" scoped>
.musicList {
  width: 7.5rem;
  padding: 0 0.4rem;
  .musicList-top {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    align-items: center;
    .title {
      font-size: 0.4rem;
      font-weight: 900;
    }
    .more {
      border: 1px solid #ccc;
      border-radius: 0.2rem;
      font-size: 0.24rem;
      height: 0.5rem;
      width: 1.2rem;
      text-align: center;
      line-height: 0.5rem;
    }
  }
  .mlist {
    .swiper-container {
      width: 100%;
      height: 3rem;
      .swiper-slide {
        display: flex;
        flex-direction: column;
        position: relative;
        img {
          width: 100%;
          height: auto;
          border-radius: 0.1rem;
        }
        .name {
          height: 0.6rem;
          width: 100%;
          font-size: 0.24rem;
          line-height: 0.4rem;
        }
        .count {
          position: absolute;
          right: 0.1rem;
          top: 0.1rem;
          font-size: 0.24rem;
          color: #ccc;
          display: flex;
          align-items: center;
          .icon {
            width: 0.3rem;
            height: 0.3rem;
            fill: #ccc;
          }
        }
      }
    }
  }
}
</style>

由於musicList元件與swiper元件的建立步驟相似所以以下步驟整合在一起使用setup( )函式來實現

在api/index.js中建立getGeDan這個方法( 地址是查詢網易雲api文件獲得)

let baseUrl = 'http://localhost:3000'
export function getGeDan(limit=30){
    return axios.get(`${baseUrl}/personalized?limit=${limit}`)
}

先引入相關依賴和axios方法

import { getGeDan } from "@/api/index.js";
import { reactive, onMounted, onUpdated } from "vue";

在setup( )呼叫axios方法和配置swiper

setup() {
    let musics = reactive({
      musicList: [], // 儲存獲取的歌單列表
    });
    // view與model繫結成功之後生命週期函式
    onMounted(async () => {
      let { data: res } = await getGeDan(10);
      musics.musicList = res.result;
    });
    //view或者model發生改變後觸發生命週期函式
    onUpdated(() => {
      var swiper = new Swiper("#musicSwiper", {
        slidesPerView: 3, //每一屏展示多少塊內容
        spaceBetween: 10, //每個內容之間的間距
      });
    });
    return { musics };
  },