第3章總體設(shè)計(jì)3.1總體設(shè)計(jì)概述總體設(shè)計(jì)的意思就是為是系統(tǒng)應(yīng)該如何去實(shí)現(xiàn)。總體設(shè)計(jì)主要是通過(guò)需求分析所得到的結(jié)論，站在開(kāi)發(fā)人員的角度分析系統(tǒng)需要去完成怎樣的功能，來(lái)設(shè)計(jì)自己的開(kāi)發(fā)計(jì)劃。?？傮w設(shè)計(jì)要根據(jù)系統(tǒng)的結(jié)構(gòu)分模塊設(shè)計(jì)，分析每個(gè)模塊的功能與作用，以及這些模塊相互之間的聯(lián)系和相互之間的調(diào)用過(guò)程。模塊與模塊之間具有相互獨(dú)立性，開(kāi)發(fā)者可以在編碼時(shí)對(duì)每一個(gè)模塊做單獨(dú)的設(shè)計(jì)、編寫(xiě)、測(cè)試和修改，這樣可以提升系統(tǒng)開(kāi)發(fā)的容若率，降低錯(cuò)誤在模塊與模塊調(diào)用之間傳播，出了錯(cuò)誤也能及時(shí)改正。3.2系統(tǒng)總體模塊設(shè)計(jì)3.2.1系統(tǒng)總體功能本系統(tǒng)劃分為前后臺(tái)兩個(gè)部分，共是九個(gè)功能模塊，分別是前端部分的四大功能模塊：賬號(hào)操作、歌曲播放、歌曲操作、查看推薦以及后端部分的五大功能模塊：用戶管理、歌曲管理、歌手管理、歌單管理、輪播圖管理。這些模塊具有以下的功能：（1）賬號(hào)操作模塊前臺(tái)賬號(hào)：前臺(tái)賬號(hào)為登錄小程序的賬號(hào)。用戶在注冊(cè)賬號(hào)時(shí)小程序會(huì)獲取該微信用戶的頭像，指示用戶輸入注冊(cè)的賬號(hào)密碼。注冊(cè)成功后，跳轉(zhuǎn)到登錄頁(yè)面，用戶輸入成功注冊(cè)的賬號(hào)密碼并通過(guò)賬號(hào)驗(yàn)證后跳轉(zhuǎn)到小程序主頁(yè)面，若未注冊(cè)賬號(hào)或賬號(hào)密碼不匹配，系統(tǒng)將提示重新輸入。小程序登錄成功后，才可以進(jìn)行該小程序中與賬號(hào)綁定的相關(guān)操作，否則用戶只是游客模式狀態(tài)訪問(wèn)。后臺(tái)賬號(hào)：該模塊沒(méi)有注冊(cè)賬號(hào)功能，后臺(tái)數(shù)據(jù)管理網(wǎng)站的超級(jí)管理員賬號(hào)提前寫(xiě)入后臺(tái)數(shù)據(jù)庫(kù)中，登錄時(shí)將登錄信息與后臺(tái)數(shù)據(jù)庫(kù)中的相關(guān)信息匹配即可。首位超級(jí)管理員登錄后，可以在網(wǎng)頁(yè)端用戶管理處添加新的超級(jí)管理員來(lái)協(xié)作管理后臺(tái)數(shù)據(jù)。歌曲播放及操作模塊播放歌曲：用戶可點(diǎn)擊歌曲名稱或封面來(lái)將歌曲加載到播放器中進(jìn)行播放。在歌曲播放時(shí)，會(huì)生成播放列表。在該列表內(nèi)歌曲播放可分為隨機(jī)播放、單曲循環(huán)、列表循環(huán)三種播放方式。搜索歌曲：用戶可通過(guò)搜索功能來(lái)查詢歌曲，既可以通過(guò)搜索歌曲名稱來(lái)查詢歌曲，也可以通過(guò)搜索歌手名稱來(lái)查詢歌曲。歌曲下載：用戶在播放某一曲目時(shí)，可以將此曲目下載到本地。收藏歌曲：用戶登錄后可以通過(guò)點(diǎn)擊收藏來(lái)將自己喜歡的音樂(lè)加入自己的歌曲收藏中。評(píng)論歌曲：用戶登錄后可以對(duì)歌曲進(jìn)行評(píng)論。播放記錄：用戶在登陸后播放的歌曲，都會(huì)自動(dòng)保存到最近播放記錄中。用戶可以查看此記錄。（3）查看推薦模塊歌單推薦：系統(tǒng)可根據(jù)用戶收藏的歌曲通過(guò)相關(guān)的推薦算法為用戶推薦可能喜歡的歌曲，并將這些歌曲生成一個(gè)推薦歌單在用戶登錄后主頁(yè)顯示。（4）查看歌手主頁(yè)模塊查看單曲：用戶可以查看歌手演唱的歌曲。查看專輯：用戶可以查看歌手收錄歌曲下的專輯。（5）搜索功能模塊搜索歌手：用戶可以輸入關(guān)鍵字來(lái)搜索匹配的歌手。搜索專輯：用戶可以輸入關(guān)鍵字來(lái)搜索匹配的專輯。搜索歌曲：用戶可以輸入關(guān)鍵字來(lái)搜索匹配的歌曲。（6）用戶管理模塊查看用戶列表：超級(jí)管理員可以查看中已經(jīng)注冊(cè)小程序的賬號(hào)信息和后臺(tái)網(wǎng)站管理員的賬號(hào)信息。添加用戶：管理員可以通過(guò)輸入賬號(hào)密碼等基本信息的方式來(lái)給后臺(tái)管理網(wǎng)站添加新用戶。修改用戶信息：管理員可以對(duì)用戶信息進(jìn)行修改。注銷(xiāo)用戶：管理員可以對(duì)用戶賬號(hào)進(jìn)行刪除。（7）歌手及歌曲管理模塊添加歌手：管理員可以在后臺(tái)添加歌手信息，包括歌手的頭像、姓名以及姓名首字母。在管理員添加歌曲之前，必須先添加對(duì)應(yīng)的歌手。添加歌曲：管理員可以為曲庫(kù)添加歌曲，填寫(xiě)歌曲的名字、所屬歌手、專輯信息、歌曲封面。修改歌曲信息：管理員可以對(duì)歌曲的各項(xiàng)信息進(jìn)行修改。刪除歌曲：管理員可以對(duì)曲庫(kù)中的歌曲進(jìn)行刪除。（8）歌單及輪播圖管理模塊添加歌單：管理員在后臺(tái)新增歌單，在添加歌單時(shí)，添加歌單的名稱分類及歌單封面。在歌單添加完成后，管理員可以向歌單里增刪樂(lè)庫(kù)中的所有歌曲。修改歌單信息：管理員可以對(duì)歌單的各項(xiàng)信息進(jìn)行修改，包括歌單中的歌曲。添加輪播圖：管理員可以給小程序首頁(yè)添加輪播圖，并添加點(diǎn)擊輪播圖后跳轉(zhuǎn)到對(duì)應(yīng)歌曲的地址。修改輪播圖信息：管理員可以定期更新輪播圖。（9）搜索功能模塊搜索歌曲：用戶可以輸入關(guān)鍵字來(lái)搜索用戶想要查詢的歌曲。搜索歌手：用戶可以輸入關(guān)鍵字來(lái)搜索用戶想要查詢的歌手。3.2.2核心功能模塊的設(shè)計(jì)3.2.2.1注冊(cè)登錄功能注冊(cè)登錄模塊是用戶在使用小程序端的功能操作。注冊(cè)模塊是用戶在使用一些受限功能（如評(píng)論，收藏，查看播放記錄等）時(shí)候需要調(diào)用的模塊，注冊(cè)時(shí)自動(dòng)獲取該微信賬戶的頭像，用戶只需輸入賬戶名和密碼即可完成注冊(cè)。注冊(cè)成功后小程序會(huì)自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面，用戶輸入注冊(cè)完成的賬戶名和密碼。當(dāng)該賬戶名在數(shù)據(jù)庫(kù)中不存在時(shí)，小程序端會(huì)提示“該用戶不存在”；若該賬戶存在但賬戶名和密碼不匹配，則小程序端提示“密碼錯(cuò)誤”。故只有該用戶存在并且賬戶名和密碼匹配才可成功登錄小程序。3.2.2.2后臺(tái)管理功能后臺(tái)管理模塊是網(wǎng)頁(yè)端超級(jí)管理員對(duì)后臺(tái)所有數(shù)據(jù)庫(kù)的管理，超級(jí)管理員登錄后，選擇點(diǎn)擊左側(cè)的歌手管理、輪播圖管理、音樂(lè)庫(kù)管理、注冊(cè)用戶管理、歌單管理，會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的數(shù)據(jù)管理頁(yè)面。該頁(yè)面會(huì)分頁(yè)展示數(shù)據(jù)庫(kù)中該項(xiàng)全部數(shù)據(jù)，后臺(tái)管理功能包括對(duì)數(shù)據(jù)的添加、刪除、修改、查詢功能。特殊的，對(duì)歌曲有專門(mén)的七日播放量統(tǒng)計(jì)功能。增加功能，超級(jí)管理員點(diǎn)擊添加，系統(tǒng)會(huì)彈出添加歌曲的彈窗讓管理員填寫(xiě)添加數(shù)據(jù)的各項(xiàng)信息：歌曲包括歌曲名稱、歌手、歌曲時(shí)長(zhǎng)、歌曲鏈接、歌曲封面和專輯名稱；歌手包括歌手姓名、歌手圖片和歌手姓名首字母；輪播圖包括輪播圖內(nèi)容和頁(yè)面跳轉(zhuǎn)地址；注冊(cè)用戶包括昵稱、頭像、密碼和用戶名；歌單包括歌單名和歌單封面。刪除功能，在每條數(shù)據(jù)的右側(cè)有一個(gè)紅色的刪除按鈕，當(dāng)管理員點(diǎn)擊刪除時(shí)，系統(tǒng)會(huì)再次彈出是否刪除的詢問(wèn)窗口，若點(diǎn)擊確定則成功刪除，若點(diǎn)擊取消則取消刪除。修改功能，在每條數(shù)據(jù)的右側(cè)有一個(gè)白色的修改按鈕，當(dāng)管理員點(diǎn)擊修改時(shí)，系統(tǒng)會(huì)彈出修改音樂(lè)的彈窗，添加歌曲時(shí)的各項(xiàng)數(shù)據(jù)都可以修改。查詢功能，查詢功能包括全字匹配查詢和模糊查詢，只要輸入想要查詢的內(nèi)容中的其中一個(gè)字，數(shù)據(jù)庫(kù)中帶此字的數(shù)據(jù)信息都會(huì)分頁(yè)展示出來(lái)。若數(shù)據(jù)庫(kù)中未能匹配該字信息，則顯示無(wú)此查詢結(jié)果。播放量功能，在每條歌曲數(shù)據(jù)的右側(cè)有一個(gè)白色的播放量按鈕，管理員點(diǎn)擊后可以查看該歌曲的七日播放量統(tǒng)計(jì)。3.2.2.3歌曲操作功能歌曲操作模塊是用戶在小程序端對(duì)歌曲的播放、下載、收藏等情況下時(shí)調(diào)用的模塊。該模塊主要為歌曲播放、播放模式切換、上下切歌、歌曲下載、歌曲分享五個(gè)部分。在用戶使用小程序時(shí)，點(diǎn)擊在主頁(yè)歌單內(nèi)的歌曲或者點(diǎn)擊搜索歌曲后，都會(huì)跳轉(zhuǎn)到正在播放頁(yè)面播放點(diǎn)擊的歌曲。點(diǎn)擊暫停按鈕，歌曲暫停播放；再次點(diǎn)擊，歌曲繼續(xù)播放。在點(diǎn)擊歌曲時(shí)會(huì)生成播放列表，上下切歌就按照正在播放歌曲在此列表的位置進(jìn)行上下轉(zhuǎn)移。不同的播放模式和播放列表決定了歌曲的播放順序。該小程序共有三種播放模式，不同的播放模式對(duì)應(yīng)不同的標(biāo)識(shí)。用戶點(diǎn)擊下載標(biāo)識(shí)，即可將此歌曲下載到本地。點(diǎn)擊分享標(biāo)識(shí)可以將此歌曲發(fā)送給用戶的微信好友。3.2.2.4評(píng)論功能評(píng)論模塊是用戶在評(píng)論歌曲時(shí)調(diào)用的模塊，該模塊主要分為發(fā)表評(píng)論。在歌曲進(jìn)行播放時(shí)，用戶可以左滑進(jìn)入歌曲評(píng)論頁(yè)面，用戶可以看到其他用戶對(duì)此歌曲的評(píng)論，也可以自己對(duì)該首歌曲進(jìn)行評(píng)論。如果評(píng)論內(nèi)容為空，則系統(tǒng)會(huì)提示“評(píng)論內(nèi)容不得為空”，當(dāng)用戶將評(píng)論內(nèi)容填寫(xiě)完畢點(diǎn)擊發(fā)表時(shí)，用戶對(duì)歌曲評(píng)論成功。3.2.2.5收藏功能收藏模塊是用戶收藏歌曲時(shí)所調(diào)用的模塊，且系統(tǒng)的收藏功能主要分為歌曲收藏。用戶在成功登錄后點(diǎn)擊歌曲收藏時(shí)標(biāo)識(shí)時(shí)，會(huì)將此歌曲加入到私人收藏歌單，若歌單中已經(jīng)存在此歌曲，收藏標(biāo)識(shí)將被填充，再次點(diǎn)擊則取消收藏。若用戶未登錄點(diǎn)擊收藏標(biāo)識(shí)，則跳轉(zhuǎn)到用戶登錄界面。3.2.2.6搜索功能搜索模塊是用戶在搜索歌曲，專輯，歌單，歌手等情況下調(diào)用的模塊，本系統(tǒng)采用模糊查詢的方式，可以通過(guò)關(guān)鍵字來(lái)搜索歌曲，專輯，歌手，歌單和用戶。進(jìn)行搜索時(shí)，輸入關(guān)鍵字，點(diǎn)擊搜索，即可顯示出所有與該關(guān)鍵字相符的數(shù)據(jù)，搜索結(jié)果為歌手和歌曲兩種結(jié)果，若搜索結(jié)果為歌手，則用戶點(diǎn)擊后跳轉(zhuǎn)到對(duì)應(yīng)歌手主頁(yè)；若搜索結(jié)果為歌曲，則用戶點(diǎn)擊后跳轉(zhuǎn)到對(duì)應(yīng)歌曲的播放頁(yè)面。搜索模塊記錄用戶的搜索歷史，也可以刪除搜索歷史。3.2.2.7推薦功能推薦模塊主要是系統(tǒng)為用戶進(jìn)行個(gè)性化推薦歌曲的模塊。在歌曲推薦模塊，一定量的用戶在收藏了一定量的歌曲后，根據(jù)基于用戶的協(xié)同過(guò)濾算法會(huì)給用戶在主頁(yè)展示一個(gè)推薦歌單，推薦歌單內(nèi)的數(shù)據(jù)為最終的推薦結(jié)果。3.3本章小結(jié)本章介紹了總體設(shè)計(jì)需要完成的任務(wù)，之后將音樂(lè)播放微信小程序結(jié)構(gòu)化，詳細(xì)介紹了音樂(lè)播放微信小程序中各模塊的功能和具體設(shè)計(jì)，以及核心模塊的功能和設(shè)計(jì)。第4章詳細(xì)設(shè)計(jì)詳細(xì)設(shè)計(jì)階段是針對(duì)音樂(lè)播放微信小程序，按照總體設(shè)計(jì)時(shí)的思路進(jìn)行分塊設(shè)計(jì)和數(shù)據(jù)庫(kù)設(shè)計(jì)，其中數(shù)據(jù)庫(kù)設(shè)計(jì)要包括數(shù)據(jù)庫(kù)的概念設(shè)計(jì)和邏輯設(shè)計(jì)，對(duì)數(shù)據(jù)庫(kù)中所有表結(jié)構(gòu)和字段進(jìn)行說(shuō)明，同時(shí)對(duì)數(shù)據(jù)庫(kù)表中的實(shí)體的屬性以及各實(shí)體間的練習(xí)做出說(shuō)明，對(duì)數(shù)據(jù)庫(kù)的設(shè)計(jì)要完整且豐富，才能盡可能的實(shí)現(xiàn)總體設(shè)計(jì)中的所有內(nèi)容。詳細(xì)設(shè)計(jì)也被人稱為過(guò)程設(shè)計(jì)，在總體設(shè)計(jì)階段，已經(jīng)確定了系統(tǒng)的總體結(jié)構(gòu)，設(shè)計(jì)了系統(tǒng)中每個(gè)組成模塊的功能和模塊間的聯(lián)系，明白了設(shè)計(jì)該系統(tǒng)需要“做什么”。詳細(xì)設(shè)計(jì)就是要回答“怎么做”的問(wèn)題，要在需求分析和總體設(shè)計(jì)的基礎(chǔ)上，設(shè)計(jì)如何實(shí)現(xiàn)這個(gè)系統(tǒng)，對(duì)系統(tǒng)中的每個(gè)模塊給出詳細(xì)的過(guò)程性描述，應(yīng)該用詳細(xì)設(shè)計(jì)的表達(dá)來(lái)表示這些描述。4.1開(kāi)發(fā)技術(shù)介紹本系統(tǒng)主要由兩個(gè)部分組成，移動(dòng)端的音樂(lè)播放小程序，基于Web的樂(lè)庫(kù)管理網(wǎng)站組成，使用B/S架構(gòu)管理后臺(tái)樂(lè)庫(kù)等數(shù)據(jù)，前端技術(shù)使用Layui技術(shù)，后臺(tái)框架選擇Springboot和Mybatis，前端播放頁(yè)面使用微信小程序進(jìn)行開(kāi)發(fā)。Springboot是由Pivotal團(tuán)隊(duì)設(shè)計(jì)的開(kāi)發(fā)框架，其目的是Spring應(yīng)用的搭建及開(kāi)發(fā)過(guò)程，其特點(diǎn)是：分層、開(kāi)源、輕量。此框架應(yīng)用了特定的配置方式，從而令開(kāi)發(fā)人員不再需要定義樣板化的配置。它不是Spring的替代品，而是對(duì)Spring很好的封裝。其采用JavaConfig的方式對(duì)Spring進(jìn)行配置，并且提供了大量注解，極大的提供了工作效率，使編碼變得簡(jiǎn)單。微信小程序是可以在微信中直接運(yùn)行的應(yīng)用業(yè)務(wù)。在微信公眾平臺(tái)中，其提供一個(gè)簡(jiǎn)單高效的應(yīng)用開(kāi)發(fā)框架和配套的組件及API，可以幫助開(kāi)發(fā)人員開(kāi)發(fā)出可以運(yùn)行在微信中的服務(wù)，這種服務(wù)通常被稱為微信小程序。微信小程序不需要用戶單獨(dú)安裝，用戶需要使用時(shí)，可以通過(guò)在微信中搜索小程序名稱找到其打開(kāi)使用或者通過(guò)微信掃一掃功能掃描小程序二維碼打開(kāi)使用。除此之外，用戶還可以通過(guò)點(diǎn)擊其他微信好友分享的小程序鏈接打開(kāi)使用。4.2數(shù)據(jù)庫(kù)設(shè)計(jì)4.2.1E-R圖介紹E-R圖，也稱為實(shí)體-聯(lián)系圖，提供了表示實(shí)體類型、屬性還有聯(lián)系的方法，用來(lái)描述現(xiàn)實(shí)世界的概念模型。ER圖有以下四個(gè)成分：矩形框：表示實(shí)體，在矩形框內(nèi)寫(xiě)入實(shí)體名；菱形框：表示聯(lián)系，在菱形框內(nèi)寫(xiě)入聯(lián)系名；橢圓形框：表示實(shí)體的屬性或聯(lián)系的屬性，將屬性名寫(xiě)入橢圓形框中。對(duì)于主屬性名，則在其名稱下方劃一下劃線；連線：實(shí)體與聯(lián)系之間、實(shí)體與屬性之間、聯(lián)系與屬性之間用直線相連，并在直線上標(biāo)注聯(lián)系的類型。實(shí)體-聯(lián)系數(shù)據(jù)模型中的聯(lián)系型，存在3種一般性約束：一對(duì)一約束（聯(lián)系）、一對(duì)多約束（聯(lián)系）和多對(duì)多約束（聯(lián)系）。一對(duì)一聯(lián)系，在兩個(gè)實(shí)體連線方向各寫(xiě)1；一對(duì)多聯(lián)系，要在1的一方寫(xiě)1，多的一方寫(xiě)N；多對(duì)多的聯(lián)系，要在兩個(gè)實(shí)體連線的方向分別寫(xiě)N、M。4.2.2數(shù)據(jù)庫(kù)的創(chuàng)建在MySQL中創(chuàng)建數(shù)據(jù)庫(kù)和數(shù)據(jù)表，根據(jù)設(shè)計(jì)要求，為數(shù)據(jù)庫(kù)取名為weixin_music，劃分出來(lái)的實(shí)體和實(shí)體所含的屬性如下：管理員實(shí)體：管理員編號(hào)、用戶名、密碼、郵箱、手機(jī)號(hào)、性別、角色；用戶實(shí)體：用戶編號(hào)、用戶名稱、賬號(hào)、密碼、用戶頭像；歌曲實(shí)體：歌曲編號(hào)、歌曲名、對(duì)應(yīng)歌手、歌曲獲取地址、專輯名稱、專輯封面；歌手實(shí)體：歌手編號(hào)、歌手名、歌手頭像、歌手、歌手姓名首字母；歌單實(shí)體：歌單編號(hào)、歌單名、歌單封面；輪播圖實(shí)體：輪播圖編號(hào)、輪播圖、輪播圖跳轉(zhuǎn)地址；評(píng)論實(shí)體：評(píng)論編號(hào)、評(píng)論內(nèi)容、評(píng)論用戶編號(hào)、評(píng)論時(shí)間、評(píng)論歌曲編號(hào)播放記錄實(shí)體：播放記錄編號(hào)、歌曲編號(hào)、播放時(shí)間、對(duì)應(yīng)用戶編號(hào)收藏記錄實(shí)體：收藏編號(hào)、歌曲編號(hào)、收藏時(shí)間、對(duì)應(yīng)用戶編號(hào)4.2.2實(shí)體間的聯(lián)系用戶實(shí)體、歌曲實(shí)體之間的實(shí)體關(guān)系是一個(gè)用戶可以播放和收藏多首歌曲，同時(shí)一個(gè)用戶可以被推薦多首歌曲，且一首歌曲也可以被多個(gè)用戶播放和收藏，也可以被推薦給多個(gè)用戶，是多對(duì)多的關(guān)系，如E-R圖5-1所示：圖5-1用戶實(shí)體與歌曲實(shí)體E-R圖用戶實(shí)體、評(píng)論實(shí)體之間的實(shí)體關(guān)系是一個(gè)用戶可以對(duì)多首歌曲評(píng)論，也可以對(duì)一首歌曲進(jìn)行多次評(píng)論是多對(duì)多的關(guān)系，用E-R圖表示如圖5-2所示：圖5-2用戶實(shí)體與評(píng)論實(shí)體E-R圖用戶實(shí)體、播放記錄實(shí)體之間的實(shí)體關(guān)系是用戶在登錄以后，對(duì)歌曲進(jìn)行播放后才會(huì)有播放記錄，所以是一對(duì)一的關(guān)系，用E-R圖表示如圖5-3所示：圖5-3用戶與播放記錄E-R圖用戶實(shí)體、收藏記錄實(shí)體之間的實(shí)體關(guān)系是用戶在登錄以后，對(duì)歌曲進(jìn)行收藏后才會(huì)有收藏記錄，所以是一對(duì)一的關(guān)系，用E-R圖表示如圖5-4所示：歌手實(shí)體、歌曲實(shí)體之間的關(guān)系是一個(gè)歌手演唱多首歌曲，不同的歌手可以演唱不同的歌曲，但歌手只能演唱自己發(fā)行的歌曲，所以是一對(duì)多的關(guān)系，用E-R圖表示如圖5-5所示：圖5-4用戶實(shí)體與收藏記錄E-R圖圖5-5歌手實(shí)體與歌曲實(shí)體E-R圖歌單實(shí)體、歌曲實(shí)體之間的關(guān)系是一個(gè)歌單可以收錄多首歌曲，每一首歌單都可以收錄樂(lè)庫(kù)中的任何一首歌曲，所以歌單實(shí)體和歌曲實(shí)體是多對(duì)多的關(guān)系，用E-R圖表示如圖5-6所示：圖5-6歌單實(shí)體與歌曲實(shí)體E-R圖管理員實(shí)體和用戶實(shí)體之間的關(guān)系是，管理員可以對(duì)用戶進(jìn)行增加、刪除修改操作，而管理員只有一個(gè)，所以是一對(duì)多的關(guān)系，用E-R圖表示如圖5-7所示：管理員實(shí)體和歌曲實(shí)體之間的關(guān)系是，管理員可以對(duì)歌曲進(jìn)行增加、刪除修改操作，而管理員只有一個(gè)，所以是一對(duì)多的關(guān)系，用E-R圖表示如圖5-8所示：管理員實(shí)體和歌單實(shí)體之間的關(guān)系是，管理員可以對(duì)歌單進(jìn)行增加、刪除修改操作，而管理員只有一個(gè)，所以是一對(duì)多的關(guān)系，用E-R圖表示如圖5-9所示：圖5-7管理員實(shí)體與用戶實(shí)體E-R圖圖5-8管理員實(shí)體與歌曲實(shí)體E-R圖圖5-9管理員實(shí)體與歌單實(shí)體E-R圖管理員實(shí)體和評(píng)論實(shí)體之間的關(guān)系是，管理員可以對(duì)評(píng)論進(jìn)行增加、刪除修改操作，而管理員只有一個(gè)，所以是一對(duì)多的關(guān)系，用E-R圖表示如圖5-10所示：圖5-10管理員實(shí)體與評(píng)論實(shí)體E-R圖管理員實(shí)體和輪播圖實(shí)體之間的關(guān)系是，管理員可以對(duì)輪播圖進(jìn)行增加、刪除修改操作，而管理員只有一個(gè)，所以是一對(duì)多的關(guān)系，用E-R圖表示如圖5-11所示：管理員實(shí)體和歌手實(shí)體之間的關(guān)系是，管理員可以對(duì)歌手進(jìn)行增加、刪除修改操作，而管理員只有一個(gè)，所以是一對(duì)多的關(guān)系，用E-R圖表示如圖5-12所示：圖5-11管理員實(shí)體與輪播圖實(shí)體E-R圖圖5-12管理員實(shí)體與歌手實(shí)體E-R圖歌曲實(shí)體和評(píng)論實(shí)體之間的關(guān)系是，一首歌含有多個(gè)用戶的評(píng)論內(nèi)容，所以是一對(duì)多的關(guān)系，用E-R圖5-13表示：圖5-13歌曲實(shí)體與評(píng)論實(shí)體E-R圖輪播圖實(shí)體和歌曲實(shí)體的關(guān)系是，用戶可以在主頁(yè)點(diǎn)擊輪播圖跳轉(zhuǎn)到對(duì)應(yīng)的歌曲播放頁(yè)面，所以是1對(duì)1的關(guān)系，用E-R圖5-14表示：圖5-14輪播圖實(shí)體與歌曲實(shí)體E-R圖綜上所述，系統(tǒng)所有實(shí)體之間的關(guān)系用E-R圖5-14表示：圖5-14整體E-R圖4.2.3數(shù)據(jù)庫(kù)表的創(chuàng)建將上述概念設(shè)計(jì)轉(zhuǎn)化成數(shù)據(jù)庫(kù)的邏輯結(jié)構(gòu)，將每個(gè)關(guān)系都轉(zhuǎn)化為數(shù)據(jù)庫(kù)中的表格數(shù)據(jù)，根據(jù)需求，設(shè)計(jì)出如下表格：4.2.3.1用戶表用戶表（register_user）：該表用來(lái)存儲(chǔ)小程序端注冊(cè)成功用戶的用戶編號(hào)、用戶昵稱、頭像地址、密碼、用戶名，用于用戶進(jìn)行登錄操作。表5-1用戶表（register_user）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵user_id用戶編號(hào)bigint20否主鍵name用戶昵稱varchar20否pic頭像地址varchar50否password密碼int20否user_name用戶名varchar20否用戶表register_user中，共有五個(gè)字段來(lái)存儲(chǔ)小程序端注冊(cè)用戶信息。（1）user_id：user_id字段代表用戶的注冊(cè)編號(hào)，是register_user表的主鍵，故不允許為空。（2）name：name字段代表用戶昵稱，用戶登錄后會(huì)在個(gè)人主頁(yè)顯示，用戶在評(píng)論歌曲時(shí)，每條評(píng)論也會(huì)顯示評(píng)論用戶的昵稱。（3）pic：pic字段代表用戶頭像，用于存放用戶的頭像地址，在用戶登錄系統(tǒng)后顯示頭像用，該操作會(huì)直接獲取用戶的微信頭像，一般不為空。（4）password：password字段代表用戶密碼，登錄的時(shí)要驗(yàn)證用戶名和密碼是否匹配，用戶名和密碼都對(duì)了之后才能登錄小程序，對(duì)系統(tǒng)進(jìn)行操作。該字段的最長(zhǎng)長(zhǎng)度設(shè)置為20。（5）user_name：user_name字段代表用戶名，登錄的時(shí)候要驗(yàn)證用戶名和密碼是否正確，一般用戶名為英文和數(shù)字組成，該字段的最長(zhǎng)長(zhǎng)度設(shè)置為20。4.2..3.2管理員表管理員表（sys_user）：該表用來(lái)存儲(chǔ)后臺(tái)管理數(shù)據(jù)網(wǎng)站管理員的用戶編號(hào)、賬號(hào)、密碼，用于用戶進(jìn)行登錄操作。表5-2超級(jí)管理員表（sys_user）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵user_id管理員編號(hào)bigint20否主鍵account管理員賬號(hào)varchar20否password密碼varchar20否管理員表sys_user中，共有三個(gè)字段來(lái)存儲(chǔ)后臺(tái)管理員信息。（1）user_id：user_id字段代表管理員的編號(hào)，是sys_user表的主鍵，故不允許為空。（2）account：account字段代表管理員賬號(hào)，登錄的時(shí)候要驗(yàn)證用戶名和密碼是否正確，一般長(zhǎng)度為20。（3）password：assword字段代表用戶密碼，登錄的時(shí)要驗(yàn)證用戶名和密碼是否匹配，用戶名和密碼都對(duì)了之后才能登錄后臺(tái)管理系統(tǒng)，對(duì)系統(tǒng)進(jìn)行操作。該字段的最長(zhǎng)長(zhǎng)度設(shè)置為20。4.2..3.3輪播圖表輪播圖表（pic）：該表用來(lái)存儲(chǔ)小程序主頁(yè)的輪播圖信息，包括輪播圖編號(hào)、圖內(nèi)容、以及點(diǎn)擊后跳轉(zhuǎn)音樂(lè)播放地址。表5-3輪播圖表（pic）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵pic_id輪播圖編號(hào)bigint20否主鍵url圖片存放地址varchar50否music_url音樂(lè)播放地址varchar50否輪播圖表pic中，共有三個(gè)字段來(lái)存儲(chǔ)輪播圖信息。（1）pic_id：pic_id字段代表輪播圖的編號(hào)，是pic表的主鍵，故不允許為空。（2）url：url代表輪播圖存放的地址，不能為空，由于上傳之后會(huì)生成一長(zhǎng)串字符串，故長(zhǎng)度設(shè)為50。（3）music_url：music_url代表用戶點(diǎn)擊輪播圖后跳轉(zhuǎn)的地址，長(zhǎng)度為50。4.2..3.4歌手表歌手表（singer）：該表用來(lái)存儲(chǔ)后所有歌手信息，包括歌手編號(hào)、歌手名、歌手圖片地址、歌手姓名首字母。表5-4歌手表（singer）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵singer_id歌手編號(hào)bigint20否主鍵name歌手名varchar20否pic歌手圖片地址varchar50否findex姓名首字母varchar5否歌手表singer中，共有四個(gè)字段來(lái)存儲(chǔ)歌手信息。（1）singer_id：singer_id字段代表歌手編號(hào)，是singer表的主鍵，故不允許為空。（2）name：name字段代表歌手名。（3）pic：pic字段代表歌手頭像，在歌手查詢處小窗顯示，在歌手主頁(yè)當(dāng)主頁(yè)背景顯示，長(zhǎng)度為50。（4）findex：findex字段為歌手名首字母，在歌手頁(yè)按首字母從A-Z排序，方便用戶查找。4.2.3.5歌曲表歌曲表（song）：該表用來(lái)存儲(chǔ)后所有歌曲信息，包括歌曲編號(hào)、歌曲名、歌手名、播放地址、專輯封面、專輯名稱、播放時(shí)長(zhǎng)。表5-5歌曲表（song）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵song_id歌曲編號(hào)bigint20否主鍵name歌手名varchar20否singer_id歌手編號(hào)bigint20否外鍵url歌手頭像varchar50否pic專輯封面varchar50否mark專輯名稱varchar20否duration播放市場(chǎng)varchar10否歌手表song中，共有七個(gè)字段來(lái)存儲(chǔ)歌手信息。（1）song_id：song_id字段代表歌曲編號(hào)，是song表的主鍵，故不允許為空。（2）name：name字段代表歌曲名。（3）singer_id：singer_id字段代表歌手，該字段為外鍵，是singer表中的主鍵。（4）url：url字段為歌曲獲取地址，歌曲的播放、下載都需要獲取此地址，故不能為空，大小為50。（5）pic：pic字段為該歌曲對(duì)應(yīng)專輯的圖片地址，在歌曲播放頁(yè)面顯示。（6）mark：mark字段為歌曲所在的專輯名稱。（7）duration：duration字段為歌曲的播放時(shí)長(zhǎng)，用于播放頁(yè)面的進(jìn)度條顯示。4.2.3.6歌單表歌單表（song_sheet）：該表用來(lái)存儲(chǔ)后所有歌單信息，包括歌單編號(hào)、歌單名、歌單封面。表5-6歌單表（song_sheet）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵sheet_id歌單編號(hào)bigint20否主鍵name歌單名varchar20否pic歌單封面varchar50否歌單表song_sheet中，共有三個(gè)字段來(lái)存儲(chǔ)歌單信息。（1）sheet_id：sheet_id字段代表歌單編號(hào)，是sheet表的主鍵，故不允許為空。（2）name：name字段代表歌單名。（3）pic：pic字段代表歌單封面圖片存放地址，用于圖片獲取。該圖片會(huì)在歌單遍歷時(shí)小窗顯示，在點(diǎn)擊歌單詳情時(shí)作背景圖，字段大小為50。4.2.3.7評(píng)論表評(píng)論表（comment）：該表用來(lái)存儲(chǔ)后所有歌曲的評(píng)論信息，包括評(píng)論編號(hào)、評(píng)論內(nèi)容、評(píng)論時(shí)間、評(píng)論人、音樂(lè)。表5-8評(píng)論表（comment）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵comment_id評(píng)論編號(hào)bigint20否主鍵context評(píng)論內(nèi)容varchar255否user_id評(píng)論人bigint20否外鍵time評(píng)論時(shí)間datetime否song_id歌曲bigint20否外鍵評(píng)論表comment中，共有五個(gè)字段來(lái)存儲(chǔ)歌單信息。（1）comment_id：comment_id字段代表評(píng)論編號(hào)，是comment表的主鍵，故不允許為空。（2）context：context字段為評(píng)論的具體內(nèi)容，因?yàn)樵u(píng)論有長(zhǎng)有短，所以長(zhǎng)度設(shè)置了255。（3）user_id：user_id字段代表評(píng)論人，該字段為外鍵，是register_user表中的主鍵。（4）time：time字段為該評(píng)論的發(fā)表時(shí)間，采用時(shí)間戳形式。（5）song_id：song_id字段為該條評(píng)論所對(duì)應(yīng)的歌曲，為該表外鍵，是song表的主鍵。4.2.3.8播放記錄表播放記錄表（song_played）：該表用來(lái)存儲(chǔ)后所有用戶播放記錄的信息，包括記錄編號(hào)、歌曲、播放時(shí)間、播放用戶。表5-8播放記錄表（song_played）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵played_id記錄編號(hào)bigint20否主鍵time播放時(shí)間datetime否user_id播放用戶bigint20否外鍵song_id歌曲bigint20否外鍵播放記錄表song_played中，共有四個(gè)字段來(lái)存儲(chǔ)播放記錄信息。（1）played_id：played_id字段代表播放記錄編號(hào)，是song_played表的主鍵，故不允許為空。（2）time：time字段為改條記錄時(shí)間。（3）user_id：user_id字段代表播放用戶，該字段為外鍵，是register_user表中的主鍵。（4）song_id：song_id字段為該記錄的播放歌曲。4.2.3.9收藏記錄表收藏記錄表（song_collection）：該表用來(lái)存儲(chǔ)后所有用戶收藏歌曲記錄的信息，包括記錄編號(hào)、歌曲、播放時(shí)間、收藏用戶。表5-9收藏記錄表（song_collection）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵collection_id記錄編號(hào)bigint20否主鍵time收藏時(shí)間datetime否user_id收藏用戶bigint20否外鍵song_id收藏歌曲bigint20否外鍵播放記錄表song_collection中，共有四個(gè)字段來(lái)存儲(chǔ)收藏記錄信息。（1）collection_id：collection_id字段代表收藏記錄編號(hào)，是song_collection表的主鍵，故不允許為空。（2）time：time字段為改條記錄時(shí)間。（3）user_id：user_id字段代表收藏用戶，該字段為外鍵，是register_user表中的主鍵。（4）song_id：song_id字段為該記錄的收藏歌曲。4.2.3.10歌單-歌曲關(guān)聯(lián)記錄表歌單-歌曲關(guān)聯(lián)記錄（sheet_list）：該表用來(lái)存儲(chǔ)每個(gè)歌單中所包含的具體歌曲信息，包括記錄編號(hào)、歌單編號(hào)、歌曲編號(hào)。表5-10歌單-歌曲關(guān)聯(lián)記錄表（sheet_list）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵list_id關(guān)聯(lián)記錄編號(hào)bigint20否主鍵sheet_id歌單編號(hào)bigint20否外鍵song_id歌曲編號(hào)bigint20否外鍵歌單歌曲關(guān)聯(lián)表（sheet_list）中，共有三個(gè)字段來(lái)存儲(chǔ)歌單歌曲關(guān)聯(lián)信息。（1）list_id：list_id字段代表關(guān)聯(lián)記錄的編號(hào)，是sheet_list表的主鍵，故不允許為空。（2）sheet_id：sheet_id代表歌單編號(hào)，用來(lái)表示有關(guān)聯(lián)記錄的具體歌單，為song_sheet表的主鍵，該字段為外鍵。（3）song_id：song_id代表歌曲編號(hào)，用來(lái)表示歌單中存儲(chǔ)的具體歌曲，為song表的主鍵，該字段為外鍵。4.3數(shù)據(jù)庫(kù)接口設(shè)計(jì)定義完上述的數(shù)據(jù)庫(kù)表后，需要為數(shù)據(jù)庫(kù)的訪問(wèn)提供統(tǒng)一接口，經(jīng)過(guò)設(shè)計(jì)一共設(shè)計(jì)了九個(gè)訪問(wèn)數(shù)據(jù)庫(kù)接口，分別是：RegisterUserService訪問(wèn)register_user表；SongService訪問(wèn)song表；SingerServcie訪問(wèn)singer表；SongSheetService訪問(wèn)song_sheet表；CommentService訪問(wèn)comment表；PicService訪問(wèn)pic表；SongPlayedService訪問(wèn)song_played表；SongCollection訪問(wèn)song_collection表；SheetListService訪問(wèn)sheet_list表。各接口繼承了mybatis-plus技術(shù)的IService<T>接口，泛型T在此為各接口傳遞數(shù)據(jù)的參數(shù)型實(shí)體類，例如RegisterUserService使用的參數(shù)型實(shí)體類為RegisterUserParam。每個(gè)實(shí)體類中的所有屬性對(duì)應(yīng)其數(shù)據(jù)庫(kù)表中的各項(xiàng)字段，每個(gè)接口都繼承了IService<T>接口實(shí)現(xiàn)類中的方法。每個(gè)接口都定義了增加、刪除、更新、分頁(yè)查詢等方法，在接口實(shí)現(xiàn)類中，通過(guò)調(diào)用自身繼承父類的方法來(lái)實(shí)現(xiàn)各函數(shù)的內(nèi)部邏輯。增加、刪除、更新函數(shù)的返回值類型為void，add()函數(shù)用于小程序端注冊(cè)用戶或后臺(tái)管理員添加注冊(cè)用戶數(shù)據(jù)。delete()函數(shù)用于后臺(tái)管理員刪除注冊(cè)用戶數(shù)據(jù)。update()函數(shù)用于后臺(tái)管理員個(gè)更新注冊(cè)用戶數(shù)據(jù)。查詢函數(shù)的返回值為各個(gè)接口傳遞數(shù)據(jù)的結(jié)果型實(shí)體類，例如在RegsiterUserService中，查詢函數(shù)的返回值類型為RegisterUserResult。findBySpec()為查詢單條數(shù)據(jù)；findListBySpec()為查詢列表數(shù)據(jù)。最后是分頁(yè)查詢函數(shù)findPageBySpec()，該函數(shù)的作用是將在數(shù)據(jù)庫(kù)查到的全部數(shù)據(jù)分頁(yè)展示到前臺(tái)網(wǎng)站。返回值類型為L(zhǎng)ayuiPageInfo，該類型是對(duì)Layui中table標(biāo)簽分頁(yè)展示結(jié)果的封裝。在獲取分頁(yè)結(jié)果過(guò)程中，再次用到了mybatis-plus的接口IPage。獲取分頁(yè)結(jié)果方法createPageInfo()在LayuiPageFactory中，該方法中IPage接口通過(guò)創(chuàng)建匿名內(nèi)部類的方法調(diào)用接口中的getTotal()、getPages()、getRecords()方法，將分頁(yè)查詢數(shù)據(jù)封裝到LayuiPageinfo數(shù)據(jù)類型中。綜上所述，以RegisterUserService為例，該過(guò)程的類圖如下圖5-15所示。圖5-13以RegisterUserService為例的類圖表示4.4核心功能模塊的設(shè)計(jì)4.4.1系統(tǒng)總體功能設(shè)計(jì)根據(jù)總體設(shè)計(jì)中對(duì)系統(tǒng)功能模塊的劃分，可得出系統(tǒng)共分共是九個(gè)功能模塊，前端部分有：賬號(hào)操作、歌曲播放、歌曲操作、查看推薦以及后端部分：用戶管理、歌曲管理、歌手管理、歌單管理、輪播圖管理。根據(jù)劃分出的功能模塊可以得出系統(tǒng)主要的功能模塊圖，系統(tǒng)功能模塊圖如下圖5-14所示：圖5-14系統(tǒng)功能模塊圖4.4.2注冊(cè)登錄功能設(shè)計(jì)該系統(tǒng)登錄分為前臺(tái)小程序端登錄和后臺(tái)web端管理員登錄，小程序端用戶登錄需注冊(cè)賬號(hào)。對(duì)于該模塊的設(shè)計(jì)大致如下：管理員登錄：管理員的賬號(hào)密碼提前寫(xiě)在數(shù)據(jù)庫(kù)表sys_user中，在網(wǎng)頁(yè)端輸入賬號(hào)密碼并提交表單后，后臺(tái)LoginController類用GET方法獲取到數(shù)據(jù)。并通過(guò)調(diào)用shiro安全框架下的UsernamePasswordToken類中的同名方法進(jìn)行用戶名密碼匹配的過(guò)程，若輸入的用戶名密碼與數(shù)據(jù)庫(kù)事先存入的相符，則成功登錄跳轉(zhuǎn)到管理主頁(yè)面。小程序用戶注冊(cè)：小程序用戶在登錄前需要進(jìn)行注冊(cè)，注冊(cè)時(shí)小程序跳轉(zhuǎn)到register.wxml填寫(xiě)表單數(shù)據(jù)，填寫(xiě)完成后點(diǎn)擊注冊(cè)按鈕觸發(fā)subReg事件，當(dāng)用戶在注冊(cè)時(shí)填寫(xiě)不規(guī)范時(shí)，subReg事件中使用showToast彈窗組件令用戶注意填寫(xiě)規(guī)范。注冊(cè)成功后，將數(shù)據(jù)打包通過(guò)request請(qǐng)求發(fā)送到后臺(tái)ApiController中，ApiController中registerUser()方法接收數(shù)據(jù)并封裝到RegisterUserParam的對(duì)象中，通過(guò)調(diào)用registerService接口繼承的BaseService中的查詢方法，若數(shù)據(jù)庫(kù)中沒(méi)有該用戶名存在，則注冊(cè)成功。小程序用戶登錄：注冊(cè)成功后或點(diǎn)擊登錄時(shí)，小程序跳轉(zhuǎn)到login.wxml頁(yè)面，輸入賬號(hào)密碼點(diǎn)擊提交后觸發(fā)bindGetUserInfo事件，該事件將數(shù)據(jù)通過(guò)requset發(fā)送到ApiController中，通過(guò)loginAPP()接收數(shù)據(jù)并查詢數(shù)據(jù)庫(kù)是否匹配，若匹配成功，則登錄成功。系統(tǒng)注冊(cè)登錄功能流程圖如圖5-15所示。4.4.3后臺(tái)管理功能設(shè)計(jì)后臺(tái)管理模塊功能就是對(duì)數(shù)據(jù)庫(kù)信息的增刪改查操作，設(shè)計(jì)流程是通過(guò)提交html表單到對(duì)應(yīng)的controller層中，controller層通過(guò)GET方式接收數(shù)據(jù)后封裝到對(duì)應(yīng)的參數(shù)型實(shí)體類對(duì)象中。調(diào)用service層的方法，對(duì)數(shù)據(jù)進(jìn)行增刪改查操作。該模塊設(shè)計(jì)運(yùn)用了mybatis-plus技術(shù)，所以相同的操作方法基本一直，而對(duì)歌曲有專門(mén)的七日播放量統(tǒng)計(jì)功能，所以就對(duì)歌曲操作為例進(jìn)行設(shè)計(jì)描述。增加功能，管理員點(diǎn)擊添加跳轉(zhuǎn)到song_add.html，該頁(yè)面為提交增加歌曲信息的表單數(shù)據(jù)到songController中對(duì)應(yīng)路徑為/addItem的addItem()方法中，表單數(shù)據(jù)封裝在SongParam的對(duì)象中，通過(guò)調(diào)用songService的add()方法完成添加。刪除功能，管理員選中數(shù)據(jù)點(diǎn)擊刪除，將本條數(shù)據(jù)發(fā)送到songController類對(duì)應(yīng)路徑為/delete的delete()方法中，通過(guò)調(diào)用songService層的delete()函數(shù)完成刪除。修改功能，管理員選中數(shù)據(jù)點(diǎn)擊更新，填寫(xiě)更新表單，將更新后的數(shù)據(jù)發(fā)送到songController類對(duì)應(yīng)路徑為/editItem的editItem()方法中，通過(guò)songService層的update()函數(shù)完成替換。查詢功能，當(dāng)管理員點(diǎn)擊樂(lè)庫(kù)管理時(shí)，會(huì)調(diào)用songController類中的list()函數(shù)，該函數(shù)調(diào)用songService層的findPageBySpec()函數(shù)，將后臺(tái)數(shù)據(jù)庫(kù)的數(shù)據(jù)分頁(yè)封裝在LayuiPageInfo類型數(shù)據(jù)對(duì)象中，使用layui的table標(biāo)簽在前端展示。圖5-15注冊(cè)登錄功能流程圖4.4.4歌曲播放功能設(shè)計(jì)歌曲播放功能模塊主要包括選擇歌曲播放、上下切歌、播放模式切換的功能。歌曲播放主要依靠在app.js中設(shè)計(jì)的初始為空的songlist[]常量。對(duì)該模塊功能以來(lái)與wx.getBackgroundAudioPlayer()組件。其中具體的功能設(shè)計(jì)如下：歌曲播放的設(shè)計(jì)分為兩類。第一類是通過(guò)歌單、歌手主頁(yè)、記錄中選擇播放歌曲，第二類是通過(guò)搜索結(jié)果播放歌曲。第一類是獲取歌曲列表。當(dāng)點(diǎn)擊歌單、播放記錄或歌手主頁(yè)時(shí)，各page中的js文件會(huì)想后臺(tái)發(fā)送請(qǐng)求，獲取到的結(jié)果賦值給songlist[]中。以系統(tǒng)歌單為例，當(dāng)用戶點(diǎn)擊進(jìn)入歌單主頁(yè)后，toplist.js向后臺(tái)ApiController發(fā)送/getMusicList請(qǐng)求進(jìn)入getMusicList()方法，參數(shù)為sheet_id。在此方法中通過(guò)sheet_id再次查詢sheet_list表，獲取當(dāng)前sheet_id對(duì)應(yīng)下的歌曲全部信息。并將結(jié)果返回。在toplist.js中得到結(jié)果后，通過(guò)setData將songlist[]的值改變，即可得到該歌單的播放隊(duì)列。第二類是獲取單首歌曲。在search.js設(shè)計(jì)selectSong()觸發(fā)事件，當(dāng)在搜索頁(yè)面搜索歌曲時(shí)，會(huì)觸發(fā)search.js中的searchAction()事件，該事件向后臺(tái)ApiController發(fā)送請(qǐng)求，調(diào)用searchMusic方法，查詢歌曲并將返回結(jié)果封裝到song中。點(diǎn)擊該歌曲會(huì)觸發(fā)selectSong()事件，再將song的值賦值給songlist[]，即可跳轉(zhuǎn)到歌曲播放頁(yè)面。上下切歌的實(shí)現(xiàn)是通過(guò)給當(dāng)前播放歌曲設(shè)置currentIndex，在player.js中設(shè)計(jì)一個(gè)getNextIndex()的方法，參數(shù)設(shè)置為boolean類型的nextFlag。當(dāng)用戶點(diǎn)擊下一首標(biāo)識(shí)時(shí)，觸發(fā)next()事件，事件中調(diào)用getNextIndex()方法，nextFlag為true。當(dāng)用戶點(diǎn)擊上一首標(biāo)識(shí)時(shí)，觸發(fā)pre()事件，事件中調(diào)用getNextIndex()方法，nextFlag為false。4.4.5歌曲操作功能設(shè)計(jì)歌曲操作功能模塊包括對(duì)歌曲的收藏、評(píng)論、分享、下載功能。該部分的設(shè)計(jì)過(guò)程如下：歌曲收藏：app.js中定義user_id和isLogin兩個(gè)常量來(lái)記錄用戶的登錄狀態(tài)，user_id初始為空，isLogin初始為false。當(dāng)用戶點(diǎn)擊收藏標(biāo)識(shí)時(shí)，若用戶未登錄，則user_id和isLogin均為初始狀態(tài)，則跳轉(zhuǎn)到登錄界面。用戶登錄成功后，user_id賦值成用戶名，isLogin置為true。在player.js中設(shè)置favorite變量，若favorite為false，則標(biāo)識(shí)該歌曲未被收藏。此時(shí)用戶點(diǎn)擊收藏標(biāo)識(shí)，觸發(fā)favorite()事件，將userId和songId作為參數(shù)向后臺(tái)ApiController類發(fā)送請(qǐng)求，調(diào)用favorite()方法，在方法中調(diào)用CollectionService中add()方法，將歌曲ID和用戶ID填入song_collection表中。歌曲評(píng)論：player.js定義context常量來(lái)表示評(píng)論內(nèi)容，用戶在評(píng)論完成點(diǎn)擊發(fā)表后，觸發(fā)saveComment()事件，事件將context和user_id作為參數(shù)向服務(wù)器發(fā)送request請(qǐng)求，調(diào)用ApiController類saveComment()方法，saveComment調(diào)用CommentService中的add()方法，將各項(xiàng)數(shù)據(jù)填入comment表中。歌曲下載：用戶點(diǎn)擊下載標(biāo)識(shí)后，觸發(fā)player.js中的download()事件，利用FileSystemManager組件工具下載。通過(guò)向后臺(tái)發(fā)送請(qǐng)求得到歌曲路徑信息和歌曲名，保存到微信USER_DATA_PATH文件目錄下，文件名為{{songName}}.mp3。歌曲播放和歌曲操作流程圖如圖5-16所示：圖5-16歌曲功能流程圖4.4.6搜索功能設(shè)計(jì)搜索模塊是用戶在搜索歌曲，歌手時(shí)調(diào)用的模塊，功能主要有模糊查詢、歷史記錄、清楚歷史記錄、點(diǎn)擊搜索歌手、點(diǎn)擊搜索歌曲。以上功能設(shè)計(jì)如下：模糊查詢：在搜索框input輸入關(guān)鍵字后，點(diǎn)擊搜索，觸發(fā)searchAction()事件，在searchAction()中利用利用event.currentTarget.dataset.txt將文本框數(shù)據(jù)傳入keyword變量中，通過(guò)發(fā)送請(qǐng)求調(diào)用后臺(tái)ApiController類中的查詢方法，將歌手查詢結(jié)果放入局部變量singers[]中，將歌曲查詢結(jié)果放入songs[]中，在前臺(tái)遍歷展示singers[]和songs[]即可。當(dāng)搜索結(jié)果為歌曲為，觸發(fā)selectmusic()事件，跳轉(zhuǎn)到歌曲播放頁(yè)面；為歌手時(shí)，觸發(fā)goSinger()事件，跳轉(zhuǎn)到歌手主頁(yè)。歷史記錄：player.js獲取到keyword后，將其賦值給historySearch，利用wx.getStorageSync()將historySearch存儲(chǔ)。在前臺(tái)遍歷即可得到所有搜索記錄。在點(diǎn)擊刪除歷史記錄時(shí)，通過(guò)調(diào)用wx.removeStorageSync()即可實(shí)現(xiàn)對(duì)歷史記錄的刪除。搜索功能的操作流程圖如圖5-17所示：圖5-17搜索功能流程圖4.4.7歌手展示功能設(shè)計(jì)歌手展示功能模塊為將數(shù)據(jù)庫(kù)中所有歌手的首字母按照從A~Z的順序進(jìn)行排序，具體設(shè)計(jì)如下：在singer.js中，通過(guò)調(diào)用后臺(tái)ApiController類獲取數(shù)據(jù)庫(kù)中所有歌手的實(shí)體存入singerList中，通過(guò)比較每個(gè)歌手的姓名首字母的的大小獲取一個(gè)有序表map，在前臺(tái)對(duì)map遍歷即可。4.4.8推薦功能設(shè)計(jì)推薦功能利用基于用戶的協(xié)同過(guò)濾算法給用戶推薦歌曲，該算法思想為根據(jù)所有用戶對(duì)歌曲的偏好，發(fā)現(xiàn)與當(dāng)前用戶偏好相似的“鄰居”用戶群，即計(jì)算“K鄰居”。然后基于這K個(gè)鄰居的歷史偏好信息，為當(dāng)前用戶進(jìn)行推薦，該算法原理如圖5-18所示，假設(shè)用戶A收藏了歌曲A、歌曲C，用戶B收藏了歌曲B，用戶C收藏了歌曲A、歌曲C、歌曲D；從這些用戶收藏記錄中，我們可以發(fā)現(xiàn)用戶A和用戶C的歌曲收藏偏好是比較相似的，同時(shí)用戶C還收藏了歌曲D，那么我們可以推斷用戶A可能也喜歡歌曲D，因此可以將歌曲D推薦給用戶A[21]。圖5-18基于用戶協(xié)同過(guò)濾推薦原理圖基于用戶的協(xié)同過(guò)濾算法主要包括兩個(gè)步驟：(1)找到和用戶偏好相似的用戶集合。(2)找到這個(gè)集合中的用戶喜歡的，且用戶沒(méi)有收藏的歌曲推薦給用戶。該過(guò)程具體設(shè)計(jì)流程如下：在用戶登錄后點(diǎn)擊獲取推薦歌單時(shí)，觸發(fā)index.js中的getRecommendData()事件，該事件發(fā)送請(qǐng)求到ApiController調(diào)用getRecommend()方法，該方法通過(guò)調(diào)用CollectionService層的selectList()方法獲取此user_id的收藏記錄，并通過(guò)收藏記錄的song_id查詢出所有與此user_id收藏過(guò)相同歌曲的user_id，再通過(guò)這些user_id查詢這些用戶的收藏記錄，將所有的收藏記錄輸出到dataModel.txt文件中。最后以dataModel.txt為數(shù)據(jù)模型model，通過(guò)調(diào)用ApacheMahout協(xié)同過(guò)濾算法下的用戶相似度算法EuclideanDistanceSimilarity()獲取用戶相似度user，再調(diào)用NearestNUserNeighborhood()方法計(jì)算用戶緊鄰neighbor，最后調(diào)用GenericUserBasedRecommender()方法，參數(shù)為model,user,neighbor得到推薦結(jié)果。4.5本章小結(jié)本章是對(duì)具有推薦功能的音樂(lè)播放微信小程序的詳細(xì)設(shè)計(jì)部分的介紹。本章介紹了微信小程序的相關(guān)特性和Springboot框架的體系結(jié)構(gòu)和功能優(yōu)點(diǎn)，然后依次介紹了畢設(shè)項(xiàng)目的數(shù)據(jù)庫(kù)的設(shè)計(jì)、數(shù)據(jù)庫(kù)的接口設(shè)計(jì)以及核心功能模塊的設(shè)計(jì)，這些設(shè)計(jì)為接下來(lái)的系統(tǒng)實(shí)現(xiàn)和測(cè)試打下了良好的基礎(chǔ)。第6章系統(tǒng)實(shí)現(xiàn)與測(cè)試第5章系統(tǒng)實(shí)現(xiàn)與測(cè)試5.1系統(tǒng)實(shí)現(xiàn)用戶和系統(tǒng)的交互是建立在用戶界面上的，因?yàn)橛脩魺o(wú)法看到代碼，所以只能通過(guò)系統(tǒng)提供的用戶界面來(lái)和系統(tǒng)進(jìn)行交互，因此用戶界面是十分重要的。用戶可以通過(guò)用戶界面向系統(tǒng)傳遞信息，同時(shí)也可以接收系統(tǒng)的反饋。具有推薦系統(tǒng)的音樂(lè)播放微信小程序的音樂(lè)數(shù)據(jù)是需要合理的界面來(lái)展現(xiàn)的，良好的界面設(shè)計(jì)可以簡(jiǎn)化用戶操作并帶給用戶良好的體驗(yàn)感。5.1.1注冊(cè)登錄功能的實(shí)現(xiàn)小程序端用戶登錄需要注冊(cè)，注冊(cè)時(shí)小程序自動(dòng)獲取微信用戶的頭像，填寫(xiě)用戶名和密碼，點(diǎn)擊注冊(cè)按鈕注冊(cè)成功。登錄時(shí)，用戶填寫(xiě)已注冊(cè)完的用戶名和密碼，點(diǎn)擊登錄按鈕登錄。效果如下圖6-1所示：圖6-1小程序端用戶注冊(cè)登錄網(wǎng)頁(yè)端管理員賬號(hào)無(wú)需注冊(cè)，為事先加入數(shù)據(jù)庫(kù)中的數(shù)據(jù)，輸入賬號(hào)和密碼即可完成登錄。效果如下圖6-2所示：圖6-2網(wǎng)頁(yè)端端管理員登錄5.1.2主界面的實(shí)現(xiàn)管理員成功登陸后，自動(dòng)跳轉(zhuǎn)到網(wǎng)頁(yè)端的主頁(yè)。系統(tǒng)主頁(yè)導(dǎo)航欄對(duì)應(yīng)后臺(tái)管理選項(xiàng)。包括樂(lè)庫(kù)管理、歌手管理、歌單管理、用戶管理、輪播圖管理。點(diǎn)擊導(dǎo)航欄會(huì)分頁(yè)顯示數(shù)據(jù)庫(kù)中數(shù)據(jù)，并顯示操作選項(xiàng)。效果圖如6-3所示：圖6-3管理員系統(tǒng)主界面用戶成功登錄后，跳轉(zhuǎn)到小程序端的主頁(yè)。主頁(yè)包含三部分：輪播圖、搜索欄、推薦歌單、系統(tǒng)歌單。底部的tabBar對(duì)應(yīng)跳轉(zhuǎn)到不同的功能頁(yè)面。效果圖如圖6-4所示：圖6-4小程序端主界面5.1.3歌曲播放功能的實(shí)現(xiàn)小程序觸發(fā)歌曲播放的方式有六種方式：點(diǎn)擊主頁(yè)的輪播圖觸發(fā)、點(diǎn)擊歌單內(nèi)歌曲名觸發(fā)、點(diǎn)擊搜索歌曲結(jié)果、在歌手主頁(yè)點(diǎn)擊歌曲名觸發(fā)、在播放記錄中點(diǎn)擊歌曲名觸發(fā)、在收藏列表中點(diǎn)擊歌曲名觸發(fā)。以上事件觸發(fā)歌曲播放后，會(huì)跳轉(zhuǎn)到tabBar的正在播放界面。界面靜態(tài)顯示歌曲信息以及歌曲操作表示，以唱片形式將歌曲封面旋轉(zhuǎn)動(dòng)態(tài)顯示。效果圖如下圖6-5所示：圖6-5小程序音樂(lè)播放界面5.1.4評(píng)論功能的實(shí)現(xiàn)在歌曲播放界面右滑顯示用戶對(duì)當(dāng)前播放歌曲的評(píng)論，評(píng)論記錄評(píng)論內(nèi)容、評(píng)論事件和評(píng)論者，上下滑動(dòng)可翻閱所有評(píng)論。用戶若想評(píng)論此歌曲，需在文本框“請(qǐng)輸入回復(fù)”中填寫(xiě)想要評(píng)論的內(nèi)容，點(diǎn)擊發(fā)送即可。效果圖如下圖6-6所示：圖6-6評(píng)論功能實(shí)現(xiàn)效果5.1.5搜索功能的實(shí)現(xiàn)搜索功能用于幫助用戶快速查找到想要獲得的內(nèi)容。小程序的搜索功能提供歌曲搜索、歌手搜索。該搜索功能有模糊查詢的功能，當(dāng)用戶輸入關(guān)鍵字時(shí)，系統(tǒng)會(huì)匹配關(guān)鍵字查找，若匹配的結(jié)果為歌曲，則以歌曲-歌手的形式顯示；若匹配結(jié)果為歌手，則以歌手頭像頭像-歌手名結(jié)果顯示。效果圖如圖6-7所示：圖6-7搜索功能實(shí)現(xiàn)效果5.1.6歌手展示功能的實(shí)現(xiàn)為了方便用戶查詢歌手，提高查詢效率。歌手展示功能模塊提供了按照歌手的姓名首字母順序從A~Z排序的功能，并且只給出數(shù)據(jù)庫(kù)中已有歌手的姓名首字母，當(dāng)用戶點(diǎn)擊某個(gè)字母時(shí)，小程序會(huì)定位到選擇字母的位置。效果如圖6-8所示：圖6-8歌手展示功能實(shí)現(xiàn)效果5.1.7推薦功能的實(shí)現(xiàn)推薦功能的實(shí)現(xiàn)，是使用基于用戶的協(xié)同過(guò)濾算法，對(duì)用戶的收藏歌單進(jìn)行分析統(tǒng)計(jì)，為用戶推薦歌曲，推薦結(jié)果在小程序主頁(yè)顯示。效果如下圖6-9所示：圖6-9推薦功能實(shí)現(xiàn)效果5.2程序測(cè)試對(duì)于系統(tǒng)的測(cè)試主要采用白盒測(cè)試，而且是分模塊進(jìn)行的，會(huì)對(duì)各個(gè)模塊的入口和出口數(shù)據(jù)進(jìn)行嚴(yán)格的檢查。采用白盒測(cè)試，方便測(cè)試人員掌握系統(tǒng)的內(nèi)部結(jié)構(gòu)和處理過(guò)程，并且可以隨時(shí)修改內(nèi)部程序，使得對(duì)系統(tǒng)的測(cè)試工作變得十分便利。因此測(cè)試人員可以通過(guò)檢查程序邏輯并得出相應(yīng)測(cè)試數(shù)據(jù)來(lái)檢查系統(tǒng)各模塊能否正常的運(yùn)行。5.2.1本系統(tǒng)測(cè)試具有推薦功能的音樂(lè)播放微信小程序主要有賬號(hào)操作、歌曲播放、歌曲操作、用戶管理、歌曲管理、歌手管理、歌單管理、輪播圖管理，這八個(gè)功能模塊都分別包含許多功能，根據(jù)以上介紹的測(cè)試原則，將使用測(cè)試用例文檔分別對(duì)本系統(tǒng)進(jìn)行測(cè)試。由于本系統(tǒng)各功能模塊內(nèi)包含的小功能過(guò)多，就不一一列舉測(cè)試，僅選擇幾個(gè)具有代表性功能的來(lái)進(jìn)行測(cè)試，測(cè)試用例如下。用戶登錄的測(cè)試用例，如表6-1所示。表6-1用戶登錄的測(cè)試用例用例描述前提條件用例步驟期待結(jié)果實(shí)際結(jié)果用戶登錄頁(yè)面用戶名和密碼都存在且匹配輸入用戶名和密碼不報(bào)錯(cuò)，成功登錄與期待結(jié)果相同用戶登錄頁(yè)面用戶名和密碼都存在但不匹配輸入用戶名和密碼報(bào)錯(cuò)，登錄失敗與期待結(jié)果相同用戶登錄頁(yè)面用戶名不存在輸入用戶名和密碼報(bào)錯(cuò)，登錄失敗與期待結(jié)果相同用戶登錄頁(yè)面用戶名或密碼有一項(xiàng)為空輸入用戶名和密碼報(bào)錯(cuò)，登錄失敗與預(yù)期結(jié)果相同表6-1用戶登錄測(cè)試用例，實(shí)際結(jié)果與期待結(jié)果相同，用戶登錄功能通過(guò)測(cè)試。(2)歌曲播放的測(cè)試用例，如表6-2所示：表6-2歌曲播放的測(cè)試用例用例描述前提條件用例步驟期待結(jié)果實(shí)際結(jié)果小程序主界面輪播圖有跳轉(zhuǎn)播放的點(diǎn)擊事件點(diǎn)擊輪播圖不報(bào)錯(cuò)，成功播放與期待結(jié)果相同小程序主界面輪播圖沒(méi)有跳轉(zhuǎn)播放的點(diǎn)擊事件點(diǎn)擊輪播圖報(bào)錯(cuò)，未獲取到歌曲地址與期待結(jié)果相同歌單詳情頁(yè)面歌單中有該歌曲地址點(diǎn)擊歌曲名不報(bào)錯(cuò)，播放成功與期待結(jié)果相同歌單詳情頁(yè)面歌單中沒(méi)有該歌曲地址點(diǎn)擊歌曲名報(bào)錯(cuò)，播放失敗與預(yù)期結(jié)果相同(3)搜索功能的測(cè)試用例，如表6-3所示：表6-3搜索功能的測(cè)試用例用例描述前提條件用例步驟期待結(jié)果實(shí)際結(jié)果搜索頁(yè)面數(shù)據(jù)庫(kù)中有符合關(guān)鍵字的歌手和歌曲輸入關(guān)鍵字不報(bào)錯(cuò)，搜索成功與期待結(jié)果相同搜索頁(yè)面數(shù)據(jù)庫(kù)中只有符合關(guān)鍵字的歌手輸入關(guān)鍵字不報(bào)錯(cuò)，搜索成功與期待結(jié)果相同搜索頁(yè)面數(shù)據(jù)庫(kù)中只有符合關(guān)鍵字的歌曲輸入關(guān)鍵字不報(bào)錯(cuò)，搜索成功與期待結(jié)果相同搜索頁(yè)面數(shù)據(jù)庫(kù)中沒(méi)有符合關(guān)鍵字的歌曲和歌手輸入關(guān)鍵字報(bào)錯(cuò)，搜索失敗與預(yù)期結(jié)果相同搜索頁(yè)面歷史搜索記錄中有數(shù)據(jù)點(diǎn)擊刪除歷史記錄不報(bào)錯(cuò)，刪除成功與預(yù)期結(jié)果相同搜索頁(yè)面歷史搜索記錄中沒(méi)有數(shù)據(jù)點(diǎn)擊刪除歷史記錄報(bào)錯(cuò)，未獲取到數(shù)據(jù)與預(yù)期結(jié)果相同(4)收藏功能的測(cè)試用例，如表6-4所示：表6-4收藏功能的測(cè)試用例用例描述前提條件用例步驟期待結(jié)果實(shí)際結(jié)果歌曲播放界面用戶未登錄點(diǎn)擊收藏不報(bào)錯(cuò)，跳轉(zhuǎn)到登錄頁(yè)面與期待結(jié)果相同歌曲播放界面用戶已登錄且此歌曲未在收藏列表點(diǎn)擊收藏不報(bào)錯(cuò)，成功收藏與期待結(jié)果相同歌曲播放界面用戶已登錄且此歌曲在收藏列表點(diǎn)擊收藏不報(bào)錯(cuò)，取消收藏與期待結(jié)果相同(5)評(píng)論功能的測(cè)試用例，如表6-5所示：表6-5評(píng)論功能的測(cè)試用例用例描述前提條件用例步驟期待結(jié)果實(shí)際結(jié)果歌曲評(píng)論頁(yè)面用戶未登錄點(diǎn)擊發(fā)表評(píng)論不報(bào)錯(cuò)，跳轉(zhuǎn)到登錄頁(yè)面與期待結(jié)果相同歌曲評(píng)論頁(yè)面用戶已登錄但評(píng)論內(nèi)容為空點(diǎn)擊發(fā)表評(píng)論報(bào)錯(cuò)，發(fā)表失敗與期待結(jié)果相同歌曲評(píng)論頁(yè)面用戶已登錄且評(píng)論內(nèi)容不為空點(diǎn)擊發(fā)表評(píng)論不報(bào)錯(cuò)，發(fā)表成功與期待結(jié)果相同(6)推薦功能的測(cè)試用例，如表6-6所示：表6-6評(píng)論功能的測(cè)試用例用例描述前提條件用例步驟期待結(jié)果實(shí)際結(jié)果小程序主界面用戶未登錄查看推薦頁(yè)面不報(bào)錯(cuò)，跳轉(zhuǎn)到登錄頁(yè)面與期待結(jié)果相同小程序主界面用戶已登錄但未收藏歌曲查看推薦頁(yè)面不報(bào)錯(cuò)，沒(méi)有推薦結(jié)果與期待結(jié)果相同小程序主界面用戶已登錄且進(jìn)行收藏歌曲操作查看推薦頁(yè)面不報(bào)錯(cuò)，成功獲取推薦結(jié)果與期待結(jié)果相同5.3本章小結(jié)本章節(jié)主要介紹了系統(tǒng)主要的功能模塊是如何實(shí)現(xiàn)的以及實(shí)現(xiàn)的效果是怎樣的，其中介紹功能模塊時(shí)描述了功能模塊實(shí)現(xiàn)的流程以及實(shí)現(xiàn)的主要代碼，對(duì)于實(shí)現(xiàn)的效果則用系統(tǒng)實(shí)際運(yùn)行時(shí)的截圖來(lái)展示。后面的部分介紹了對(duì)系統(tǒng)的測(cè)試，其中包括使用的測(cè)試方法，測(cè)試方法的優(yōu)勢(shì)以及測(cè)試得出的結(jié)果。結(jié)論本文詳細(xì)論述了具有推薦功能的音樂(lè)播放器微信小程序的設(shè)計(jì)與實(shí)現(xiàn)，按照軟件工程的設(shè)計(jì)流程，從需求分析到總體設(shè)計(jì)再到詳細(xì)設(shè)計(jì)再到系統(tǒng)的具體實(shí)現(xiàn)逐步進(jìn)行介紹。本文的主要工作成果分為如下幾個(gè)方面：(1)通過(guò)實(shí)際考察以及對(duì)網(wǎng)上已有的音樂(lè)播放器使用和調(diào)研，了解了音樂(lè)播放小程序的基本功能模塊(2)從需求分析中明確的功能著手，劃分出系統(tǒng)的功能模塊，完成系統(tǒng)總體設(shè)計(jì)。并且設(shè)計(jì)出各個(gè)模塊內(nèi)的大體流程，分析系統(tǒng)實(shí)體關(guān)系、細(xì)