【在線音樂WebApp的設(shè)計與實現(xiàn)7000字（論文）】

在線音樂WebApp的設(shè)計與實現(xiàn)目錄TOC\o"1-3"\h\u306931引言 17212系統(tǒng)需求分析 1195372.1系統(tǒng)功能需求分析 1179742.1.1用戶登錄模塊 1219602.1.2推薦模塊 1281622.1.3歌手模塊 2216202.1.4搜索模塊 2184162.1.5排行模塊 272852.1.6播放模塊 2265372.2系統(tǒng)非功能需求分析 2273162.3系統(tǒng)數(shù)據(jù)需求分析 3140303系統(tǒng)設(shè)計 323683.1系統(tǒng)設(shè)計目標(biāo)與原則 426523.2系統(tǒng)體系架構(gòu)設(shè)計 419523.3系統(tǒng)功能設(shè)計 541483.4系統(tǒng)數(shù)據(jù)庫設(shè)計 10119783.4.1數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計 10158123.4.2數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計 12219054結(jié)語 1428971參考文獻 151引言隨著移動端智能手機的普及以及前端開發(fā)技術(shù)的完善，用戶可以盡可能多的利用碎片時間來獲取信息，而移動端手機應(yīng)用逐漸發(fā)展成我們生活中不可或缺的部分，隨著手機應(yīng)用不斷擴展,許多基于桌面Web的應(yīng)用系統(tǒng)轉(zhuǎn)化為手機應(yīng)用成為大勢所趨，對于移動互聯(lián)網(wǎng)行業(yè)來說,WebApp出現(xiàn)的根本原因是HTML5的興起和推廣，而WebApp可以內(nèi)嵌入任何一款原生App或者網(wǎng)頁中，作為一種單頁應(yīng)用，也可輕松適配所有移動端機型，具有功能強大且用戶友好、輕量等特點?？梢灶A(yù)測，隨著未來移動端設(shè)備的越來越完善的情況下，人們對輕量級應(yīng)用的需求量將大大提高，同時，隨著云端技術(shù)的逐步完善，WebApp將會更容易地獲得所需要的數(shù)據(jù)，服務(wù)[7]。用戶只需要打開WebApp，就可以獲取他們所需要的音樂，圖片等，可以使用戶進行社交，游戲，娛樂等等，同時大大簡化了用戶操作復(fù)雜性。對開發(fā)者而言，開發(fā)者不再需要同時開發(fā)多套代碼，只需開發(fā)出一套WebApp即可適配所有設(shè)備機型，可以實現(xiàn)跨平臺的同步更新。本文將會實現(xiàn)一個強大，兼容性好且輕量的移動端音樂WebAPP，又由于移動端WebApp的兼容性強以及本款WebApp歌曲庫全等特點，可以給用戶以最完美的用戶體驗。2系統(tǒng)需求分析2.1系統(tǒng)功能需求分析2.1.1用戶登錄模塊該模塊是任何一個成熟產(chǎn)品的必備模塊，本項目也不例外，用戶只有在輸入框內(nèi)輸入用戶名字和密碼進行登錄，只有登錄后，用戶才能進行收藏歌曲，搜索歌曲，歌手等一系列操作。在登錄界面還需設(shè)置注冊按鈕以及忘記密碼按鈕，以方便新用戶進行注冊以及用戶進行密碼找回等操作。2.1.2推薦模塊當(dāng)用戶在使用本音樂WebAPP時，將會首先進入該頁面，所以該頁面的設(shè)計應(yīng)該符合吸睛的特點，并且應(yīng)該將最需要讓用戶得到的信息（如廣告，歌單等）放在頂部，由于信息較多，所以可以采用疊加并且按順序展示的方式來給用戶呈現(xiàn)信息，此時頂部輪播圖將是最好的選擇；下方將展示當(dāng)前時段最熱門的歌單列表，以提高熱門歌單的曝光率。由于需要展現(xiàn)的歌單較多，所以前端將需要實現(xiàn)滾動加載的效果，傳統(tǒng)的前端滾動效果代碼量大，且兼容性較差，無法適應(yīng)移動端多種機型的兼容，所以本項目將采用兼容性較強的better-scroll組件實現(xiàn)無縫滾動；同時，由于每個歌單列表都包括一張圖片，多個歌單在加載過程中，由于要加載圖片，將會出現(xiàn)圖片延時展現(xiàn)的狀況，大大影響用戶體驗，所以將會通過圖片懶加載的技術(shù)實現(xiàn)前端性能優(yōu)化，也提高了用戶體驗。2.1.3歌手模塊用戶在使用本款WebAPP時，有時會查找某個特定歌手，并且聽其下所有歌曲。所以該模塊將會實現(xiàn)根據(jù)首字母將所有熱門歌手姓名進行排列。大體需要分為歌手列表以及右側(cè)字母導(dǎo)航欄。歌手列表包括歌手頭像以及姓名，同樣地，由于歌手眾多，頭像圖片也將會采用懶加載技術(shù)。右側(cè)字母導(dǎo)航欄將會實現(xiàn)聯(lián)動效果，即用戶點擊右側(cè)導(dǎo)航欄任意字母，左側(cè)歌手列表將會自動定位到相應(yīng)位置。滑動左側(cè)歌手列表時，右側(cè)字母導(dǎo)航欄也會進行相應(yīng)位置的高亮。這樣使用戶方便地定位到所要查找的歌手名稱，優(yōu)化了用戶體驗。2.1.4搜索模塊本模塊主要用于滿足用戶的搜索需求并且進行記錄，同時將整合時下被搜索次數(shù)比較多的詞條并予以顯示，所以整個頁面結(jié)構(gòu)將分為三開，在頂部有搜索框，并且有字?jǐn)?shù)限制；中間將會顯示熱門搜索的部分，用戶可以點擊呈現(xiàn)出來的熱搜詞條來進入對應(yīng)的歌曲或者歌手詳情列表。同時，第三部分將在頁面底部進行顯示，也就是顯示搜索歷史功能，它的作用是記錄用戶的使用搜索軌跡，即搜索過的歷史可，可以方便用戶記憶已搜索過的內(nèi)容。2.1.5排行模塊通過嚴(yán)謹(jǐn)?shù)氖袌稣{(diào)研，根據(jù)不同用戶有不同的歌曲愛好，本項目的排行子模塊會將各種曲風(fēng)的歌曲整理成歌單，并且根據(jù)歌單熱度進行排行。用戶可以點擊他們喜愛的曲風(fēng)歌單并進入歌單詳情頁面，由于該子模塊中圖片眾多，為了不影響用戶的使用體驗，將用better-scroll組件及圖片懶加載技術(shù)來提高前端的加載性能。2.1.6播放模塊該模塊是本項目中的核心模塊，用戶點擊其他任何子模塊最終都會進入到播放模塊中，播放模塊功能涵蓋的有暫停功能，播放功能，前進以及后退功能等基礎(chǔ)功能；在播放模式方面，它主涵蓋有順序播放功能以及隨機播放功能，最后還有單曲循環(huán)功能。除此之外，還有收藏歌曲功能，當(dāng)用戶點擊收藏按鈕時會將此歌曲添加到用戶收藏歌單中，再次點擊將會取消收藏。2.2系統(tǒng)非功能需求分析通過實際調(diào)研和參考相關(guān)的移動端WebAPP，有關(guān)系統(tǒng)的非功能需求主要有以下幾個要求：（1）實用性：移動端WebAPP由于有輕便簡潔的特點，所以該項目必須有操作簡單，易維護等多個優(yōu)點，爭取和原生音樂APP最大限度地相似，符合基本的用戶使用習(xí)慣，使用戶可以較好地從原生APP過度到WebAPP。（2）先進性：先進性是需要開發(fā)一套兼容性強的項目，盡量做到一套代碼可以兼容所有設(shè)備。這也是一種節(jié)省開發(fā)時間和成本的有效策略，高效且先進的開發(fā)模式也符合最大盈利的目的，所以它也是新型商業(yè)模式的最好實踐方式。（3）通用性：移動端音樂WebApp通過對競品的調(diào)查和對用戶的調(diào)查，將會覆蓋所有類型用戶的需求，并整合各方的需求，盡力開發(fā)出滿足所有用戶需求，擁有完整歌曲庫，以及足以兼容所有機型的應(yīng)用。（4）易擴展性：由于音樂WebAPP將會有很大的訪問量以及經(jīng)常更新的，所以本項目會有良好的可拓展性，用來滿足快速增長的用戶訪問量。（5）易維護性：系統(tǒng)的可維護性是衡量一個軟件是否可改進，遇到線上錯誤是否容易修復(fù)，也就是可修復(fù)性的重要指標(biāo)。2.3系統(tǒng)數(shù)據(jù)需求分析數(shù)據(jù)需求分析部分主要涵蓋了本項目所有所需要的數(shù)據(jù)組成以及對數(shù)據(jù)的操作，具體如下描述。1）數(shù)據(jù)組成根據(jù)以上所述的對系統(tǒng)的功能以及非功能部分的需求分析，可以得出本項目的數(shù)據(jù)組成主要有以下幾個部分：（1）用戶名以及密碼等信息（2）專輯信息（3）歌手信息（4）歌曲信息2）數(shù)據(jù)操作通過前期調(diào)研可知，對數(shù)據(jù)操作主要來自用戶對數(shù)據(jù)的操作，所以本項目的后端將設(shè)計有關(guān)數(shù)據(jù)處理的接口，在設(shè)計上會考慮到數(shù)據(jù)的流向以及完整性，不僅僅會考慮用戶查詢上的需求，同時還要考慮及時抓取并更新數(shù)據(jù)，為整體框架做好支撐。3系統(tǒng)設(shè)計3.1系統(tǒng)設(shè)計目標(biāo)與原則經(jīng)過對本項目，即移動端音樂WebApp競品的調(diào)查和分析，本系統(tǒng)應(yīng)該著重以下幾個方面的原則，即系統(tǒng)安全性高、用戶友好性強、兼容性完善：（1）安全性：本項目會保存一些用戶信息如密碼，用戶名等基礎(chǔ)信息，所以本項目應(yīng)該具備極高的安全性，所以本項目將會對安全性方面非常重視，一個安全性不達標(biāo)的產(chǎn)品，用戶登錄后的賬戶密碼等關(guān)鍵信息被盜取，會嚴(yán)重破壞用戶對WebAPP產(chǎn)品的信任，高安全性是移動端音樂WebAPP開展業(yè)務(wù)的根本和前提，所以進本項目必須具備很高的安全性。（2）用戶友好性：由于移動端音樂WebAPP的使用者的年齡大小、消費能力有較大區(qū)別，文化層次具有多樣性的特點，對于精神世界的追求也各有不同，所以該項目應(yīng)該具有良好的用戶友好性，各個模塊應(yīng)該符合所有用戶的操作習(xí)慣。（3）強兼容性：由于移動端音樂WebAPP需要兼容IOS，Android等不同機型，所以一套代碼需要有良好的兼容性，并且需要注意移動端的點擊穿透以及300ms延遲問題。3.2系統(tǒng)體系架構(gòu)設(shè)計通過對競品的調(diào)研分析，再結(jié)合移動端WebAPP的特點以及本項目的需求，發(fā)現(xiàn)瀏覽器/服務(wù)器，即B/S的模式非常符合本移動端音樂WebApp的設(shè)計理念，所以本項目將采用該模式進行開發(fā)。在瀏覽器部分中，通過HTML,CSS進行基礎(chǔ)的頁面架構(gòu)搭建，JS來實現(xiàn)頁面邏輯，再通過Vue-cli腳手架，結(jié)合Webpack來對HTML，CSS，JS以及外部資源文件進行打包，實現(xiàn)熱更新，并將所有文件打包成一個文件再通過Ajax與后端進行交互，同時，路由切換功能也將通過hash模式的vue-router在瀏覽器端實現(xiàn)，不與后端進行交互，這樣大大提高了前端性能。本項目的前端架構(gòu)設(shè)計如圖3.1所示。圖3.1前端架構(gòu)示意圖根據(jù)圖3.1可知，本系統(tǒng)架構(gòu)主要架構(gòu)在于兩個方面，即瀏覽器端和服務(wù)器端。本項目中，將著重瀏覽器端的描述。瀏覽器：瀏覽器除了在該模式中承擔(dān)閱讀界面的職責(zé)，也是MVVM框架的載體，其中前端功能邏輯層的主要作用是前端進行節(jié)點的操作以及利用vue-router進行前端方面的路由切換。視圖層的作用是為用戶展現(xiàn)前端界面，然后視圖層會與視圖邏輯層進行交互，從而進行數(shù)據(jù)和視圖的雙向綁定。服務(wù)器：主要進行后端操作，即分為后端邏輯層，和持久化層，后端邏輯層主要作用是解析Html代碼模板和分析自定義組件。3.3系統(tǒng)功能設(shè)計根據(jù)之前的需求分析以及架構(gòu)設(shè)計，頁面方面主要涵蓋了推薦頁面（recommend），歌手頁面（singer），排行頁面（rank），搜索頁面（suggest）和播放頁面（player）組成，系統(tǒng)頁面結(jié)構(gòu)圖如圖3.2所示。圖3.2系統(tǒng)頁面結(jié)構(gòu)圖本項目的總體結(jié)構(gòu)是頂部導(dǎo)航欄，導(dǎo)航欄內(nèi)容包括推薦，歌手，搜索，排行四個模塊。用戶將通過觸摸點擊的方式進入任意模塊的相應(yīng)子模塊。其中每個子模塊的路由切換將用到Spa路由的哈希模式進行實現(xiàn)，這里將用到Vue-router來進行哈希路由切換。本項目的登錄子模塊主要有兩個輸入框，分別讓用戶輸入其用戶名以及密碼，在登錄界面的左右下方各有忘記密碼按鈕以及注冊賬號按鈕，用戶點擊后可進入相應(yīng)的頁面。具體由表3.1所示。表3.1用戶登錄子頁面信息表子頁面名稱功能模塊名稱主要實現(xiàn)功能登錄子頁面用戶名及密碼輸入框用戶輸入后，系統(tǒng)判斷是否符合登錄條件，若符合則跳轉(zhuǎn)至推薦頁面，若不符合則出現(xiàn)相應(yīng)提示忘記password部分用戶點擊此按鈕則可進行找回password等操作注冊部分主要目標(biāo)為首次使用本W(wǎng)ebApp的新用戶，方便其進行注冊，再進行登錄在本項目的推薦子模塊中，主要由兩個個功能，即頂部輪播圖，推薦歌單，以及用戶點擊某個推薦歌單后會進入相應(yīng)的歌單詳情列表。其中輪播圖將由兼容性較好的better-scroll組件實現(xiàn)，輪播圖由五張圖片組成，點擊其中任意一張圖片都可以進入相應(yīng)的詳情分頁面。推薦子頁面下方為推薦歌單，有多個推薦歌單，并且會進行上拉自動加載。將利用JsonP的跨域請求方式將頂部輪播圖中的信息數(shù)據(jù)請求過來。由于歌單列表中圖片較多，這里將利用vue-lazyload來進行圖片的懶加載。歌單詳情列表是一個復(fù)用組件，包括頂部介紹圖以及歌曲列表，同樣將利用懶加載以及better-scroll組件實現(xiàn)。具體由表3.2所示。表3.2推薦子頁面信息表子頁面名稱功能模塊名稱主要實現(xiàn)功能推薦子頁面頂部輪播圖實現(xiàn)點擊即可進入各個分頁推薦歌單推薦歌單有將近20條，利用better-scroll組件實現(xiàn)可滾動，點擊可進入歌單詳情列表歌單詳情列表共有20首歌曲，同樣復(fù)用better-scroll組件實現(xiàn)滾動，并且有隨機播放功能歌手子頁面主要包含歌手名稱列表，首字母導(dǎo)航以及歌手詳情列表等，并且有根據(jù)首字母聯(lián)動定位的功能，首先前端將會獲取多個列表對象，接著前端會處理這些對象，使這些對象按照字母順序排列，并顯示在前端界面當(dāng)中，當(dāng)用戶點擊右側(cè)字母導(dǎo)航欄時會自動定位到相應(yīng)歌手，點擊某歌手后進入歌手詳情頁，同樣地，由于歌手頭像數(shù)量較多，同樣會采用圖片懶加載的技術(shù)，來提高前端性能。具體如表3.3所示。表3.3歌手子頁面息表子頁面名稱功能模塊名稱主要實現(xiàn)功能歌手子頁面首字母導(dǎo)航根據(jù)首字母可以直接聯(lián)動定位相應(yīng)的歌手歌手名稱點擊直接進入歌手詳情列表歌手詳情列表復(fù)用歌單列表組件，有頂部歌手圖片，底部可滾動歌曲列表，以及隨機播放功能排行子頁面屬于復(fù)用組件，前端會通過Axios的方法來將各個網(wǎng)站上跨域的請求歌單數(shù)據(jù)，并且獲取到數(shù)據(jù)后將數(shù)據(jù)進行展現(xiàn)，具體為多個歌單列表，每個歌單都有主題內(nèi)容，主題都包含歌曲排行，新歌，熱歌，民謠等分類，樣式為左側(cè)圖片（高斯模糊展示），右側(cè)歌曲該歌單的歌曲，用戶點擊某個特定的子組件后能進入相應(yīng)的歌曲詳情頁，具體對本模塊的功能定義如表3.4所示。表3.4排行子頁面信息表子頁面名稱功能模塊名稱主要實現(xiàn)功能排行子頁面歌曲排行表，熱門歌單，新歌歌單根據(jù)首字母可以直接聯(lián)動定位相應(yīng)的歌手歌曲詳情列表點擊直接進入歌手詳情列表搜索功能，搜索提示功能，搜索歷史存儲功能，以清除歷史記錄等功能是搜索模塊的主要需要實現(xiàn)的部分，搜索功能主要指用戶首先在輸入搜索框中輸入需要查詢的數(shù)據(jù)，然后前端再對用戶輸入的數(shù)據(jù)進行獲取，進行查找，若查找到，則在輸入框中新增下拉列表，并在下拉列表中顯示查找到的數(shù)據(jù)，在搜索框中附帶有防抖功能；搜索提示功能是指用戶獲取到用戶輸入的關(guān)鍵字后，會將所有包含該關(guān)鍵字的搜索內(nèi)容展現(xiàn)在下拉列表中；頁面下方將會顯示用戶的搜索歷史，此處將利用瀏覽器自帶的localStorage永久本地存儲來存儲十條用戶搜索記錄，并且可以清除所有歷史記錄。具體功能如表3.5所示。表3.5搜索子頁面信息表子頁面名稱功能模塊名稱主要實現(xiàn)功能歌手子頁面搜索功能用戶在輸入框輸入搜索內(nèi)容來查詢歌曲，歌手等信息，要求不超過十個字搜索提示功能模糊查詢功能，輸入首字后會有提示功能搜索歷史存儲功能利用瀏覽器自帶的localStorage來存儲最近搜索的十條記錄清除歷史記錄操作localStorage來清空搜索歷史，或者有選擇性的刪除指定歷史播放功能頁面組成主要有可以旋轉(zhuǎn)的CD唱片圖片，下方會有各種功能的按鈕，用戶可以點擊按鈕來進行順序播放，隨機（Random）播放，前進（Go），后退（Back），暫停播放（Pause）以及收藏歌曲等操作。具體功能如表3.6所示。表3.6播放子頁面信息表子頁面名稱功能模塊名稱主要實現(xiàn)功能播放子頁面順序播放功能按照歌單列表順序播放隨機播放功能利用隨機函數(shù)實現(xiàn)按照歌單實現(xiàn)隨機播放的功能前進，后退功能點擊前進按鈕后可以播放歌單列表下一首歌曲，點擊后退按鈕后可根據(jù)播放歌單播放上一首歌曲暫停功能點擊后實現(xiàn)停止播放，再次點擊后可以根據(jù)上次播放位置繼續(xù)播放功能歌曲收藏功能用戶按照自己喜好點擊收藏按鈕進而錄入收藏列表歌單，用戶也可點擊取消收藏3.4系統(tǒng)數(shù)據(jù)庫設(shè)計3.4.1數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計本項目根據(jù)MySql數(shù)據(jù)庫相關(guān)的實踐以及理論知識，將數(shù)據(jù)庫設(shè)計的邏輯結(jié)構(gòu)以E-R圖的形式展現(xiàn)出來，在設(shè)計的末尾會進行優(yōu)化操作，下面詳細地展示了相關(guān)方面的設(shè)計：（1）和用戶相關(guān)的實體屬性圖如圖3.3所示，以此可知，名稱、密碼、狀態(tài)等是該用戶信息實體的屬性。圖3.3用戶實體屬性圖（2）圖3.4展示了歌曲信息的實體屬性圖，由此可知，包括歌曲名稱，歌手名稱，歌曲時長，歌曲編號,歌曲類型，歌詞編號，歌曲發(fā)表時間在內(nèi)的幾種是有關(guān)歌曲信息的屬性。圖3.4歌曲信息實體屬性圖（3）根據(jù)圖3.5所展示的，歌手這個實體的屬性有歌手ID，歌手國籍，歌手姓名，歌手性別，歌曲數(shù),專輯數(shù)等等。圖3.5歌手信息實體屬性圖（4）圖3.6展示了歌單的信息實體屬性圖，由下可知，該實體的屬性有歌曲數(shù)，歌單ID，歌單名稱，歌單類型等等。圖3.6歌單信息實體屬性圖整個移動端音樂WebApp的E-R圖如圖3.7所示。圖3.7系統(tǒng)整體實體關(guān)系E-R圖3.4.2數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計本項目所選的數(shù)據(jù)庫系統(tǒng)將直接決定了數(shù)據(jù)庫相關(guān)的存取方式以及與外界的聯(lián)系，即這個行為將決定了Database的物理結(jié)構(gòu)還有存儲結(jié)構(gòu)。本項目移動端音樂WebAPP的數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計如下：（1）首先是用戶表結(jié)構(gòu)的設(shè)計，這也是整個項目有關(guān)后端的基石。它反映了某個特定用戶的用戶ID，密碼，姓名等基本信息，其具體信息如表3.7所示。表3.7用戶信息表數(shù)據(jù)庫相關(guān)字段名中文名稱數(shù)據(jù)類型長度User_relative_Id特定用戶相關(guān)IdintUser_relative_nama特定用戶相關(guān)姓名varcharUsr_relative_password特定用戶相關(guān)密碼varchar（2）歌曲信息表，如表3.8所示，該表主要用于存放歌曲列表中歌曲的歌曲名稱，歌手名稱，歌曲時長，歌曲編號,歌曲類型，歌詞編號，歌曲發(fā)表時間等一系列信息。表3.8歌曲信息表數(shù)據(jù)庫相關(guān)字段名中文名稱數(shù)據(jù)類型長度Song_number歌曲編號varchar50Singer_name歌手名稱varchar50Song_time歌曲時長datetimeSong_name歌曲名稱varchar50Is_love是否是收藏歌曲Tinyint2Song_type歌曲類型varchar50iyric_no歌詞編號varchar50Song_time歌曲發(fā)表時間Datetime（3）歌手信息表，如表3.9所示，該表主要用于歌手姓名，歌手id，性別，國籍，歌曲類型，專輯數(shù)，歌曲數(shù)。表3.9歌手信息表數(shù)據(jù)庫相關(guān)字段名中文名稱數(shù)據(jù)類型長度Singer_id歌手IDint50Singer_name歌手姓名varchar50Singer_gender歌手性別varcharSinger_nationality歌手國籍varchar50Album_number專輯數(shù)int2Song_number歌曲數(shù)int50（4）歌單信息表，如表3.10所示，該表主要用于歌單的類型、歌曲數(shù)、歌單ID、歌單名稱等。表3.10歌單信息表數(shù)據(jù)庫相關(guān)字段名中文名稱數(shù)據(jù)類型長度Songlist_id歌單IDintSonglist_type歌單類型varchar50Song_num歌曲數(shù)intSonglist_name歌單名稱varchar504結(jié)語隨著移動端開發(fā)技術(shù)的越來越完善，各個移動端產(chǎn)品開始激烈競