第第頁基于Node-js的在線音樂網站設計與實現目錄TOC\o"1-3"\h\u82391緒論 6182921.1選題背景與意義 6131951.2國內外現狀 6103022系統(tǒng)的相關技術 7171962.1Vue.js框架 7234212.2MySQL數據庫 868292.3Node.js 8149512.4ElementUI 8145002.5Bootstrap 8250823需求分析 8239233.1產品的功能模塊 937243.2外部接口需求 9130323.2.1用戶界面 930797包括以下特征： 9175073.2.3通訊接口 10123563.3功能接口 10198163.3.3用例說明 1382113.3.4業(yè)務流程介紹 1611493.4數據流設計 19291673.4.1數據流圖 1924933.5輸入/輸出 21208183.6其它需求 22325773.6.1安全措施需求 2246983.6.2安全性需求 23167813.6.3性能需求 23319793.6.4軟件質量屬性 23104004系統(tǒng)設計 2487144.1系統(tǒng)設計 24159654.1.1系統(tǒng)功能層次設計 255404如圖4.1所示： 25321054.1.3常見bug設計 26286354.2設計原則 279354.3技術設計 27325844.3.2系統(tǒng)開發(fā)技術 27158764.3.3技術架構設計 28104714.4數據庫設計 28325574.4.1數據庫表單匯總 28212434.4.2單個表單信息 29200915系統(tǒng)實現 33115045.1文件目錄 33148335.2前臺模塊設計 34226545.2.1登錄功能 34123125.2.3修改密碼功能 35173395.3管理員模塊 36237885.3.2歌手管理 38273255.3.3MV信息管理 39297135.3.4專輯信息管理 40171365.3.5用戶信息管理 41195065.4前端模塊 41275185.4.1歌曲模塊 41180045.4.2MV模塊 4535395.4.3歌手模塊 47268225.4.4專輯模塊 49223465.4.5個人化設置 5147605.4.6購買會員管理 52320776系統(tǒng)測試 5450546.1測試目的 5419026.3黑盒測試 5459566.4測試結果分析 5514143參考文獻 561緒論1.1選題背景與意義ResearchshowsthattheinfluenceofmusiconpeopleisnotonlyemotionalREF_Ref10240\w\h[1].音樂是一種藝術，可以體現人類在現實生活中的情緒變化。同時也可以調節(jié)我們的心情、我們的生活，同時也是我們精神的家園。不同類型的音樂帶給人們的感覺是不同的。莊嚴的音樂可讓人們感覺到穩(wěn)重，輕柔的音樂可以人們感覺到放松，輕松活躍的音樂可以讓人們放松。當你急噪不安時，音樂可以給你一份鎮(zhèn)定；當你憂傷感懷時，音樂可以給你一份笑容；當你傷心沮喪時，音樂可以給你一份鼓舞。甚至我們在同一的時間，同一的地點聽同一首的歌都可能會有不同的感覺和效果。Alargenumberoftheoriesandexperimentshaveshownthatmusicplayspositiveeffectonchildren’sgrowthREF_Ref16363\w\h[2].現在很多音樂可以一夜之間就大火起來，被很多人傳唱，比如紅玫瑰與白玫瑰，綠色等等。隨著短視頻的流行，一些bgm隨之流行大火起來。而音樂形式也巧然改變了，以前人們極力搶購的唱片到現在的數字專輯等等。隨著互聯(lián)網的出現，音樂傳播速度有所提高，因此，音樂被給予了時效性，但同時音樂也被賦予了的持久性。然而音樂網站的出現正好兼顧了以上兩個方面。1.2國內外現狀 由于新冠疫情，中國音樂線下業(yè)務遭遇了前所未有的經營風險。但是，卻為在線音樂行業(yè)缺提供了非常好的發(fā)展方向。自打數字音樂時代的到來，音樂線上行業(yè)開啟了新的篇章。隨著5G、AI等技術的發(fā)展，音樂行業(yè)的各個業(yè)務與互聯(lián)網新技術進行打融合，在各個平臺上蓬勃發(fā)展，比如今年的線上演唱會，跨越了地區(qū)的限制，很多粉絲可以與idol進行互動；很多主播選擇與3D虛擬形象一起直播，更是賺足了眼球，吸引了更多粉絲前來觀看。中國在線音樂行業(yè)發(fā)展趨勢分析：1、隨著云Live的變化，有望擴大在線音樂市場規(guī)模REF_Ref16699\w\h[3]2、科技助推在線音樂行業(yè)深入發(fā)展數字化3、科技賦能在線音樂行業(yè)持續(xù)正版化4、逐步轉變運營模式1.3研究意義“音樂網站”的研究在學術界較為匱乏,仍有較大研究空間REF_Ref1572\w\h[4]。1.4文章組織結構 本文主要講述了開發(fā)在線音樂網站時的設計思路、結構組成、功能模塊，借助數據庫表格、功能流程圖、需求分析圖等詳盡描述開發(fā)思路。各章節(jié)，詳細地介紹了系統(tǒng)所使用的相關技術與知識，系統(tǒng)需求分析，數據庫設計，系統(tǒng)總體設計等REF_Ref16921\w\h[5]。該網站設計分為有前端界面和后端api。后端接口由Node.js+Mysql完成，前端框架以Vue.js框架為主，element-UI配合來完成前端代碼對界面進行設計。由于Node.js具有單線程的特點，故而本系統(tǒng)的部署也是決定系統(tǒng)性能的關鍵因素REF_Ref17104\w\h[6]。2系統(tǒng)的相關技術本系統(tǒng)是由Node.js框架（后端語言），MySQL（數據庫），Vue.js（前端框架）組成的。2.1Vue.js框架可以直接復用相關模塊或者在模塊的基礎上進行二次開發(fā),具有較好的可擴展性REF_Ref17176\w\h[7]。Vue.js一個方便用戶構建界面的漸進式前端框架REF_Ref17339\w\h[8]。Vue.js的核心是單純地關注圖層，因此，快速上手是他的核心優(yōu)勢。2.2MySQL數據庫 一種關系型數據庫管理系統(tǒng)，可以將數據保存在不同的表中。因此增加了速度并提高了靈活性，基于此特性，MySQL目前是最受中小企業(yè)歡迎的數據庫。2.3Node.js 一個完全異步的I/O模型。一定程度上提高了web服務的并發(fā)性?？梢詭椭褂谜吖?jié)約很多操作，使用者不用做less/scss的編譯，es版本之間的轉換，甚至是js代碼的壓縮合并等等。2.4ElementUI目前可以說是最流行的Vue.js框架之一。是有餓了么前端團隊開源維護的，擁有很大的用戶量。2.5Bootstrap Bootstrap框架技術使Twitter工程師MARKOTTO和JacobThornton為了提高Twitter內部的分析和管理能力而開發(fā)的一套前端工具集，并且使之開源REF_Ref17431\w\h[9]?；贖TML、CSS、JavaScript的前端開發(fā)框架，提高用戶開發(fā)web服務的速度。支持響應式布局。另外,由于bootstrap的出現,解決了以前的命名過程中多次出現、毫無意義、不規(guī)范;頁面錯亂、不和諧等問題。3需求分析該章節(jié)中，詳細描述了網站的功能、界面、接口、需求匯總等等。盡最大程度上，為用戶提供該網站可以解決的問題。用戶在閱讀時，可以對整個網站有個整體的印象。該網站的使用者范圍較廣，因此，采用了表格、UML圖、需求匯總圖等方式，對該網站進行一個更為仔細地需求描述。就后續(xù)研發(fā)進度而言，其他開發(fā)人員可以閱讀該文檔，可以了解該網站的功能需求、功能模塊，更快捷地上手開發(fā)，加快研發(fā)進度，提高研發(fā)質量。該章詳述了設計測試用例的依據和網站實現的基礎即系統(tǒng)需求和系統(tǒng)規(guī)格。3.1產品的功能模塊 該網站共分為7個功能模塊：登錄模塊，歌曲模塊、個性化模塊、歌手模塊、MV模塊、專輯模塊、管理員模塊。3.2外部接口需求3.2.1用戶界面包括以下特征：（1）網站顏色走簡約風，以藍色、白色作為基準。（2）背景顏色為白色(#fff)，提示字體顏色為淺藍色(#4eb5cb)，提示信息更為明顯；（3）定義快捷鍵，提高效率；（4）錯誤信息提示應該簡潔，明了、醒目，使用戶更快理解錯誤信息；3.2.2開發(fā)設備與系統(tǒng)（1）在win10系統(tǒng)的電腦上進行開發(fā)（2）使用Vscode軟件進行代碼的編寫（3）用Mysql，Native連接數據庫進行前后端的交互（4）使用json數據格式進行接口的數據傳送（5）使用postman測試后端接口（6）在Google瀏覽器進行網頁測試，f12調試前端（7）本網站使用以Node.js的后臺服務端提供的API包括數據庫的CRUD（增刪改查）操作和前后端數據流的傳遞。3.2.3通訊接口該部分講述的是與使用該網站的通訊功能相聯(lián)系的。 （1）在Google/百度/360瀏覽器上使用該網站，http://localhost:8080/#/（2）使用json來進行前后端數據的傳送；3.3功能接口在此模塊中，梳理功能需求，對其表明優(yōu)先級，以此進行研發(fā)，按照優(yōu)先級來開發(fā)，目標更明確，進度更快。首先，先對優(yōu)先級進行劃分，同一水準線。如下表：表3-1優(yōu)先級劃分表編號程度注釋SSS高重要程度最高，需放在第一優(yōu)先位置上完成，而且在完成時必須保障其研發(fā)質量，時間緊任務重SS中重要程度不可忽視，需要在規(guī)定時間內完成，且完成度具有一定水準S低重要程度一般，不必優(yōu)先完成，但是需要完成3.3.2需求匯總表表3-2需求匯總表編號名稱需求描述所屬模塊優(yōu)先級G1-1注冊用戶填入新的賬號密碼登錄模塊SS編號名稱需求描述所屬模塊優(yōu)先級G1-2忘記密碼當用戶點擊忘記密碼按鈕，進入相應界面，根據相關提示找回密碼。登錄模塊SSSG1-3用戶登錄輸入已存在的賬號和密碼進入系統(tǒng)登錄模塊SSSG2-1播放音樂用戶點擊，播放音樂歌曲模塊SSSG2-2切換歌曲用戶點擊或者，切換歌曲歌曲模塊SSG2-3歌曲收藏用戶點擊收藏按鈕，可以對該歌曲進行收藏/取消收藏歌曲模塊SSG2-4搜索歌曲用戶在搜索輸入框內，填入歌曲名字關鍵字，顯示相匹配的歌曲歌曲模塊SSSG2-5查看所有歌曲用戶查看所有音樂列表歌曲模塊SSG2-6下載音樂會員用戶可以下載該音樂歌曲模塊SSSG2-7熱門推薦根據歌曲播放量，對用戶進行推送播放量高的歌曲歌曲模塊SSG3-1我的收藏用戶可以查看已收藏的歌曲個性化模塊SSSG3-2個人信息用戶可以查看并修改個性化設置個性化模塊SSSG3-3購買會員用戶選擇購買會員，可以進行音樂和MV的下載個性化模塊SSG3-4查看已聽過音樂用戶可以查看自己聽過的歌曲個性化模塊SSSG4-1播放MV用戶點擊MV，跳轉到MU播放界面MV模塊SSSG4-2MV收藏用戶點擊收藏按鈕，收藏/取消收藏MVMV模塊SSG4-3搜索MV用戶搜索MV名字關鍵字，顯示匹配的MVMV模塊SSSG4-4查看全部MV用戶查看所有MV列表MV模塊SSG4-5下載MV會員用戶可以下載MVMV模塊SSSG5-1搜索歌手用戶搜索歌手名字關鍵字，顯示匹配的歌手歌手模塊SSSG5-2查看某個歌手信息用戶可以查看某個歌手的信息（名字，性別，地區(qū)，簡介，歌曲，專輯，mv）歌手模塊SSG5-3查看所有歌手用戶可以查看歌手列表歌手模塊SSG5-4關注歌手用戶可以點擊關注按鈕，關注/取消關注歌手歌手模塊SSG6-1搜索專輯用戶搜索專輯名字關鍵字，顯示匹配的專輯專輯模塊SSSG6-2查看某個專輯信息用戶可以查看某個專輯的信息（名字，簡介，歌手，包含的專輯和mv）專輯模塊SSG6-3查看所有專輯用戶可以查看歌手列表專輯模塊SSG7-1查看所有用戶管理員可以查看所有已注冊用戶信息管理員模塊SSSG7-2查看所有音樂信息管理員可以查看在庫的所有歌曲信息管理員模塊SSSG7-3查看所有MV管理員可以查看所有MV信息管理員模塊SSSG7-4查看所有歌手管理員可以查看所有歌手信息管理員模塊SSSG7-5查看所有專輯管理員可以查看所有專輯信息管理員信息SSSG7-7查看所有會員用戶管理員可以查看所有會員用戶信息（賬號、個人信息）管理員模塊SSSG7-8刪除歌手管理員可以刪除某個歌手信息管理員模塊SSSG7-9刪除歌曲管理員可以刪除某首歌曲信息管理員模塊SSSG7-10刪除MV管理員可以刪除某個MV信息管理員模塊SSSG7-11刪除用戶管理員可以刪除某個用戶管理員模塊SSSG7-12刪除專輯管理員可以刪除某個專輯信息管理員模塊SSSG7-13添加歌手管理員可以添加某個歌手信息管理員模塊SSSG7-14添加歌曲管理員可以添加某首歌曲信息管理員模塊SSSG7-15添加MV管理員可以添加某個MV信息管理員模塊SSSG7-16添加專輯管理員可以添加某張專輯信息管理員模塊SSS3.3.3用例說明根據使用者權限以及會員度的不同，可以分為游客、普通用戶（即已登陸的用戶）、VIP用戶和管理員用戶。游客，普通用戶，VIP用戶所能使用的功能都屬于前端模塊中的功能。管理員用戶所使用的功能屬于管理員模塊下。如下圖所示：圖3.1游客用例圖圖3.2登錄用戶用例圖圖3.3會員用戶用例圖圖3.4管理員用戶用例圖3.3.4業(yè)務流程介紹該部分對具有代表性的一部分功能進行業(yè)務方面流程性的介紹。登錄流程如圖3.5所示：用戶登錄后，后臺需要進行判斷，正確后，方可進入網站。圖3.5登錄流程圖修改（忘記）密碼流程，如圖3.6所示：用戶填入賬號和新的密碼后，后臺需要進行判斷，正確后，方可登錄。圖3.6忘記（修改）密碼流程圖（3）搜索音樂流程，如圖3.7所示：圖3.7搜索音樂流程圖3.4數據流設計3.4.1數據流圖對IPO圖表中的數據進行分析，在這個基礎上加上該網站的需求匯總和功能模塊，可得到如下結論?？梢垣@得使用該網站的用戶與在線音樂網站之間的數據流向，如圖所示：圖3.8頂層數據流圖（2）可以獲得網站使用人群（用戶和管理員）在其各自使用范圍下的數據傳送。如圖所示：圖3.90層數據流圖（3）按照該網站的6個功能模塊劃分，可以獲得每個模塊下的數據流向，如圖3.10所示：圖3.101層數據流圖3.5輸入/輸出該輸入/輸出部分對各個功能部分進行數據分析，詳情如下：（1）登錄功能，如下圖3.11所示：圖3.11登錄IPO圖（2）播放歌曲功能，如下圖3.12所示圖3.12播放歌曲IPO圖（3）購買會員功能，如下圖3.13：圖3.13購買會員IPO圖（4）查找歌曲功能，如下圖3.13所示：圖3.15查找歌曲IPO圖3.6其它需求3.6.1安全措施需求（1）管理員用戶或者非游客使用該系統(tǒng)時，必須通過登陸驗證，方可進入相聯(lián)系的系統(tǒng)，對系統(tǒng)或者個人進行操作。（2）用戶必須登錄通過后，才可以查看有關用戶個人的功能（3）在用戶購買會員時，必須保障其系統(tǒng)安全，不泄露用戶銀行卡賬號、密碼等有關信息。（4）功能運轉起來之后，必須是閉環(huán)的。3.6.2安全性需求（1）保證網站不被有心人侵入，泄露用戶信息（2）功能根據用戶等級進行區(qū)分，游客不可以查看個人信息，VIP用戶可以進行下載歌曲和MV。3.6.3性能需求（1）確保網站在使用時，不出現崩潰、網頁不黑屏的問題，系統(tǒng)可以正常運行。（2）用戶使用網站時，不會被泄露個人信息，比如手機號，家庭住址，賬號，密碼等。（3）網站設計應該簡單、方便，讓不同的適用人群都可以知道怎么使用。3.6.4軟件質量屬性本網站適用人群范圍較廣，要求如下：用戶應該方便上手操作，不需要進行大量冗余的引導。用戶在使用該網站時，應該具有較高的體驗感，不要因為功能過多，不知道如何下手操作。

4系統(tǒng)設計該網站的系統(tǒng)設計部分是為了對功能進行劃分，為后續(xù)編碼部門做基礎。包括產品結構、數據庫構成、報錯的處理方法等。4.1系統(tǒng)設計4.1.1系統(tǒng)功能層次設計如圖4.1所示：圖4.1系統(tǒng)功能層次圖4.1.2網站頁面展示設計按照VIP和登錄區(qū)分，使用人群分為游客、登錄用戶和VIP用戶，登錄用戶功能會比游客多。 作為一個音樂網站，界面風格應當簡約，背景顏色不應超過兩個，采用#fff，#4eb5cb。另外，對于信息的提示應該醒目，讓用戶可以直接獲取到想要的信息。此外，由于受眾范圍較廣，應該遵守界面友好性；（2）接口設計 服務端提供該網站前后端數據的通信的后臺接口。該網站的使用需要配合鍵盤和鼠標等硬件。4.1.3常見bug設計（1）用戶登錄時，信息填錯，系統(tǒng)需要給出錯誤提示（賬號不存在或密碼錯誤），讓用戶重新輸入；此bug為輸入型錯誤，是用戶自身在造成的，賬號或密碼出錯或者賬號不存在。（2）用戶播放音樂時，音樂加載不出來，系統(tǒng)需要出現loading狀態(tài)，或者提示信息，讓用戶重刷頁面；此bug為系統(tǒng)錯誤，是系統(tǒng)造成的，后臺接口或數據庫報錯。（3）用戶刷新網頁時，網頁響應超時，系統(tǒng)給出錯誤提示，提醒用戶重連網絡；此bug為網絡錯誤，是系統(tǒng)或者用戶造成的，系未連接或者用戶無網絡。（4）用戶在操作某個數據時，未響應，系統(tǒng)系統(tǒng)給出錯誤提示；此bug為系統(tǒng)錯誤，是系統(tǒng)造成的，后臺接口或數據庫報錯。4.2設計原則（1）命名規(guī)則：駝峰命名規(guī)則。（2）可重用性：遵循DRY原則（代表“不要重復自己”，這是軟件開發(fā)的一個基本原則，目的是減少信息的重復）REF_Ref18681\w\h[10]。（3）高內聚性：子系統(tǒng)的內聚性會提高軟件的可重用性和可維護性REF_Ref18900\w\h[11]。（4）用戶網頁設計原則：背景顏色不應太多，應該簡潔了當，讓用戶直接地獲取想要的信息。（5）數據庫設計原則：減少數據冗余現象，遵守Mysql使用規(guī)范。4.3技術設計4.3.1技術實施方案（1）采用json數據進行前后端數據傳送（2）采用Mysql數據庫（3）為保障網站技術支持，采用具有可靠性、成熟的開發(fā)技術。4.3.2系統(tǒng)開發(fā)技術（1）后端使用Node.js，版本號為14.16.1（2）前端使用Vue.js，版本號為2.9.2（3）數據庫使用Mysql，版本號為.3技術架構設計根據現有技術，分開設計網站前端界面與管理員后臺界面。以Vue.js、html5、js、elementUI為主，如下圖：圖4.2系統(tǒng)技術架構圖4.4數據庫設計4.4.1數據庫表單匯總共使用了11個數據表，具體如下：user表，即用戶表，表里信息為已成功注冊用戶信息music表，即音樂表，表里信息為歌曲信息collect表，即音樂收藏表，表里信息為收藏音樂信息

singer表，即歌手表，表里信息為歌手信息playlist表，即專輯表，表里信息為已成功注冊專輯信息listened表，即歷史音樂表，表里信息為歌單信息manager表，即管理員表，表里信息為管理員信息Mvlist表，即MV表，表里信息為MV信息Expire表，即VIP用戶表，表里信息為會員用戶信息userInfo表，即個性化設置表，表里信息為用戶個人化信息follow_singer表，即關注歌手表，表里信息為用戶關注歌手的信息4.4.2單個表單信息（1）user（用戶）表：如下所示表4-1user用戶表名稱類型是否為key值可否null含義user_idvarchar√×用戶唯一標識user_namevarchar××用戶賬號user_psdvarchar××用戶密碼user_isexpirevarchar××用戶是否為會員（2）music（音樂）表：如下所示表4-2music音樂表名稱類型是否為key值可否null含義music_idvarchar√×音樂編號music_name varchar××音樂名稱music_urlvarchar××音樂地址singer_idvarchar××歌手idmusic_imgvarchar××歌曲圖片playlist_idvarchar××專輯idmusic_countsint××歌曲播放量（3）collect（收藏音樂）表：如下所示表4-3collect（收藏音樂）表字段名類型是否為key值可否null說明collect_useridvarchar√×用戶idcollect_username varchar××用戶名字collect_musicidvarchar××音樂idcollect_musicnamevarchar××音樂名字（4）singer（歌手）表：如下所示表4-4singer（歌手）表名稱類型是否為key值可否為null含義singer_idvarchar√×歌手編號singer_namevarchar××歌手名字singer_imgvarchar××歌手圖片singer_desvarchar××歌手描述singer_sexvarchar××歌手性別（5）playlist（專輯信息）表：如下所示表4-5playlist（專輯信息）表名稱類型是否為key值可否為null含義playlist_idvarchar√×專輯編號playlist_namevarchar××專輯名稱playlist_singeridvarchar××專輯歌手idplaylist_singernamevarchar××專輯歌手名字playlist_desvarchar××專輯描述playlist_imgint ××專輯圖片（6）listened（歌單）表：如下所示表4-6listened（歌單）表名稱類型是否為key值是否為null含義listened_useridvarchar√×用戶編號listened_usernamevarchar√×用戶名字listened_musicidvarchar√×音樂編號listened_musicnamevarchar××音樂名稱（7）MV表：如下所示表4-7MV表名稱類型是否為key值是否為null含義Mv_idvarchar√×Mv編號Mv_name varchar××Mv名稱Mv_urlvarchar××Mv地址Mv_singeridvarchar××Mv歌手idMv_singernamevarchar××Mv歌手姓名Mv_imgvarchar××Mv圖片（8）userInfo（個性化信息）表：如下所示名稱類型是否為key值是否為null含義UserInfo_idvarchar√×用戶編號UserInfo_name varchar××用戶名稱UserInfo_sexvarchar××用戶性別UserInfo_desvarchar××用戶簽名UserInfo_imgvarchar××用戶頭像UserInfo_placevarchar××用戶現居地表4-8userInfo（個性化信息）表Expire（會員）表：如下所示表4-9Expire（會員）表名稱類型是否為key值是否為null含義Expiry_idvarchar√×會員用戶編號Expiry_username varchar××會員用戶名稱Expiry_useridvarchar××會員用戶idExpiry_timevarchar××會員購買時間（10）Manager（管理員）表：如下所示表4-10Manager（管理員）表名稱類型是否為key值是否為null含義manager_idvarchar√×管理員idmanager_account varchar××管理員賬號manager_psdvarchar××管理員密碼（11）Follow（關注歌手）表：如下所示表4-11follow（關注歌手）表名稱類型是否為key值是否為null含義Follow_useridvarchar√×關注的用戶idFollow_username varchar××關注的用戶名字Follow_singeridvarchar××被關注的歌手idFollow_singernamevarchar××被關注的歌手名字5系統(tǒng)實現5.1文件目錄如圖5.1所示：圖5.1文件結構圖5.2前臺模塊設計前臺模塊為除管理員用戶以外的用戶可使用的功能。5.2.1登錄功能用戶在前端登錄界面，根據登錄提示輸入賬號密碼并點擊登錄按鈕REF_Ref2817\w\h[12]，前端將數據傳送到后端接口，后端將傳過來的賬號密碼與數據庫里的數據進行對比并將對比信息傳送到前端界面進行展示。界面展示：圖5.2登錄界面5.2.2注冊功能用戶在注冊界面，填入新的用戶名和密碼。用戶點擊注冊按鈕，前端將注冊信息傳輸到后端接口/register。后端接受信息后，將其存儲到數據庫的用戶表中，并將其結構返回給前端，前端根據狀態(tài)碼判斷是跳轉到登錄界面還是錯誤信息提示。界面展示：圖5.3注冊界面5.2.3修改密碼功能用戶進入修改密碼頁面,填寫賬號和新密碼，點擊確認按鈕之后。觸發(fā)/changePsd接口，前端將其數據傳送到后端，后端將其在數據庫驗證后，修改數據庫里的值，并將對應結果返回給前端進行展示。前端根據接受的狀態(tài)碼判斷，跳轉到登錄界面還是錯誤信息提示。界面展示：圖5.4修改密碼界面5.3管理員模塊5.3.1歌曲信息管理（1）查看歌曲管理員在后臺管理界面按下查看歌曲按鈕，前端將觸發(fā)getAll接口，后端將在數據庫中查詢所有歌曲信息并返回給前端，將在前端界面顯示所有歌曲信息（歌曲名字、歌手、專輯）。（2）添加歌曲管理員也可以點擊按下音樂按鈕，根據提示填寫信息，之后點擊添加按鈕，前端將信息傳輸到后端相應接口/setMusic，后端在數據庫進行添加并返回對應結果到前端界面進行展示。（3）刪除歌曲管理員點擊刪除按鈕，前端將該歌曲信息傳給后端，同時觸發(fā)后端刪除接口/deleteMusic，后端在數據庫中搜索該歌曲信息，并進行刪除，將處理結果返回給前端，前端界面收到后，刷新該頁面；（4）為音樂添加專輯同時管理員點擊添加專輯按鈕觸發(fā)/getList接口，顯示所有專輯信息，管理員選擇后，前端將歌曲和專輯信息傳輸到后端相應接口/Addlist_music，后端在數據庫中進行比對，更新music表中信息，將對應結果返回給前端界面進行展示。（5）網頁設計如下：圖5.5歌曲信息管理界面圖5.6新增歌曲界面5.3.2歌手管理（1）查看歌手管理員在后臺管理界面點擊查看歌手按鈕，前端將觸發(fā)getAllSinger接口，后端將在數據庫中查詢所有歌手信息并返回給前端將在前端界面顯示所有歌手信息（歌手名字、歌手性別、地區(qū)等）。（2）添加歌手管理員也可以點擊添加歌手按鈕，進入添加歌手界面，管理員根據提示填寫信息，之后點擊添加按鈕，前端將信息傳輸到后端相應接口/setSinger，后端在數據庫進行添加并返回對應結果到前端界面進行展示。刪除歌手管理員點擊刪除按鈕，前端將該歌手信息傳給后端，同時觸發(fā)后端刪除接口/deleteSinger，后端在數據庫中搜索該歌手信息，并進行刪除，將處理結果返回給前端，前端界面收到后，刷新該頁面；（4）網頁設計如下：圖5.7歌手管理界面圖5.8新增歌手界面5.3.3MV信息管理管理員用戶可以查看MV、添加MV和刪除MV，操作類似添加歌手和刪除歌手，接口對應為/getAllMV，/setMV，/deleteMV。網頁設計如下：圖5.9MV信息管理界面圖5.10添加MV界面5.3.4專輯信息管理管理員用戶可以查看專輯、添加專輯和刪除專輯，操作類似添加歌手和刪除歌手，接口對應為/getAllList，/setList，/deleteList。網頁設計如下：圖5.11專輯信息管理界面圖5.12添加專輯界面5.3.5用戶信息管理管理員用戶可以查看所有用戶、添加用戶和刪除用戶，操作類似添加歌手和刪除歌手，接口對應為/getAlluser，/setUser，/deleteUser。同時，也查看VIP用戶，添加VIP用戶。網頁設計如下：圖5.13用戶信息管理界面5.4前端模塊5.4.1歌曲模塊（1）查找歌曲用戶在搜索頁面，輸入關鍵字，按下enter鍵或點擊按鈕。此時會將數據傳送給后端，后端在數據庫music表中搜索符合的數據，將其返回給前端界面。 （2）查看所有歌曲用戶按下更多按鈕，查看所有的音樂信息，此時數據庫會將music表中的所有數據返回給前端，在前端界面中展示。（3）播放歌曲用戶可以點擊音樂，在界面下方展示播放界面，用戶點擊播放按鈕，播放音樂，再次點擊時，停止播放。收藏歌曲用戶可以點擊收藏按鈕，進行音樂的收藏或取消，將音樂信息、用戶信息數據傳給數據庫collect表，在數據庫進行信息的同步更改。（5）網頁設計如下：圖5.14搜索音樂界面圖5.15搜索結果為空界面圖5.16播放歌曲界面圖5.17正在播放歌曲界面圖5.18收藏歌曲界面圖5.19所有歌曲列表界面5.4.2MV模塊（1）搜索MV用戶在搜索頁面，輸入關鍵字，按下enter鍵或點擊按鈕。此時會將數據傳送給后端，后端在數據庫中搜索符合的數據，將其返回給前端界面。（2）查看所有MV用戶可以點擊更多的按鈕，查看所有MV列表，此時數據庫會將MV表中的所有數據返回給前端，在前端界面中展示。（3）播放MV用戶可以點擊MV，進入MV播放界面，用戶點擊播放按鈕，播放MV。（4）網頁設計如下：圖5.20搜索MV界面圖5.21MV詳情界面圖5.22播放MV界面圖5.23MV列表界面5.4.3歌手模塊（1）搜索歌手用戶在搜索頁面，輸入關鍵字，按下enter鍵或點擊按鈕。此時會將數據傳送給后端，后端在數據庫中搜索符合的數據，將其返回給前端界面。查看所有歌手用戶可以點擊更多的按鈕，查看所有歌手列表，此時數據庫會將歌手表中的所有數據返回給前端，在前端界面中展示。查看單個歌手信息用戶可以點擊歌手，在顯示歌手界面，用戶可以查看歌手信息、歌曲、MV。 （4）關注歌手用戶可以點擊關注按鈕，進行歌手的關注或這取消數據將傳給數據庫，在數據庫follow表中進行信息的同步更改。（5）網頁設計如下：圖5.24搜索歌手界面圖5.25歌手詳情界面圖5.26歌手MV界面圖5.27歌手歌曲界面圖5.28歌手列表界面5.4.4專輯模塊（1）查找專輯用戶在搜索頁面，輸入關鍵字，按下enter鍵或點擊按鈕。此時會將數據傳送給后端，后端在數據庫中搜索符合的數據，將其返回給前端界面。查看所有專輯用戶可以點擊更多的按鈕，查看所有專輯列表，此時數據庫會將專輯表中的所有數據返回給前端，在前端界面中展示。查看單個專輯用戶可以點擊專輯，在顯示專輯界面，用戶可以查看專輯信息、歌曲。（4）網頁設計如下：圖5.29搜索專輯界面圖5.30專輯詳情界面圖5.31專輯列表界面5.4.5個人化設置用戶可以在個人信息界面，查看自己的個性化設計并且修改。同時用戶可以查看自己所收藏的歌曲。網頁設計如下：圖5.32個人信息界面圖5.33編輯個人信息界面5.4.6購買會員管理用戶可以點擊我的工作臺=>VIP會員菜單進行購買，用戶再次點擊確認。觸發(fā)后端/buy接口，前端將用戶數據傳送給后端，后端在數據Expire表中同步數據，同時將狀態(tài)碼返回給前端，前端收到后，如果已成功購買會員，開放下載音樂和下載MV功能。網頁設計如下：圖5.34會員用戶界面圖5.35下載歌曲界面圖5.35下載MV頁面6系統(tǒng)測試6.1測試目的為了確保用戶使用該網站時的流暢與無誤，需要提前發(fā)現用戶使用時可能會出現的bug已進行改正或移除。6.2測試模塊測試人員需要對7個模塊進行測試，測試結果如下：（1）登錄模塊：可用（2）歌曲模塊：可用（3）個性化模塊：可用（4）歌手模塊：可用（5）MV模塊：可用（6）專輯模塊：可用（7）管理員模塊：可用。6.3黑盒測試 6.3.1用例匯總表6-1用例匯總圖序號描述期望結果是否與預期結果一致01用戶可否登錄用戶填入正確賬號的密碼，可成功登錄，進入http://localhost:8080/#/保持一致02用戶可否注冊填寫新的用戶信息，數據庫中同步數據，可成功注冊保持一致03用戶可否找回密碼填寫賬號和新的密碼，數據庫中同步更新，可成功驗證