基于Vue 的音樂(lè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

吳 波,段元梅

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

0 引言

網(wǎng)站成為人們生活中的一部分,音樂(lè)網(wǎng)站對(duì)音樂(lè)藝術(shù)的發(fā)展、傳播等起著重要的作用。有數(shù)據(jù)顯示,互聯(lián)網(wǎng)視頻和音樂(lè)在搜索引擎、通信交友、電商貿(mào)易平臺(tái),已成為人們?cè)诰W(wǎng)絡(luò)上使用的第四大應(yīng)用?；ヂ?lián)網(wǎng)是全新媒體,其傳播的廣度和速度是其他媒體難以比擬的,在文、圖、形、聲等方面也體現(xiàn)出明顯優(yōu)勢(shì)?；ヂ?lián)網(wǎng)誕生后,人們逐步改變了音樂(lè)的傳統(tǒng)傳播方式,使音樂(lè)傳播更加公平化、互動(dòng)化與精細(xì)化。網(wǎng)絡(luò)傳播刪減了部分流通環(huán)節(jié)與制作環(huán)節(jié)的成本,避開(kāi)發(fā)布、創(chuàng)作等低效又復(fù)雜的過(guò)程,每個(gè)人通過(guò)互聯(lián)網(wǎng)發(fā)布音樂(lè)作品[1]

。聽(tīng)眾可以借助網(wǎng)絡(luò)傳播模式傾聽(tīng)音樂(lè)、回饋感受與提出意見(jiàn),創(chuàng)作者也能夠不斷地調(diào)整音樂(lè),使之更加完美。網(wǎng)絡(luò)媒體的發(fā)展為音樂(lè)創(chuàng)作與傳播注入了蓬勃的活力與生機(jī)[2]。

1 系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

1.1 需求分析

面向音樂(lè)試聽(tīng)用戶的功能主要有根據(jù)歌曲或歌單進(jìn)行搜索、對(duì)各類(lèi)型音樂(lè)的歌單和歌手進(jìn)行分類(lèi)管理、下載和試聽(tīng)歌曲及查看歌詞等。登錄后的用戶可以進(jìn)行歌曲收藏、歌單評(píng)論、評(píng)論點(diǎn)贊、歌單評(píng)分以及個(gè)人設(shè)置等操作[3]。

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

1.2 總體設(shè)計(jì)

參考現(xiàn)有音樂(lè)網(wǎng)站,從用戶需求出發(fā),首先設(shè)計(jì)基本的功能模塊,其次確定網(wǎng)站的主要架構(gòu)。對(duì)此,網(wǎng)站的總體設(shè)計(jì)的詳細(xì)說(shuō)明如下。

網(wǎng)站從整體進(jìn)行規(guī)劃和設(shè)計(jì),從歌手、歌曲、歌單3個(gè)模塊進(jìn)行分層設(shè)計(jì),自頂向下逐步細(xì)化。使用者目前為普通用戶和系統(tǒng)管理員。在設(shè)計(jì)過(guò)程中,要滿足普通用戶對(duì)音樂(lè)網(wǎng)站前臺(tái)歌曲和歌單的基本功能使用,也要滿足管理員對(duì)前臺(tái)用戶管理、歌手管理和歌單管理的全部數(shù)據(jù)管理需要。在該項(xiàng)目中,當(dāng)歌曲量不再滿足普通用戶的需求時(shí),要在后臺(tái)及時(shí)添加和更新歌曲。網(wǎng)站對(duì)于一些違規(guī)用戶也應(yīng)及時(shí)注銷(xiāo),營(yíng)造一個(gè)良好的共享音樂(lè)網(wǎng)站。

設(shè)計(jì)人員通過(guò)劃分系統(tǒng)模塊、設(shè)計(jì)數(shù)據(jù)流程圖和數(shù)據(jù)庫(kù)表等方法來(lái)確定項(xiàng)目的基本框架和原型。前臺(tái)模塊的主題應(yīng)根據(jù)需求突出風(fēng)格,本項(xiàng)目設(shè)計(jì)的整個(gè)頁(yè)面以綠色為主,打造一個(gè)自然清新的音樂(lè)網(wǎng)站,并且海量歌曲是可以免費(fèi)試聽(tīng)的,以滿足用戶的基本要求。

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

1.3 歌手模塊

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

1.4 歌曲模塊的設(shè)計(jì)與實(shí)現(xiàn)

