基于web的音樂(lè)播放器后端的設(shè)計(jì)與實(shí)現(xiàn)

馬杰瑞 王風(fēng)碩

摘要：該文首先進(jìn)行了系統(tǒng)的需求分析，使用E-R圖繪制出需求模塊，使用MySQL數(shù)據(jù)庫(kù)，node.js框架及相關(guān)技術(shù)，完成基于web的音樂(lè)播放器后端的設(shè)計(jì)與實(shí)現(xiàn)。

關(guān)鍵詞：前端開(kāi)發(fā);node.js;音樂(lè)播放器;MySQL

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

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

1 引言

為了放松心情，讓聽(tīng)歌更加方便快捷，沒(méi)有廣告等其他干擾使用，于是便有了自己制作一個(gè)音樂(lè)播放器的想法。面對(duì)廣大的用戶市場(chǎng)，制作一個(gè)便捷好用并且能夠滿足大部分用戶需求的音樂(lè)播放器是一件很有意義并且造福于巨大群體的事情。

網(wǎng)頁(yè)音樂(lè)播放器的構(gòu)筑開(kāi)發(fā)，除基本的播放歌曲的功能。還增加了不同于傳統(tǒng)音樂(lè)播放硬件的龐大音樂(lè)庫(kù)，讓用戶能夠投其所好，提供優(yōu)質(zhì)無(wú)損的音源供用戶播放欣賞的同時(shí)也增加了曲目收藏。在多樣化的需求實(shí)現(xiàn)后，讓網(wǎng)頁(yè)播放器的功能日趨完善，滿足用戶的音樂(lè)鑒賞、交流溝通的要求，為他們提供優(yōu)質(zhì)服務(wù)。

2 技術(shù)選型

在網(wǎng)頁(yè)播放器的開(kāi)發(fā)與技術(shù)選擇上，我們主要采用市面上廣泛使用的、成熟的前端技術(shù)，在主流的三種框架vue.js、react.js、angular.js中，這三個(gè)主流框架分別代表著不同的三條路線，底層都是js語(yǔ)言，但是各個(gè)的實(shí)現(xiàn)方式都有不同。我們使用的是目前市場(chǎng)最火的vue.js，配套還應(yīng)用了vuex + vue-router + axios 。

vue.js是一套構(gòu)建用戶界面的框架只關(guān)注視圖層，易上手，有配套的第三方類庫(kù)。提高開(kāi)發(fā)效率，幫助減少不必要的dom操作。

vuex一個(gè)專為vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化[1]。

vue-router是官方的路由管理器。它和vue.js的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。包含的功能有：

嵌套的路由/視圖表;模塊化的、基于組件的路由配置;路由參數(shù)、查詢、通配符;基于vue.js過(guò)渡系統(tǒng)的視圖過(guò)渡效果;細(xì)粒度的導(dǎo)航控制;帶有自動(dòng)激活的CSS class 的鏈接;HTML5 歷史模式或 hash模式，在IE9中自動(dòng)降級(jí);自定義的滾動(dòng)條行為[2]。

axios：可以理解為ajax i/o system，這不是一種新技術(shù)，本質(zhì)上還是對(duì)原生XMLHttpRequest的封裝，可用于瀏覽器和nodejs的HTTP客戶端，只不過(guò)它是基于Promise的，符合最新的ES規(guī)范。具備以下特點(diǎn)：在瀏覽器中創(chuàng)建XMLHttpRequest請(qǐng)求;在node.js中發(fā)送http請(qǐng)求;支持Promise API;攔截請(qǐng)求和響應(yīng);轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù);取消要求;自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù);客戶端支持防止CSRF/XSRF（跨域請(qǐng)求偽造）。

JavaScript 代碼規(guī)范

變量名命名規(guī)則：變量名使用駝峰法來(lái)命名（camelCase）[3]。

空格與運(yùn)算符使用規(guī)則：運(yùn)算符 （ = + - * / ） 前后需要添加空格。

代碼縮進(jìn)規(guī)則：使用 4 個(gè)空格符號(hào)來(lái)縮進(jìn)代碼塊。

對(duì)象定義的規(guī)則：將左花括號(hào)與類名放在同一行。冒號(hào)與屬性值間有個(gè)空格。字符串使用雙引號(hào)，數(shù)字不需要。最后一個(gè)屬性-值對(duì)后面不要添加逗號(hào)。將右花括號(hào)獨(dú)立放在一行，并以分號(hào)作為結(jié)束符號(hào)。

語(yǔ)句規(guī)則：1）簡(jiǎn)單語(yǔ)句：一條語(yǔ)句通常以分號(hào)作為結(jié)束符。2）復(fù)雜語(yǔ)句：將左花括號(hào)放在第一行的結(jié)尾。左花括號(hào)前添加一空格。將右花括號(hào)獨(dú)立放在一行。不要以分號(hào)結(jié)束一個(gè)復(fù)雜的聲明。

