吳 波,段元梅

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

0 引言

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

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

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

1.1 需求分析

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

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

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

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

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

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

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

1.3 歌手模塊

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

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

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

1.5 歌單模塊

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

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

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

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

2 測試

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

3 結(jié)語

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