管理員歌曲頁(yè)面首先引入表格組件,組件的布局內(nèi)容和管理員歌手頁(yè)面相似。歌曲列表需要上一級(jí)頁(yè)面歌手的ID 才能查出來(lái),所以在調(diào)用時(shí)把singerId 作為參數(shù)放進(jìn)去。普通歌曲收藏模塊具體收藏操作是點(diǎn)擊自定義播放欄里面的收藏圖標(biāo),即執(zhí)行方法。系統(tǒng)會(huì)先判斷用戶是否登錄,只有登錄的用戶才可以調(diào)用收藏歌曲的接口,如果沒(méi)有登錄的用戶會(huì)彈出“請(qǐng)先登錄”的提示,調(diào)用收藏接口成功之后,收藏的圖標(biāo)會(huì)變色,等下次用戶播放到這首歌時(shí),即可作為用戶已收藏的標(biāo)志。已登錄的用戶也可以在我的音樂(lè)導(dǎo)航欄里查看自己的收藏歌曲列表和點(diǎn)擊播放收藏歌曲。查看收藏歌曲列表是通過(guò)調(diào)用用戶ID 來(lái)進(jìn)行查看的。

1.5 歌單模塊

歌單模塊主要分為兩個(gè)頁(yè)面,一是管理員頁(yè)面,二是普通用戶頁(yè)面。首先管理員歌手頁(yè)面引入表格組件,組件的頁(yè)面布局和歌手類(lèi)似。在生命周期函數(shù)里調(diào)用查詢(xún)歌單接口。普通用戶歌單頁(yè)面頂部是歌單類(lèi)型的列表展示,主體部分內(nèi)容引入了自定義組件。自定義組件的數(shù)據(jù)依舊是調(diào)用查詢(xún)歌手接口的數(shù)據(jù),無(wú)須在前臺(tái)展示返回的所有內(nèi)容,只顯示歌單圖片和標(biāo)題字段。其次根據(jù)頂部的歌單風(fēng)格進(jìn)行歌手類(lèi)型分類(lèi),點(diǎn)擊之后即可調(diào)用根據(jù)風(fēng)格查詢(xún)歌單列表的接口。此時(shí)歌單列表數(shù)據(jù)重新進(jìn)行賦值,頁(yè)面即可刷新顯示,頂部導(dǎo)航欄也相應(yīng)變色。自定義組件底部實(shí)現(xiàn)了分頁(yè)功能。

1.6 歌單評(píng)論、評(píng)分及點(diǎn)贊模塊

評(píng)論及點(diǎn)贊模塊與管理員的歌單評(píng)論列表和歌曲收藏列表類(lèi)似,也是引入表格組件進(jìn)行接口調(diào)用。返回的數(shù)據(jù)關(guān)于用戶的只有userId,因此需要把userId 放在方法里,從而顯示用戶頭像和昵稱(chēng)。普通用戶評(píng)分頁(yè)面主要引用rate 標(biāo)簽,一類(lèi)是評(píng)分展示,另一類(lèi)是跟隨鼠標(biāo)進(jìn)行評(píng)分。用戶點(diǎn)擊之后調(diào)用方法,該方法又會(huì)調(diào)用新增評(píng)價(jià)接口,將接口的數(shù)據(jù)賦予平均值,重新更新展示評(píng)分。需要注意的是,如果歌單無(wú)人評(píng)分,默認(rèn)就是5 分。

這部分用戶評(píng)論和點(diǎn)贊模塊是在一個(gè)頁(yè)面,用戶沒(méi)有登錄時(shí)可以查看其他用戶的評(píng)論和點(diǎn)贊量,登錄之后即可發(fā)表評(píng)論和點(diǎn)贊。頁(yè)面創(chuàng)建之前,發(fā)表評(píng)論是調(diào)用添加評(píng)論接口,點(diǎn)贊之后則調(diào)用其他接口。點(diǎn)贊的數(shù)量就是數(shù)據(jù)庫(kù)里面的up 字段,默認(rèn)為0 時(shí),點(diǎn)贊圖標(biāo)為灰色。

2 測(cè)試

本文對(duì)音樂(lè)網(wǎng)站進(jìn)行了多層次、多方法的測(cè)試,分別對(duì)用戶、歌手、歌曲和歌單4 個(gè)方面進(jìn)行功能和界面測(cè)試。測(cè)試結(jié)果顯示網(wǎng)站功能和界面均已實(shí)現(xiàn)。至此,音樂(lè)網(wǎng)站成功實(shí)現(xiàn)和運(yùn)行起來(lái)。

3 結(jié)語(yǔ)

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