《基于Spring的音樂網(wǎng)站的設(shè)計(jì)與開發(fā)》16000字

相關(guān)技術(shù)介紹I基于Spring的音樂網(wǎng)站的設(shè)計(jì)與開發(fā)摘要隨著人們所能接觸的音樂越來越多，人們對(duì)音樂的品味也越來越豐富。一方面，用戶需要為自己的歌曲組建歌單，來方便自己可以在不同的時(shí)間段選擇欣賞不同風(fēng)格的音樂；另一方面，系統(tǒng)要基于用戶的興趣來推薦符合用戶喜好的歌曲。因此，為了滿足用戶的這些需求，實(shí)現(xiàn)一個(gè)能夠自動(dòng)搜索音樂庫(kù)并推薦適合用戶的歌曲的音樂推薦系統(tǒng)是很有價(jià)值的?；赟pring開發(fā)的音樂網(wǎng)站，往往需要進(jìn)行大量的配置，隨著運(yùn)營(yíng)時(shí)間的增加、功能的增多，配置文件越來越繁瑣，被維護(hù)人員戲稱為配置地獄。而SpringBoot基于Spring4.0設(shè)計(jì)，不僅繼承了Spring框架原有的優(yōu)秀特性，而且還通過簡(jiǎn)化配置來進(jìn)一步簡(jiǎn)化了Spring應(yīng)用的整個(gè)搭建和開發(fā)過程。使用Springboot框架開發(fā)音樂網(wǎng)站將會(huì)是更加優(yōu)越的選擇。本系統(tǒng)由前臺(tái)和后臺(tái)兩部分構(gòu)成。前臺(tái)主要功能包括播放音樂、選擇歌單、選擇歌手、我的音樂、搜索歌曲、評(píng)論點(diǎn)贊和編輯個(gè)人信息等功能。后臺(tái)主要功能包括歌手管理、歌曲管理、歌單管理、評(píng)論管理、用戶管理和系統(tǒng)詳情介紹。本系統(tǒng)采用前后端分離的技術(shù)架構(gòu)。同時(shí)，系統(tǒng)后臺(tái)會(huì)對(duì)用戶的基本信息提供展示、分析和管理模塊。對(duì)歌手以及歌曲會(huì)以較為直接的餅狀圖和柱狀圖的方式做一定的分析，同時(shí)管理員可以上傳刪除音樂，以及對(duì)用戶評(píng)論的管理模塊，以幫助管理員對(duì)網(wǎng)站內(nèi)容有著較為直觀的感受。本系統(tǒng)的后端部分使用SpringBoot框架，前端部分使用Vue框架，開發(fā)語(yǔ)言是JavaEE和vue2.x，數(shù)據(jù)庫(kù)使用MySQL，并通過Navicat進(jìn)行管理。最后經(jīng)系統(tǒng)測(cè)試結(jié)果表明，本系統(tǒng)界面操作性友好，功能基本滿足預(yù)期的需求。關(guān)鍵詞：音樂網(wǎng)站；推薦系統(tǒng)；數(shù)據(jù)庫(kù)；SpringBoot；Vue目錄28656摘要 I24562Abstract II27918第1章緒論 192191.1研究背景 1172041.2研究現(xiàn)狀 1155241.3研究意義 386341.4研究主要內(nèi)容 3150901.5本文內(nèi)容結(jié)構(gòu) 48142第2章相關(guān)技術(shù)介紹 54832.1Springboot框架簡(jiǎn)介 57962.2SSM框架技術(shù)簡(jiǎn)介 5155412.2.1Spring框架 5320132.2.2SpringMVC框架 6178702.2.3MyBatis框架 768172.3其他技術(shù)介紹 8270262.3.1ElementUI 8175182.3.2Axios技術(shù) 833262.4Vue框架介紹 9223522.5本章小結(jié) 915882第3章音樂網(wǎng)站需求分析 10255373.1系統(tǒng)角色定義 1092413.2系統(tǒng)總體功能結(jié)構(gòu) 10207433.3系統(tǒng)用例分析 12146033.3.1 12190803.3.2用戶功能模塊 13142443.3.3個(gè)人中心模塊 16210953.3.4后臺(tái)管理模塊 17221763.4系統(tǒng)非功能性需求分析 1877053.4.1界面需求 18173303.4.2交互性需求 18137013.4.3可擴(kuò)展性需求 18297313.5本章小結(jié) 182106第4章音樂網(wǎng)站詳細(xì)設(shè)計(jì) 20306124.1系統(tǒng)框架設(shè)計(jì) 2052074.2數(shù)據(jù)庫(kù)設(shè)計(jì) 20298364.3章節(jié)小結(jié) 242980第5章系統(tǒng)實(shí)現(xiàn) 25198735.1系統(tǒng)開發(fā)環(huán)境 2598675.2系統(tǒng)功能模塊實(shí)現(xiàn) 25248605.2.1用戶登錄功能實(shí)現(xiàn) 25152715.2.2游客注冊(cè)功能實(shí)現(xiàn) 27160615.2.3用戶首頁(yè)推薦歌單功能實(shí)現(xiàn) 28105025.2.4歌曲播放模塊功能實(shí)現(xiàn) 29195815.2.5關(guān)鍵詞搜索功能實(shí)現(xiàn) 30174935.2.6個(gè)人信息管理功能實(shí)現(xiàn) 32231705.2.7管理員登錄功能實(shí)現(xiàn) 34290705.2.8系統(tǒng)信息簡(jiǎn)介及統(tǒng)計(jì)圖 35265345.2.9系統(tǒng)管理功能實(shí)現(xiàn) 36153215.3本章小結(jié) 3690215.4測(cè)試目的 37273345.5功能測(cè)試 37240625.5.1用戶登錄注冊(cè)功能測(cè)試 3776915.5.2用戶主要功能模塊測(cè)試 37274495.5.3用戶個(gè)人信息模塊測(cè)試 3831685.5.4管理員后臺(tái)管理模塊測(cè)試 39155565.6本章小結(jié) 399793第6章開發(fā)遇到的問題以及解決思路 4059536.1下拉式折疊菜單導(dǎo)航欄 4091026.2數(shù)據(jù)庫(kù)數(shù)據(jù)分頁(yè)顯示需要注意的問題 40270546.3防止不經(jīng)過登錄頁(yè)面而強(qiáng)行進(jìn)入其他頁(yè)面 4031591結(jié)論 4227232參考文獻(xiàn) 44緒論研究背景音樂作為人類文化的一種普遍表現(xiàn)形式，從心理和生理上影響著人們的休閑、娛樂和健康等生活方式。特別是隨著信息技術(shù)的飛速發(fā)展，大型音樂數(shù)據(jù)庫(kù)迅速崛起，為用戶提供了豐富的數(shù)字音樂資源，卻忽視了用戶短暫或短期的音樂偏好?，F(xiàn)有的緊迫矛盾是超負(fù)荷的音樂和個(gè)人為某種聆聽體驗(yàn)所渴望的歌曲之間的矛盾。因此，隨著互聯(lián)網(wǎng)、大數(shù)據(jù)和人工智能的快速發(fā)展，音樂推薦變得越來越重要，并面臨著前所未有的機(jī)遇，它是心理學(xué)、計(jì)算機(jī)科學(xué)及相關(guān)學(xué)科的突出多學(xué)科應(yīng)用。作為人類文化的一種普遍表達(dá)，音樂影響著個(gè)人的生活方式，包括休閑、娛樂和心理及生理上的幸福。音樂目前大致可以分為以下幾種類型，如流行音樂、搖滾音樂、爵士樂、藍(lán)調(diào)音樂、民謠等。尤其是隨著信息技術(shù)的飛速發(fā)展，大規(guī)模的音樂數(shù)據(jù)庫(kù)迅速崛起，為用戶提供了豐富的數(shù)字音樂資源。在數(shù)字時(shí)代聽音樂更容易，因?yàn)橹悄苁謾C(jī)上的功能可以離線和在線播放音樂。如今，數(shù)字音樂的可用性比前一個(gè)時(shí)代非常豐富，所以整理所有這些數(shù)字音樂非常耗時(shí)，并很容易導(dǎo)致信息疲勞。但是目前推薦系統(tǒng)所基于的原理多樣豐富，彼此之間效果不一，在不同的使用場(chǎng)景和目標(biāo)用戶面前的推薦匹配程度也有高下之別。要想做到眾口能調(diào)，需要對(duì)用戶偏好，使用場(chǎng)景、時(shí)間、地點(diǎn)等各種復(fù)雜因素進(jìn)行綜合考慮，提取出關(guān)鍵特征，并在歌曲庫(kù)中選出符合用戶喜好的定制音樂，讓用戶真正獲得美的享受。研究現(xiàn)狀王輝對(duì)中國(guó)音樂網(wǎng)站現(xiàn)狀的分析，著眼于音樂網(wǎng)站的現(xiàn)狀，分析了音樂傳播中存在的問題。從受眾、媒體、把關(guān)人、法制建設(shè)等角度進(jìn)一步探討了這些問題產(chǎn)生的原因。本文主要解決以下問題：1音樂網(wǎng)站的訪問量和關(guān)注度比例不平衡。2、雖然網(wǎng)站設(shè)計(jì)有自己的特點(diǎn)，但內(nèi)容幾乎相同，創(chuàng)新很少，拼貼和強(qiáng)調(diào)問題嚴(yán)重。3、可能的違規(guī)行為。造成這些問題的原因：1受眾太少。2、為了追求商業(yè)利益，適應(yīng)大眾審美，高品質(zhì)音樂逐漸減少。3、減少了通信過程中的控制環(huán)節(jié)，降低了音樂內(nèi)容的質(zhì)量。4、網(wǎng)站法律架構(gòu)不完善。姚琦和易珂對(duì)網(wǎng)絡(luò)音樂現(xiàn)狀的分析側(cè)重于網(wǎng)站音樂的特點(diǎn)和效益，并分析了網(wǎng)站對(duì)音樂傳播和音樂教育的影響。分析了網(wǎng)站傳播與傳統(tǒng)媒體傳播相比，具有交互性、無時(shí)空性、自由選擇性和速度性等優(yōu)勢(shì)。同時(shí)，還分析了教育和文化交流的各個(gè)方面。最后，文章提到了網(wǎng)站音樂的實(shí)際問題：1在傳輸過程中，數(shù)據(jù)容易丟失，音質(zhì)容易改變。2、高雅藝術(shù)的傳播越來越不利。3、雖然人們的知識(shí)產(chǎn)權(quán)保護(hù)意識(shí)不斷增強(qiáng)，但也面臨著許多社會(huì)和技術(shù)問題。在線收聽和下載網(wǎng)站音樂對(duì)歌唱電影行業(yè)也有很大影響。胡斌從多元文化視角對(duì)網(wǎng)絡(luò)音樂進(jìn)行研究，從類型和特征、存儲(chǔ)格式、傳播模式、文化特征和社會(huì)發(fā)展現(xiàn)狀等方面分析了網(wǎng)站音樂。1、網(wǎng)站音樂分為即時(shí)音樂和非即時(shí)音樂。2、本站音樂來源包括國(guó)家、集體和個(gè)人來源。3、網(wǎng)站音樂具有重復(fù)性和完整性的特點(diǎn)。4、網(wǎng)站音樂實(shí)現(xiàn)了音樂信息的傳輸、存儲(chǔ)、處理和處理的一體化和自動(dòng)化。5、與傳統(tǒng)傳播相比，網(wǎng)站傳播更具個(gè)人性、民間性和公共性。本文提到的九個(gè)網(wǎng)站的社會(huì)文化特征如下：1科學(xué)與藝術(shù)的結(jié)合使網(wǎng)站音樂更具現(xiàn)代性。2、增加音樂種類。3、非主流傾向。4、是最完整的“音視頻存儲(chǔ)器”。時(shí)間和空間的概念變得多維。6、音樂創(chuàng)作越來越流行。音樂傳播的簡(jiǎn)化和民主化。8、溝通是互動(dòng)的。9、網(wǎng)站音樂的受眾越來越年輕。這篇文章提出的問題是，雖然對(duì)網(wǎng)站音樂的研究仍然相對(duì)全面，但它仍處于初級(jí)階段。曾遂的《音樂網(wǎng)絡(luò)傳播與當(dāng)代音樂觀》首先簡(jiǎn)要描述了網(wǎng)站傳播和網(wǎng)站回放，然后分析了公眾欣賞和創(chuàng)作音樂觀念的變化。文章的三個(gè)部分：交流、回放和音樂觀看在各個(gè)層面都是漸進(jìn)的。首先，文章分析了網(wǎng)站傳播的優(yōu)勢(shì)，分析了傳播的內(nèi)容，得出網(wǎng)站傳播具有多元化和全球化的特點(diǎn)，并指出互聯(lián)網(wǎng)用戶習(xí)慣發(fā)生了顯著變化。然后分析了大規(guī)模和多樣化網(wǎng)站復(fù)制的特性。最后，從音樂的角度來看，人們的創(chuàng)作觀和審美觀隨著網(wǎng)站發(fā)布后傳播和復(fù)制形式的變化而變化。筆者還對(duì)存在的問題進(jìn)行了深入思考：網(wǎng)站傳播混雜，對(duì)青少年音樂審美和音樂觀念的負(fù)面影響不容低估。張然的文章《音樂微博傳播的性質(zhì)與實(shí)踐》主要分析了微博在現(xiàn)代社會(huì)音樂傳播中的作用、微博廣告的特點(diǎn)以及如何利用微博發(fā)布和推廣信息。文章提到，微博作為一個(gè)交流平臺(tái)可以有效地推廣音樂，公眾也可以相互交流。當(dāng)然，我們也需要查看微博的信息內(nèi)容。作者鼓勵(lì)音樂從業(yè)者跟上微博時(shí)代的步伐，建設(shè)一支優(yōu)秀的外科團(tuán)隊(duì)，推動(dòng)音樂微博的進(jìn)步和發(fā)展。研究意義音樂推薦系統(tǒng)面臨的挑戰(zhàn)是創(chuàng)建一個(gè)系統(tǒng)，該系統(tǒng)能夠不斷地發(fā)現(xiàn)有吸引力的新音樂，了解用戶對(duì)音樂的偏好。這就需要一個(gè)個(gè)性化的音樂推薦系統(tǒng)來有效地反映個(gè)人喜好。它需要根據(jù)不同目標(biāo)群體的需求進(jìn)行調(diào)整，以實(shí)現(xiàn)個(gè)性化建議。因此，個(gè)性化的音樂推薦系統(tǒng)比一般的推薦系統(tǒng)更加復(fù)雜。結(jié)合音樂特征識(shí)別和音頻處理技術(shù)，充分考慮用戶的需求，提取音樂特征。目前，大多數(shù)音樂推薦系統(tǒng)使用均方根誤差（RMSE）、平均絕對(duì)誤差（MAE）或創(chuàng)建頂級(jí)推薦列表，通過準(zhǔn)確度和召回率來衡量推薦結(jié)果。一般來說，音樂推薦系統(tǒng)可以分為三個(gè)主要部分，即：用戶，項(xiàng)目和用戶——項(xiàng)目匹配算法。首先，為了區(qū)分用戶的音樂品味，我們可以開發(fā)基于用戶簡(jiǎn)單信息的用戶建模，例如地理區(qū)域、年齡、性別、生活方式和興趣。用戶建模將模擬用戶檔案中的差異，以確定他們對(duì)音樂的選擇。比如Bu等人利用社交媒體信息來給出更準(zhǔn)確的音樂推薦。第二，項(xiàng)目描述由三種元數(shù)據(jù)組成，即：編輯、文化和聲學(xué)。它們可以用在各種推薦系統(tǒng)中，例如Bogdanov等人利用體裁元數(shù)據(jù)來提高聽眾的滿意度。最后，匹配算法應(yīng)該能夠自動(dòng)向聽眾推薦個(gè)性化的音樂。基于上文的描述，匹配算法主要有三種方法，即協(xié)同過濾，基于內(nèi)容的過濾和混合過濾。研究主要內(nèi)容本文研究的主要內(nèi)容為設(shè)計(jì)并實(shí)現(xiàn)一個(gè)基于SpringBoot+vue的音樂網(wǎng)站的基本運(yùn)行功能以及后臺(tái)管理模塊。本音樂網(wǎng)站需要為用戶提供貼近偏好的歌單推薦以及基于文化元數(shù)據(jù)的現(xiàn)有歌曲的分類整理。同時(shí)，系統(tǒng)后臺(tái)會(huì)對(duì)用戶的基本信息提供展示、分析和管理模塊。對(duì)歌手以及歌曲會(huì)以較為直接的餅狀圖和柱狀圖的方式做一定的分析，同時(shí)管理員可以上傳刪除音樂，以及對(duì)用戶評(píng)論的管理模塊，以幫助管理員對(duì)網(wǎng)站內(nèi)容有著較為直觀的感受。本網(wǎng)站的開發(fā)平臺(tái)為JDK1.8+Maven3.6.1，所使用的開發(fā)語(yǔ)言為JavaEE+Vue2.X，后臺(tái)所使用的框架為Springboot2.X，前端框架則是Vue2.9.6。系統(tǒng)采用的數(shù)據(jù)庫(kù)為Mysql5.7，對(duì)應(yīng)的管理工具為Navicat。前端代碼的開發(fā)工具為HBuild，后端代碼的開發(fā)工具是Idea。推薦算法部分會(huì)通過基于文化元數(shù)據(jù)的混合推薦來實(shí)現(xiàn)。本文內(nèi)容結(jié)構(gòu)本文共分六章。各章內(nèi)容如下：第一章緒論：本章首先介紹了研究背景，然后介紹了研究分析和意義，包括基于內(nèi)容的推薦、協(xié)同過濾和混合推薦的研究現(xiàn)狀。最后，介紹了該網(wǎng)站的內(nèi)容和意義。第二章系統(tǒng)分析：本章主要介紹音樂網(wǎng)站的功能描述和后臺(tái)管理系統(tǒng)的功能描述；其次，對(duì)系統(tǒng)功能性需求用例進(jìn)行了使用UML圖的方式進(jìn)行詳解，包括:使用者登陸注冊(cè)模塊、首頁(yè)歌單歌手推薦模塊、歌曲播放模塊、歌曲操作模塊、歌單分類模塊、歌手分類模塊、我的音樂模塊、以及后臺(tái)管理模塊；而后對(duì)系統(tǒng)的非功能性的需求上進(jìn)行了以下論述，包括性能需求、交互性需求、可擴(kuò)展性需求，以及最后進(jìn)行本章小結(jié)。第三章系統(tǒng)設(shè)計(jì):這一章節(jié)主要介紹了系統(tǒng)設(shè)計(jì)，首先是對(duì)系統(tǒng)整體的架構(gòu)設(shè)計(jì)的描述;接下來，說明了系統(tǒng)流程設(shè)計(jì):然后，針對(duì)系統(tǒng)功能做了詳細(xì)的分析與設(shè)計(jì);最后，對(duì)于每一個(gè)數(shù)據(jù)庫(kù)表，也做了較為詳細(xì)地設(shè)計(jì)與分析，并依次通過表格的模式展現(xiàn)出來。第四章系統(tǒng)實(shí)現(xiàn)與界面展示:這一-章節(jié)的主要內(nèi)容是以下幾個(gè)方面，首先是對(duì)音樂網(wǎng)站的開發(fā)環(huán)境(包括軟硬件以及開發(fā)工具)進(jìn)行了說明；然后，將整個(gè)網(wǎng)站的功能頁(yè)面進(jìn)行分割，并通過貼圖的方式進(jìn)行詳細(xì)講解。第五章系統(tǒng)測(cè)試:這一章節(jié)開頭先以表格的形式說明了系統(tǒng)測(cè)試的環(huán)境,緊接著對(duì)系統(tǒng)的功能進(jìn)行測(cè)試，包括登陸注冊(cè)模塊的測(cè)試、歌曲播放模塊的測(cè)試、歌單分類模塊的測(cè)試、歌手分類模塊的測(cè)試、我的音樂模塊的測(cè)試、以及后臺(tái)管理模塊的測(cè)試，然后進(jìn)行了測(cè)試結(jié)果分析。第六章結(jié)論與展望:這一章節(jié)首先對(duì)全文的書寫以及音樂網(wǎng)站的整個(gè)成果做了概括性、具體性的總結(jié)，并指出了目前本系統(tǒng)還存在的一-些不夠完美、不足的地方，并在總結(jié)的基礎(chǔ)上做出有關(guān)系統(tǒng)的進(jìn)一步改進(jìn)措施和相關(guān)展望。相關(guān)技術(shù)介紹Springboot框架簡(jiǎn)介Springboot是一個(gè)JavaWeb開發(fā)框架，類似于Spring的mvc（模型-視圖-控制器）三層架構(gòu)，簡(jiǎn)化開發(fā)是它比其他JavaWeb框架的好的地方，通過一些規(guī)定來代替繁瑣的配置，因此通過Springboot框架能夠快速設(shè)計(jì)網(wǎng)頁(yè)程序，程序員只需要寫幾行簡(jiǎn)單的代碼就可以開發(fā)一個(gè)接口。Springboot是在spring的基礎(chǔ)上開發(fā)的，它不提供spring框架的核心功能和擴(kuò)展功能特性，但在某種程度上只服務(wù)于基于spring框架的新一代應(yīng)用程序開發(fā)程序的快速和敏捷開發(fā)。約定大于配置是springboot的實(shí)現(xiàn)原則之一。我們只需要記住springboot默認(rèn)幫助我們實(shí)現(xiàn)的任務(wù)，我們不需要自己實(shí)現(xiàn)它們。開箱即用是springboot實(shí)現(xiàn)的另一個(gè)原則。由于使用約定的概念比配置更大，因此無需進(jìn)行配置。因此，我們只需要向POM文件添加相關(guān)依賴項(xiàng)，springboot就會(huì)自動(dòng)完成準(zhǔn)備工作。開箱即用和配置約定是springboot的兩個(gè)核心策略：它們是spring框架的擴(kuò)展和擴(kuò)展。Springboot還可以無縫集成其他主流框架，更好地服務(wù)于軟件應(yīng)用程序開發(fā)事業(yè)。SSM框架技術(shù)簡(jiǎn)介Spring框架Spring框架是一個(gè)由RodJohnson根據(jù)同是自己開發(fā)的interface21重新設(shè)計(jì)的框架，它部署方便、體積輕巧，可以和任何工程結(jié)合而不改變其本身結(jié)構(gòu)。Spring框架是為了讓復(fù)雜的企業(yè)項(xiàng)目開發(fā)流程變得簡(jiǎn)單一些而創(chuàng)建的，特點(diǎn)是易用、測(cè)試簡(jiǎn)單、松耦合。它的特點(diǎn)是IOC和AOP。IOC是一種思想，就像它的字面意思一樣，將控制權(quán)限反轉(zhuǎn)交給使用者。在我們進(jìn)行傳統(tǒng)開發(fā)的過程中，因?yàn)橛脩舻男枨笫嵌嘧兊?，每一次?dāng)用戶的需求發(fā)生一些變化，我們都需要在源代碼里進(jìn)行修改操作，如果一個(gè)程序有千萬(wàn)行代碼，那么可以想象修改起來是多么繁瑣且危險(xiǎn)的。之所以會(huì)這樣是因?yàn)?，?duì)象的創(chuàng)建和對(duì)象之間的依賴關(guān)系在程序中被完全解碼，控制權(quán)掌握在程序員手中。因此，根據(jù)IOC的思想，我們不再需要解碼程序中對(duì)象的對(duì)象依賴性，而是第三個(gè)給它所依賴的對(duì)象，這就是注入。根據(jù)用戶的需求，更改需要注入的對(duì)象，這樣就降低了耦合度，減少了修改的成本。它的實(shí)現(xiàn)方式有set方法注入、DI等等。AOP是一種面向切面編程的方式，通過一些技術(shù)實(shí)現(xiàn)在不改動(dòng)原來程序代碼的基礎(chǔ)上添加新代碼的模式。AOP是Spring很重要的一個(gè)理念，可以用來分離交叉關(guān)注點(diǎn)，使不同功能模塊之間的耦合度降低，讓代碼可以重復(fù)使用，讓開發(fā)更加快速。SpringMVC框架SpringMVC是Spring框架的一部分，它是一個(gè)使用MVC（模型-視圖-控制器）結(jié)構(gòu)的Web框架，底層是用Java開發(fā)的。它的特點(diǎn)是：輕量化、入門容易、效率高、到處運(yùn)行等。圖2-2是SpringMVC的原理圖。圖2-2SpringMVC的執(zhí)行流程圖MyBatis框架MyBatis前身是阿帕奇旗下的一個(gè)開源項(xiàng)目，叫做iBatis，是一個(gè)基于JAVA，支持自定義SQL、存儲(chǔ)過程和高級(jí)映射的持久層框架。一般情況下，一個(gè)MyBatis映射器由包含一些MyBatis注釋的Java接口組成，將POJO與存儲(chǔ)過程或者SQL連接在一起。MyBatis同時(shí)具有一個(gè)映射引擎，這個(gè)映射引擎能夠用一種聲明式的方法把SQL結(jié)果映射到對(duì)象樹。MyBatis還提供了插件MyBatis-Plus，可以自檢數(shù)據(jù)庫(kù)表并生成可以執(zhí)行CDUR操作（create,delete,updateandread,即增刪改查）的Xml文件，一般稱之為逆向工程。圖2-3是MyBatis的原理圖。圖2-3Mybatis原理圖其他技術(shù)介紹ElementUIElementUI是一個(gè)免費(fèi)開源的Vue組件庫(kù)，它提供了很多簡(jiǎn)潔美觀的組件，通過一些預(yù)先設(shè)定的簡(jiǎn)單屬性設(shè)置就可以改變大小、顏色，我們可以用它很快的開發(fā)一個(gè)網(wǎng)頁(yè)應(yīng)用。Axios技術(shù)Axios是對(duì)Ajax進(jìn)行封裝產(chǎn)生的新技術(shù)。與以往的Web應(yīng)用采用的callback模式、客戶端過分依賴服務(wù)器的響應(yīng)不一樣，Axios的應(yīng)用模式使用的是異步的promise模式。Vue框架介紹Vue是由尤雨溪設(shè)計(jì)的開源前端開發(fā)框架，主要用來快速創(chuàng)建UI。與其它框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用，Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。本章小結(jié)在這一章里，我首先描述了Springboot框架的相關(guān)知識(shí)，隨后描述了Spring、SpringMVC、Mybatis等知識(shí)，點(diǎn)出了這些技術(shù)的原理與發(fā)展。最后介紹了Axios、ElementUI、Vue等前端技術(shù)，為網(wǎng)站的開發(fā)打下了堅(jiān)實(shí)的基礎(chǔ)。音樂網(wǎng)站需求分析音樂網(wǎng)站需求分析系統(tǒng)角色定義可使用本系統(tǒng)的主要用戶分為三個(gè)角色：游客，用戶，系統(tǒng)管理員。各個(gè)角色的詳細(xì)定義如下。游客：未進(jìn)行注冊(cè)并登錄的用戶，僅能夠?yàn)g覽并使用部分功能，如首頁(yè)展示歌單，歌單分類，歌手分類，播放歌曲，下載歌曲。用戶：指完成了注冊(cè)并登錄的用戶，可瀏覽并使用大部分功能，如首頁(yè)推薦歌單，歌單分類，歌手分類，播放歌曲，下載歌曲，收藏歌曲，整理歌單，評(píng)論點(diǎn)贊，編輯個(gè)人信息，修改頭像。系統(tǒng)管理員：管理本系統(tǒng)中的全部數(shù)據(jù)，管理全部用戶賬號(hào)，管理全部歌單數(shù)據(jù)，管理全部歌手?jǐn)?shù)據(jù)，能夠查看系統(tǒng)詳情頁(yè)。系統(tǒng)總體功能結(jié)構(gòu)基于Springboot+Vue的音樂網(wǎng)站系統(tǒng)功能模塊結(jié)構(gòu)圖如圖3.1所示。圖3.1系統(tǒng)功能結(jié)構(gòu)本音樂網(wǎng)站的應(yīng)用以及管理端都是在Web網(wǎng)頁(yè)端運(yùn)行實(shí)現(xiàn)，在功能上，系統(tǒng)主要分為四個(gè)模塊：用戶登錄注冊(cè)模塊、用戶功能模塊、個(gè)人中心模塊和后臺(tái)管理模塊。音樂網(wǎng)站對(duì)這些模塊的具體要求和功能如下：1、用戶登錄模塊：本模塊的主要功能是實(shí)現(xiàn)網(wǎng)站注冊(cè)用戶的在線注冊(cè)和更改用戶登錄密碼；以及未注冊(cè)游客的在線注冊(cè)功能。2、用戶功能模塊：本模塊的主要功能是為用戶和未注冊(cè)游客提供服務(wù)。對(duì)于尚未注冊(cè)的游客，可以查看歌單以及歌單詳情頁(yè)面，歌手以及歌手詳情頁(yè)面，播放歌曲，查看歌詞，下載歌曲，搜索歌曲等功能；對(duì)于網(wǎng)站已注冊(cè)的用戶，除了上述功能外，可以訪問我的歌單，收藏其他歌曲，對(duì)其他歌單進(jìn)行評(píng)論點(diǎn)贊等功能。3、個(gè)人中心模塊：此模塊允許登錄用戶更改個(gè)人信息、更改頭像、查看和編輯我的歌曲列表。4、后臺(tái)管理模塊本模塊完成了對(duì)用戶、歌曲列表信息和歌曲信息的管理，并可以查看系統(tǒng)詳細(xì)信息。管理員賬號(hào)可以完成對(duì)用戶歌單評(píng)論的管理，添加或者封禁用戶賬戶，添加或者刪除歌手或者歌單內(nèi)的音樂，對(duì)已有歌曲信息進(jìn)行修改。系統(tǒng)用例分析用戶登錄注冊(cè)模塊用戶登錄注冊(cè)模塊的功能用例圖如圖3.2所示。圖3.2用戶登錄注冊(cè)模塊的功能用例整個(gè)模塊用例主要描繪了系統(tǒng)用戶的當(dāng)前登錄狀態(tài)。描繪用戶登錄賬號(hào)、登出賬號(hào)、修改密碼，以及游客的注冊(cè)是否成功發(fā)回后端的狀態(tài)。其具體的用例規(guī)約如表3.1所示。用例標(biāo)號(hào)UC2-1用例名稱登錄注冊(cè)系統(tǒng)用例簡(jiǎn)述用戶登錄系統(tǒng)，游客注冊(cè)系統(tǒng)用例范圍用戶，游客，系統(tǒng)主要參與者用戶，游客前置條件用戶發(fā)起登錄請(qǐng)求，游客發(fā)起注冊(cè)請(qǐng)求。后置條件系統(tǒng)提示成功登錄，系統(tǒng)提示已完成注冊(cè)?；臼录鞑襟E活動(dòng)1用戶發(fā)起登錄請(qǐng)求，提交登錄信息。游客發(fā)起注冊(cè)請(qǐng)求，提交注冊(cè)信息。2系統(tǒng)接收前端發(fā)送的登錄請(qǐng)求，提交數(shù)據(jù)庫(kù)獲得驗(yàn)證，將驗(yàn)證結(jié)果發(fā)回前端。系統(tǒng)接收前端的注冊(cè)請(qǐng)求，提交數(shù)據(jù)庫(kù)獲得驗(yàn)證，將驗(yàn)證結(jié)果發(fā)回前端。3用戶收到登錄結(jié)果。游客收到注冊(cè)結(jié)果。擴(kuò)展事件流2.1系統(tǒng)審核登錄信息未通過，提示重新輸入登錄信息。系統(tǒng)審核注冊(cè)信息未通過，提示重新輸入注冊(cè)信息。表3.1用戶登錄注冊(cè)系統(tǒng)用例規(guī)約用戶功能模塊用戶功能模塊的功能用例圖如圖3.3所示。圖3.3用戶功能模塊的功能用例整個(gè)用例模塊描述了用戶主體模塊的功能需求，同時(shí)也是系統(tǒng)的核心功能需求。圖2.3描繪了用戶使用主體功能的用例圖，主要表現(xiàn)了用戶的四大需求：搜索歌曲、歌單，對(duì)歌曲的操作，對(duì)歌單的操作，對(duì)歌手的操作。接下來將詳細(xì)描述各個(gè)用例。搜索歌曲以及歌單是系統(tǒng)的重要功能，該功能的具體流程如用例規(guī)約表2.2所示。用例標(biāo)號(hào)UC2-2用例名稱搜索歌曲、歌單用例簡(jiǎn)述用戶或者游客搜索歌曲、歌單用例范圍用戶，游客，系統(tǒng)主要參與者用戶，游客前置條件用戶或者游客發(fā)送搜索請(qǐng)求后置條件系統(tǒng)返回搜索結(jié)果基本事件流步驟活動(dòng)1用戶或者游客輸入關(guān)鍵詞，提交搜索請(qǐng)求。2系統(tǒng)接收前端的搜索請(qǐng)求，后端搜索數(shù)據(jù)庫(kù)獲得結(jié)果，將結(jié)果返回前端。3用戶獲得歌曲、歌單的對(duì)應(yīng)搜索結(jié)果。擴(kuò)展事件流2.1搜索數(shù)據(jù)庫(kù)沒有找到搜索關(guān)鍵詞，返回暫無歌曲內(nèi)容的結(jié)果。表3.2搜索歌曲、歌單系統(tǒng)用例規(guī)約操作歌曲功能是系統(tǒng)的核心功能，該功能的具體流程如用例規(guī)約表2.3所示。用例標(biāo)號(hào)UC2-3用例名稱操作歌曲用例簡(jiǎn)述用戶或者游客對(duì)歌曲進(jìn)行操作用例范圍用戶，游客，系統(tǒng)主要參與者用戶，游客前置條件用戶或者游客選擇任意歌曲發(fā)送播放請(qǐng)求后置條件返回對(duì)應(yīng)的操作結(jié)果基本事件流步驟活動(dòng)1用戶或者游客選擇任意歌曲點(diǎn)擊播放。2用戶或者游客選擇操作。3系統(tǒng)返回對(duì)應(yīng)的操作結(jié)果。擴(kuò)展事件流2.1選擇上一首、下一首：播放歌單內(nèi)的上一首、下一首歌曲。2.2播放/暫停：暫停當(dāng)前歌曲的播放進(jìn)度。2.3拖動(dòng)進(jìn)度條：歌曲進(jìn)度隨進(jìn)度指針跳轉(zhuǎn)。2.4調(diào)整音量：增大/縮小歌曲音量。2.5收藏：用戶可以將歌曲加入自己歌單。/游客則提示請(qǐng)先登錄。2.6下載：將歌曲下載到本地。2.7顯示當(dāng)前播放列表：顯示當(dāng)前歌單內(nèi)所有歌曲。2.8顯示歌詞：顯示全部歌詞，會(huì)隨歌曲進(jìn)度輪播。表3.3操作歌曲系統(tǒng)用例規(guī)約操作歌單分類功能是系統(tǒng)的關(guān)鍵功能，該功能的具體流程如用例規(guī)約表3.4所示。用例標(biāo)號(hào)UC2-4用例名稱操作歌單分類用例簡(jiǎn)述用戶或者游客對(duì)歌單進(jìn)行操作用例范圍用戶，游客，系統(tǒng)主要參與者用戶，游客前置條件用戶或者游客點(diǎn)擊進(jìn)入任意歌單的詳情頁(yè)后置條件返回對(duì)應(yīng)的操作結(jié)果基本事件流步驟活動(dòng)1用戶或者游客點(diǎn)擊進(jìn)入任意歌單。2用戶或者游客能看到該歌單簡(jiǎn)介以及評(píng)分，然后選擇操作。3系統(tǒng)返回對(duì)應(yīng)的操作結(jié)果。表2.4操作歌單分類系統(tǒng)用例規(guī)約擴(kuò)展事件流2.1選擇播放歌單內(nèi)歌曲：對(duì)應(yīng)歌曲開始播放。2.2對(duì)歌單進(jìn)行評(píng)分：用戶已登錄時(shí)頁(yè)面顯示該用戶具體分?jǐn)?shù)，游客則提示登錄。2.3對(duì)歌單進(jìn)行評(píng)論：用戶已登錄時(shí)系統(tǒng)頁(yè)面顯示該用戶評(píng)論，游客則提示登錄。續(xù)表3.4操作歌單分類系統(tǒng)用例規(guī)約操作歌手分類功能是系統(tǒng)的重要功能，該功能的具體流程如用例規(guī)約表2.5所示。用例標(biāo)號(hào)UC2-5用例名稱操作歌手分類用例簡(jiǎn)述用戶或者游客對(duì)歌手分類進(jìn)行操作用例范圍用戶，游客，系統(tǒng)主要參與者用戶，游客前置條件用戶或者游客選擇任意歌手進(jìn)入詳情頁(yè)后置條件返回對(duì)應(yīng)的操作結(jié)果基本事件流步驟活動(dòng)1用戶和游客點(diǎn)擊進(jìn)入歌手詳情頁(yè)面。2用戶和游客可以查看歌手詳細(xì)信息。3用戶和游客可以選擇播放該歌手歌曲。擴(kuò)展事件流無。表3.5操作歌手分類系統(tǒng)用例規(guī)約個(gè)人中心模塊個(gè)人中心模塊的功能用例圖如圖3.4所示。圖3.4個(gè)人中心模塊的功能用例個(gè)人中心模塊主要面向已注冊(cè)的用戶，為用戶提供個(gè)人資料的修改以及頭像的更換。個(gè)人中心模塊重點(diǎn)在于可以讓用戶更換用戶名和密碼，并可以對(duì)自身所處文化地區(qū)進(jìn)行修改。個(gè)人中心的管理是系統(tǒng)的重要功能，該功能的具體流程如用例規(guī)約表2.6所示。用例標(biāo)號(hào)UC2-6用例名稱個(gè)人中心管理用例簡(jiǎn)述用戶個(gè)人信息做編輯和修改用例范圍用戶，系統(tǒng)主要參與者用戶前置條件用戶點(diǎn)擊頭像進(jìn)入個(gè)人信息中心后置條件系統(tǒng)提示個(gè)人信息修改成功基本事件流步驟活動(dòng)1用戶進(jìn)入個(gè)人中心界面。2用戶編輯個(gè)人資料并提交。3系統(tǒng)提示修改成功，返回首頁(yè)。擴(kuò)展事件流2.1用戶可以選擇上傳頭像圖片。2.2系統(tǒng)獲取用戶提交信息，修改失敗則直接返回首頁(yè)并提示修改失敗。表3.6個(gè)人中心管理系統(tǒng)用例規(guī)約后臺(tái)管理模塊后臺(tái)管理模塊的功能用例圖如圖3.5所示。圖3.5后臺(tái)管理模塊的功能用例后臺(tái)管理模塊包括系統(tǒng)簡(jiǎn)介，用戶管理，歌單管理，歌手管理等功能。管理員對(duì)整個(gè)音樂網(wǎng)站有著非常關(guān)鍵的作用，其具體的用例描述如圖3.5。對(duì)于整個(gè)后臺(tái)管理模塊，以歌單管理功能中添加歌單為例，管理員對(duì)歌單里的歌曲和評(píng)論進(jìn)行了增刪改查的工作，該功能的具體流程如用例規(guī)約表3.7所示。用例標(biāo)號(hào)UC2-7用例名稱歌單管理用例簡(jiǎn)述管理員對(duì)系統(tǒng)內(nèi)歌單做添加等操作用例范圍管理員，系統(tǒng)主要參與者管理員前置條件管理員進(jìn)行歌單管理操作后置條件系統(tǒng)更新修改后歌單內(nèi)容基本事件流步驟活動(dòng)1管理員使用歌單管理功能，選擇添加歌單，輸入歌單標(biāo)題，簡(jiǎn)介，風(fēng)格給系統(tǒng)。2系統(tǒng)創(chuàng)建歌單，管理員需要添加歌曲并輸入對(duì)應(yīng)歌曲信息。3后臺(tái)系統(tǒng)顯示添加后的歌曲信息。擴(kuò)展事件流2.1后臺(tái)系統(tǒng)并未找到對(duì)應(yīng)歌曲，添加失敗。表3.7后臺(tái)管理系統(tǒng)用例規(guī)約系統(tǒng)非功能性需求分析本音樂網(wǎng)站面向音樂愛好者整個(gè)用戶群體，提供較為完整的音樂類的服務(wù)，在系統(tǒng)非功能性需求上有著界面美觀、交互性良好、可擴(kuò)展性良好等方面的要求。界面需求一個(gè)網(wǎng)站的界面設(shè)計(jì)往往會(huì)給人留下的最直觀的第一印象。因此我的整個(gè)網(wǎng)站的第一要求就是界面美觀整潔，并且在導(dǎo)航欄處要將整個(gè)網(wǎng)站主要的功能羅列開來，爭(zhēng)取不讓用戶在操作過程中感到繁瑣。另外，在ui設(shè)計(jì)上采用了扁平化的設(shè)計(jì)理念，大氣親人，給用戶一種平等友好的使用體驗(yàn)。最后，在網(wǎng)頁(yè)圖標(biāo)的排布上，我盡可能地保有足夠的距離，使得整體觀感整潔干爽，并且易用方便不拖沓。交互性需求在交互形式上，本網(wǎng)站做到了幾個(gè)使用細(xì)節(jié)上的優(yōu)化。首先，在進(jìn)入任意歌單后點(diǎn)擊播放音樂，右下角的音樂播放欄處有一個(gè)歌單管理按鈕，當(dāng)用戶打算瀏覽別的歌單，或者對(duì)我的音樂進(jìn)行整理時(shí)，點(diǎn)擊歌單管理按鈕，隨時(shí)可以繼續(xù)瀏覽剛才播放音樂的歌單。此外，如果當(dāng)前歌單過長(zhǎng)，用戶打算從頭瀏覽，頁(yè)面右下角的回到頂部按鈕也能幫助用戶節(jié)約時(shí)間，體驗(yàn)到網(wǎng)頁(yè)操作的流暢。可擴(kuò)展性需求網(wǎng)站可拓展性的強(qiáng)弱直接反映一個(gè)網(wǎng)站的應(yīng)變能力。當(dāng)用戶的需求發(fā)生變化時(shí)，人們對(duì)于網(wǎng)頁(yè)新興功能的期待不言而喻，所以一個(gè)系統(tǒng)需要擁有很強(qiáng)的拓展能力，才能適應(yīng)時(shí)代的變化，及時(shí)地對(duì)自身功能和產(chǎn)品定位做出調(diào)整。只有這樣才能獲得用戶的青睞。本章小結(jié)本章主要從音樂網(wǎng)站的功能性需求以及非功能性需求出發(fā)，詳細(xì)地介紹了整個(gè)網(wǎng)站在系統(tǒng)設(shè)計(jì)層面的特點(diǎn)。首先分析了系統(tǒng)框架結(jié)構(gòu)，并由此展開，利用功能結(jié)構(gòu)圖和UML用例圖對(duì)功能需求做了詳細(xì)的分析。其次，通過功能模塊的用例圖以及用例規(guī)約表，對(duì)系統(tǒng)的前端后端分別做了詳細(xì)的介紹，最后，從非功能性需求出發(fā)，簡(jiǎn)要地分析了系統(tǒng)已經(jīng)打下的基礎(chǔ)和日后所要進(jìn)一步優(yōu)化的方向。音樂網(wǎng)站詳細(xì)設(shè)計(jì)音樂網(wǎng)站詳細(xì)設(shè)計(jì)系統(tǒng)框架設(shè)計(jì)本音樂網(wǎng)站整體上可分為客戶端系統(tǒng)和管理員端系統(tǒng)，主要采用的是前后端分離的springboot+vue框架，數(shù)據(jù)庫(kù)主要使用MySQL數(shù)據(jù)庫(kù)，并通過MyBatis中間件技術(shù)做持久層開發(fā)，與Dao層和數(shù)據(jù)層進(jìn)行數(shù)據(jù)交互。前端頁(yè)面部分負(fù)責(zé)小部分?jǐn)?shù)據(jù)處理，并且還需要調(diào)用后端接口以及發(fā)送請(qǐng)求回后端；而后端部分主要負(fù)責(zé)業(yè)務(wù)邏輯和大部分?jǐn)?shù)據(jù)的處理，同時(shí)需要將發(fā)送的數(shù)據(jù)返回前端。在上一章需求分析的基礎(chǔ)上，本章節(jié)將主要從數(shù)據(jù)庫(kù)E-R圖設(shè)計(jì)入手，分析數(shù)據(jù)庫(kù)方面的設(shè)計(jì)。在此之前，首先展示本音樂網(wǎng)站的系統(tǒng)框架圖，如圖4.1所示。圖4.1系統(tǒng)架構(gòu)設(shè)計(jì)數(shù)據(jù)庫(kù)設(shè)計(jì)本音樂網(wǎng)站主要使用MySQL數(shù)據(jù)庫(kù)來存儲(chǔ)音樂數(shù)據(jù)和用戶信息。數(shù)據(jù)庫(kù)的E-R圖如圖4.2所示。圖4.2系統(tǒng)E-R圖用戶信息表consumer表如表4.1所示此表包含主ID、用戶登錄名、用戶密碼、性別、電話號(hào)碼、電子郵件號(hào)碼、出生日期、個(gè)人資料、化身鏈接、位置、用戶創(chuàng)建時(shí)間、用戶更新時(shí)間等。表4.1consunmer表字段名類型長(zhǎng)度主鍵允許空值字段描述idint11是否主鍵,會(huì)隨著用戶數(shù)量增多而自動(dòng)遞增usernamevarchar255否用戶登錄名passwordvarchar255否用戶密碼sextinyint1否性別（0女1男2不明）phone_numchar15是電話號(hào)碼emailchar15是電子郵箱號(hào)碼birthdatetime否出生日期introductionvarchar255是個(gè)人簡(jiǎn)介avatorvarcher255是頭像鏈接locationvarchar255否所在地區(qū)create_timedatetime否用戶創(chuàng)建時(shí)間update_timedatetime否用戶更新時(shí)間歌曲表song表如表4.2所示本表包括主ID、歌手ID、歌曲名、歌曲簡(jiǎn)介、歌曲創(chuàng)建時(shí)間、歌曲更新時(shí)間、歌曲圖片、歌詞、歌曲鏈接等內(nèi)容。表4.2song表字段名類型長(zhǎng)度主鍵允許空值字段描述idint11是否主鍵,會(huì)隨著歌曲數(shù)量增多而自動(dòng)遞增singer_idint11否外鍵，歌手idnamevarchar255否歌曲名introductionvarchar255是歌曲簡(jiǎn)介create_timedatetime否歌曲創(chuàng)建時(shí)間update_timedatetime否歌曲更新時(shí)間picvarchar255是歌曲圖片lyrictext是歌詞urlvarchar255否歌曲鏈接歌手表singer表如表4.3所示本表包括主ID、歌手姓名、歌手性別、歌手頭像、出生日期、所在地區(qū)、歌手簡(jiǎn)介等內(nèi)容。表4.3singer表字段名類型長(zhǎng)度主鍵允許空值字段描述idint11是否主鍵,會(huì)隨著歌手?jǐn)?shù)量增多而自動(dòng)遞增namevarchar255否歌手姓名sextinyint1否歌手性別（0女1男2組合3不明）picvarchar255是歌手頭像birthdatetime否出生日期locationvarchar255否所在地區(qū)introductiontext是歌手簡(jiǎn)介歌單表song_list表如表4.4所示本表包括主ID、歌單標(biāo)題歌單圖片、歌單簡(jiǎn)介、歌單風(fēng)格等內(nèi)容。表4.4song_list表字段名類型長(zhǎng)度主鍵允許空值字段描述idint11是否主鍵,會(huì)隨著歌單數(shù)量增多而自動(dòng)遞增titlevarchar255否歌單標(biāo)題picvarchar255是歌單圖片introductiontext是歌單簡(jiǎn)介stylevarchar255否歌單風(fēng)格歌曲收藏表collect表如表3.5所示本表包括主ID、用戶ID、風(fēng)格、歌曲id、歌單id、創(chuàng)建時(shí)間等內(nèi)容表4.5collect表字段名類型長(zhǎng)度主鍵允許空值字段描述idint11是否主鍵,會(huì)隨著收藏?cái)?shù)量增多而自動(dòng)遞增user_idint11否外鍵，用戶idtypetinyint1否風(fēng)格song_idint11否外鍵，歌曲idsong_list_idint11否外鍵，歌單idcreate_timedatetime否創(chuàng)建時(shí)間表4.5collect表歌單評(píng)論表comment表如表3.6所示本表包括主ID、用戶id、風(fēng)格、歌曲id、歌單id、評(píng)論內(nèi)容、創(chuàng)建時(shí)間、評(píng)論點(diǎn)贊數(shù)等內(nèi)容。表4.6comment表字段名類型長(zhǎng)度主鍵允許空值字段描述idint11是否主鍵,會(huì)隨著評(píng)論數(shù)量增多而自動(dòng)遞增user_idint11否外鍵，用戶idtypetinyint1否風(fēng)格song_idint11否外鍵，歌曲idsong_list_idint11否外鍵，歌單idcontentvarchar255否評(píng)論內(nèi)容create_timedatetime否創(chuàng)建時(shí)間upint否評(píng)論點(diǎn)贊數(shù)章節(jié)小結(jié)根據(jù)上一章的需求分析，我在這一章節(jié)描繪了系統(tǒng)的框架結(jié)構(gòu)圖，清晰地表現(xiàn)了音樂網(wǎng)站的客戶端、后臺(tái)管理端以及數(shù)據(jù)庫(kù)端之間的聯(lián)系，并更好地厘清了整體框架下的業(yè)務(wù)邏輯，對(duì)各個(gè)功能模塊的設(shè)計(jì)有了初步的思路和實(shí)現(xiàn)想法。最后，對(duì)于數(shù)據(jù)庫(kù)，我基于詳細(xì)的需求分析和用例圖，順利地將數(shù)據(jù)庫(kù)系統(tǒng)的E-R圖設(shè)計(jì)并繪制出來。再根據(jù)E-R圖，我具體地設(shè)計(jì)出每一個(gè)數(shù)據(jù)庫(kù)表結(jié)構(gòu)，并詳細(xì)地記錄在數(shù)據(jù)庫(kù)表格里。本章的工作為實(shí)現(xiàn)系統(tǒng)的運(yùn)行奠定了良好的基礎(chǔ)。音樂網(wǎng)站功能測(cè)試系統(tǒng)實(shí)現(xiàn)系統(tǒng)開發(fā)環(huán)境本推薦網(wǎng)站的客戶端，服務(wù)端都在本機(jī)運(yùn)行，本機(jī)配置以及軟件開發(fā)平臺(tái)如表4.1所示。序號(hào)名稱詳細(xì)內(nèi)容1CPUIntel(R)Core(TM)i7-7700HQCPU@2.80GHz2RAM16.0GB3操作系統(tǒng)Windows1064位操作系統(tǒng),基于x64的處理器4開發(fā)平臺(tái)JDK11+Maven3.6.15數(shù)據(jù)庫(kù)MySQL8.06開發(fā)語(yǔ)言JavaEE+vue2.X7前端開發(fā)工具HbuildX8后端開發(fā)工具IntelliJIDEA9數(shù)據(jù)庫(kù)管理工具NavicatforMySQL10瀏覽器MicrosoftEdge表4.1開發(fā)配置表系統(tǒng)功能模塊實(shí)現(xiàn)用戶登錄功能實(shí)現(xiàn)用戶進(jìn)入音樂網(wǎng)站，可以點(diǎn)擊登錄按鈕，如果輸入賬號(hào)密碼正確，則登錄成功；若數(shù)據(jù)庫(kù)不存在該賬號(hào)信息或者密碼錯(cuò)誤，則提示登錄失敗。具體如圖4.1，4.2所示。此外，當(dāng)輸入框失去焦點(diǎn)時(shí)，會(huì)檢測(cè)輸入信息是否符合長(zhǎng)度要求并提示消息。登錄成功后自動(dòng)跳轉(zhuǎn)到系統(tǒng)首頁(yè)。圖4.1登錄成功圖4.1登錄失敗實(shí)現(xiàn)代碼:游客注冊(cè)功能實(shí)現(xiàn)游客初次進(jìn)入網(wǎng)站時(shí)，可以點(diǎn)擊注冊(cè)按鈕進(jìn)入注冊(cè)界面，按照要求輸入注冊(cè)信息。如果符合信息輸入規(guī)范便可以成功注冊(cè)。具體如圖4.3，圖4.4所示。圖4.3注冊(cè)不符合輸入規(guī)范圖4.4游客注冊(cè)頁(yè)面實(shí)現(xiàn)代碼：用戶首頁(yè)推薦歌單功能實(shí)現(xiàn)本音樂網(wǎng)站的推薦模塊主要采用基于文化元數(shù)據(jù)的內(nèi)容推薦算法。選擇該算法主要考慮到本系統(tǒng)現(xiàn)有數(shù)據(jù)量并不大，選擇協(xié)同過濾算法推薦很有可能會(huì)出現(xiàn)數(shù)據(jù)稀疏化的問題，使推薦效果比較差；而基于內(nèi)容的推薦算法主要根據(jù)音樂本身的特征進(jìn)行推薦，在數(shù)據(jù)量不大的情況下依舊可以達(dá)到一定的推薦效果，再通過基于文化元數(shù)據(jù)算法的推薦算法的優(yōu)化，可以達(dá)到相對(duì)較好的推薦效果。具體推薦效果如圖4.5所示。圖4.5首頁(yè)推薦結(jié)果實(shí)現(xiàn)代碼：歌曲播放模塊功能實(shí)現(xiàn)用戶和游客可以選擇歌曲，點(diǎn)擊之后開始播放。具體如圖4.6，圖4.7所示。圖4.6播放欄播放歌曲圖4.7歌曲歌詞輪播頁(yè)面實(shí)現(xiàn)代碼：關(guān)鍵詞搜索功能實(shí)現(xiàn)用戶和游客輸入想要查詢的關(guān)鍵詞，前端提交搜索請(qǐng)求給后端進(jìn)行模糊查找，后端業(yè)務(wù)邏輯層對(duì)關(guān)鍵詞進(jìn)行處理，從數(shù)據(jù)庫(kù)中歌曲表、歌手表以及歌單表進(jìn)行比對(duì)，將所有相近結(jié)果返回前端，具體功能演示如圖4.8，圖4.9所示。圖4.8歌曲、歌手相關(guān)搜索結(jié)果頁(yè)面圖4.9歌單相關(guān)搜索結(jié)果頁(yè)面實(shí)現(xiàn)代碼：個(gè)人信息管理功能實(shí)現(xiàn)登錄后，用戶可以選擇是否進(jìn)入個(gè)人信息管理中心，完成個(gè)人數(shù)據(jù)處理、更改用戶名和密碼等操作。具體功能如圖4.10和4.11所示。圖4.10編輯個(gè)人資料頁(yè)面實(shí)現(xiàn)代碼：圖4.11修改頭像頁(yè)面實(shí)現(xiàn)代碼：管理員登錄功能實(shí)現(xiàn)管理員可以直接登錄音樂網(wǎng)站的后臺(tái)管理系統(tǒng)，輸入正確的管理員賬號(hào)密碼后，可以進(jìn)入后臺(tái)管理系統(tǒng)。具體實(shí)現(xiàn)如圖4.12所示。圖4.12管理員登錄頁(yè)面實(shí)現(xiàn)代碼：原理：使用requestMapping方法返回status，提交方式是post.需要從前端獲取賬號(hào)密碼需要用到HttpServleRequest，如果登錄成功需要把賬號(hào)放到session里面去，前后端傳輸需要用到JSON方法，接下去就是獲取前端輸入賬號(hào)密碼，判斷boolean賬號(hào)密碼是否與管理員賬號(hào)相同，相同則返回?cái)?shù)值1顯示登錄成功，否則返回?cái)?shù)值0登錄失敗系統(tǒng)信息簡(jiǎn)介及統(tǒng)計(jì)圖管理員成功進(jìn)入系統(tǒng)后，可以查看系統(tǒng)信息以及統(tǒng)計(jì)圖，具體如圖4.13所示。圖4.13系統(tǒng)簡(jiǎn)介頁(yè)面實(shí)現(xiàn)代碼：系統(tǒng)管理功能實(shí)現(xiàn)管理員除了可以查看系統(tǒng)內(nèi)的信息以外，也可以對(duì)系統(tǒng)內(nèi)的數(shù)據(jù)進(jìn)行管理。以歌手管理為例，具體如圖4.14所示。圖4.14歌手管理頁(yè)面實(shí)現(xiàn)代碼：本章小結(jié)本章首先從硬件和軟件兩個(gè)角度，分別簡(jiǎn)要介紹了本音樂網(wǎng)站的開發(fā)環(huán)境；其次從客戶端和管理員端兩個(gè)方面，以系統(tǒng)實(shí)際運(yùn)行截圖的方式，結(jié)合文字說明，詳略得當(dāng)?shù)卣故颈揪W(wǎng)站的功能模塊。根據(jù)所展示的眾多系統(tǒng)界面，說明了本系統(tǒng)功能實(shí)現(xiàn)的完備，為下一章的測(cè)試做好了充分的準(zhǔn)備。

