音樂播放微信小程序的詳細(xì)設(shè)計(jì)案例目錄TOC\o"1-3"\h\u6280音樂播放微信小程序的詳細(xì)設(shè)計(jì)案例 130011.1開發(fā)技術(shù)介紹 1286341.2數(shù)據(jù)庫設(shè)計(jì) 2258021.2.1E-R圖介紹 2211661.2.2數(shù)據(jù)庫的創(chuàng)建 2206991.2.2實(shí)體間的聯(lián)系 3135641.2.3數(shù)據(jù)庫表的創(chuàng)建 825731.3數(shù)據(jù)庫接口設(shè)計(jì) 14282001.4核心功能模塊的設(shè)計(jì) 1584171.1.1系統(tǒng)總體功能設(shè)計(jì) 1543031.1.2注冊(cè)登錄功能設(shè)計(jì) 16310171.1.3后臺(tái)管理功能設(shè)計(jì) 17262071.1.4歌曲播放功能設(shè)計(jì) 18327351.1.5歌曲操作功能設(shè)計(jì) 19215411.1.6搜索功能設(shè)計(jì) 21267361.1.7歌手展示功能設(shè)計(jì) 22240401.1.8推薦功能設(shè)計(jì) 22詳細(xì)設(shè)計(jì)階段是針對(duì)音樂播放微信小程序，按照總體設(shè)計(jì)時(shí)的思路進(jìn)行分塊設(shè)計(jì)和數(shù)據(jù)庫設(shè)計(jì)，其中數(shù)據(jù)庫設(shè)計(jì)要包括數(shù)據(jù)庫的概念設(shè)計(jì)和邏輯設(shè)計(jì)，對(duì)數(shù)據(jù)庫中所有表結(jié)構(gòu)和字段進(jìn)行說明，同時(shí)對(duì)數(shù)據(jù)庫表中的實(shí)體的屬性以及各實(shí)體間的練習(xí)做出說明，對(duì)數(shù)據(jù)庫的設(shè)計(jì)要完整且豐富，才能盡可能的實(shí)現(xiàn)總體設(shè)計(jì)中的所有內(nèi)容。詳細(xì)設(shè)計(jì)也被人稱為過程設(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ì)就是要回答“怎么做”的問題，要在需求分析和總體設(shè)計(jì)的基礎(chǔ)上，設(shè)計(jì)如何實(shí)現(xiàn)這個(gè)系統(tǒng)，對(duì)系統(tǒng)中的每個(gè)模塊給出詳細(xì)的過程性描述，應(yīng)該用詳細(xì)設(shè)計(jì)的表達(dá)來表示這些描述。1.1開發(fā)技術(shù)介紹本系統(tǒng)主要由兩個(gè)部分組成，移動(dòng)端的音樂播放小程序，基于Web的樂庫管理網(wǎng)站組成，使用B/S架構(gòu)管理后臺(tái)樂庫等數(shù)據(jù)，前端技術(shù)使用Layui技術(shù)，后臺(tái)框架選擇Springboot和Mybatis，前端播放頁面使用微信小程序進(jìn)行開發(fā)。Springboot是由Pivotal團(tuán)隊(duì)設(shè)計(jì)的開發(fā)框架，其目的是Spring應(yīng)用的搭建及開發(fā)過程，其特點(diǎn)是：分層、開源、輕量。此框架應(yīng)用了特定的配置方式，從而令開發(fā)人員不再需要定義樣板化的配置。它不是Spring的替代品，而是對(duì)Spring很好的封裝。其采用JavaConfig的方式對(duì)Spring進(jìn)行配置，并且提供了大量注解，極大的提供了工作效率，使編碼變得簡(jiǎn)單。微信小程序是可以在微信中直接運(yùn)行的應(yīng)用業(yè)務(wù)。在微信公眾平臺(tái)中，其提供一個(gè)簡(jiǎn)單高效的應(yīng)用開發(fā)框架和配套的組件及API，可以幫助開發(fā)人員開發(fā)出可以運(yùn)行在微信中的服務(wù)，這種服務(wù)通常被稱為微信小程序。微信小程序不需要用戶單獨(dú)安裝，用戶需要使用時(shí)，可以通過在微信中搜索小程序名稱找到其打開使用或者通過微信掃一掃功能掃描小程序二維碼打開使用。除此之外，用戶還可以通過點(diǎn)擊其他微信好友分享的小程序鏈接打開使用。1.2數(shù)據(jù)庫設(shè)計(jì)1.2.1E-R圖介紹E-R圖，也稱為實(shí)體-聯(lián)系圖，提供了表示實(shí)體類型、屬性還有聯(lián)系的方法，用來描述現(xiàn)實(shí)世界的概念模型。ER圖有以下四個(gè)成分：矩形框：表示實(shí)體，在矩形框內(nèi)寫入實(shí)體名；菱形框：表示聯(lián)系，在菱形框內(nèi)寫入聯(lián)系名；橢圓形框：表示實(shí)體的屬性或聯(lián)系的屬性，將屬性名寫入橢圓形框中。對(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í)體連線方向各寫1；一對(duì)多聯(lián)系，要在1的一方寫1，多的一方寫N；多對(duì)多的聯(lián)系，要在兩個(gè)實(shí)體連線的方向分別寫N、M。1.2.2數(shù)據(jù)庫的創(chuàng)建在MySQL中創(chuàng)建數(shù)據(jù)庫和數(shù)據(jù)表，根據(jù)設(shè)計(jì)要求，為數(shù)據(jù)庫取名為weixin_music，劃分出來的實(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)1.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è)歌單可以收錄多首歌曲，每一首歌單都可以收錄樂庫中的任何一首歌曲，所以歌單實(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)系是，用戶可以在主頁點(diǎn)擊輪播圖跳轉(zhuǎn)到對(duì)應(yīng)的歌曲播放頁面，所以是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圖1.2.3數(shù)據(jù)庫表的創(chuàng)建將上述概念設(shè)計(jì)轉(zhuǎn)化成數(shù)據(jù)庫的邏輯結(jié)構(gòu)，將每個(gè)關(guān)系都轉(zhuǎn)化為數(shù)據(jù)庫中的表格數(shù)據(jù)，根據(jù)需求，設(shè)計(jì)出如下表格：1.2.3.1用戶表用戶表（register_user）：該表用來存儲(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è)字段來存儲(chǔ)小程序端注冊(cè)用戶信息。（1）user_id：user_id字段代表用戶的注冊(cè)編號(hào)，是register_user表的主鍵，故不允許為空。（2）name：name字段代表用戶昵稱，用戶登錄后會(huì)在個(gè)人主頁顯示，用戶在評(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。1.2..3.2管理員表管理員表（sys_user）：該表用來存儲(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è)字段來存儲(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。1.2..3.3輪播圖表輪播圖表（pic）：該表用來存儲(chǔ)小程序主頁的輪播圖信息，包括輪播圖編號(hào)、圖內(nèi)容、以及點(diǎn)擊后跳轉(zhuǎn)音樂播放地址。表5-3輪播圖表（pic）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵pic_id輪播圖編號(hào)bigint20否主鍵url圖片存放地址varchar50否music_url音樂播放地址varchar50否輪播圖表pic中，共有三個(gè)字段來存儲(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。1.2..3.4歌手表歌手表（singer）：該表用來存儲(chǔ)后所有歌手信息，包括歌手編號(hào)、歌手名、歌手圖片地址、歌手姓名首字母。表5-4歌手表（singer）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵singer_id歌手編號(hào)bigint20否主鍵name歌手名varchar20否pic歌手圖片地址varchar50否findex姓名首字母varchar5否歌手表singer中，共有四個(gè)字段來存儲(chǔ)歌手信息。（1）singer_id：singer_id字段代表歌手編號(hào)，是singer表的主鍵，故不允許為空。（2）name：name字段代表歌手名。（3）pic：pic字段代表歌手頭像，在歌手查詢處小窗顯示，在歌手主頁當(dāng)主頁背景顯示，長(zhǎng)度為50。（4）findex：findex字段為歌手名首字母，在歌手頁按首字母從A-Z排序，方便用戶查找。1.2.3.5歌曲表歌曲表（song）：該表用來存儲(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è)字段來存儲(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)專輯的圖片地址，在歌曲播放頁面顯示。（6）mark：mark字段為歌曲所在的專輯名稱。（7）duration：duration字段為歌曲的播放時(shí)長(zhǎng)，用于播放頁面的進(jìn)度條顯示。1.2.3.6歌單表歌單表（song_sheet）：該表用來存儲(chǔ)后所有歌單信息，包括歌單編號(hào)、歌單名、歌單封面。表5-6歌單表（song_sheet）字段名描述類型長(zhǎng)度允許空值主鍵/外鍵sheet_id歌單編號(hào)bigint20否主鍵name歌單名varchar20否pic歌單封面varchar50否歌單表song_sheet中，共有三個(gè)字段來存儲(chǔ)歌單信息。（1）sheet_id：sheet_id字段代表歌單編號(hào)，是sheet表的主鍵，故不允許為空。（2）name：name字段代表歌單名。（3）pic：pic字段代表歌單封面圖片存放地址，用于圖片獲取。該圖片會(huì)在歌單遍歷時(shí)小窗顯示，在點(diǎn)擊歌單詳情時(shí)作背景圖，字段大小為50。1.2.3.7評(píng)論表評(píng)論表（comment）：該表用來存儲(chǔ)后所有歌曲的評(píng)論信息，包括評(píng)論編號(hào)、評(píng)論內(nèi)容、評(píng)論時(shí)間、評(píng)論人、音樂。表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è)字段來存儲(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表的主鍵。1.2.3.8播放記錄表播放記錄表（song_played）：該表用來存儲(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è)字段來存儲(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字段為該記錄的播放歌曲。1.2.3.9收藏記錄表收藏記錄表（song_collection）：該表用來存儲(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è)字段來存儲(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字段為該記錄的收藏歌曲。1.2.3.10歌單-歌曲關(guān)聯(lián)記錄表歌單-歌曲關(guān)聯(lián)記錄（sheet_list）：該表用來存儲(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è)字段來存儲(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)，用來表示有關(guān)聯(lián)記錄的具體歌單，為song_sheet表的主鍵，該字段為外鍵。（3）song_id：song_id代表歌曲編號(hào)，用來表示歌單中存儲(chǔ)的具體歌曲，為song表的主鍵，該字段為外鍵。1.3數(shù)據(jù)庫接口設(shè)計(jì)定義完上述的數(shù)據(jù)庫表后，需要為數(shù)據(jù)庫的訪問提供統(tǒng)一接口，經(jīng)過設(shè)計(jì)一共設(shè)計(jì)了九個(gè)訪問數(shù)據(jù)庫接口，分別是：RegisterUserService訪問register_user表；SongService訪問song表；SingerServcie訪問singer表；SongSheetService訪問song_sheet表；CommentService訪問comment表；PicService訪問pic表；SongPlayedService訪問song_played表；SongCollection訪問song_collection表；SheetListService訪問sheet_list表。各接口繼承了mybatis-plus技術(shù)的IService<T>接口，泛型T在此為各接口傳遞數(shù)據(jù)的參數(shù)型實(shí)體類，例如RegisterUserService使用的參數(shù)型實(shí)體類為RegisterUserParam。每個(gè)實(shí)體類中的所有屬性對(duì)應(yīng)其數(shù)據(jù)庫表中的各項(xiàng)字段，每個(gè)接口都繼承了IService<T>接口實(shí)現(xiàn)類中的方法。每個(gè)接口都定義了增加、刪除、更新、分頁查詢等方法，在接口實(shí)現(xiàn)類中，通過調(diào)用自身繼承父類的方法來實(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ù)。最后是分頁查詢函數(shù)findPageBySpec()，該函數(shù)的作用是將在數(shù)據(jù)庫查到的全部數(shù)據(jù)分頁展示到前臺(tái)網(wǎng)站。返回值類型為L(zhǎng)ayuiPageInfo，該類型是對(duì)Layui中table標(biāo)簽分頁展示結(jié)果的封裝。在獲取分頁結(jié)果過程中，再次用到了mybatis-plus的接口IPage。獲取分頁結(jié)果方法createPageInfo()在LayuiPageFactory中，該方法中IPage接口通過創(chuàng)建匿名內(nèi)部類的方法調(diào)用接口中的getTotal()、getPages()、getRecords()方法，將分頁查詢數(shù)據(jù)封裝到LayuiPageinfo數(shù)據(jù)類型中。綜上所述，以RegisterUserService為例，該過程的類圖如下圖5-15所示。圖5-13以RegisterUserService為例的類圖表示1.4核心功能模塊的設(shè)計(jì)1.1.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)功能模塊圖1.1.2注冊(cè)登錄功能設(shè)計(jì)該系統(tǒng)登錄分為前臺(tái)小程序端登錄和后臺(tái)web端管理員登錄，小程序端用戶登錄需注冊(cè)賬號(hào)。對(duì)于該模塊的設(shè)計(jì)大致如下：管理員登錄：管理員的賬號(hào)密碼提前寫在數(shù)據(jù)庫表sys_user中，在網(wǎng)頁端輸入賬號(hào)密碼并提交表單后，后臺(tái)LoginController類用GET方法獲取到數(shù)據(jù)。并通過調(diào)用shiro安全框架下的UsernamePasswordToken類中的同名方法進(jìn)行用戶名密碼匹配的過程，若輸入的用戶名密碼與數(shù)據(jù)庫事先存入的相符，則成功登錄跳轉(zhuǎn)到管理主頁面。小程序用戶注冊(cè)：小程序用戶在登錄前需要進(jìn)行注冊(cè)，注冊(cè)時(shí)小程序跳轉(zhuǎn)到register.wxml填寫表單數(shù)據(jù)，填寫完成后點(diǎn)擊注冊(cè)按鈕觸發(fā)subReg事件，當(dāng)用戶在注冊(cè)時(shí)填寫不規(guī)范時(shí)，subReg事件中使用showToast彈窗組件令用戶注意填寫規(guī)范。注冊(cè)成功后，將數(shù)據(jù)打包通過request請(qǐng)求發(fā)送到后臺(tái)ApiController中，ApiController中registerUser()方法接收數(shù)據(jù)并封裝到RegisterUserParam的對(duì)象中，通過調(diào)用registerService接口繼承的BaseService中的查詢方法，若數(shù)據(jù)庫中沒有該用戶名存在，則注冊(cè)成功。小程序用戶登錄：注冊(cè)成功后或點(diǎn)擊登錄時(shí)，小程序跳轉(zhuǎn)到login.wxml頁面，輸入賬號(hào)密碼點(diǎn)擊提交后觸發(fā)bindGetUserInfo事件，該事件將數(shù)據(jù)通過requset發(fā)送到ApiController中，通過loginAPP()接收數(shù)據(jù)并查詢數(shù)據(jù)庫是否匹配，若匹配成功，則登錄成功。系統(tǒng)注冊(cè)登錄功能流程圖如圖5-15所示。1.1.3后臺(tái)管理功能設(shè)計(jì)后臺(tái)管理模塊功能就是對(duì)數(shù)據(jù)庫信息的增刪改查操作，設(shè)計(jì)流程是通過提交html表單到對(duì)應(yīng)的controller層中，controller層通過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ì)歌曲有專門的七日播放量統(tǒng)計(jì)功能，所以就對(duì)歌曲操作為例進(jìn)行設(shè)計(jì)描述。增加功能，管理員點(diǎn)擊添加跳轉(zhuǎn)到song_add.html，該頁面為提交增加歌曲信息的表單數(shù)據(jù)到songController中對(duì)應(yīng)路徑為/addItem的addItem()方法中，表單數(shù)據(jù)封裝在SongParam的對(duì)象中，通過調(diào)用songService的add()方法完成添加。刪除功能，管理員選中數(shù)據(jù)點(diǎn)擊刪除，將本條數(shù)據(jù)發(fā)送到songController類對(duì)應(yīng)路徑為/delete的delete()方法中，通過調(diào)用songService層的delete()函數(shù)完成刪除。修改功能，管理員選中數(shù)據(jù)點(diǎn)擊更新，填寫更新表單，將更新后的數(shù)據(jù)發(fā)送到songController類對(duì)應(yīng)路徑為/editItem的editItem()方法中，通過songService層的update()函數(shù)完成替換。查詢功能，當(dāng)管理員點(diǎn)擊樂庫管理時(shí)，會(huì)調(diào)用songController類中的list()函數(shù)，該函數(shù)調(diào)用songService層的findPageBySpec()函數(shù)，將后臺(tái)數(shù)據(jù)庫的數(shù)據(jù)分頁封裝在LayuiPageInfo類型數(shù)據(jù)對(duì)象中，使用layui的table標(biāo)簽在前端展示。圖5-15注冊(cè)登錄功能流程圖1.1.4歌曲播放功能設(shè)計(jì)歌曲播放功能模塊主要包括選擇歌曲播放、上下切歌、播放模式切換的功能。歌曲播放主要依靠在app.js中設(shè)計(jì)的初始為空的songlist[]常量。對(duì)該模塊功能以來與wx.getBackgroundAudioPlayer()組件。其中具體的功能設(shè)計(jì)如下：歌曲播放的設(shè)計(jì)分為兩類。第一類是通過歌單、歌手主頁、記錄中選擇播放歌曲，第二類是通過搜索結(jié)果播放歌曲。第一類是獲取歌曲列表。當(dāng)點(diǎn)擊歌單、播放記錄或歌手主頁時(shí)，各page中的js文件會(huì)想后臺(tái)發(fā)送請(qǐng)求，獲取到的結(jié)果賦值給songlist[]中。以系統(tǒng)歌單為例，當(dāng)用戶點(diǎn)擊進(jìn)入歌單主頁后，toplist.js向后臺(tái)ApiController發(fā)送/getMusicList請(qǐng)求進(jìn)入getMusicList()方法，參數(shù)為sheet_id。在此方法中通過sheet_id再次查詢sheet_list表，獲取當(dāng)前sheet_id對(duì)應(yīng)下的歌曲全部信息。并將結(jié)果返回。在toplist.js中得到結(jié)果后，通過setData將songlist[]的值改變，即可得到該歌單的播放隊(duì)列。第二類是獲取單首歌曲。在search.js設(shè)計(jì)selectSong()觸發(fā)事件，當(dāng)在搜索頁面搜索歌曲時(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)到歌曲播放頁面。上下切歌的實(shí)現(xiàn)是通過給當(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。1.1.5歌曲操作功能設(shè)計(jì)歌曲操作功能模塊包括對(duì)歌曲的收藏、評(píng)論、分享、下載功能。該部分的設(shè)計(jì)過程如下：歌曲收藏：app.js中定義user_id和isLogin兩個(gè)常量來記錄用戶的登錄狀態(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常量來表示評(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組件工具下載。通過向后臺(tái)發(fā)送請(qǐng)求得到歌曲路徑信息和歌曲名，保存到微信USER_DATA_PATH文件目錄下，文件名為{{songName}}.mp3。歌曲播放和歌曲操作流程圖如圖5-16所示：圖5-16歌曲功能流程圖1.1.6搜索功能設(shè)計(jì)搜索模塊是用戶在搜索歌曲，歌手時(shí)調(diào)用的模塊，功能主要有模糊查詢、歷史記錄、清楚歷史記錄、點(diǎn)擊搜索歌手、點(diǎn)擊搜索歌曲。以上功能設(shè)計(jì)如下：模糊查詢：在搜索框input輸入關(guān)鍵字后，點(diǎn)擊搜索，觸發(fā)searchAction()事件，在searchAction()中利用利用event.currentTarget.dataset.txt將文本框