林陳佑康 王風(fēng)碩

摘要：隨著互聯(lián)網(wǎng)的不斷發(fā)展進(jìn)步，網(wǎng)絡(luò)逐漸成為人們?nèi)粘Ｉ畹谋匦杵?，加上生活?jié)奏的不斷加快、生活壓力的增大，聽音樂也成為人們娛樂、放松的主要方式之一。該文闡述了基于Web開發(fā)的一個(gè)在線的音樂播放器網(wǎng)站前端的設(shè)計(jì)與開發(fā)，主要使用了Vue.js框架，應(yīng)用Element-UI組件，完成了整個(gè)在線音樂播放器網(wǎng)頁(yè)的前端頁(yè)面搭建，是一個(gè)可以實(shí)現(xiàn)用戶自定義注冊(cè)、登錄賬號(hào)，可以自由聽、搜索和收藏音樂，評(píng)論歌曲的在線音樂播放器網(wǎng)站。

關(guān)鍵詞：前端開發(fā);Vue.js;Element-UI;音樂播放器

中圖分類號(hào)：TP311? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）36-0089-03

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1引言

在互聯(lián)網(wǎng)不斷高速發(fā)展的當(dāng)下，人們的聽歌模式已經(jīng)從傳統(tǒng)的線下設(shè)備改變到數(shù)字音樂，數(shù)字音樂是依托互聯(lián)網(wǎng)技術(shù)傳播和存在的，它可以很方便地被下載、播放、傳播、復(fù)制等[1]。人們想在現(xiàn)在這樣的快節(jié)奏的生活方式中，找到良好的消遣、放松心情的方法，而聽音樂正是目前娛樂的主要的方式之一，隨著聽音樂的用戶群體數(shù)量越來越大，導(dǎo)致用戶對(duì)音樂播放平臺(tái)有各種各樣的需求，所以構(gòu)建與開發(fā)一個(gè)在線音樂播放器，是當(dāng)今社會(huì)的必要需求。

在線音樂播放器網(wǎng)站的開發(fā)，對(duì)于每一個(gè)用戶來說，既沒有大量的廣告干擾，還可以找到符合自己聽歌口味的歌曲，由于是數(shù)字音樂，所以其音質(zhì)也不會(huì)被改變，這樣就可以有一個(gè)良好的聽歌體驗(yàn)。網(wǎng)站基于用戶的多樣化的需求，讓自身的定位更加明確，給用戶帶來更良好的使用體驗(yàn)。

2 技術(shù)選型

目前，在Web的開發(fā)中，普遍采用前后端分離的技術(shù)進(jìn)行實(shí)現(xiàn)，在前端的技術(shù)中，主要有Angular、React、Vue[2]。而本文前端的開發(fā)主要使用的是Vue.js框架，加上Element-UI組件庫(kù)，再搭配上JavaScript、CSS等技術(shù)，來實(shí)現(xiàn)了整個(gè)在線音樂播放器網(wǎng)頁(yè)的前端的布局、樣式以及交互操作。

Vue.js：這是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，其主要特征在于靈活性突出具有良好的使用性能[3]。Vue.js作為一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的漸進(jìn)式JavaScript框架，采用的是自底而上的增量開發(fā)的設(shè)計(jì)。Vue的核心庫(kù)只關(guān)注圖層，能讓網(wǎng)頁(yè)的前端開發(fā)更加容易，并且十分容易學(xué)習(xí)，還可以與其他的庫(kù)或者已完成的項(xiàng)目進(jìn)行整合。同時(shí)Vue.js還提供vue-cli腳手架，所以構(gòu)建一個(gè)新項(xiàng)目并運(yùn)行起來是十分輕松的。