3 需求分析

本項(xiàng)目的是開(kāi)發(fā)一個(gè)基于網(wǎng)頁(yè)可以播放主流的音樂(lè)文本格式的播放器。能控制播放，暫停，停止，音量控制，選擇上一曲，選擇下一曲，歌曲列表文件的管理操作，在線播放，讀取個(gè)人信息等多種播放控制。

4 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)E-R圖如圖1所示。

4.1 用戶表單

該表為核心表，用于保存全部注冊(cè)用戶的昵稱、賬號(hào)、密碼等基礎(chǔ)信息。其中唯一賬號(hào)為主鍵。

4.2 收藏曲目表單

該表用于保存用戶個(gè)人收藏歌曲，除賬號(hào)主鍵外，還保存了歌曲id、歌曲名、歌曲鏈接。

4.3 歷史聽(tīng)歌表單

該表包含用戶全部聽(tīng)歌歷史，在用戶選擇播放時(shí)會(huì)進(jìn)行更新數(shù)據(jù)，同收藏曲目表結(jié)構(gòu)相同。

4.4 評(píng)論表單

該表包含歌曲下的全部評(píng)論，以歌曲id為主鍵，保存了歌曲下用戶的全部評(píng)論內(nèi)容同時(shí)保存評(píng)論時(shí)間，在用戶評(píng)論下方其他用戶可以進(jìn)行回復(fù)，傳入數(shù)據(jù)庫(kù)中，分別以回復(fù)用戶和回復(fù)內(nèi)容保存在數(shù)據(jù)庫(kù)中。

5 模塊功能設(shè)計(jì)與實(shí)現(xiàn)

通過(guò)線上線下的調(diào)查歸納與數(shù)據(jù)收集，并且進(jìn)行需求分析后，該在線音樂(lè)播放器主要分為五個(gè)部分，進(jìn)行模塊化開(kāi)發(fā)。分別是：評(píng)論管理模塊;收藏管理模塊;用戶安全管理模塊;數(shù)據(jù)庫(kù)管理模塊;歌曲管理模塊。

其中評(píng)論模塊主要包括發(fā)布評(píng)論;刪除評(píng)論;回復(fù)評(píng)論這三個(gè)功能。收藏管理模塊包括對(duì)喜愛(ài)歌曲的增刪功能。用戶安全管理模塊主要包括：用戶賬號(hào)的登錄;注冊(cè);注銷以及對(duì)個(gè)人主頁(yè)的編輯。數(shù)據(jù)庫(kù)管理模塊用于保存用戶使用本在線播放器的數(shù)據(jù)：用戶表單;收藏歌曲表單;歷史聽(tīng)歌歌單表單;評(píng)論表單。歌曲管理模塊主要負(fù)責(zé)用戶的基礎(chǔ)音樂(lè)播放器使用實(shí)現(xiàn)，包括：歌曲詳情頁(yè);播放歌曲;切換曲目;檢索曲目;以及推薦歌單。

功能模塊分析如圖2所示。

5.1 用戶管理模塊

5.1.1 注冊(cè)

用戶在使用本在線音樂(lè)播放器時(shí)，最先接觸的功能，用戶所注冊(cè)的賬戶用于保存用戶的個(gè)人基本資料以及后續(xù)使用播放器時(shí)產(chǎn)生的各種與用戶相關(guān)的數(shù)據(jù)。用戶所輸入的賬戶名與密碼將保存到后端數(shù)據(jù)庫(kù)中。

5.1.2 登錄

注冊(cè)成功后，頁(yè)面將自行跳轉(zhuǎn)到登錄窗口，登錄窗口也可在網(wǎng)頁(yè)主頁(yè)自行點(diǎn)擊進(jìn)入。在用戶輸入個(gè)人用戶名與密碼之后，服務(wù)端將數(shù)據(jù)與數(shù)據(jù)庫(kù)中保存的賬戶信息進(jìn)行比對(duì)，若賬戶與密碼匹配成功，顯示登錄成功，并成功進(jìn)入主頁(yè)，服務(wù)端將拉取數(shù)據(jù)庫(kù)中與該用戶相關(guān)的歷史數(shù)據(jù)，供用戶使用訪問(wèn)修改。

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

在用戶登錄后，服務(wù)端將從數(shù)據(jù)庫(kù)拉取用戶使用歷史數(shù)據(jù)，包括歷史歌單、收藏曲目與推薦曲目。

5.1.4 注銷

注銷功能用于用戶在使用播放器后，保護(hù)個(gè)人隱私的功能，該功能將賬戶從登錄狀態(tài)，返回至非登錄狀態(tài)，頁(yè)面將進(jìn)行刷新，并且清除用戶使用數(shù)據(jù)。

關(guān)于服務(wù)器連接數(shù)據(jù)庫(kù)的node.js代碼，這里使用管理員身份用戶對(duì)用戶表實(shí)現(xiàn)增刪改查功能為例進(jìn)行演示。

