基于vue框架技術(shù)音樂平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)-畢業(yè)論文

文檔均為word文檔，下載后可直接編輯使用亦可打印摘要Internet使全球走向信息化，走向數(shù)字化時(shí)代,為全球的用戶提供了數(shù)字便利和數(shù)據(jù)傳輸便利的操作平臺(tái)，大大縮短了人與人之間信息傳遞和信息交換以及信息資源交換的時(shí)間。音樂軟件APP幾乎人人都有，但在這個(gè)音樂軟件百花齊放百家爭(zhēng)鳴的時(shí)代，我們聽不同歌手的歌需要不同的軟件，于是我開發(fā)了這個(gè)基于vue.js的在線音樂平臺(tái)。本平臺(tái)的構(gòu)建技術(shù)是以vue.js為基底，后臺(tái)數(shù)據(jù)庫(kù)支撐用的是MongoDB分布式文檔存儲(chǔ)數(shù)據(jù)庫(kù)。該數(shù)據(jù)庫(kù)的特點(diǎn)是高性能，易部署，易使用。此網(wǎng)站嚴(yán)格按照軟件工程中的指導(dǎo)方法來進(jìn)行構(gòu)建以及測(cè)試。賦予了音樂網(wǎng)站管理用戶信息注冊(cè)登陸用戶播放MV音樂搜索等功能。關(guān)鍵詞：音樂vue.js登錄注冊(cè)音樂搜索