Element-UI：這是基于Vue的一個(gè)ui框架，該框架基于Vue.js提供了很多已經(jīng)封裝好的組件庫(kù)，其基本涵蓋了前端頁(yè)面所需的所有組件，可以方便我們快速開發(fā)前端頁(yè)面。因?yàn)镋lement-UI使用簡(jiǎn)單的特點(diǎn)，所以其提供的組件的參考實(shí)例代碼都可以直接進(jìn)行復(fù)制，并粘貼到自己所構(gòu)建的項(xiàng)目中使用。

3 需求分析

隨著互聯(lián)網(wǎng)的不斷進(jìn)步，使得網(wǎng)絡(luò)成為人們生活中的必需品，再伴隨生活節(jié)奏的加快，聽音樂成為人們消遣、娛樂，減輕疲勞，放松，休息的主要方式之一。所以開發(fā)一個(gè)在線的音樂播放器網(wǎng)頁(yè)來讓人們放松，拓寬人們的娛樂方式是大勢(shì)所趨。本在線音樂播放器的目標(biāo)受眾是所有使用電腦端的用戶，而目標(biāo)受眾基本覆蓋了每個(gè)年齡階段的用戶，所以本在線音樂播放器以操作簡(jiǎn)單易行、功能完備、頁(yè)面清爽易懂為目的進(jìn)行設(shè)計(jì)與開發(fā)，以滿足各個(gè)年齡層的用戶的基本需求。目前國(guó)內(nèi)的市場(chǎng)上存在各種各樣的音樂播放器，每個(gè)音樂播放器都有自己的特點(diǎn)，而本在線音樂播放器參考了當(dāng)下市場(chǎng)最熱門的同類型的音樂播放器平臺(tái)的設(shè)計(jì)，把基本的需求大致分為：用戶的注冊(cè)、登錄，用戶管理，評(píng)論管理，收藏管理，歌曲管理等。

4 功能模塊分析

本在線音樂播放器網(wǎng)站的開發(fā)主要分為了五個(gè)部分：用戶安全管理模塊，評(píng)論管理模塊，歌曲管理模塊，收藏管理模塊，數(shù)據(jù)庫(kù)管理模塊。用戶安全管理模塊包括用戶賬號(hào)注冊(cè)，登錄賬戶，用戶注銷，用戶個(gè)人主頁(yè)。評(píng)論管理模塊包括用戶在歌曲詳情頁(yè)發(fā)布評(píng)論，刪除評(píng)論，回復(fù)評(píng)論。歌曲管理模塊包括播放歌曲、MV，切換歌曲，歷史聽歌記錄歌單，檢索歌曲、歌手等，推薦實(shí)時(shí)最新發(fā)布的歌曲，推薦各種各樣的歌單。收藏管理模塊包括增加歌曲到收藏列表，刪除收藏列表中的歌曲。數(shù)據(jù)庫(kù)管理模塊是整個(gè)在線音樂播放器網(wǎng)頁(yè)的主要數(shù)據(jù)內(nèi)容來源，包括用戶表單，收藏歌單表單，歷史聽歌歌單表單，評(píng)論表單。具體功能模塊圖如圖1所示。

5模塊功能設(shè)計(jì)

5.1用戶安全管理模塊

5.1.1 注冊(cè)

用戶沒有賬號(hào)時(shí)需要進(jìn)行注冊(cè)賬號(hào)，當(dāng)用戶點(diǎn)擊注冊(cè)按鈕，切換到注冊(cè)頁(yè)面，輸入自己的賬號(hào)密碼后確認(rèn)。后臺(tái)獲取輸入的內(nèi)容后傳遞給服務(wù)器并發(fā)送請(qǐng)求。若服務(wù)器請(qǐng)求成功，便把獲取到的內(nèi)容保存到后端數(shù)據(jù)庫(kù)的用戶表單里，并返回注冊(cè)成功的消息;若請(qǐng)求失敗，則發(fā)送注冊(cè)失敗的提示。

5.1.2 登錄

