基于Vue 的音樂網站設計與實現

吳 波,段元梅

(湖南科技學院 信息工程學院,湖南 永州 425199)

0 引言

網站成為人們生活中的一部分,音樂網站對音樂藝術的發展、傳播等起著重要的作用。有數據顯示,互聯網視頻和音樂在搜索引擎、通信交友、電商貿易平臺,已成為人們在網絡上使用的第四大應用。互聯網是全新媒體,其傳播的廣度和速度是其他媒體難以比擬的,在文、圖、形、聲等方面也體現出明顯優勢。互聯網誕生后,人們逐步改變了音樂的傳統傳播方式,使音樂傳播更加公平化、互動化與精細化。網絡傳播刪減了部分流通環節與制作環節的成本,避開發布、創作等低效又復雜的過程,每個人通過互聯網發布音樂作品[1]

。聽眾可以借助網絡傳播模式傾聽音樂、回饋感受與提出意見,創作者也能夠不斷地調整音樂,使之更加完美。網絡媒體的發展為音樂創作與傳播注入了蓬勃的活力與生機[2]。

1 系統的設計與實現

1.1 需求分析

面向音樂試聽用戶的功能主要有根據歌曲或歌單進行搜索、對各類型音樂的歌單和歌手進行分類管理、下載和試聽歌曲及查看歌詞等。登錄后的用戶可以進行歌曲收藏、歌單評論、評論點贊、歌單評分以及個人設置等操作[3]。

面向管理員的主要操作內容是首頁的餅圖和柱狀圖數據展示、包含用戶收藏歌曲管理功能的用戶個人信息管理、包含每個歌手的歌曲列表展示的歌手管理和歌單管理等功能。其中,歌單管理包含每個歌單的歌曲管理和歌單的評論列表管理等。管理員在后臺頁面必須登錄之后,才可以進行上述所有操作,用戶在前臺頁面可以不登錄進行部分操作[4]。

1.2 總體設計

參考現有音樂網站,從用戶需求出發,首先設計基本的功能模塊,其次確定網站的主要架構。對此,網站的總體設計的詳細說明如下。

網站從整體進行規劃和設計,從歌手、歌曲、歌單3個模塊進行分層設計,自頂向下逐步細化。使用者目前為普通用戶和系統管理員。在設計過程中,要滿足普通用戶對音樂網站前臺歌曲和歌單的基本功能使用,也要滿足管理員對前臺用戶管理、歌手管理和歌單管理的全部數據管理需要。在該項目中,當歌曲量不再滿足普通用戶的需求時,要在后臺及時添加和更新歌曲。網站對于一些違規用戶也應及時注銷,營造一個良好的共享音樂網站。

設計人員通過劃分系統模塊、設計數據流程圖和數據庫表等方法來確定項目的基本框架和原型。前臺模塊的主題應根據需求突出風格,本項目設計的整個頁面以綠色為主,打造一個自然清新的音樂網站,并且海量歌曲是可以免費試聽的,以滿足用戶的基本要求。

搜索功能是通過所有的列表數據,在前臺進行參數過濾,把滿足過濾條件的數據顯示在列表中,有精確查找和模糊查找兩種查詢。分頁功能主要引用了Element-UI 的分頁組件,傳入所需的當前頁CurrentPage。根據一頁所占的條數PageSize 和總數據的條數Total,可以自動進行分頁。播放音樂功能只需要一個原生的html 標簽＜audio＞便可以解決。但由于前臺的播放器利用了＜audio＞標簽自主開發,該播放器在頁面中是被隱藏的,所以播放器需要應用原生播放器的各種屬性面,同時改變自定義播放器的樣式。

1.3 歌手模塊

歌手模塊主要分為兩個頁面:管理員頁面和普通用戶頁面。管理員歌手頁面首先引入表格組件,組件的每一列存放表格的表頭名稱,也就是后臺返回的字段名;其次利用表格的屬性綁定一個定義的數組,在頁面創建時即調用Vue 的生命周期函數調用所有歌手接口,這些接口的具體操作放在一個文件里面。為了避免頁面數據過多,管理員不好操作的問題,在表格底部引入了分頁功能,把調用接口成功返回的數據長度賦值給分頁組件的total 屬性。普通用戶歌曲頁面是一些循環顯示的標簽,歌曲對應顯示。此接口調用地址是根據歌手ID 查詢歌曲列表或者根據歌單ID 查詢歌曲列表。歌單和歌手的歌曲列表是通用的,所以只要調用不同的接口就可以得到不同的歌曲列表,并且只要雙擊某一行歌曲列表就可以播放對應的歌曲。