AbstractTheInternethasenabledtheworldtomovetowardsinformationizationandthedigitalera.Ithasprovideduserswithaplatformfordigitalconvenienceanddatatransmission,whichhasgreatlyshortenedthetimeforinformationtransfer,informationexchange,andinformationresourceexchangebetweenpeople.Almosteveryonehasamusicsoftwareapp,butinthiseraofmusicsoftwarewithhundredsofflowers,weneeddifferentsoftwaretolistentothesongsofdifferentsingers,soIdevelopedthisonlinemusicplatformbasedonvue.js.Theconstructiontechnologyofthisplatformisbasedonvue.js,andtheback-enddatabasesupportstheMongoDBdistributeddocumentstoragedatabase.Thedatabaseischaracterizedbyhighperformance,easeofdeployment,andeaseofuse.Thiswebsiteisbuiltandtestedinstrictaccordancewiththeguidelinesinsoftwareengineering.Itprovidesmusicwebsitemanagement,userinformationregistrationandlogin,anduserscanplayMVmusicsearchandotherfunctions.Keywords:MusicVue.jsLoginRegistrationMusicSearch目錄TOC\o"1-3"\h\u第一章緒論 11.1課題的研究背景及意義 11.2國(guó)內(nèi)外研究現(xiàn)狀 11.2.1國(guó)內(nèi)研究現(xiàn)狀 11.2.2國(guó)外研究現(xiàn)狀 11.3主要內(nèi)容及安排 2第二章關(guān)鍵技術(shù)介紹 32.1Vue.js介紹 32.1.1Vue.js的概述和特點(diǎn) 32.2AXIOS介紹 32.2.1AXIOS的概述和特點(diǎn) 32.3SASS預(yù)處理器概述和特點(diǎn) 32.3.1SASS預(yù)處理器的概述和特點(diǎn) 32.4JavaScriptCSSHTML概述和特點(diǎn) 42.4.1HTML的概述和特點(diǎn) 42.4.3CSS的概述和特點(diǎn) 42.4.5JavaScript的概述和特點(diǎn) 42.5vue-router概述和特點(diǎn) 42.5.1vue-router的概述和特點(diǎn) 4第三章可行性分析與需求分析 53.1可行性分析 53.1.1技術(shù)可行性 53.1.2經(jīng)濟(jì)可行性 53.2系統(tǒng)的需要具備的特點(diǎn) 53.3功能結(jié)構(gòu)分析 63.3.1在線音樂網(wǎng)站功能分析 63.4在線音樂網(wǎng)站操作流程描述 73.4.1在線音樂網(wǎng)站功能分析 7第四章在線音樂網(wǎng)站系統(tǒng)設(shè)計(jì) 84.1系統(tǒng)開發(fā)環(huán)境 84.1.1開發(fā)硬件環(huán)境 84.1.2軟件環(huán)境 84.1.3開發(fā)語言 84.1.4數(shù)據(jù)庫(kù) 84.2系統(tǒng)所需數(shù)據(jù)庫(kù)表的設(shè)計(jì) 84.3數(shù)據(jù)庫(kù)E-R圖和功能流程圖 104.3.1數(shù)據(jù)庫(kù)E-R圖 104.3.2歌曲搜索流程圖 104.3.3歌手搜索流程圖 114.3.4歌曲排行榜使用流程圖 11第五章系統(tǒng)實(shí)現(xiàn)與功能展示 135.1網(wǎng)站前端功能實(shí)現(xiàn) 135.1.1網(wǎng)站首頁(yè)模塊功能實(shí)現(xiàn) 135.1.2網(wǎng)站首頁(yè)模塊代碼解析 14第六章系統(tǒng)測(cè)試 236.1功能測(cè)試 236.1.2搜索列表功能測(cè)試 256.2性能測(cè)試 26總結(jié)與展望 27致謝 28參考文獻(xiàn) 29第一章緒論1.1課題的研究背景及意義目前，隨著中國(guó)的進(jìn)步和開放型經(jīng)濟(jì)的到來，在這個(gè)計(jì)算機(jī)技術(shù)和互聯(lián)網(wǎng)飛速發(fā)展的時(shí)代，人們的日常生活也發(fā)生巨大的改變，人們的生活水平提高消費(fèi)水平也提高，但壓力也是隨之而來的提高，所以人們經(jīng)常聽歌解壓，這也正是我研究這個(gè)音樂平臺(tái)的主要原因，由于盈利和版權(quán)問題還有資源的互利，現(xiàn)有幾大音樂巨頭公司，例如QQ音樂，網(wǎng)易云音樂，酷狗音樂，酷我音樂盒等，不同的平臺(tái)有著不同的資源，導(dǎo)致我們現(xiàn)在聽歌需要下載到很多聽歌軟件，而且不同軟件又有不同的功能所以這次選題的意義就是實(shí)現(xiàn)一個(gè)音樂網(wǎng)站基于現(xiàn)在年輕人喜歡的多樣性的集合各軟件優(yōu)點(diǎn)的音樂網(wǎng)站。讓人們?cè)诠ぷ髦袨樯顜頍o盡的歡樂和放松生活的閑暇之余帶來音樂的快樂。1.2國(guó)內(nèi)外研究現(xiàn)狀1.2.1國(guó)內(nèi)研究現(xiàn)狀從目前來看，隨著互聯(lián)網(wǎng)技術(shù)和人們生活水平的提高，當(dāng)人們的溫飽不再是生活中的大部分壓力的時(shí)候，人們開始追求更高質(zhì)量的生活，有的人把精力放在培養(yǎng)自己的身體上，例如健身，養(yǎng)身，運(yùn)動(dòng)。有的人則是追求精神上的更高領(lǐng)域，例如知識(shí)，眼界，音樂等等，作為當(dāng)代大學(xué)生的我來說，我在課余時(shí)間還有閑暇之余十分喜歡聽歌，所以這也是我研究音樂在線網(wǎng)站的一個(gè)重要原因之一。還有一個(gè)重要的原因就是國(guó)內(nèi)聽歌軟件由于幾大音樂軟件巨頭占據(jù)了絕對(duì)的優(yōu)勢(shì)和壟斷地位使得喜歡聽音樂的人需要下載很多聽歌軟件，國(guó)內(nèi)的聽歌軟件由網(wǎng)易于音樂，QQ音樂，酷狗音樂等幾大巨頭占據(jù)，近年來音樂版權(quán)成本增長(zhǎng)明顯，三大唱片公司（環(huán)球音樂，華納音樂，索尼音樂）打包版權(quán)。[1]就比如我來我想聽周杰倫的歌我就要去QQ音樂聽取。如果我想看更多有趣和真實(shí)的評(píng)論我就需要下載網(wǎng)易云音樂，所以對(duì)一個(gè)喜歡聽音樂的人來說，他需要下載好幾個(gè)音樂軟件，且產(chǎn)品同質(zhì)化的現(xiàn)象較為嚴(yán)重，一家公司推出一個(gè)功能另一家公司也立即跟風(fēng)推出，且風(fēng)格極為類似。1.2.2國(guó)外研究現(xiàn)狀國(guó)外的聽歌軟件主要是兩個(gè)，一個(gè)是iTunes音樂商城和Spotify，iTunes是一種網(wǎng)絡(luò)音樂銷售商點(diǎn)，界面整合在iTunes播放軟件中，使得透過網(wǎng)絡(luò)購(gòu)買版權(quán)音樂檔案的機(jī)制變得更便利，iTunes音樂商城最大的特點(diǎn)即是與硬件設(shè)備捆綁，這也離不開蘋果iPod終端本身在設(shè)計(jì)和產(chǎn)品理念上的出眾。[1]Spotify則是使用會(huì)員收費(fèi)制和用戶創(chuàng)造內(nèi)容模式隨著整個(gè)Spotify生態(tài)的不斷發(fā)展壯大，它能夠吸引更多用戶來創(chuàng)造更多內(nèi)容，并形成良性循環(huán)。[1]1.3主要內(nèi)容及安排本文遵循軟件工程方法論進(jìn)行系統(tǒng)分析、總體設(shè)計(jì)、詳細(xì)設(shè)計(jì)和軟件測(cè)試，實(shí)現(xiàn)了在線音樂網(wǎng)站的登錄注冊(cè)，網(wǎng)站首頁(yè)，歌曲推薦，精選歌單，熱門榜單，新歌首發(fā)，熱門電臺(tái)，歌手列表，歌曲排行榜，歌詞，音樂搜索，MV播放等功能。章節(jié)內(nèi)容安排如下：第一章：分析國(guó)內(nèi)外關(guān)于在線音樂網(wǎng)站和聽歌軟件及聽歌APP研究現(xiàn)狀。第二章：對(duì)本文所采用的搭建工具、技術(shù)、環(huán)境以及數(shù)據(jù)庫(kù)進(jìn)行介紹。第三章：進(jìn)行在線音樂網(wǎng)站的需求分析，包括可行性分析、功能結(jié)構(gòu)分析。第四章：系統(tǒng)開發(fā)環(huán)境搭建，數(shù)據(jù)庫(kù)中表設(shè)計(jì)以及系統(tǒng)前后臺(tái)運(yùn)行流程描述。第五章：進(jìn)行系統(tǒng)實(shí)現(xiàn)與展示。第六章：系統(tǒng)測(cè)試。第二章關(guān)鍵技術(shù)介紹2.1Vue.js介紹2.1.1Vue.js的概述和特點(diǎn)Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式\t"/item/Vue.js/_blank"JavaScript框架。與其它大型框架不同的是，Vue.js被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue.js的核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)或既有項(xiàng)目整合。[2]Vue.js的特點(diǎn)：（1）靈活開放：可以把Vue.js當(dāng)做JavaScript，也可以用它的工具來搭建系統(tǒng)，是可以靈活選擇的，所以說Vue.js是靈活開放的。（2）易學(xué)易用：我認(rèn)為Vue.js的核心易學(xué)點(diǎn)是注重關(guān)注視圖層，用戶只需使用簡(jiǎn)單的API將數(shù)據(jù)綁定即可，在有HTMLCSSJavaScript的基礎(chǔ)上，快速上手。[2]（3）性能好，易優(yōu)化：20kbmin+gzip運(yùn)行大小、超快虛擬\t"/item/Vue.js/_blank"DOM、最省心的優(yōu)化。[2]（4）有多種方式實(shí)現(xiàn)過渡效果：在過渡CSS和動(dòng)畫應(yīng)用class，第三方動(dòng)畫庫(kù)如Animate.css，Velocity.js。2.2AXIOS介紹2.2.1AXIOS的概述和特點(diǎn)AXIOS是一個(gè)基于promise的HTTP庫(kù)可以應(yīng)用在瀏覽器和node.js。AXIOS的特點(diǎn)：（1）轉(zhuǎn)換請(qǐng)求數(shù)據(jù)：可通過將相關(guān)的傳遞給AXIOS來發(fā)出請(qǐng)求，例如一個(gè)data作為請(qǐng)求數(shù)據(jù)，則可以對(duì)data進(jìn)行轉(zhuǎn)換處理。（2）響應(yīng)數(shù)據(jù)：對(duì)數(shù)據(jù)進(jìn)行快速響應(yīng)。（3）取消請(qǐng)求：能夠取消請(qǐng)求，例如data取消請(qǐng)求。2.3SASS預(yù)處理器概述和特點(diǎn)2.3.1SASS預(yù)處理器的概述和特點(diǎn)SASS預(yù)處理器是CSS預(yù)處理器的一種。SASS預(yù)處理器添加程序?qū)傩浴２恍枰紤]瀏覽器兼容性。SASS預(yù)處理器的特點(diǎn)：（1）簡(jiǎn)潔：代碼編輯和實(shí)現(xiàn)方面較為簡(jiǎn)潔。（2）適應(yīng)性強(qiáng)：對(duì)配置和環(huán)境的要求不高，在當(dāng)前屬于頻繁使用。（3）可讀性強(qiáng)：代碼及其運(yùn)行十分簡(jiǎn)單，理解起來不困難且代碼賞心悅目。（4）易維護(hù)：易于后期代碼的維護(hù)，以及后期的更新迭代等問題。2.4JavaScriptCSSHTML概述和特點(diǎn)2.4.1HTML的概述和特點(diǎn)HTML(HyperTextMarkupLanguage,超文本標(biāo)記語言)是標(biāo)準(zhǔn)通用標(biāo)記語言下的應(yīng)用。[3]HTML的特點(diǎn)：（1）兼容性好：硬件與軟件間，軟件與軟件間。（2）開放性高：該語言有相當(dāng)多的空間可以去拓展。（3）性能高：效用及其效率高。（4）嵌入型強(qiáng)：更易嵌入，減少軟件間或軟硬件的磨合。2.4.3CSS的概述和特點(diǎn)CSS是CascadingStyleSheets（層疊樣式表）的簡(jiǎn)稱，CSS語言是一種標(biāo)記語言，它不需要編譯，可以直接由瀏覽器執(zhí)行（屬于瀏覽器解釋型語言）[4]CSS的特點(diǎn)：（1）縮短代碼量：在功能一樣情況下，CSS的代碼量會(huì)縮短。（2）提高預(yù)覽速度：因代碼量縮短，故而預(yù)覽速度加快，及響應(yīng)速度加快。（3）易編寫：CSS不需要編譯，相較于其他的來說，是相對(duì)易編寫的。（4）易布局：數(shù)據(jù)段，代碼段。2.4.5JavaScript的概述和特點(diǎn)JavaScript是Net-scape公司推出的一種基于對(duì)象和事件驅(qū)動(dòng)的解釋性編程語言。[5]JavaScript的特點(diǎn)：（1）無需預(yù)編譯：JavaScript無需預(yù)編譯，故而易編寫。（2）可嵌入：更易嵌入，減少軟件間或軟硬件的磨合。（3）自帶基本數(shù)據(jù)：提供能多數(shù)據(jù)，這些數(shù)據(jù)都是可以直接加載的。（4）可實(shí)現(xiàn)交互：可實(shí)現(xiàn)對(duì)象交互。2.5vue-router概述和特點(diǎn)2.5.1vue-router的概述和特點(diǎn)vue-router可以理解為前端路由跳轉(zhuǎn)的管理。vue-router采用的是路徑質(zhì)檢的切換。[6]第三章可行性分析與需求分析3.1可行性分析3.1.1技術(shù)可行性網(wǎng)站搭建和開發(fā)所需要的設(shè)備有電腦、服務(wù)器、還有一些配件等都是現(xiàn)在社會(huì)上常見易得的設(shè)備且價(jià)格也不貴，基本上都能滿足，電腦基本上家家戶戶都有且對(duì)電腦的配置不是很高，所以基本可以滿足需求。開發(fā)系統(tǒng)是windows系統(tǒng)，開發(fā)語言是HTMLCSSSASSJavaScriptVue.jsNode.js。開發(fā)語言是現(xiàn)在常見的語言技術(shù)，是容易理解通俗易懂的，前端使用的開發(fā)語言是HTMLCSSSASSJavaScriptVue.js。Vue.js軟件并不是普通的入侵式前端框架結(jié)構(gòu)資源庫(kù)，在配合其他數(shù)據(jù)庫(kù)的使用過程中，Vue.js軟件能夠給提供龐大的空間。[7]Vue.js是非常靈活且開放的前端框架資源庫(kù)。[8]后端是Node.js。3.1.2經(jīng)濟(jì)可行性本音樂在線網(wǎng)站開發(fā)是基本不需要什么經(jīng)費(fèi)的除了技術(shù)員本身的經(jīng)費(fèi)，數(shù)字技術(shù)代表的高科技日益增多，數(shù)字技術(shù)已顛覆各大錄音大廠，傳統(tǒng)的制作和播放模式將被淘汰。[9]其次我國(guó)唱片市場(chǎng)現(xiàn)狀處于萎靡，銷量見底，傳統(tǒng)唱片銷售鏈斷裂等諸多原因，從而產(chǎn)生許多大廠開始轉(zhuǎn)型數(shù)字音樂。[10]數(shù)字音樂付費(fèi)制度是必然的。[11]該音樂網(wǎng)站的接口是來自各大音樂平臺(tái)公司的開源接口，電腦已成為人們生活中的一部分，故電腦實(shí)際不算是經(jīng)濟(jì)經(jīng)費(fèi)之一。數(shù)字音樂的誕生引發(fā)用戶聽歌習(xí)慣的改變。[11]該音樂在線網(wǎng)站目前是免費(fèi)對(duì)外使用，故而現(xiàn)在是處于無再創(chuàng)價(jià)值的，至于該在線音樂網(wǎng)站的價(jià)值，在于后期完善后可以，打包整合出售給需要且能對(duì)接的上的公司，例如音樂公司，或與歌手的運(yùn)營(yíng)團(tuán)隊(duì)對(duì)接，承接熱搜或購(gòu)買排行榜，例如某明星花錢瀏覽將自己的歌推送到音樂平臺(tái)的排行榜，從而實(shí)現(xiàn)加大自身走紅力度和知名度。2013年中國(guó)網(wǎng)絡(luò)音樂用戶4.5億，收入74.1億，其中在線音樂收入43.6億。[12]可承接小額廣告盈利，該網(wǎng)站不能主要以接廣告為盈利，畢竟這樣的話就脫離了本人創(chuàng)作該音樂平臺(tái)的初衷。3.2系統(tǒng)的需要具備的特點(diǎn)該在線音樂網(wǎng)站是能夠在互聯(lián)網(wǎng)上實(shí)操和運(yùn)行的，能更好的推動(dòng)音樂的發(fā)展和在線音樂網(wǎng)站這一模塊的發(fā)展。該音樂在線網(wǎng)站應(yīng)當(dāng)需要強(qiáng)大的后臺(tái)技術(shù)人員，這樣可以對(duì)歌曲進(jìn)行實(shí)時(shí)的更新和貼合當(dāng)代人的音樂口味，從而使用戶產(chǎn)生對(duì)該軟件的依賴，否則將會(huì)因未更新迭代問題被淘汰。在線音樂網(wǎng)站具有以下特點(diǎn)：（1）實(shí)時(shí)性：因?yàn)樵撛诰€音樂網(wǎng)站是調(diào)用各大平臺(tái)的開源接口，在不侵權(quán)的情況下可以同步跟同其他音樂軟件進(jìn)行實(shí)時(shí)更新。（2）易擴(kuò)展性：該系統(tǒng)提供了一個(gè)新的功能強(qiáng)大的多任務(wù)接口和個(gè)人網(wǎng)站的鏈接，亦可插入第三方。3.3功能結(jié)構(gòu)分析3.3.1在線音樂網(wǎng)站功能分析（1）登錄注冊(cè)：每個(gè)軟件都應(yīng)該的獨(dú)立區(qū)分用戶和保護(hù)用戶使用安全的，所以設(shè)有登錄注冊(cè)功能。（2）歌曲推薦：聽歌軟件或網(wǎng)站都該有的功能之一，因?yàn)椴皇敲總€(gè)用戶都是打開聽歌軟件后只能自己常聽的歌曲，否則的話市面上也不會(huì)有多個(gè)音樂軟件存在，所以這個(gè)是音樂網(wǎng)站必備的功能之一。（3）歌曲搜索功能：對(duì)于用戶來說如果一個(gè)音樂網(wǎng)站沒有搜索功能，這個(gè)音樂網(wǎng)站是存在極大的缺陷的，而且這樣的音樂網(wǎng)站是不能長(zhǎng)久存在的，因?yàn)閷?duì)用戶來說，有時(shí)候用戶也不知道自己要聽的歌曲的全名，所以需要有搜索和索引功能，總不能一首歌想聽缺找不到吧。（4）歌手列表：該功能在市面上的音樂軟件亦是常見的功能之一，多數(shù)時(shí)候與其說用戶在聽歌不如說用戶在聽歌手，例如追星一樣，是用戶喜歡的歌手，那么該歌手的歌是多數(shù)會(huì)被喜歡的，且歌手列表有時(shí)候也可以成為搜索功能的輔助，本人就是有時(shí)候知道一首歌，不記得歌名卻記得歌手，這樣的話就可以，減輕搜索功能的負(fù)擔(dān)，故而是音樂網(wǎng)站必備功能之一。（5）MV播放功能：MV相信對(duì)大家來說就不陌生了，MV是對(duì)歌曲的一種升華和輔助，進(jìn)而使得該歌曲更加的大眾化。（6）歌詞滾動(dòng)：如果說一首歌只有聲音沒有歌詞，那么對(duì)于該歌詞來說是沒有靈魂，例如一些快歌，難歌，沒有歌詞可能用戶理解起來意思會(huì)變味，且沒有歌詞歌曲的音樂網(wǎng)站在這個(gè)時(shí)代不用推出就會(huì)被淘汰。（7）排行榜：排行榜是歌曲和歌手的一個(gè)分水嶺吧，也可以說是各大音樂軟件的盈利點(diǎn)之一，有很多歌手將自己的歌曲買上熱搜，從而達(dá)到盈利，還有就是排行榜亦可以是搜索功能的輔助，多數(shù)時(shí)候在排行榜上的歌要不是路人皆知的歌曲，要么是新歌，所有對(duì)于某些用戶來說只需要點(diǎn)開排行榜無需搜索，從而減輕搜索功能的負(fù)擔(dān)。（8）歌曲評(píng)論功能：評(píng)論功能相信經(jīng)常使用聽歌軟件的用戶來說是不陌生，增加歌曲的可玩性和用戶之間的互動(dòng)性，例如網(wǎng)易云音樂，網(wǎng)易云音樂就是以評(píng)論互動(dòng)功能大火，從而在整個(gè)音樂聽歌軟件市場(chǎng)占有一席之地，評(píng)論功能增加了用戶的交流，一首歌一百個(gè)人聽一百種味道，評(píng)論功能有助提升用戶使用體驗(yàn)。（9）實(shí)時(shí)更新歌曲功能：一個(gè)聽歌軟件一經(jīng)成立不可能一直停留在原有的歌曲止步不前，這樣的話市場(chǎng)份額將會(huì)被慢慢的吞噬，為何各大巨大聽歌軟件可以穩(wěn)固市場(chǎng)份額，因?yàn)楦鬈浖加歇?dú)立簽約的歌手，從而利用歌手捆綁歌迷使用其音樂軟件，從而達(dá)到體量和用戶群體，進(jìn)而進(jìn)行盈利，例如會(huì)員，購(gòu)買專輯等。3.4在線音樂網(wǎng)站操作流程描述3.4.1在線音樂網(wǎng)站功能分析（1）用戶進(jìn)入音樂網(wǎng)站，進(jìn)行登錄注冊(cè)，然后進(jìn)入音樂網(wǎng)站首頁(yè)。（2）跳轉(zhuǎn)到音樂網(wǎng)站首頁(yè)封面，可以看見一個(gè)封面的推薦滾輪，會(huì)有實(shí)時(shí)的滾動(dòng)。（3）下面就是歌手推薦，然后有歌手的頭像，還有歌手名字，點(diǎn)進(jìn)去能看到歌手的歌曲和分類。（4）右邊是排行榜，點(diǎn)擊打開可以看見排行榜歌曲，歌曲是調(diào)用接口實(shí)時(shí)更新的。（5）新歌推薦，點(diǎn)擊進(jìn)去可以看見新歌推薦，新歌推薦也是調(diào)用接口實(shí)時(shí)更新的。（6）用戶可以使用搜索功能進(jìn)行搜索歌曲。（7）點(diǎn)擊歌曲開始聽歌，可以看見歌詞是實(shí)時(shí)滾動(dòng)的。（8）歌曲下面會(huì)有評(píng)論功能。（9）歌曲右邊有些因版權(quán)問題只能看到MV。