用戶需登錄才能進(jìn)入網(wǎng)站的主頁(yè)面，當(dāng)用戶點(diǎn)擊登錄按鈕，切換到登錄頁(yè)面，輸入自己注冊(cè)的賬號(hào)密碼后確認(rèn)。后臺(tái)獲取輸入的內(nèi)容傳遞給服務(wù)器并發(fā)送請(qǐng)求。若服務(wù)器請(qǐng)求成功，便把獲取到的內(nèi)容與后端數(shù)據(jù)庫(kù)中的用戶表單中保存的賬號(hào)密碼進(jìn)行比對(duì)，并返回對(duì)應(yīng)的結(jié)果;若請(qǐng)求失敗，則提示登錄失敗。

5.1.3 注銷

用戶點(diǎn)擊退出按鈕，即從登錄狀態(tài)變?yōu)榉堑卿洜顟B(tài)，頁(yè)面將直接刷新并返回到登錄頁(yè)面。

5.1.4 個(gè)人主頁(yè)

用戶需登錄后才能進(jìn)入個(gè)人主頁(yè)。用戶可以在個(gè)人主頁(yè)中看到自己的用戶信息，以及收藏的歌曲歌單。

5.2 歌曲管理模塊

5.2.1 展示

在線音樂播放器首頁(yè)的頁(yè)面展示，例如首頁(yè)上的歌曲推薦板塊、歌單推薦板塊等。點(diǎn)擊每一首歌曲會(huì)進(jìn)入到相對(duì)應(yīng)歌曲的歌曲詳情頁(yè)中，在歌曲的基本信息介紹下方是歌曲的評(píng)論區(qū)，用戶可以自由發(fā)布評(píng)論或者對(duì)其他用戶的評(píng)論進(jìn)行回復(fù)評(píng)論操作。

5.2.2 檢索

用戶在搜索框輸入需要檢索的內(nèi)容，例如歌曲、歌手等，點(diǎn)擊搜索按鈕后，搜索成功則顯示搜索到的內(nèi)容。若搜索項(xiàng)不存在，則提示消息沒有搜索到相關(guān)的內(nèi)容。

5.2.3 播放

用戶在首頁(yè)雙擊歌曲時(shí)，可以進(jìn)行音樂的播放;也能在播放器歌單列表中點(diǎn)擊歌曲進(jìn)行播放。可以在播放器中點(diǎn)擊切換播放與暫停。

5.2.4 歌曲推薦

用戶可以在在線音樂播放器首頁(yè)中看到實(shí)時(shí)最新發(fā)布的歌曲、MV推薦，以及各種各樣的歌單推薦。

5.2.5 切歌

用戶點(diǎn)擊切歌按鈕時(shí)，可以進(jìn)行歌曲的上一首或者下一首進(jìn)行切換。把切歌功能進(jìn)行封裝，利用條件判斷是隨機(jī)播放還是順序播放，再判斷是切換上一首還是下一首，最后把歌曲播放時(shí)間、進(jìn)度條歸回到原位進(jìn)行播放。切歌功能關(guān)鍵代碼如下。

//歌曲上下首封裝

skipFn（type） {

switch （this.playType） {

case 2： // 隨機(jī)播放

this.index = Math.floor（Math.random（） * this.songList.length）;

break;

default：

if （type == "skipBack"） {

this.index - 1 >= 0 ？ this.index-- ： 0;

} else {

this.index =this.index + 1 >= this.songList.length

？ this.songList.length - 1

： this.index + 1;

}

break;

}

this.song = this.songList[this.index];

this.playing = true;

setTimeout（（） => {

this.totalTime = "00：00";

audio.play（）;

}， 100）;

}，

// 上一首

skipBack（） {

this.skipFn（"skipBack"）;

}，

// 下一首

skipForward（） {

this.skipFn（"skipForward"）;

}，

5.3 評(píng)論管理模塊

5.3.1 發(fā)布評(píng)論