代碼如圖3所示。

5.2 歌曲管理模塊

5.3.1 展示

該功能用于播放器首頁(yè)，主界面設(shè)計(jì)得非常簡(jiǎn)潔大方，能夠讓用戶快速上手 使用，極佳的人性化設(shè)計(jì)能讓用戶快速直觀地找到自己感興趣的歌曲或MV。

5.3.2 檢索

檢索功能能讓用戶在眾多歌曲中盡快找到自己所想尋找的曲目，支持歌名搜索與歌手搜索。節(jié)約用戶在龐大的歌曲庫(kù)中依次尋找的時(shí)間，提升使用體驗(yàn)。

5.3.3 播放＼暫停

音樂(lè)播放器的基礎(chǔ)功能，用戶可在主界面直接雙擊曲目播放，也可在添加歌單后直接播放，該功能控制基礎(chǔ)的播放與暫停。

5.3.4 歌曲推薦

用戶可以在歌曲推薦中，直觀地看到實(shí)時(shí)更新的最新音樂(lè)曲目以及歌曲MV，并且還有根據(jù)個(gè)人喜好推薦的歌單，以及大量用戶收藏的曲目推薦。

5.3.5 切換播放

切換播放可以進(jìn)行切換上一首曲目播放或是下一首曲目播放。作為一個(gè)功能進(jìn)行了單獨(dú)的封裝，單獨(dú)制作了循環(huán)播放或隨機(jī)播放的判斷，在用戶選定了播放順序后，點(diǎn)擊切換播放按鈕，該功能將進(jìn)行播放另外一首曲目，并將當(dāng)前進(jìn)度條歸零。

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

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

用戶在歌曲詳情界面，可以在評(píng)論區(qū)，輸入文本及表情，發(fā)布自己的文章。服務(wù)器將文本保存至個(gè)人數(shù)據(jù)庫(kù)中，并發(fā)布至網(wǎng)頁(yè)供其他用戶查看、評(píng)論，發(fā)表的文章將包含發(fā)布時(shí)間及其發(fā)布用戶昵稱。

5.3.2 刪除評(píng)論

用戶在發(fā)表評(píng)論后，可對(duì)自己的個(gè)人評(píng)論進(jìn)行刪除操作，該操作會(huì)同步至后端數(shù)據(jù)庫(kù)，刪除該條評(píng)論數(shù)據(jù)，該操作不可撤回。

5.3.2 回復(fù)

用戶可以在自己感興趣的評(píng)論下面跟帖，回復(fù)、評(píng)論別人的文章，進(jìn)行交流。

5.4 收藏管理模塊

5.4.1 添加收藏

在用戶使用過(guò)程中，在遇到自己喜歡的歌曲時(shí)，可在歌曲詳情頁(yè)進(jìn)行收藏保存。同時(shí)，服務(wù)器會(huì)將歌曲信息保存至該用戶個(gè)人歌曲收藏表中，并在個(gè)人主頁(yè)的歌曲收藏表中顯示出來(lái)，在后期使用中便于用戶快速切換使用該歌單。

5.4.2 刪除收藏

在收藏歌單中可以刪除已收藏曲目，該操作也會(huì)同步至數(shù)據(jù)庫(kù)，更新個(gè)人收藏歌單表中的數(shù)據(jù)。

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

本文介紹了基于Web的音樂(lè)播放器的后端設(shè)計(jì)與實(shí)現(xiàn)，網(wǎng)頁(yè)在線音樂(lè)播放器在滿足調(diào)查后用戶的基本需求的同時(shí)，也進(jìn)行了簡(jiǎn)化，提升用戶的使用體驗(yàn)。該播放器基于vue.js框架，使用了模塊化編程，引用了數(shù)據(jù)驅(qū)動(dòng)化開(kāi)發(fā)的思想，極大地降低了后期更新?lián)Q代與維護(hù)運(yùn)營(yíng)的成本。該音樂(lè)播放器還有可以更深入改進(jìn)的地方，例如：加入大數(shù)據(jù)算法分析用戶收藏表單，將分析后的數(shù)據(jù)與曲庫(kù)比對(duì)，然后更新推送用戶可能喜歡歌曲。在后續(xù)也將陸續(xù)增添各種功能，并且優(yōu)化系統(tǒng)算法，減少播放器的故障。也會(huì)采納用戶使用后的建議與意見(jiàn)，爭(zhēng)取完善出一個(gè)貼合用戶使用的優(yōu)秀播放器。

參考文獻(xiàn)：

[1] 尤雨溪.Vuex [EB/OL].[2021-04-25].https：//vuex.vuejs.org/zh/.

[2] 尤雨溪.Vue Router Vue.js官方路由[EB/OL]. [2021-04-25].https：//router.vuejs.org/zh/.

[3] Wall L，Schwartz R L.Programming Perl[M]. O′Reilly Associates Inc，1991.

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