第四章在線音樂網(wǎng)站系統(tǒng)設(shè)計(jì)前面對(duì)系統(tǒng)的可行性分析和需求分析等作出了詳細(xì)的分析，本章節(jié)主要是對(duì)在線音樂網(wǎng)站系統(tǒng)的設(shè)計(jì)進(jìn)行詳細(xì)的說明與有關(guān)設(shè)計(jì)。具體介紹本網(wǎng)站的開發(fā)環(huán)境還有環(huán)境的配置，還有借口等進(jìn)行概要設(shè)計(jì)和詳細(xì)的設(shè)計(jì)流程。4.1系統(tǒng)開發(fā)環(huán)境4.1.1開發(fā)硬件環(huán)境處理器：AMDRyzen536006-CoreProcessor已安裝的內(nèi)容（RAM）：16.0GB（此處非最低配置，只是本人實(shí)現(xiàn)在線音樂網(wǎng)站的硬件配置）；4.1.2軟件環(huán)境操作系統(tǒng)：windows10專業(yè)工作站版。（此處非最低配置，windows7亦可適配）4.1.3開發(fā)語言前端使用：HTMLCSSSASSJavaScriptVue.js后端使用：Node.js4.1.4數(shù)據(jù)庫(kù)本音樂在線網(wǎng)站的數(shù)據(jù)庫(kù)是使用MongoDB數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)是分布式文檔存儲(chǔ)數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)的優(yōu)點(diǎn)有以下幾點(diǎn)：（1）高性能。（2）易部署。（3）易使用。4.2系統(tǒng)所需數(shù)據(jù)庫(kù)表的設(shè)計(jì)在線音樂網(wǎng)站數(shù)據(jù)庫(kù)表的設(shè)計(jì)包括字段名、字段說明、各字段的長(zhǎng)度、是否為主鍵、類型、是否為空，以及系統(tǒng)所需數(shù)據(jù)庫(kù)ER圖，具體如下表4-1至表4-6所示:表4-1歌手信息表序號(hào)字段名字段說明長(zhǎng)度主鍵類型是否允許為空1ididVarchar(4)是int否2name歌手信息Varchar(100)否string否表4-2歌曲信息表序號(hào)字段名字段說明長(zhǎng)度主鍵類型是否允許為空1ididVarchar(4)是int否2time歌曲時(shí)長(zhǎng)Varchar(10)否int否3name歌曲名字Varchar(80)否string否4musicInfo歌曲詳情Varchar(90)否string否表4-3搜索信息表序號(hào)字段名字段說明長(zhǎng)度主鍵類型是否允許為空1ididVarchar(4)是int否2NameGS歌手Varchar(16)否string否3NameGM歌名Varchar(80)否string否4NameZJ專輯Varchar(40)否string否表4-4精選歌單信息表序號(hào)字段名字段說明長(zhǎng)度主鍵類型是否允許為空1ididVarchar(4)是int否2GDname歌單列表Varchar(300)否string否3GDbt歌單標(biāo)題Varchar(200)否string否4GDbfl歌單播放量Varchar(10)否string否表4-5熱門榜單信息表序號(hào)字段名字段說明長(zhǎng)度主鍵類型是否允許為空1ididVarchar(4)是int否2RMlb熱門類別Varchar(40)否string否3RMbt熱門標(biāo)題Varchar(40)否string否4RMgq熱門歌曲Varchar(80)否string否表4-6新歌首發(fā)信息表序號(hào)字段名字段說明長(zhǎng)度主鍵類型是否允許為空1ididVarchar(4)是int否2XGdq新歌首發(fā)地區(qū)Varchar(32)否string否3XGgqm新歌首發(fā)歌曲名Varchar(40)否string否4XGgqsc新歌首發(fā)歌曲時(shí)長(zhǎng)Varchar(10)否string否4.3數(shù)據(jù)庫(kù)E-R圖和功能流程圖4.3.1數(shù)據(jù)庫(kù)E-R圖數(shù)據(jù)庫(kù)E-R圖如圖4-1所示：圖4-1數(shù)據(jù)庫(kù)E-R圖4.3.2歌曲搜索流程圖歌曲搜索的具體操作流程如圖4-2所示：圖4-2歌曲搜索流程圖4.3.3歌手搜索流程圖歌手搜索的具體操作如圖4-3所示：圖4-3歌手搜索流程圖4.3.4歌曲排行榜使用流程圖排行榜操作的具體流程如圖4-4所示：圖4-4排行榜流程圖第五章系統(tǒng)實(shí)現(xiàn)與功能展示5.1網(wǎng)站前端功能實(shí)現(xiàn)5.1.1網(wǎng)站首頁(yè)模塊功能實(shí)現(xiàn)在線音樂網(wǎng)站的設(shè)計(jì)包括首頁(yè)、歌手、排行榜、搜索等頁(yè)面，主要功能模塊包括音頻播放功能、音樂搜索功能，其中音樂搜索功能是使用酷狗的搜索模塊，使用其中的搜索引擎，并將數(shù)據(jù)渲染到頁(yè)面，以便播放，播放的同時(shí)，音頻對(duì)應(yīng)的歌詞也能對(duì)應(yīng)渲染到頁(yè)面來。項(xiàng)目設(shè)計(jì)包括主頁(yè)、歌手頁(yè)面、搜索頁(yè)面、排行榜頁(yè)面、音樂播放頁(yè)面、音樂搜索頁(yè)面、MV播放頁(yè)面，具體設(shè)計(jì)效果如下圖5-1至5-4所示：圖5-1在線音樂網(wǎng)站首頁(yè)圖5-2在線音樂網(wǎng)站首頁(yè)圖5-3在線音樂網(wǎng)站首頁(yè)圖5-4在線音樂網(wǎng)站首頁(yè)5.1.2網(wǎng)站首頁(yè)模塊代碼解析（1）導(dǎo)航欄：導(dǎo)航欄的布局設(shè)計(jì)是利用ul>li標(biāo)簽設(shè)計(jì)的，其中的logo是小組利用logo生成軟件生成，然后通過PS軟件調(diào)整圖片大小、分辨率以及其他修改制作成的，然后這里的導(dǎo)航欄我們還在其中添加hover鼠標(biāo)懸浮后產(chǎn)生變色效果，然后通過a標(biāo)簽鏈接實(shí)現(xiàn)路徑的跳轉(zhuǎn)，當(dāng)然，這里還涉及到路由設(shè)計(jì)的問題。具體布局代碼實(shí)現(xiàn)如圖5-5所示：圖5-5導(dǎo)航欄具體代碼實(shí)現(xiàn)（2）輪播圖：輪播圖這里我們利用了elementUI框架，然后模仿主流網(wǎng)站的輪播圖特效實(shí)現(xiàn)的，當(dāng)然，我們沒有添加a標(biāo)簽效果，這里僅僅只是擁有特效的輪播圖。具體布局代碼實(shí)現(xiàn)如圖5-6所示：圖5-6輪播圖具體代碼實(shí)現(xiàn)（3）精選歌單：精選歌單也是利用ul>li的布局，利用浮動(dòng)以及清除浮動(dòng)來實(shí)現(xiàn)這樣的效果，當(dāng)然這里還也同樣使用了hover效果以及a標(biāo)簽鏈接效果。這里的圖片資源我們是從一些主流音樂網(wǎng)站中相關(guān)圖片地址大部分是訪問相關(guān)的API或者下載到本地再重新保存起來的。而這里的圖片資源以及相關(guān)的文本內(nèi)容，我們并非通過布局或者CSS樣式直接添加，而是把相關(guān)圖片資源存在后臺(tái)，然后把文本內(nèi)容利用數(shù)組的知識(shí)存到j(luò)s文件里，在提供API給前端進(jìn)行請(qǐng)求。如下，然后我們?cè)倮肑S再把它的文本內(nèi)容以及圖片鏈接最終渲染到頁(yè)面上，具體布局代碼實(shí)現(xiàn)如圖5-7所示：圖5-7精選歌單具體代碼實(shí)現(xiàn)（4）熱門榜單：熱門榜單也同上面一樣，布局原理以及效果都是相同的，圖片資源以及文本內(nèi)容也是通過js將本地資源渲染上的。這里具體實(shí)現(xiàn)代碼由于與上面類似。（5）新歌首發(fā)：新歌首發(fā)實(shí)現(xiàn)界面如圖5-8所示，新歌首發(fā)的文本內(nèi)容包括名稱，區(qū)域，以及時(shí)間，都是通過利用本地資源渲染到網(wǎng)頁(yè)上的，具體代碼實(shí)現(xiàn)如圖5-9所示：圖5-8新歌首發(fā)界面實(shí)現(xiàn)圖5-9新歌首發(fā)界面實(shí)現(xiàn)（6）熱門榜單：同上熱門榜單的布局類似，代碼以及方法相近，所以這里不多做解釋。（7）熱門電臺(tái)：熱門電臺(tái)也是利用u1＞li實(shí)現(xiàn)布局，并且采用彈性布局，還有添加hover效果，由于這方面的技術(shù)不是本人強(qiáng)項(xiàng)，所以這里沒有對(duì)熱門電臺(tái)跳轉(zhuǎn)的頁(yè)面做太多處理，這里也相當(dāng)于靜態(tài)頁(yè)面，具體界面如圖5-10所示：圖5-10新歌首發(fā)界面實(shí)現(xiàn)（8）熱門歌手：熱門歌手同樣是通過后臺(tái)提供API接口，然后前端再進(jìn)行訪問得到歌手信息，最后在渲染出來，顯示在頁(yè)面上，顯示效果如圖5-11所示：圖5-11新歌首發(fā)界面實(shí)現(xiàn)（9）排行榜頁(yè)面：排行榜頁(yè)面是通過API進(jìn)行請(qǐng)問訪問得到數(shù)據(jù)進(jìn)行渲染的，包括這里的名稱和時(shí)間，排行榜頁(yè)面沒有跳轉(zhuǎn)功能，因?yàn)檫@里的歌曲不一定能很好的播放，而且項(xiàng)目中有搜索功能，所以完全可以通過搜索功能進(jìn)去找到該歌曲并播放，具體界面如圖5-12所示，具體排行榜代碼實(shí)現(xiàn)功能如圖5-13所示：圖5-12排行榜界面實(shí)現(xiàn)圖5-13排行榜界面具體代碼展示（10）歌曲搜索頁(yè)面：搜索功能是利用的酷狗的搜索引擎，可以搜索歌曲，歌手，專輯等關(guān)鍵字對(duì)應(yīng)的歌曲，將其相對(duì)應(yīng)的文本內(nèi)容渲染到搜索框下面已經(jīng)設(shè)計(jì)好的列表里，這里通過搜索獲取的歌曲列表的動(dòng)態(tài)渲染出來的，具體實(shí)現(xiàn)界面如圖5-14所示，歌曲搜索具體代碼如圖5-15所示：圖5-14歌曲搜索界面實(shí)現(xiàn)圖5-15歌曲搜索具體代碼展示（11）音樂播放頁(yè)面：音樂播放頁(yè)面比較簡(jiǎn)潔，主要是主打簡(jiǎn)約風(fēng)格，支持目前播放器的所有特征，同時(shí)還可以進(jìn)行列表播放，音樂播放頁(yè)面如圖5-16所示：圖5-16音樂播放頁(yè)面（12）MV播放頁(yè)面：MV播放界面相對(duì)來說比較簡(jiǎn)陋，麻雀雖小五臟俱全，因?yàn)橘Y源都是訪問酷狗后臺(tái)的API，所有會(huì)有版權(quán)和部分原因的限制，包括跨域，403請(qǐng)求被拒等，MV播放頁(yè)面如圖5-17所示：圖5-17MV播放頁(yè)面（13）歌手頁(yè)面：首先這里的圖片資源和名稱文本內(nèi)同是通過JS從QQ音樂中獲取的，而我們這里列表是只了渲染五行六列，共三十個(gè)，通過分類索引我們也可以進(jìn)行一個(gè)分類，不過這里也最多只能顯示30個(gè)，這里的歌手列表雖然是通過動(dòng)態(tài)渲染，但是沒有鏈接效果的，所以基本上也只能算是靜態(tài)頁(yè)面。而這里的布局也是通過ul>li實(shí)現(xiàn)的。歌手頁(yè)面如圖5-18所示：圖5-18歌手頁(yè)面實(shí)現(xiàn)