用戶在歌曲詳情頁(yè)中的評(píng)論區(qū)，輸入評(píng)論的內(nèi)容，點(diǎn)擊發(fā)布按鈕時(shí)，后臺(tái)獲取評(píng)論信息并向服務(wù)端發(fā)送請(qǐng)求。若服務(wù)器請(qǐng)求成功，評(píng)論的信息會(huì)獲取當(dāng)前發(fā)布的時(shí)間并發(fā)布到評(píng)論區(qū)內(nèi)，同時(shí)傳遞到后端數(shù)據(jù)庫(kù)保存到評(píng)論表單中;若請(qǐng)求失敗，則提示發(fā)布失敗。

5.3.2 刪除評(píng)論

用戶可以在評(píng)論區(qū)看到自己發(fā)布的評(píng)論，點(diǎn)擊刪除按鈕進(jìn)行刪除操作，同時(shí)在數(shù)據(jù)庫(kù)的評(píng)論表單中刪除當(dāng)前用戶的評(píng)論信息。

5.3.3 回復(fù)

用戶可以在評(píng)論區(qū)看到所有已發(fā)布的評(píng)論，點(diǎn)擊回復(fù)按鈕進(jìn)行評(píng)論的回復(fù)或者評(píng)論其他用戶的評(píng)論，回復(fù)的評(píng)論信息也會(huì)被保存在數(shù)據(jù)庫(kù)的評(píng)論表單中。

5.4 收藏管理模塊

5.4.1 添加收藏

用戶在歌曲詳情頁(yè)中的點(diǎn)擊收藏按鈕時(shí)，收藏的歌曲的信息會(huì)保存到數(shù)據(jù)庫(kù)中的收藏歌曲表單中，并且會(huì)顯示在個(gè)人主頁(yè)的收藏歌曲列表中。

5.4.2 刪除收藏

用戶可以在個(gè)人主頁(yè)的收藏歌曲列表中看到自己已經(jīng)收藏的歌曲，點(diǎn)擊刪除按鈕進(jìn)行刪除操作。

5.5 數(shù)據(jù)庫(kù)模塊

導(dǎo)入用戶表單、收藏歌曲表單、歷史聽歌歌單表單、評(píng)論表單到數(shù)據(jù)庫(kù)中。數(shù)據(jù)庫(kù)ER圖如圖2所示。

6 結(jié)束語(yǔ)

本文基于Web構(gòu)建的音樂播放器前端的設(shè)計(jì)與實(shí)現(xiàn)，在線音樂播放器網(wǎng)頁(yè)的雛形和大部分功能已經(jīng)基本實(shí)現(xiàn)，滿足了用戶使用在線音樂播放器的基本需求。通過使用Vue.js框架開發(fā)的在線音樂播放器網(wǎng)頁(yè)前端，不僅可以合理地布局，還可以方便維護(hù)網(wǎng)站各個(gè)模塊。同時(shí)本在線音樂播放器還可以進(jìn)行更進(jìn)一步的深度的研究與開發(fā)，例如根據(jù)每個(gè)用戶的大數(shù)據(jù)分析與推送，移動(dòng)端的App開發(fā)等。所以在后續(xù)的工作過程中，將不斷地完善、優(yōu)化該在線音樂播放器網(wǎng)站，致力于提高用戶黏性，從而提高本在線音樂播放器的價(jià)值，給用戶帶來更好的使用體驗(yàn)。

參考文獻(xiàn)：

[1] 劉偉.淺談改革開放以來數(shù)字音樂的產(chǎn)業(yè)化發(fā)展[J].產(chǎn)業(yè)科技創(chuàng)新，2020，2（5）：5-8.

[2] 陶琳.基于Spring Boot和Vue框架的高校實(shí)驗(yàn)室耗材管理系統(tǒng)的分析與設(shè)計(jì)[J].電腦知識(shí)與技術(shù)，2021，17（13）：83-85.

[3] 沈皎佶.Vue.js技術(shù)在移動(dòng)應(yīng)用可視化平臺(tái)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].數(shù)碼世界，2020（9）：96-97.

【通聯(lián)編輯：梁書】