1.4 歌曲模塊的設計與實現

管理員歌曲頁面首先引入表格組件,組件的布局內容和管理員歌手頁面相似。歌曲列表需要上一級頁面歌手的ID 才能查出來,所以在調用時把singerId 作為參數放進去。普通歌曲收藏模塊具體收藏操作是點擊自定義播放欄里面的收藏圖標,即執行方法。系統會先判斷用戶是否登錄,只有登錄的用戶才可以調用收藏歌曲的接口,如果沒有登錄的用戶會彈出“請先登錄”的提示,調用收藏接口成功之后,收藏的圖標會變色,等下次用戶播放到這首歌時,即可作為用戶已收藏的標志。已登錄的用戶也可以在我的音樂導航欄里查看自己的收藏歌曲列表和點擊播放收藏歌曲。查看收藏歌曲列表是通過調用用戶ID 來進行查看的。

1.5 歌單模塊

歌單模塊主要分為兩個頁面,一是管理員頁面,二是普通用戶頁面。首先管理員歌手頁面引入表格組件,組件的頁面布局和歌手類似。在生命周期函數里調用查詢歌單接口。普通用戶歌單頁面頂部是歌單類型的列表展示,主體部分內容引入了自定義組件。自定義組件的數據依舊是調用查詢歌手接口的數據,無須在前臺展示返回的所有內容,只顯示歌單圖片和標題字段。其次根據頂部的歌單風格進行歌手類型分類,點擊之后即可調用根據風格查詢歌單列表的接口。此時歌單列表數據重新進行賦值,頁面即可刷新顯示,頂部導航欄也相應變色。自定義組件底部實現了分頁功能。

1.6 歌單評論、評分及點贊模塊

評論及點贊模塊與管理員的歌單評論列表和歌曲收藏列表類似,也是引入表格組件進行接口調用。返回的數據關于用戶的只有userId,因此需要把userId 放在方法里,從而顯示用戶頭像和昵稱。普通用戶評分頁面主要引用rate 標簽,一類是評分展示,另一類是跟隨鼠標進行評分。用戶點擊之后調用方法,該方法又會調用新增評價接口,將接口的數據賦予平均值,重新更新展示評分。需要注意的是,如果歌單無人評分,默認就是5 分。

這部分用戶評論和點贊模塊是在一個頁面,用戶沒有登錄時可以查看其他用戶的評論和點贊量,登錄之后即可發表評論和點贊。頁面創建之前,發表評論是調用添加評論接口,點贊之后則調用其他接口。點贊的數量就是數據庫里面的up 字段,默認為0 時,點贊圖標為灰色。

2 測試

本文對音樂網站進行了多層次、多方法的測試,分別對用戶、歌手、歌曲和歌單4 個方面進行功能和界面測試。測試結果顯示網站功能和界面均已實現。至此,音樂網站成功實現和運行起來。

3 結語

本文設計實現的音樂網站主要有以下功能。前臺模塊主要面向用戶,內容是歌手歌單的展示以及播放音樂。用戶登錄之后可以收藏音樂和評價、評論歌單以及點贊其他用戶的評論。管理員必須登錄才可以進入后臺首頁。首頁是對用戶、歌手、歌單和歌曲的柱狀圖和餅圖的分析展示,可以一目了然地看到前臺的各種數據集合,方便管理員提取和分析整個音樂網站的數據。管理員的用戶管理部分,存放了前臺模塊的所有用戶數據。后臺管理員可以對這些用戶進行增刪改查操作,還可以管理用戶的收藏歌曲列表。管理員的歌手管理部分,主要是前臺所有歌手的信息集合列表。管理員可以對這些歌手增刪改查,管理歌手其下的歌曲列表,除了增刪改查這些歌曲外,還可以更新歌曲的MP3 文件和測試歌曲是否能播放。歌單管理與同級的歌手管理相似,附加一個評論管理功能,管理員有權限刪除某一歌單中的任何評論。