第六章系統(tǒng)測(cè)試6.1功能測(cè)試功能測(cè)試就是對(duì)已有的功能，進(jìn)行功能測(cè)試，并達(dá)到預(yù)期效果，如未達(dá)到預(yù)期效果則視為系統(tǒng)功能測(cè)試不通過，則該功能視為無用功能，且功能測(cè)試能夠大大加強(qiáng)該在線音樂網(wǎng)站的功能完善和提升用戶體驗(yàn)，并從中得到反饋，從而使得該音樂網(wǎng)站更加的貼合市場(chǎng)貼合現(xiàn)實(shí)，系統(tǒng)功能測(cè)試結(jié)果如表6-1所示：表6-1系統(tǒng)功能測(cè)試結(jié)果用例描述測(cè)試步驟測(cè)試結(jié)果真實(shí)結(jié)果導(dǎo)航欄點(diǎn)擊導(dǎo)航欄，選中標(biāo)簽允許點(diǎn)擊且完成對(duì)應(yīng)指定的跳轉(zhuǎn)允許點(diǎn)擊且完成對(duì)應(yīng)指定的跳轉(zhuǎn)輪播圖選中輪播圖中的圖片，選取任一圖片進(jìn)行點(diǎn)擊輪播圖正常運(yùn)轉(zhuǎn)，且點(diǎn)擊輪播圖跳轉(zhuǎn)到相應(yīng)界面輪播圖正常運(yùn)轉(zhuǎn)，且點(diǎn)擊輪播圖跳轉(zhuǎn)到相應(yīng)界面精選歌單點(diǎn)擊精選歌單功能，選中精選歌單中的歌曲，點(diǎn)擊歌曲播放精選歌單功能允許點(diǎn)擊且點(diǎn)擊歌單中的歌曲歌曲允許播放精選歌單功能允許點(diǎn)擊且點(diǎn)擊歌單中的歌曲歌曲允許播放熱門榜單點(diǎn)擊熱門榜單功能，跳轉(zhuǎn)至熱門榜單頁(yè)面，點(diǎn)擊熱門榜單歌曲，點(diǎn)擊歌曲播放熱門榜單功能允許點(diǎn)擊且點(diǎn)擊榜單中的歌曲允許播放熱門榜單功能允許點(diǎn)擊且點(diǎn)擊榜單中的歌曲允許播放新歌首發(fā)點(diǎn)擊新歌首發(fā)功能，跳轉(zhuǎn)至新歌首發(fā)頁(yè)面，點(diǎn)擊新歌首發(fā)歌曲，點(diǎn)擊歌曲播放新歌首發(fā)功能允許點(diǎn)擊且點(diǎn)擊新歌首發(fā)中的歌曲允許播放新歌首發(fā)功能允許點(diǎn)擊且點(diǎn)擊新歌首發(fā)中的歌曲允許播放熱門MV點(diǎn)擊熱門MV功能，跳轉(zhuǎn)至MV界面，選中MV，點(diǎn)擊播放熱門MV功能允許點(diǎn)擊且MV播放正常，視頻音頻同時(shí)輸出熱門MV功能允許點(diǎn)擊且MV播放正常，視頻音頻同時(shí)輸出熱門電臺(tái)點(diǎn)擊熱門電臺(tái)功能，跳轉(zhuǎn)至熱門電臺(tái)界面，選擇電臺(tái)，播放電臺(tái)熱門電臺(tái)功能允許點(diǎn)擊且點(diǎn)擊后電臺(tái)音樂允許播放熱門電臺(tái)功能允許點(diǎn)擊且點(diǎn)擊后電臺(tái)音樂允許播放熱門歌手點(diǎn)擊熱門歌手界面，跳轉(zhuǎn)至熱門歌手界面，選擇熱門歌手中的歌手頭像，跳轉(zhuǎn)至歌手歌曲，點(diǎn)擊歌曲播放熱門歌手功能允許點(diǎn)擊且點(diǎn)擊熱門歌手列表跳轉(zhuǎn)后，點(diǎn)擊歌曲，允許播放熱門歌手功能允許點(diǎn)擊且點(diǎn)擊熱門歌手列表跳轉(zhuǎn)后，點(diǎn)擊歌曲，允許播放歌手界面點(diǎn)擊歌手界面跳轉(zhuǎn)至歌手列表，點(diǎn)擊歌手頭像，點(diǎn)擊歌曲播放歌手界面允許點(diǎn)擊且歌手頭像允許點(diǎn)擊，跳轉(zhuǎn)后點(diǎn)擊歌曲，歌曲播放完成歌手界面允許點(diǎn)擊且歌手頭像允許點(diǎn)擊，跳轉(zhuǎn)后點(diǎn)擊歌曲，歌曲播放完成排行榜界面點(diǎn)擊排行榜界面跳轉(zhuǎn)至排行榜界面，點(diǎn)擊排行榜歌曲，點(diǎn)擊歌曲播放排行榜界面允許點(diǎn)擊且排行榜界面歌曲允許點(diǎn)擊播放，音頻輸出完成排行榜界面允許點(diǎn)擊且排行榜界面歌曲允許點(diǎn)擊播放，音頻輸出完成