音樂網(wǎng)站功能測(cè)試測(cè)試目的本音樂網(wǎng)站所實(shí)現(xiàn)功能較多，部分功能業(yè)務(wù)邏輯較為復(fù)雜，因此為了保證整個(gè)網(wǎng)站的可用性和穩(wěn)定性，需要測(cè)試人員有目的地進(jìn)行測(cè)試，以保證網(wǎng)站可以正常使用，并滿足用戶的需求。下面，針對(duì)系統(tǒng)較為常用的功能模塊進(jìn)行測(cè)試，以便于日后修改和完善工作的進(jìn)行。功能測(cè)試用戶登錄注冊(cè)功能測(cè)試測(cè)試內(nèi)容測(cè)試步驟預(yù)期結(jié)果實(shí)際結(jié)果結(jié)論用戶登錄點(diǎn)擊登錄按鈕輸入正確的用戶名和密碼提交登錄請(qǐng)求提示登錄成功，跳轉(zhuǎn)到網(wǎng)站首頁(yè)與預(yù)期相符通過點(diǎn)擊登錄按鈕輸入錯(cuò)誤的用戶名和密碼提交登錄請(qǐng)求提示用戶名或密碼錯(cuò)誤，請(qǐng)重新輸入與預(yù)期相符通過用戶注冊(cè)點(diǎn)擊注冊(cè)按鈕填寫正確的注冊(cè)信息提交注冊(cè)請(qǐng)求提示注冊(cè)成功，跳轉(zhuǎn)到網(wǎng)站首頁(yè)與預(yù)期相符通過點(diǎn)擊注冊(cè)按鈕不按照填寫規(guī)范進(jìn)行填寫無法提交注冊(cè)請(qǐng)求與預(yù)期相符通過表5.1用戶登錄注冊(cè)測(cè)試表用戶主要功能模塊測(cè)試測(cè)試內(nèi)容測(cè)試步驟預(yù)期結(jié)果實(shí)際結(jié)果結(jié)論歌曲播放點(diǎn)擊任意歌曲點(diǎn)擊暫停按鈕后再次點(diǎn)擊任意拖動(dòng)歌曲進(jìn)度條歌曲在操作過程中均可流暢播放與預(yù)期相符通過歌曲切換點(diǎn)擊播放歌單內(nèi)任意一首歌點(diǎn)擊上一首、下一首按鈕歌曲可以切換與預(yù)期相符通過表5.2用戶功能模塊測(cè)試表測(cè)試內(nèi)容測(cè)試步驟預(yù)期結(jié)果實(shí)際結(jié)果結(jié)論歌曲收藏點(diǎn)擊音樂播放條上的收藏按鈕1.如果用戶已經(jīng)登錄，歌曲可以加入我的音樂2.如果用戶尚未登錄，系統(tǒng)提示請(qǐng)先登錄與預(yù)期相符通過歌曲下載點(diǎn)擊歌曲播放條上的下載按鈕歌曲開始下載與預(yù)期相符通過查看歌詞點(diǎn)擊歌曲圖片顯示該歌曲的全部歌詞，并會(huì)隨進(jìn)度條滾動(dòng)歌詞與預(yù)期相符通過搜索音樂輸入目標(biāo)關(guān)鍵字提交搜索請(qǐng)求1.會(huì)返回歌曲名或者歌手姓名中包含關(guān)鍵字的所有歌曲2.會(huì)返回歌單名中包含關(guān)鍵字的所有歌單與預(yù)期相符通過歌單評(píng)分點(diǎn)擊進(jìn)入任意歌單給該歌單打分顯示該用戶的評(píng)分與預(yù)期相符通過歌單評(píng)價(jià)點(diǎn)擊進(jìn)入任意歌單在評(píng)論區(qū)輸入評(píng)價(jià)內(nèi)容點(diǎn)擊提交按鈕1.如果用戶已經(jīng)登錄，顯示該用戶的評(píng)論2.如果用戶尚未登錄，提示請(qǐng)先登錄與預(yù)期相符通過續(xù)表5.2用戶功能模塊測(cè)試表用戶個(gè)人信息模塊測(cè)試測(cè)試內(nèi)容測(cè)試步驟預(yù)期結(jié)果實(shí)際結(jié)果結(jié)論編輯個(gè)人資料點(diǎn)擊進(jìn)入編輯個(gè)人資料界面對(duì)個(gè)人資料進(jìn)行增刪改操作點(diǎn)擊保存按鈕個(gè)人資料得到修改與預(yù)期相符通過上傳頭像點(diǎn)擊修改頭像按鈕選擇上傳圖片點(diǎn)擊提交按鈕頭像圖片被修改與預(yù)期相符通過表5.3用戶個(gè)人信息模塊測(cè)試表管理員后臺(tái)管理模塊測(cè)試測(cè)試內(nèi)容測(cè)試步驟預(yù)期結(jié)果實(shí)際結(jié)果結(jié)論用戶管理點(diǎn)擊選擇用戶管理按鈕選擇任意用戶，點(diǎn)擊編輯按鈕對(duì)該用戶進(jìn)行修改操作，并提交修改用戶個(gè)人信息被修改與預(yù)期相符通過歌手管理點(diǎn)擊選擇歌手管理按鈕選擇任意歌手，點(diǎn)擊編輯按鈕對(duì)歌手進(jìn)行信息修改，添加或刪除歌曲，并提交修改歌手對(duì)應(yīng)信息被修改與預(yù)期相符通過歌單管理點(diǎn)擊選擇歌單管理按鈕選擇任意歌單，點(diǎn)擊編輯按鈕對(duì)歌單名等信息進(jìn)行修改，添加或刪除歌單內(nèi)歌曲，修改歌單評(píng)分，刪除歌單評(píng)論，并提交修改歌單信息以及歌單內(nèi)容被修改與預(yù)期相符通過表5.4管理員后臺(tái)管理模塊測(cè)試本章小結(jié)本章主要對(duì)音樂網(wǎng)站的諸多功能模塊進(jìn)行了功能性測(cè)試，例如登錄注冊(cè)模塊，歌曲搜索播放模塊，個(gè)人信息管理模塊，后臺(tái)信息管理模塊?；舅心K都符合預(yù)期測(cè)試結(jié)果，并對(duì)測(cè)試內(nèi)容以及步驟做了詳細(xì)地闡述，總體表述清晰，測(cè)試直觀明了，基本達(dá)到了本網(wǎng)站預(yù)期的測(cè)試目標(biāo)。開發(fā)遇到的問題以及解決思路開發(fā)遇到的問題以及解決思路下拉式折疊菜單導(dǎo)航欄編寫網(wǎng)頁(yè)時(shí)，創(chuàng)建帶有超鏈接的導(dǎo)航欄并不困難。但是，創(chuàng)建下拉菜單導(dǎo)航欄并不容易。在下面的示例中，單擊“下載實(shí)習(xí)相關(guān)文檔”菜單展開下面的子菜單，然后再次單擊以縮小下面的子菜單，可以起到切換的效果。初學(xué)者很難使用傳統(tǒng)的HTML、CSS和JavaScript創(chuàng)建這種類型的菜單。然而，使用jQuery實(shí)現(xiàn)此功能非常簡(jiǎn)單。開發(fā)環(huán)境，選用的是Eclipse。在網(wǎng)站項(xiàng)目的“We-bContent”下，新建文件夾“jslib”，然后將“jquery-3.4.1.js”復(fù)制到該文件夾下。這樣jsp程序就可以訪問jquery的包了。在網(wǎng)頁(yè)的<head></head>位置添加jquery代碼，有兩個(gè)程序文件，一個(gè)是zhuye01JSP，另一個(gè)是zhuye01CSS。為了讓初學(xué)者更容易掌握web設(shè)計(jì)，這兩個(gè)文件存儲(chǔ)在同一文件夾中。此處指定的代碼可以直接執(zhí)行。實(shí)現(xiàn)下拉折疊式菜單功能。有兩個(gè)程序文件，一個(gè)是zhuye01JSP，另一個(gè)是zhuye01CSS。為了讓初學(xué)者更容易掌握web設(shè)計(jì)，這兩個(gè)文件存儲(chǔ)在同一文件夾中。此處指定的代碼可以直接執(zhí)行。數(shù)據(jù)庫(kù)數(shù)據(jù)分頁(yè)顯示需要注意的問題數(shù)據(jù)庫(kù)分頁(yè)顯示的Statement創(chuàng)建時(shí)需要注意，如果用缺省設(shè)置創(chuàng)建時(shí)，ResultSet是一種只能訪問一次（one-time-through）、只能向前訪問（forward-only）和只讀的對(duì)象。您只能訪問數(shù)據(jù)一次，當(dāng)然不可能實(shí)現(xiàn)分頁(yè)效果。一般查詢數(shù)據(jù)都有兩個(gè)頁(yè)面，一個(gè)頁(yè)面是輸入查詢條件的，單擊“查詢”按鈕將會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面，這個(gè)頁(yè)面就是處理數(shù)據(jù)庫(kù)查詢和分頁(yè)的頁(yè)面，這兩個(gè)頁(yè)面一定要在同一個(gè)文件夾下，否則會(huì)出現(xiàn)迭代錯(cuò)誤而導(dǎo)致分頁(yè)失敗。防止不經(jīng)過登錄頁(yè)面而強(qiáng)行進(jìn)入其他頁(yè)面用戶權(quán)限分為1-用戶,2-管理員，經(jīng)過合法登錄之后會(huì)分別定位到zhuye01.jsp-用戶主頁(yè)，zhuye02.jsp-管理員主頁(yè)，有的用戶登錄之后，例如權(quán)限為1的用戶，通過猜測(cè)目錄結(jié)構(gòu)，我想進(jìn)入zhuye02，而不必通過登錄頁(yè)面JSP非法顯示數(shù)據(jù)和修改數(shù)據(jù)庫(kù)數(shù)據(jù)。假設(shè)該網(wǎng)站請(qǐng)求的域名是石溪天府。Edu，在瀏覽器的地址欄中鍵入主頁(yè)被分配給DengluJSP。權(quán)限為1的用戶被移動(dòng)到zhuye01JSP，并顯示地址欄/zhuye01.jsp具有權(quán)限2的用戶將移動(dòng)到zhuye02JSP，并顯示地址欄/zhuye02.jsp此時(shí)，未分類的用戶將猜測(cè)目錄結(jié)構(gòu)，并在不通過登錄頁(yè)面的情況下強(qiáng)行進(jìn)入其他頁(yè)面。例如，對(duì)于權(quán)限為1的學(xué)生用戶，直接在地址欄中輸入/zhuye02.jsp，將會(huì)打開管理員主頁(yè)。這樣，對(duì)網(wǎng)站的威脅非常大，可能導(dǎo)致巨大的損失。那么，該如何解決這個(gè)問題呢？可以使用web.xml配置一個(gè)Filter來完成。在Web項(xiàng)目中，將需要經(jīng)過登錄之后才能訪問的頁(yè)面和servlet放在一個(gè)文件夾中，該文件夾命名為anquan。設(shè)置一個(gè)Filter，對(duì)anquan文件夾下的所有訪問進(jìn)行過濾。判斷是否登錄，還是要通過session來判斷。在前面的denglu.jsp對(duì)應(yīng)的處理頁(yè)面，已經(jīng)通過語(yǔ)句session.setAttribute("userid",userid)將用戶賬號(hào)放在userid里面了，如果用戶已經(jīng)登錄，則userid不為空。用戶退出，一定要將userid置為null。這樣，用戶未登錄和退出后，userid都為null。致謝結(jié)論在這個(gè)信息爆炸的時(shí)代，一個(gè)好的音樂推薦系統(tǒng)是用戶和音樂內(nèi)容之間的連接，它可以幫助用戶找到他們感興趣的音樂，而無需明確說明需求。如今，國(guó)內(nèi)外許多互聯(lián)網(wǎng)公司都使用推薦系統(tǒng)，精準(zhǔn)地為潛在的目標(biāo)客戶推送著他們可能感興趣的內(nèi)容。這一方面為社會(huì)帶來了商業(yè)領(lǐng)域的巨大繁榮，另一方面也讓用戶享受到了他們感到滿意的服務(wù)，解決了很多不易被人關(guān)注的需求痛點(diǎn)。本文對(duì)音樂網(wǎng)站的研究現(xiàn)狀，需求分析，具體實(shí)現(xiàn)以及數(shù)據(jù)庫(kù)的設(shè)計(jì)等方面進(jìn)行了研究和實(shí)踐。以提供良好體驗(yàn)的系統(tǒng)為核心，比較了現(xiàn)行主流的音樂網(wǎng)站，以JavaEE+vue2.x為基礎(chǔ)實(shí)現(xiàn)了本系統(tǒng)的前后端，包括了用戶登錄注冊(cè)，修改個(gè)人信息，查看音樂詳細(xì)信息，歌曲、歌單搜索以及推薦歌單等一系列的功能，致力于為用戶提供良好的音樂獲取以及欣賞功能，幫助音樂愛好者在廣袤的音樂海洋里發(fā)現(xiàn)屬于自己的旋律。本網(wǎng)站的開發(fā)使用到了許多當(dāng)前主流的技術(shù)，Springboot作為成熟的Web開發(fā)框架幫助我迅速上手了后端系統(tǒng)的架構(gòu)。Mybatis同樣作為比較主流的持久層中間件，為我對(duì)數(shù)據(jù)庫(kù)的請(qǐng)求和訪問提供了很高效的解決方案。Vue將前端網(wǎng)頁(yè)本來較為復(fù)雜的整體設(shè)計(jì)拆解為一個(gè)個(gè)組件的開發(fā)，極大地方便了我對(duì)多個(gè)功能模塊的設(shè)計(jì)與實(shí)現(xiàn)，并且也使得頁(yè)面美觀清爽。最后總結(jié)一下本音樂網(wǎng)站整體開發(fā)的流程。在我正式開發(fā)前，首先查閱了國(guó)內(nèi)外許多音樂推薦系統(tǒng)相關(guān)的論文，了解了當(dāng)前比較主流的音樂推薦技術(shù)，并且分析了現(xiàn)有條件下能夠?qū)崿F(xiàn)的推薦技術(shù)，以備于接下來的開發(fā)。其次，了解并學(xué)習(xí)了當(dāng)前最為熱門的前后端分離框架——Springboot+vue，這為我開發(fā)系統(tǒng)奠定了良好的基礎(chǔ)。接下來對(duì)本網(wǎng)站做了需求分析，制作了系統(tǒng)框架圖以及一系列功能模塊的用例圖，結(jié)合著用例分析對(duì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)有了初步的想法。緊接著便是設(shè)計(jì)數(shù)據(jù)庫(kù)系統(tǒng)的E-R圖，根據(jù)E-R圖進(jìn)一步完成了數(shù)據(jù)庫(kù)表的設(shè)計(jì)。最后便是在之前的基礎(chǔ)上，一步一步地完成了網(wǎng)站的各個(gè)功能模塊的搭建，編寫測(cè)試用例并完成了對(duì)網(wǎng)站主要功能模塊的測(cè)試，檢查網(wǎng)站是否符合設(shè)計(jì)要求。本網(wǎng)站的大部分功能已經(jīng)基本實(shí)現(xiàn)，但由于開發(fā)時(shí)間較為緊張，尚有一些地方可以繼續(xù)改進(jìn)。具體如下：1.在音樂的數(shù)據(jù)量上，可以采用爬蟲技術(shù)獲取更豐富的音樂數(shù)據(jù)，以提高推薦算法的準(zhǔn)確度。2.在系統(tǒng)的數(shù)據(jù)庫(kù)設(shè)計(jì)上，可以引入ElasticSearch為數(shù)據(jù)庫(kù)建立更快捷的索引，以提高搜索時(shí)的查詢效率。3.在系統(tǒng)的高并發(fā)上，沒有考慮過用戶量過多時(shí)服務(wù)器可能會(huì)負(fù)載過大，網(wǎng)站可能會(huì)因此出現(xiàn)卡頓的