基于web的音樂播放器后端的設計與實現(xiàn)

馬杰瑞 王風碩

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

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

中圖分類號：TP311 ? ? 文獻標識碼：A

文章編號：1009-3044（2021）35-0072-03

1 引言

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

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

2 技術(shù)選型

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

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

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

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

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

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

JavaScript 代碼規(guī)范

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

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

代碼縮進規(guī)則：使用 4 個空格符號來縮進代碼塊。

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

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

3 需求分析

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

4 數(shù)據(jù)庫設計

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

4.1 用戶表單

該表為核心表，用于保存全部注冊用戶的昵稱、賬號、密碼等基礎信息。其中唯一賬號為主鍵。

4.2 收藏曲目表單

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

4.3 歷史聽歌表單

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

4.4 評論表單

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

5 模塊功能設計與實現(xiàn)

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

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

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

5.1 用戶管理模塊

5.1.1 注冊

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

5.1.2 登錄

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

5.1.3 個人主頁

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

5.1.4 注銷

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

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

代碼如圖3所示。

5.2 歌曲管理模塊

5.3.1 展示

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

5.3.2 檢索

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

5.3.3 播放＼暫停

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

5.3.4 歌曲推薦

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

5.3.5 切換播放

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

5.3 評論管理模塊

5.3.1 發(fā)布評論

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

5.3.2 刪除評論

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

5.3.2 回復

用戶可以在自己感興趣的評論下面跟帖，回復、評論別人的文章，進行交流。

5.4 收藏管理模塊

5.4.1 添加收藏

在用戶使用過程中，在遇到自己喜歡的歌曲時，可在歌曲詳情頁進行收藏保存。同時，服務器會將歌曲信息保存至該用戶個人歌曲收藏表中，并在個人主頁的歌曲收藏表中顯示出來，在后期使用中便于用戶快速切換使用該歌單。

5.4.2 刪除收藏

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

6 結(jié)束語

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

參考文獻：

[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)編輯：梁書】