《基于Vue的音樂管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)》10000字【論文】

基于Vue的音樂管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)摘要隨著時(shí)代發(fā)展，音樂似乎已經(jīng)成為人們生活中必不可少的一部分，音樂可以使生活中的碎片時(shí)間也得以沉浸式享受。音樂管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)使音樂作為一個(gè)實(shí)體,對其進(jìn)行集中式管理。音樂系統(tǒng)旨在系統(tǒng)化的對于海量音樂進(jìn)行管理。便于后臺(tái)管理人員對大量音樂資源進(jìn)行批量處理，為音樂劃分類型等。市面上各種形式的管理系統(tǒng)主要目標(biāo)都是提高用戶在進(jìn)入系統(tǒng)進(jìn)行管理工作的高效性,以及整個(gè)管理系統(tǒng)的安全性。系統(tǒng)使用流程的流暢性和友好引導(dǎo)的操作性都是整個(gè)系統(tǒng)設(shè)計(jì)期望達(dá)到的目標(biāo)。音樂分享管理系統(tǒng)設(shè)計(jì)有以下幾個(gè)模塊：總覽頁面、歌曲管理、用戶管理、操作日志查看模塊、歌曲分類管理、邀請碼管理、個(gè)人設(shè)置。客戶端使用Vue、界面采用AntDesign、服務(wù)端采用Node.js，開發(fā)工具采用VSCode和MongoDB，實(shí)現(xiàn)管理系統(tǒng)創(chuàng)建和對數(shù)據(jù)的維護(hù)在維護(hù)數(shù)據(jù)的同時(shí)保證模塊設(shè)計(jì)與實(shí)現(xiàn)的友好型性,整個(gè)系統(tǒng)使用的安全性與功能的健全性是主要目標(biāo)。代碼部分對組件進(jìn)行封裝,實(shí)現(xiàn)代碼的復(fù)用性追求易維護(hù)、易擴(kuò)展的良好代碼。關(guān)鍵詞：音樂管理;權(quán)限管理;邀請碼;批量上傳;MongoDB;Node.js;Vue目錄TOC\o"1-3"\h\u1緒論 緒論1.1設(shè)計(jì)的背景時(shí)下越來越多的人將音樂作為生活的一部分，而對于音樂曲庫的管理顯得尤為重要，龐大的曲庫需要大量的人員進(jìn)行維護(hù)，一個(gè)簡單好用的音樂管理系統(tǒng)可以提升工作用戶的工作效率。1.2當(dāng)前的研究現(xiàn)狀 隨著互聯(lián)網(wǎng)的不斷發(fā)展,人們聽音樂的方式早已從線下購買磁帶光盤等實(shí)體介質(zhì)在播放設(shè)備播放轉(zhuǎn)到在手機(jī)電腦等互聯(lián)網(wǎng)設(shè)備在線聽音樂的方式,音樂的傳播和儲(chǔ)存形態(tài)已全面進(jìn)入數(shù)字化時(shí)代。從2013年到2021年,中國錄制音樂市場人均消費(fèi)已經(jīng)從的0.2美元上升到2.4美元,足足翻了12倍?；ヂ?lián)網(wǎng)上海量的音樂使人眼花繚亂,而音樂平臺(tái)也五花八門,如我們熟悉的QQ音樂、網(wǎng)易云音樂、酷狗音樂、咪咕音樂等等平臺(tái),各個(gè)平臺(tái)有各個(gè)平臺(tái)的優(yōu)點(diǎn),而且歌曲的版權(quán)也大都不互通,導(dǎo)致目前個(gè)人擁有多個(gè)音樂平臺(tái)是非常常見的情況。而市面缺乏將多個(gè)平臺(tái)的音樂統(tǒng)一進(jìn)行統(tǒng)一管理的產(chǎn)品,如果能有一個(gè)跨平臺(tái)跨設(shè)備的音樂管理系統(tǒng),將極大的提高人們聽音樂管理音樂的便利性。1.3課題主要工作目前單頁面開發(fā)的系統(tǒng)越來越主流,實(shí)現(xiàn)模塊化開發(fā),使頁面跳轉(zhuǎn)不再是傳統(tǒng)的路徑跳轉(zhuǎn)而是組件的切換[1]。選取適合音樂管理系統(tǒng)的后臺(tái)管理的數(shù)據(jù)庫，編寫后臺(tái)接口并連接數(shù)據(jù)庫使前后端聯(lián)調(diào)，設(shè)計(jì)一個(gè)簡潔直觀的系統(tǒng)結(jié)構(gòu)和美觀的操作界面提升用戶的體驗(yàn)感讓用戶能夠快速的操作數(shù)據(jù)庫，使數(shù)據(jù)庫盡可能承載較大數(shù)據(jù)量。在本次項(xiàng)目中,對于代碼方面追求代碼的精簡與高可用性,對于多次使用的相同功能的代碼必須進(jìn)行封裝,以便多次重復(fù)書寫是代碼冗余[2]。Nodejs作為本次項(xiàng)目服務(wù)端語言,滿足對數(shù)據(jù)庫的直接連接與操作,定義數(shù)據(jù)以及對數(shù)據(jù)操控,強(qiáng)大的npm包管理支持各種依賴包安裝[3]。2可行性分析制作一個(gè)網(wǎng)站主要要考慮它的可行性，校友會(huì)網(wǎng)站的管理設(shè)計(jì)與實(shí)現(xiàn)要從社會(huì)可行性、技術(shù)可行性、經(jīng)濟(jì)效益可行性、開發(fā)工具論述，從這四個(gè)方面闡述可行性分析，要盡可能的使用最低的成本實(shí)現(xiàn)最好的系統(tǒng)功能。2.1社會(huì)的可行性音樂行業(yè)的繁榮發(fā)展，以及現(xiàn)下大家對于音樂這種精神世界的追求的大大提高，地鐵上、辦公時(shí)，音樂將我們與周遭嘈雜紛亂的環(huán)境隔絕，也引起大家對音樂的共鳴，使得音樂管理成為音樂網(wǎng)站后臺(tái)管理的不可或缺的一部分。2.2技術(shù)的可行性后端數(shù)據(jù)庫的存儲(chǔ)使用分布式文件數(shù)據(jù)庫——MongoDB，并且使用mongoose模塊直接操作MongoDB數(shù)據(jù)庫，其高性能存儲(chǔ)以及對大數(shù)據(jù)量的支持適合于本項(xiàng)目的實(shí)際需求[4]。后端利用Node.Js作為服務(wù)端的支持語言，實(shí)現(xiàn)前端全棧式開發(fā)。與客戶進(jìn)行交互的客戶端使用現(xiàn)下主流的框架Vue，高效快速的實(shí)現(xiàn)前端對數(shù)據(jù)的操縱,輕量級的優(yōu)點(diǎn)使頁面性能有良好提升[5]。由于音樂管理系統(tǒng)一般是企業(yè)為使用用戶，所以UI使用比較簡潔大方的螞蟻金服團(tuán)隊(duì)開發(fā)的AntDesignUI組件進(jìn)行系統(tǒng)界面構(gòu)建，該組件庫UI組件相對要豐富齊全完全能夠滿足目前系統(tǒng)的功能組件的需求。對于界面設(shè)計(jì)提供一些友好型的交互,提高用戶在使用過程中的感受,音樂管理系統(tǒng)內(nèi)部離不開音樂這一實(shí)體,對于音樂相關(guān)的設(shè)計(jì)展示顯得尤為重要,音樂必須支持簡簡單清晰的播放與暫停操作[6]。2.3開發(fā)工具論述整個(gè)音樂分享系統(tǒng)的設(shè)計(jì)與完成除了前端界面和操作流程的實(shí)現(xiàn)，需要后端數(shù)據(jù)存儲(chǔ)，以及對于前端請求做出響應(yīng)。前端使用VSCode用于開發(fā)整個(gè)系統(tǒng)的界面，作為可跨平臺(tái)開發(fā)的源代碼編輯器，高度支持JavaScript以及Node.js便于本項(xiàng)目的前后端聯(lián)調(diào)開發(fā)。開發(fā)界面的個(gè)性化自定義設(shè)計(jì)使編程體驗(yàn)感大大提高。軟件內(nèi)置豐富的插件，代碼高亮、代碼自動(dòng)補(bǔ)全功能、LiveServer熱加載功能都有效的提升開發(fā)效率。開發(fā)環(huán)境如圖2-1：圖2-1開發(fā)環(huán)境音樂分享管理系統(tǒng)在數(shù)據(jù)存儲(chǔ)中選用非關(guān)系型數(shù)據(jù)庫，即MongoDB數(shù)據(jù)庫，作為一款新興的數(shù)據(jù)庫MongoDB，基于內(nèi)存的數(shù)據(jù)處理方式，MongoDB將熱數(shù)據(jù)存儲(chǔ)在物理內(nèi)存中達(dá)到高速讀寫的效果。MongoDB以Json作為存儲(chǔ)格式也大大簡化了后續(xù)數(shù)據(jù)的處理與渲染[7]。MongoDB數(shù)據(jù)庫如圖2-2：圖2-2MongoDB數(shù)據(jù)庫在進(jìn)行數(shù)據(jù)庫操作時(shí)選用MongoDBCompass作為MongoDB數(shù)據(jù)庫圖形界面管理工具，大大簡化了數(shù)據(jù)庫的查詢操作，在不需要知道查詢語法的情況下依舊可以快速上手使用MongoDB數(shù)據(jù)庫進(jìn)行數(shù)據(jù)管理。用戶除了可以進(jìn)行基本的數(shù)據(jù)庫管理操作外還可以通過MongoDBCompass對自己所搭建的數(shù)據(jù)庫內(nèi)部數(shù)據(jù)分布有所了解[8]。MongoDBCompass數(shù)據(jù)庫圖形界面管理工具如圖2-3：圖2-3數(shù)據(jù)庫圖形界面管理工具2.4小結(jié)本章節(jié)主要是社會(huì)、技術(shù)、經(jīng)濟(jì)、開發(fā)工具進(jìn)行一個(gè)可行性分析，從系統(tǒng)使用價(jià)值，技術(shù)的實(shí)現(xiàn)，使用費(fèi)用低，工具簡單不復(fù)雜，開發(fā)效率，開發(fā)成本，經(jīng)過這幾個(gè)方面的詳細(xì)分析，是可執(zhí)行的。3需求分析需求分析就是正式開發(fā)前對于整個(gè)系統(tǒng)的結(jié)構(gòu)以及界面操作使用流程做一個(gè)整體的設(shè)計(jì)與規(guī)劃。了解市面上已經(jīng)存在的，類似的系統(tǒng)有哪些值得借鑒的地方與需要摒棄的繁瑣之處。經(jīng)過一些設(shè)計(jì)和分析之后，將整個(gè)系統(tǒng)的操作使用流程進(jìn)行梳理完善，最后針對設(shè)計(jì)完成后對于后期項(xiàng)目實(shí)現(xiàn)做一個(gè)技術(shù)評估并且對于管理系統(tǒng)的用戶操作流程進(jìn)行梳理，不斷的以一個(gè)使用該系統(tǒng)用戶的角度去考慮如何能提升用戶體驗(yàn)感，不斷使系統(tǒng)的操作更加簡單易上手，使整個(gè)管理系統(tǒng)的操作流程流暢，系統(tǒng)大概評估整個(gè)項(xiàng)目的擬完成周期，具體技術(shù)實(shí)現(xiàn)過程中需要涉及的技術(shù)棧。需求分析主要是從系統(tǒng)目標(biāo)、擬解決問題，這兩個(gè)方面來闡述。3.1系統(tǒng)的目標(biāo)幫助音樂平臺(tái)后臺(tái)人員更加方便快捷的管理龐大的音樂庫，并且對于歌手發(fā)售的（限量）數(shù)字專輯進(jìn)行庫存管理。總體校友會(huì)平臺(tái)管理網(wǎng)站的功能實(shí)現(xiàn)如下登錄注冊登錄：系統(tǒng)的登錄為方便使用者，只需要輸入正確的賬號(hào)密碼即可成功登入系統(tǒng)，密碼輸入錯(cuò)誤會(huì)給出相應(yīng)的提示登入失敗。注冊：出于系統(tǒng)安全性考慮，由于此系統(tǒng)作為后臺(tái)人員的管理系統(tǒng)，系統(tǒng)的注冊功能設(shè)有邀請碼，由目前正在使用該系統(tǒng)的人員在登錄系統(tǒng)后生成不重復(fù)的隨機(jī)邀請碼，新用戶在有邀請碼的情況下可以順利完成注冊流程使用該系統(tǒng)?？傆[功能作為登入系統(tǒng)最先進(jìn)入的頁面，總覽頁面作為系統(tǒng)用戶看到的第一個(gè)界面，有著引導(dǎo)用戶熟悉整個(gè)系統(tǒng)概況和熟悉系統(tǒng)數(shù)據(jù)的作用。用戶進(jìn)入總覽頁面，一目了然可以看到目前曲庫歌曲總量，使用此系統(tǒng)的用戶總數(shù)，以及所有管理人員對于系統(tǒng)近期取得操作使用情況，為使總覽能夠更加清晰、直觀、簡潔，數(shù)據(jù)展示不適合太過龐雜冗余，因此只向用戶展示最近添加的10條歌曲記錄和最近的20條操作日志。音樂管理管理人員可在此模塊對目前音樂庫內(nèi)的所有曲目進(jìn)行管理。添加、刪除、修改歌曲信息。同時(shí)對于添加入庫新歌曲可支持excel格式的批量上傳操作，并且后臺(tái)管理人員對于歌曲庫內(nèi)的所有歌曲可以選擇在線播放，便于校對工作的開展。針對于部分限量發(fā)售的數(shù)字專輯該模塊可以對數(shù)字專輯的庫存進(jìn)行管理。歌曲分類管理此模塊主要實(shí)現(xiàn)用戶對于歌曲分類的增加、修改、刪除功能。并會(huì)同步到添加歌曲的分類選項(xiàng)下。用戶管理用戶可在此模塊查看當(dāng)前系統(tǒng)下的所有用戶，并對用戶分配角色，進(jìn)行重置密碼和刪除用戶的操作。同時(shí)在該模塊可以直接手動(dòng)創(chuàng)建一個(gè)新用戶（無需邀請碼），并且同樣支持批量上傳。操作日志用戶可在此模塊查看操作日志信息，并進(jìn)行刪除操作。邀請碼管理在該模塊，用戶可以生成指定數(shù)量的隨機(jī)且永不重復(fù)的邀請碼用于分發(fā)給新用戶注冊時(shí)使用。個(gè)人設(shè)置用戶如果需要自行更改密碼可在此模塊下操作修改。3.2擬解決問題在網(wǎng)絡(luò)上參考一些類似的功能比較完善的管理系統(tǒng)了解到，在開發(fā)音樂分享管理系統(tǒng)的過程中，可能會(huì)遇到以下一些比較難的問題:第一：數(shù)據(jù)的收集和整合有困難，系統(tǒng)內(nèi)部需要用到大量的歌曲資源，這種媒體資源批量的收集與最后入庫管理有些困難。并且對于媒體資源數(shù)據(jù)的存儲(chǔ)技術(shù)之前沒有接觸過。第二：第一次接觸MongoDB這樣非關(guān)系型數(shù)據(jù)庫，數(shù)據(jù)庫作為系統(tǒng)的后臺(tái)存儲(chǔ)部分，數(shù)據(jù)庫的鏈接以及對數(shù)據(jù)的操作都需要研究。第三：管理系統(tǒng)在上線后首次打開系統(tǒng)時(shí)瀏覽器對資源進(jìn)行初次加載的時(shí)間過長，如何進(jìn)行前端性能優(yōu)化以提升用戶體驗(yàn)感在項(xiàng)目整體優(yōu)化中十分關(guān)鍵，之前的項(xiàng)目都是對分模塊進(jìn)行編寫，對項(xiàng)目的優(yōu)化也只是采用CDN資源引用進(jìn)行簡單優(yōu)化，在本次完整系統(tǒng)項(xiàng)目中，對整個(gè)項(xiàng)目的優(yōu)化方案要不斷豐富。第四：由于之前項(xiàng)目都是直接使用封裝好的半成品框架，對于框架的從零搭建。從搭建框架開始進(jìn)行，對于整個(gè)管理系統(tǒng)框架底層項(xiàng)目結(jié)構(gòu)比如，權(quán)限驗(yàn)證、登錄注冊、路由管理、系統(tǒng)頁面基礎(chǔ)布局都要從零開始。在應(yīng)對上述制作校友會(huì)網(wǎng)站的過程可能會(huì)遇到的問題，我有著以下幾種途徑的解決方案：途徑一：上網(wǎng)百度查找相關(guān)資料學(xué)習(xí)。對于數(shù)據(jù)庫這方面的知識(shí)點(diǎn)的不足，可以通過上網(wǎng)百度有關(guān)數(shù)據(jù)庫方面的視頻進(jìn)行認(rèn)真學(xué)習(xí)。途徑二：通過和同學(xué)探討或者請教老師。對于資料整理這方面，可以和同學(xué)談?wù)撘幌?，談?wù)勊麄兪侨绾慰焖儆行У恼沓鲎砸阉枰馁Y料，可以學(xué)習(xí)同學(xué)好的解決方式。在技術(shù)方面，也可以向會(huì)的同學(xué)請教，也可以請教會(huì)的老師，我相信老師和同學(xué)們都會(huì)愿意幫助我的。途徑三：到圖書館找資料學(xué)習(xí)。不管是對技術(shù)方面的不足，還是其他的不足，我可以到圖書館找相關(guān)資料進(jìn)行自學(xué)和研究，盡量提高自已的各方面的能力，以便很好的完成作品。途徑四：上網(wǎng)學(xué)習(xí)一些優(yōu)美的網(wǎng)站的頁面設(shè)計(jì)。對網(wǎng)站設(shè)計(jì)與美觀的缺乏，可以上網(wǎng)學(xué)習(xí)一些好的網(wǎng)站設(shè)計(jì)，培養(yǎng)一下自已的設(shè)計(jì)感和顏色搭配，從而來設(shè)計(jì)出美觀且功能符合滿足高校需求的校友會(huì)網(wǎng)站作品。途徑五：善于向一些互聯(lián)網(wǎng)的一線平臺(tái)學(xué)習(xí),本著開源交流的思想目前各大主流平臺(tái)都有開發(fā)者幫助文檔,一些技術(shù)受限的時(shí)候可以參照一些大平臺(tái)提供的幫助手冊進(jìn)行學(xué)習(xí)與解決,例如本次項(xiàng)目對于音樂資源采用了網(wǎng)易云提供的對外播放器使用指南,直接內(nèi)嵌網(wǎng)易云官方所提供的音樂支持內(nèi)嵌播放器在項(xiàng)目頁面中。4總體設(shè)計(jì)從系統(tǒng)模塊、功能分析、系統(tǒng)數(shù)據(jù)庫E-R圖、系統(tǒng)數(shù)據(jù)設(shè)計(jì)，這四個(gè)方面闡述總體設(shè)計(jì)。4.1網(wǎng)站模塊結(jié)構(gòu)根據(jù)對系統(tǒng)的分析和使用操作，音樂管理系統(tǒng)功能結(jié)構(gòu)，如圖4-1：圖4-1系統(tǒng)功能結(jié)構(gòu)圖4.2功能的分析音樂管理系統(tǒng)完成的一些功能有：新增歌曲、批量上傳、修改信息、重置密碼、邀請碼生成?！ひ魳饭芾恚喊ǜ枨Q、歌手名、歌曲ID、數(shù)字專輯庫存、發(fā)行日期、歌曲所屬類別信息。能夠?qū)Ω枨畔⑦M(jìn)行增刪改查以及批量上傳操作；·歌曲分類管理：包括歌曲類別名稱信息。能夠?qū)︻悇e信息進(jìn)行增刪改查操作；·用戶管理：包括賬戶名稱、創(chuàng)建日期、角色信息。能夠修改用戶角色、刪除批量上傳和重置密碼操作；·操作日志：包括賬戶名稱、動(dòng)作、記錄時(shí)間信息。能夠?qū)θ罩拘畔⑦M(jìn)行刪除和查找操作；·邀請碼管理：包括邀請碼、使用狀態(tài)信息。能夠?qū)ρ埓a進(jìn)行刪除以及生成指定數(shù)量的邀請碼操作；·個(gè)人設(shè)置：提供原始密碼、新密碼、以及確認(rèn)密碼對當(dāng)前所登錄的賬戶進(jìn)行密碼修改；4.3網(wǎng)站數(shù)據(jù)庫設(shè)計(jì)本數(shù)據(jù)庫采用MongoDB非關(guān)系型數(shù)據(jù)庫，表結(jié)構(gòu)簡單清晰。用戶實(shí)體E-R圖用戶信息數(shù)據(jù)庫表所包含的屬性：用戶名稱、創(chuàng)建日期、角色。如圖4-3：圖4-3用戶E-R圖歌曲實(shí)體E-R圖歌曲信息數(shù)據(jù)庫表所包含的屬性：歌曲名稱、歌手姓名、歌曲ID、專輯庫存、發(fā)行時(shí)間、類別。如圖4-4：圖4-4歌曲E-R圖音樂類型實(shí)體E-R圖音樂類型信息數(shù)據(jù)庫表所包含的屬性：類型名稱、ID。如圖4-5：圖4-5音樂類型E-R圖角色信息實(shí)體E-R圖校友班級的資料包有：角色名稱、角色I(xiàn)D。如圖4-6：圖4-6角色E-R圖邀請碼信息實(shí)體E-R圖留言的數(shù)據(jù)含有：邀請碼、邀請碼ID。如圖4-7：圖4-7邀請碼E-R圖日志實(shí)體E-R圖日志信息數(shù)據(jù)庫表所包含的屬性：用戶名、動(dòng)作、記錄時(shí)間。如圖4-8：圖4-8日志E-R圖4.4網(wǎng)站數(shù)據(jù)庫設(shè)計(jì)本數(shù)據(jù)庫一共包含7張數(shù)據(jù)表，分別為：歌曲信息表：musics、歌曲類別表：musicclassifies、用戶角色信息表：characters、忘記密碼表：forgetpasswords、邀請碼表：invitecodes、日志信息記錄表：logs、用戶信息表：users。根據(jù)音樂管理系統(tǒng)的需要而設(shè)計(jì)了以下的表圖4-17系統(tǒng)表設(shè)計(jì)musics表內(nèi)主要存儲(chǔ)歌曲相關(guān)信息,如表4-1:表4-1歌曲信息表musicclassifies表內(nèi)存儲(chǔ)歌曲類別相關(guān)信息如表4-2:表4-2歌曲分類信息表forgetpasswords表內(nèi)存儲(chǔ)所有忘記密碼用戶的相關(guān)信息,如表4-3:表4-3歌曲信息表characters表存儲(chǔ)系統(tǒng)內(nèi)所有角色信息,如表4-4:表4-4角色信息表invitecodes表存儲(chǔ)所有邀請碼信息,如表4-5:表4-5邀請碼信息表logs表存儲(chǔ)所有日志信息,如表4-6:表4-6校友報(bào)名信息表users表存儲(chǔ)所有用戶相關(guān)的信息,如表4-7:表4-7調(diào)查信息表4.5小結(jié)本小節(jié)主要是對系統(tǒng)的整體結(jié)構(gòu)、以及各模塊下功能分析、系統(tǒng)數(shù)據(jù)庫E-R圖、系統(tǒng)數(shù)據(jù)庫的分析說明。