6.1.2搜索列表功能測(cè)試搜索功能測(cè)試主要是對(duì)搜索功能的搜索是否為空、字母搜索、模糊搜索、精確搜索、數(shù)字搜索、還有刷新功能等，搜索列表功能測(cè)試結(jié)果如表6-2所示：表6-2搜索列表功能測(cè)試結(jié)果搜索操作測(cè)試步驟預(yù)期結(jié)果真實(shí)結(jié)果空點(diǎn)擊搜索框，不輸入字符并進(jìn)行搜索索引搜索不能為空，且彈出不能為空窗口搜索不能為空，且彈出不能為空窗口字母點(diǎn)擊搜索框，輸入字母并進(jìn)行搜索索引，跳轉(zhuǎn)至相應(yīng)的歌曲界面可以進(jìn)行字母搜索，并進(jìn)行索引，跳轉(zhuǎn)至相應(yīng)界面可以進(jìn)行字母搜索，并進(jìn)行索引，跳轉(zhuǎn)至相應(yīng)界面模糊點(diǎn)擊搜索框，輸入相近字或錯(cuò)字并進(jìn)行搜索索引，跳轉(zhuǎn)至相應(yīng)界面進(jìn)行相近字、或部分錯(cuò)字搜索，且搜索成功并給出歌曲進(jìn)行相近字、或部分錯(cuò)字搜索，且搜索成功并給出歌曲精確點(diǎn)擊搜索框，輸入準(zhǔn)確的歌曲名，搜索歌曲，點(diǎn)擊播放輸入準(zhǔn)確的歌曲名，搜索歌曲，點(diǎn)擊播放輸入準(zhǔn)確的歌曲名，搜索歌曲，點(diǎn)擊播放數(shù)字點(diǎn)擊搜索框，輸入數(shù)字，搜索歌曲，點(diǎn)擊播放輸入數(shù)字，搜索歌曲，點(diǎn)擊播放輸入數(shù)字，搜索歌曲，點(diǎn)擊播放特殊字符點(diǎn)擊搜索框，輸入特殊字符，進(jìn)行搜索索引部分歌曲輸入特殊字符，顯示搜索輸入不正確部分歌曲輸入特殊字符，顯示搜索輸入不正確數(shù)字+字母點(diǎn)擊搜索框，輸入數(shù)字加字母，進(jìn)行搜索索引輸入數(shù)字加字母，搜索歌曲，點(diǎn)擊播放，輸出音頻輸入數(shù)字加字母，搜索歌曲，點(diǎn)擊播放，輸出音頻數(shù)字+中文點(diǎn)擊搜索框，輸入數(shù)字加中文，進(jìn)行搜索索引輸入數(shù)字加中文，搜索歌曲，點(diǎn)擊播放，輸出音頻輸入數(shù)字加中文，搜索歌曲，點(diǎn)擊播放，輸出音頻中文+字母點(diǎn)擊搜索框，輸入中文加字母，進(jìn)行搜索索引輸入中文加字母，搜索歌曲，點(diǎn)擊播放，輸出音頻輸入中文加字母，搜索歌曲，點(diǎn)擊播放，輸出音頻6.2性能測(cè)試性能測(cè)試是對(duì)一個(gè)完整的系統(tǒng)的最低要求，如果性能測(cè)試不能通過，那么該系統(tǒng)是一個(gè)較為落后的系統(tǒng)，且系統(tǒng)響應(yīng)如果超時(shí)則該系統(tǒng)則是有缺陷的，結(jié)果如表6-3所示：表6-3系統(tǒng)性能測(cè)試結(jié)果測(cè)試項(xiàng)預(yù)期結(jié)果結(jié)果系統(tǒng)響應(yīng)系統(tǒng)在10s內(nèi)可以進(jìn)行各項(xiàng)功能響應(yīng)完成數(shù)據(jù)庫(kù)連接可以正常連接MongoDB數(shù)據(jù)庫(kù)完成API接口直接訪問音樂軟件官網(wǎng)的API接口完成跨域成功解決跨域問題完成

總結(jié)與展望通過對(duì)音樂在線網(wǎng)站的開發(fā)，讓我充分的了解音樂的強(qiáng)大，查閱了很多資料，詢問了很多關(guān)于技術(shù)方面的問題，還有對(duì)自身的技術(shù)方面的實(shí)力提升了不少，讓我在就業(yè)方面增加了自己的籌碼，對(duì)相關(guān)知識(shí)有了飛躍的長(zhǎng)進(jìn)，以前都是按照老師們的發(fā)布的任務(wù)去完成性的完成作業(yè)，這次的畢業(yè)設(shè)計(jì)讓我在技術(shù)的海洋學(xué)會(huì)了游泳，也讓我對(duì)前路充滿希望，對(duì)相關(guān)技術(shù)有了更多的了解和鞏固大學(xué)的知識(shí)