5詳細(xì)設(shè)計(jì)主要說明關(guān)于系統(tǒng)的結(jié)構(gòu)設(shè)計(jì)、系統(tǒng)界面設(shè)計(jì)以及功能子模塊設(shè)計(jì)，這三個(gè)方面進(jìn)行詳細(xì)說明。5.1系統(tǒng)結(jié)構(gòu)設(shè)計(jì)音樂分享系統(tǒng)基于AntDeisgnofVue前端UI組件庫實(shí)現(xiàn)。整個(gè)系統(tǒng)風(fēng)格簡約大方，憑借“主動(dòng)引導(dǎo)用戶使用”這一準(zhǔn)則進(jìn)行模塊化設(shè)計(jì)，操作界面和菜單欄讓人一目了然，無需花心思去研究如何去使用該系統(tǒng)。系統(tǒng)結(jié)構(gòu)圖如圖5-1：圖5-1系統(tǒng)結(jié)構(gòu)圖5.2系統(tǒng)界面設(shè)計(jì)用戶輸入用戶名和密碼的登錄頁面。用戶根據(jù)提示輸入用戶名、密碼和邀請碼的注冊頁面。注冊完成后進(jìn)入登錄頁點(diǎn)擊登錄按鈕進(jìn)入系統(tǒng)跳轉(zhuǎn)至音樂管理頁面。系統(tǒng)界面總體布局分為三大部分：頭部標(biāo)題欄、左側(cè)菜單導(dǎo)航欄、右側(cè)為點(diǎn)擊菜單后各模塊的主體內(nèi)容區(qū)。頭部導(dǎo)航欄點(diǎn)擊“退出”按鈕，退出整個(gè)系統(tǒng)頁面跳轉(zhuǎn)至登錄頁。左側(cè)菜單欄，點(diǎn)擊菜單的項(xiàng)目僅僅會(huì)對右側(cè)的主體內(nèi)容區(qū)進(jìn)行刷新而不會(huì)大刷整個(gè)瀏覽器頁面，右側(cè)的主體內(nèi)容區(qū)會(huì)跳轉(zhuǎn)至所屬的內(nèi)容頁。主體內(nèi)容區(qū)大致布局為：頭部搜索與添加區(qū)域、中間數(shù)據(jù)陳列表格、底部分頁按鈕。整個(gè)系統(tǒng)總覽和個(gè)人設(shè)置頁面排布相對特殊，以直觀的實(shí)現(xiàn)頁面功能為主。右側(cè)菜單欄可以隨時(shí)點(diǎn)擊跳轉(zhuǎn)至該模塊頁面下，展示該模塊下管理的數(shù)據(jù)，以表格形式呈現(xiàn)，方便用戶對相應(yīng)信息更加直觀的獲取。右側(cè)菜單欄可以隨時(shí)點(diǎn)擊跳轉(zhuǎn)至該模塊頁面下，展示該模塊下管理的數(shù)據(jù)，以表格形式呈現(xiàn)，方便用戶對相應(yīng)信息更加直觀的獲取。用戶在點(diǎn)擊“添加一條”和“編輯”會(huì)出現(xiàn)對應(yīng)的模態(tài)框引導(dǎo)用戶錄入或修改相關(guān)信息，用戶關(guān)閉模態(tài)框的方式有四種：點(diǎn)擊“確認(rèn)”按鈕進(jìn)行提交、點(diǎn)擊“取消”按鈕取消操作、點(diǎn)擊模態(tài)框右上角的“×”、直接點(diǎn)擊表單以外的蒙板部分。用戶點(diǎn)擊“詳情”按鈕，頁面跳轉(zhuǎn)至歌曲詳情頁，并會(huì)自動(dòng)從頭播放當(dāng)前行音樂，可點(diǎn)擊暫停按鈕停止播放，退出當(dāng)前頁面時(shí)音樂會(huì)停止播放。點(diǎn)擊“上傳Excel添加“按鈕會(huì)自動(dòng)打開電腦的本地文件系統(tǒng)，選定要上傳的文件會(huì)進(jìn)行上傳提示。5.3功能子模塊設(shè)計(jì)系統(tǒng)整體的模塊以數(shù)據(jù)為劃分依據(jù)分隔模塊。除總覽、個(gè)人設(shè)置模塊，一個(gè)模塊對應(yīng)一個(gè)數(shù)據(jù)表，方便對數(shù)據(jù)做區(qū)分管理。普通用戶通常對音樂信息及分類信息進(jìn)行日常的維護(hù)管理，有權(quán)限進(jìn)行增刪改查操作，并有權(quán)進(jìn)入個(gè)人設(shè)置模塊自行修改當(dāng)前賬戶的密碼。管理員除了可以像普通用戶一樣對音樂相關(guān)信息進(jìn)行維護(hù)外，還可以根據(jù)實(shí)際需求定期的對邀請碼進(jìn)行生成或刪除，同時(shí)對于當(dāng)前使用該系統(tǒng)的用進(jìn)行刪除或角色切換以及重置密碼操作?？傆[模塊對于所有用戶來說都是起到導(dǎo)覽作用，幫助熟悉整個(gè)系統(tǒng)近況，使用戶大致了解系統(tǒng)數(shù)據(jù)。5.3.1登錄與注冊模塊登陸注冊頁面：作為管理系統(tǒng)首先看到的頁面，登錄頁面有著對外保護(hù)系統(tǒng)安全的功能，任何角色的用戶想要進(jìn)入系統(tǒng)必須輸入正確的賬戶和密碼才能成功登入。所以當(dāng)已經(jīng)擁有賬戶密碼的用戶要同時(shí)輸入正確的賬號(hào)和密碼才能順利登錄，否則兩項(xiàng)只要有一項(xiàng)輸入錯(cuò)誤，系統(tǒng)會(huì)都給出“用戶名或密碼錯(cuò)誤”，這樣的提示設(shè)計(jì)主要是為了阻擋一些惡意用戶為了進(jìn)入系統(tǒng)不斷進(jìn)行“試錯(cuò)”。同時(shí)忘記密碼的用戶可在登錄頁面進(jìn)行忘記密碼申訴。管理員會(huì)在忘記密碼列表幫助用戶進(jìn)行重置密碼操作，將密碼初始化。成功登入的用戶數(shù)據(jù)庫會(huì)對當(dāng)前用戶進(jìn)行角色判斷，為其分配相應(yīng)的系統(tǒng)操作權(quán)限。針對于新用戶，鑒于此系統(tǒng)維護(hù)著大量音樂平臺(tái)數(shù)據(jù)，注冊模塊使用邀請碼注冊的方式作為新用戶加入此系統(tǒng)依據(jù)，邀請碼由管理員生成分發(fā)，大大提高了該系統(tǒng)的安全性。登陸模塊流程圖，如圖5-2：圖5-2登陸模塊流程圖登錄驗(yàn)證的主要代碼：constone=awaitUser.findOne({account,}).exec();if(!one){ctx.body={code:0,msg:'用戶名或密碼錯(cuò)誤',data:null,};return;}constuser={account:one.account,character:one.character,_id:one._id,};if(one.password===password){ctx.body={code:1,msg:'登入成功',data:{user,token:jwt.sign(user,config.JWT_SECRET),},};return;}注冊模塊流程圖，如圖5-3：圖5-3注冊模塊流程圖注冊模塊主要代碼為：//查找有沒有邀請碼constfindCode=awaitInviteCode.findOne({code:inviteCode,}).exec();//如果沒找到邀請碼if((!findCode)||findCode.user){ctx.body={code:0,msg:'邀請碼不正確',data:null,};return;}5.3.2總覽模塊總覽模塊作為一個(gè)通用模塊，幫助所有用戶快速了解系統(tǒng)數(shù)據(jù)資源現(xiàn)狀，以及了解系統(tǒng)最近的操作及更新，同時(shí)為了不讓總覽頁面顯得太過累贅，只顯示最新10或20條數(shù)據(jù)?？傆[模塊：圖5-4總覽流程圖總覽模塊主要代碼為：<a-card:title="simple?'最近的操作日志':''"><divv-if="!simple"><h2>操作日志</h2><a-divider/></div><div><a-tablebordered:data-source="list":columns="columns":pagination="false":scroll="{x:'max-content'}">5.3.3音樂管理模塊用戶在此模塊可對歌曲信息進(jìn)行添加、修改、刪除、查看和Excel批量上傳操作。歌曲信息查詢：歌曲信息查詢主要代碼：<divclass="search"><a-input-search:placeholder="`根據(jù)歌曲名搜索`"enter-buttonv-model:value="keyword"@search="onSearch"/><av-if="isSearch"herf="javascript:;"@click="backAll">返回</a></div>添加歌曲信息：添加歌曲主要代碼：//添加操作router.post('/add',async(ctx)=>{const{name,ID,author,publishDate,classify,count,}=getBody(ctx);constbook=newBook({name,ID,author,publishDate,classify,count,});constres=awaitbook.save();ctx.body={data:res,code:1,msg:'添加成功'}});刪除歌曲操作：刪除歌曲的主要代碼：//刪除操作router.delete('/:id',async(ctx)=>{const{id,}=ctx.paramsconstdelMsg=awaitBook.deleteOne({_id:id,})ctx.body={data:delMsg,msg:'刪除成功',code:1};})修改歌曲信息：修改歌曲信息的主要代碼：//修改router.post('/update',async(ctx)=>{const{id,...others}=ctx.request.body;constone=awaitfindBookOne(id);//沒有找到歌曲的情況if(!one){ctx.body={msg:'沒有找到歌曲',code:0,}return;}constnewQuery={}Object.entries(others).forEach(([key,value])=>{if(value){newQuery[key]=value}});Object.assign(one,newQuery)constres=awaitone.save();ctx.body={data:res,code:1,msg:'保存成功'}});通過Excel批量上傳歌曲：Excel上傳的主要代碼:router.post('/addMany',async(ctx)=>{const{key='',}=ctx.request.body;constpath=`${config.UPLOAD_DIR}/${key}`;constexcel=loadExcel(path);constsheet=getFirstSheet(excel);constarr=[];for(leti=0;i<sheet.length;i++){letrecord=sheet[i];const[name,price,author,publishDate,classify,count,]=record;letclassifyId=classify;constone=awaitBookClassify.findOne({name:classify,})if(one){classify=one._id;}arr.push({name,price,author,publishDate,classify:classifyId,count,});}awaitBook.insertMany(arr);ctx.body={code:1,msg:'添加成功',data:{addCount:arr.length,}};});5.3.4歌曲分類管理模塊歌曲分類模塊主要是對于歌曲類別進(jìn)行刪除、修改、添加操作。類別刪除操作：圖5-10類別刪除流程圖類別刪除的主要代碼為：router.delete('/:id',async(ctx)=>{const{id,}=ctx.params;constres=awaitBookClassify.deleteOne({_id:id,});ctx.body={data:res,code:1,msg:'刪除成功',}})歌曲類別添加：歌曲類別添加主要代碼:router.post('/add',async(ctx)=>{const{title,}=ctx.request.body;constone=awaitBookClassify.findOne({title,}).exec();if(one){ctx.body={code:0,msg:'音樂分類已存在'};return;}constbookClassify=newBookClassify({title,});constsaved=awaitbookClassify.save()ctx.body={data:saved,code:1,msg:'創(chuàng)建成功',}})歌曲類別修改歌曲類別修改主要代碼:router.post('/update/title',async(ctx)=>{const{id,title,}=ctx.request.body;constone=awaitBookClassify.findOne({_id:id,});if(!one){ctx.body={msg:'資源不存在',code:0,};return;}one.title=title;constres=awaitone.save();ctx.body={data:res,msg:'修改成功',code:1}})5.3.5用戶管理模塊管理員在此模塊對所有用戶進(jìn)行添加、批量刪除、角色切換、查找、重置密碼操作。添加、批量刪除以及查找操作大致處理邏輯與歌曲和用戶管理相同，不再做詳細(xì)說明。角色切換操作:圖5-11角色切換流程圖角色切換的主要代碼為：router.post('/update/character',async(ctx)=>{const{character,userId,}=ctx.request.body;constchar=awaitCharacter.findOne({_id:character,});if(!char){ctx.body={msg:'出錯(cuò)啦',code:0,};return;}constuser=awaitUser.findOne({_id:userId,});if(!user){ctx.body={msg:'出錯(cuò)啦',code:0,};return;};user.character=character;constres=awaituser.save();ctx.body={data:res,code:1,msg:'修改成功',};})重置密碼操作圖5-12重置密碼流程圖重置密碼操作的主要代碼router.post('/reset/password',async(ctx)=>{const{id,}=ctx.request.body;constuser=awaitUser.findOne({_id:id,}).exec();if(!user){ctx.body={msg:'找不到用戶',code:0,}return;}user.password=config.DEFAULT_PASSWORD;constres=awaituser.save();ctx.body={msg:'修改成功',data:{account:res.account,_id:res.id,},code:1,}})5.3.6操作日志模塊所有用戶可在此模塊查看日志信息，可對日志信息進(jìn)行刪除操作。日志讀取主要是根據(jù)請求的url來做判斷，定義好每個(gè)路由的操作行為，對其進(jìn)行轉(zhuǎn)換。日志讀取的主要代碼:constLOG_MAP=[['/character/list','獲取角色列表'],['/log/list','獲取日志列表'],['/user/info','獲取自己的登入信息'],['/music/list','獲取音樂列表'],];exportconstgetLogInfoByPath=(path)=>{lettitle='';LOG_MAP.forEach((item)=>{if(path.includes(item[0])){title=path.replace(item[0],item[1]);}});returntitle||path;};5.3.7邀請碼管理模塊管理員可在此模塊下查看邀請碼是否被使用，并且對所有邀請碼進(jìn)行刪除操作，根據(jù)實(shí)際情況生成指定數(shù)量的邀請碼。邀請碼生成的主要代碼:router.post('/add',async(ctx)=>{const{count=1}=ctx.request.body;constarr=[];for(leti=0;i<count;i++){arr.push({code:uuidv4(),user:'',})}constres=awaitInviteCode.insertMany(arr)ctx.body={code:1,data:res,msg:'創(chuàng)建成功'}})5.3.8個(gè)人設(shè)置模塊在該模塊下，所有用戶可自行更改自己當(dāng)前賬戶的密碼，只要根據(jù)提示正確輸入當(dāng)前賬戶的密碼和新密碼為了安全會(huì)提示用戶輸入兩邊新密碼便可成功修改密碼，下次登錄新密碼會(huì)生效。修改密碼的主要代碼:router.post('/update/password',async(ctx)=>{const{password,oldPassword,}=ctx.request.body;constpayload=awaitverify(getToken(ctx));const{_id}=payloadconstuser=awaitUser.findOne({_id,}).exec();if(!user){ctx.body={msg:'用戶不存在',code:0}return;}if(user.password!==oldPassword){ctx.body={msg:'密碼校驗(yàn)失敗',code:0,};return;}user.password=password;awaituser.save();ctx.body={msg:'修改成功',code:1}})5.4小結(jié)本小章是對系統(tǒng)結(jié)構(gòu)設(shè)計(jì)、系統(tǒng)界面設(shè)計(jì)、功能子模塊設(shè)計(jì)進(jìn)行說明分析。

6系統(tǒng)測試6.1測試的任務(wù)結(jié)合本次項(xiàng)目的項(xiàng)目規(guī)模以及功能點(diǎn)，測試音樂系統(tǒng)的相關(guān)操作的每個(gè)功能是否能正常使用。6.2測試方式本系統(tǒng)采用黑盒測試。通過以不同角色進(jìn)入系統(tǒng)對各功能進(jìn)行測試，分別以不同目的性進(jìn)入系統(tǒng)，完成整個(gè)流程的測試。6.3測試用例通過黑盒測試，在系統(tǒng)界面從注冊登錄開始，觀察功能是否完善，各接口調(diào)用是否異常。6.3.1測試設(shè)備電腦型號(hào)：戴爾，型號(hào)DESKTOP-B0OJP94操作系統(tǒng)版本：windows106.3.2預(yù)置條件（1）環(huán)境條件：項(xiàng)目成功部署到阿里云服務(wù)器，并成功完成登錄完成登錄流程。6.3.3