基于Vue的音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)

1、精選優(yōu)質(zhì)文檔-傾情為你奉上畢業(yè)設(shè)計(jì)（論文）題 目： 基于Vue的音樂播放器的設(shè)計(jì)與實(shí)現(xiàn) 指導(dǎo)教師： 職稱：_ 指導(dǎo)教師(校外)： 職稱： _ 學(xué)生姓名： 學(xué)號(hào)：_ _專 業(yè)： 計(jì)算機(jī)科學(xué)與技術(shù)（軟件方向） 院（系）： 信息工程學(xué)院_ 完成時(shí)間： _ 年 月 日專心-專注-專業(yè)使用Vue實(shí)現(xiàn)音樂播放器的核心功能摘 要隨著前端技術(shù)的發(fā)展和迭代，前端開發(fā)工程師在java的MVC框架基礎(chǔ)上，推出了前端的MVC，MVP，MVVM等架構(gòu)模式，利用目前主流的前端開發(fā)技術(shù)，如React、AngularJS等，我們可以很輕松的構(gòu)建起一個(gè)不需要服務(wù)器端渲染就可以展示的WebApp，同時(shí)這類框架也都提供了前端路由功

2、能，后臺(tái)可以不再去控制路由的跳轉(zhuǎn)，將原本屬于后臺(tái)的業(yè)務(wù)邏輯全部丟給前端，做到了前后端的架構(gòu)分離，這也是近幾年來(lái)最為流行和使用的開發(fā)手段。2016年Vue2.0的正式發(fā)布，更是在前端開發(fā)工程師之間掀起了軒然大波，Vue的快速響應(yīng)機(jī)制，數(shù)據(jù)綁定機(jī)制，組件化開發(fā)等，在功能和效率上做的尤為突出，本文通過(guò)最先進(jìn)的前端模式架構(gòu)結(jié)合JavaScript、Vue-Router、DOM、axios、vuex、Muse-UI（一個(gè)基于Vue2.x的material design 風(fēng)格UI框架）等前端的核心開發(fā)技術(shù)，在MVVM模式的基礎(chǔ)上，來(lái)完成一個(gè)移動(dòng)音樂播放器的前端開發(fā)。本論文的音樂播放器采用了WebApp的開

3、發(fā)模式，利用HTML5語(yǔ)言提供的新特性和Vue的新技術(shù)對(duì)播放器進(jìn)行編寫。同時(shí)給出了詳細(xì)的系統(tǒng)設(shè)計(jì)過(guò)程換和部分界面圖及主要功能運(yùn)行的流程圖，本文還對(duì)開發(fā)過(guò)程中遇到的問題和解決方法進(jìn)行了詳細(xì)的討論，該音樂播放器主要通過(guò)Vue的新技術(shù)去實(shí)現(xiàn)音樂的播放、暫停、停止、上一首、下一首還有歌詞的顯示，播放的進(jìn)度條等功能于一體，性能良好。使用HTML5模式開發(fā)的WebApp還有它最為重要的一個(gè)優(yōu)點(diǎn)就是，在各種系統(tǒng)中它都能夠獨(dú)立運(yùn)行，而不像安卓和iOS一樣只能在各自的平臺(tái)運(yùn)行，做到了真正的跨平臺(tái)開發(fā)，實(shí)現(xiàn)了一次開發(fā)多平臺(tái)使用。關(guān)鍵詞：音樂播放器，HTML5，Vue，MVVM，webpack AbstractWi

4、th the development of the front-end technology and iterative development engineer in MVC based on the framework of Java, launched in front of MVC, MVP, MVVM architecture, using the current mainstream technology development, such as React, AngularJS and so on, we can easily construct a server-side re

5、ndering can display WebApp, the framework also provides front-end routing function, the background can be no longer to control the routing of the jump, the business logic originally belonging to the background all thrown to the front, do before and after the end of the architecture is separated, whi

6、ch is the most popular in recent years and the use of development tools.In 2016, Vue2.0 officially released, it caused a great disturbance between the front-end development engineer, rapid response mechanism of Vue, data binding mechanism, component development, the function and efficiency of the fr

7、ont-end architecture is particularly prominent, through the most advanced mode of combination of JavaScript, Vue-Router, DOM, Axios, vuex, Muse-UI (a based on the material design style UI framework Vue2.x) core technology for the development of the front end, on the basis of MVVM, to complete the fr

8、ont-end development of a mobile music player.The music player using the WebApp development model, new technology and new characteristic of Vue and using HTML5 language to provide for the player to write. It also gives the flow chart of the system design process with the change and part of the interf

9、ace diagram and main function, this paper also encountered in the process of development problems and Solutions were discussed in detail, the music player play, pause, stop, on the one, the next song, lyrics display and other functions, good performance of.WebApp as well as its most important advant

10、age is that in various systems it can run independently, unlike Android and iOS as platform to run only in their the achieved true cross platform development, to achieve a multi platform development.Key words: music player, HTML5, Vue,MVVM, webpack1 前言1.1 選題背景隨著計(jì)算機(jī)技術(shù)的不斷發(fā)展，移動(dòng)互聯(lián)網(wǎng)在生活中被應(yīng)用的越來(lái)越廣泛，特別是多媒體技術(shù)

11、在我們生活中被應(yīng)用到的更多，這使得我們的業(yè)余生活變得越來(lái)越豐富。作為移動(dòng)音樂播放器，市場(chǎng)有著很多種，比如：酷狗、QQ音樂、百度音樂的等，這些都是一些非常優(yōu)秀的播放器，針對(duì)市場(chǎng)上的主流的移動(dòng)設(shè)備，主要分為兩大種，一種是以蘋果公司的設(shè)備為主的iOS 系統(tǒng)，另一種就是以Google公司開發(fā)的基于Linux的自由及開放源代碼的操作系統(tǒng)Android。因此在開發(fā)的過(guò)程中，要針對(duì)這兩種設(shè)備開發(fā)兩款匹配這兩種設(shè)備的App，這無(wú)疑加大了開發(fā)的工作量，耗費(fèi)了更多的開發(fā)時(shí)間。使用Vue設(shè)計(jì)的這個(gè)音樂播放器使用到是HTML5的開發(fā)技術(shù)，做到了真正徹底的跨平臺(tái)開發(fā)，實(shí)現(xiàn)了一次開發(fā)多平臺(tái)應(yīng)用，極大的縮短了開發(fā)過(guò)程提高了

12、工作的效率。1.2 HTML5發(fā)展現(xiàn)狀及趨勢(shì)HTML5之所以能引發(fā)如此廣泛的效應(yīng)，其根本的原因在于它不只是一種標(biāo)記語(yǔ)言，它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺(tái)，包括提供免插件的音視頻、圖像動(dòng)畫、本體存儲(chǔ)以及更多酷炫而且重要的功能，并使這些應(yīng)用標(biāo)準(zhǔn)化和開放化，從而使互聯(lián)網(wǎng)也能夠輕松實(shí)現(xiàn)類似桌面的應(yīng)用體驗(yàn)。HTML5的最顯著的優(yōu)勢(shì)在于跨平臺(tái)性。它可以輕易地移植到各種不同的開放平臺(tái)、應(yīng)用平臺(tái)上，打破各自為政的局面。這種強(qiáng)大的兼容性可以顯著地降低開發(fā)與運(yùn)營(yíng)成本，可以讓企業(yè)特別是創(chuàng)業(yè)者獲得更多的發(fā)展機(jī)遇。此外，HTML5的本地存儲(chǔ)特性也給使用者帶來(lái)了更多便利?；贖5開發(fā)的輕應(yīng)用比本地APP擁有更短的啟

13、動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，而且無(wú)需下載占用存儲(chǔ)空間，特別適合手機(jī)等移動(dòng)媒體。而H5讓開發(fā)者無(wú)需依賴第三方瀏覽器插件即可創(chuàng)建高級(jí)圖形、版式、動(dòng)畫以及過(guò)渡效果，這也使得用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果。在國(guó)內(nèi)，騰訊，阿里巴巴，百度，新浪等互聯(lián)網(wǎng)公司也開始將自家的產(chǎn)品開始向HTML5轉(zhuǎn)換，而且隨著蘋果公司的iOS系統(tǒng)不再支持flash,更是使得H5技術(shù)大火了一把，2014年10月29日，HTML5的規(guī)范制定完成，截止到目前，HTML5的普及已經(jīng)廣泛地被人們所接受，大概有90%以上網(wǎng)站都在使用HTML技術(shù)，而在移動(dòng)端，基本上全部都是HTML5的天下。1.3 目的和意義本次畢業(yè)設(shè)計(jì)的目的在于

14、，結(jié)合HTML5所提供的先進(jìn)思想和媒體的多樣控制手段，結(jié)合前后端架構(gòu)分離的思想，利用Vue.js這個(gè)新的前端技術(shù)，開發(fā)出滿足用戶對(duì)音樂播放器的習(xí)慣和對(duì)媒體播放器的要求，設(shè)計(jì)出一款符合用戶體驗(yàn)的，界面清楚明了，操作簡(jiǎn)單，可以在播放列表中加載多個(gè)多媒體文件，并且能夠?qū)崿F(xiàn)連續(xù)播放的音樂播放器。該軟件開發(fā)的意義在于，隨著javascript語(yǔ)法的不斷擴(kuò)充，使得前端設(shè)計(jì)師的責(zé)任不僅僅是再做一些簡(jiǎn)單的頁(yè)面實(shí)現(xiàn)，而且還能夠更加高效的處理各種復(fù)雜的業(yè)務(wù)邏輯，完成從設(shè)計(jì)師向工程師的轉(zhuǎn)變。讓前端開發(fā)的各種技術(shù)不斷地運(yùn)用到各種移動(dòng)互聯(lián)網(wǎng)的開發(fā)中。2 相關(guān)技術(shù)簡(jiǎn)介2.1 Vue.js的簡(jiǎn)介Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)

15、動(dòng)的Web界面的漸進(jìn)式框架。Vue.js的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。與其他框架不同的是，Vue.js采用自底向上增量開發(fā)的設(shè)計(jì)。它的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue.js完全有能力驅(qū)動(dòng)采用單文件組件和Vue.js生態(tài)系統(tǒng)支持的庫(kù)開發(fā)的復(fù)雜單頁(yè)應(yīng)用。2.1.1 簡(jiǎn)單輕巧的Vue.jsVue.js是一款非常輕量級(jí)的庫(kù)，它的生產(chǎn)版本的源碼僅為72.9KB。官網(wǎng)稱經(jīng)過(guò)gzip壓縮后的源碼只有25.11KB，相比AngularJS的144KB縮小了一半，而且Vue.js的使用還不依賴于其他的基礎(chǔ)庫(kù)。而且小巧還帶給

16、它了另一種好處，就是可以讓用戶更自由的選擇相應(yīng)的解決方案，在配合其他庫(kù)的方面它帶給了用戶更大的空間。2.1.2 Vue.js的插件化Vue.js雖然小巧，但是“麻雀雖小，五臟俱全”，在構(gòu)建大型應(yīng)用的時(shí)候，Vue.js使用起來(lái)也是得心應(yīng)手。如Vue.js的核心默認(rèn)是不包含Router、Ajax、表單驗(yàn)證等功能的，但是如果項(xiàng)目中需要用到Router、Ajax或者是表單驗(yàn)證等功能，可以直接使用Vue.js提供的官方庫(kù)Vue-router及第三方的插件Vue-resource（在2.0版本后，官方也推薦使用axios，該論文中就是使用的axios），或者是Vue-validator等插件來(lái)完成你想要的

17、功能，同時(shí)你也可以使用其他你想要使用的庫(kù)或插件，如jQurey的Ajax等，這些Vue.js都能做到良好的兼容。2.1.3 Vue.js的組件化在大型的應(yīng)用中，為了分工、復(fù)用和可維護(hù)性，我們不可避免地需要將應(yīng)用抽象為多個(gè)相對(duì)獨(dú)立的模塊。在較為傳統(tǒng)的開發(fā)模式中，我們只有在考慮復(fù)用時(shí)才會(huì)將某一部分做成組件；但實(shí)際上，應(yīng)用類 UI完全可以看作是全部由組件樹構(gòu)成的，因此Vue.js的設(shè)計(jì)中將組件作為一個(gè)核心的概念，可以說(shuō)，每一個(gè)Vue.js應(yīng)用都是圍繞著組件來(lái)開發(fā)的。這可謂是它的一大亮點(diǎn)也是Vue.js最為推崇的，最強(qiáng)大的功能之一，它的核心目標(biāo)是為了可重用性高，減少重復(fù)性的開發(fā)。我們可以把組件代碼按照

18、template、style、script的拆分方式，放置到對(duì)應(yīng)的.vue文件中進(jìn)行管理，大大的提高了代碼的重用性和可維護(hù)性。2.1.4 Vue.js的雙向數(shù)據(jù)綁定Vue.js的另一個(gè)強(qiáng)大的功能就是他的雙向數(shù)據(jù)綁定機(jī)制，對(duì)于一些富交互、狀態(tài)機(jī)類似的前端UI界面，Vue.js處理起來(lái)非常的方便、簡(jiǎn)單、快捷，它將數(shù)據(jù)和視圖相關(guān)聯(lián)起來(lái)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，可以自動(dòng)的更新視圖。2.2 MVVM模式的介紹MVVM是Model-View-ViewModel的簡(jiǎn)寫，說(shuō)到MVVM模式，不得不提到得是MVC模式，MVC是應(yīng)用最廣泛的軟件架構(gòu)之一，一般的MVC分為：Model（模型）、Controller（控制器）

19、和View（視圖）。這主要是基于分層的目的讓彼此的職責(zé)分開，如圖2-1所示。 Model ViewController圖2-1 MVC通訊方式一相比較MVC，MVVM只是把MVC的Controller改成了ViewModel，View的變化會(huì)自動(dòng)更新到ViewModel，ViewModel的變化也會(huì)自動(dòng)同步到View上面顯示。這種自動(dòng)同步是因?yàn)閂iewModel中的屬性實(shí)現(xiàn)了Observer，當(dāng)屬性變更時(shí)都能觸發(fā)對(duì)應(yīng)的操作，如圖2-2所示。 Model View ViewModel圖2-2 用戶操作影響DataBindingMVVM模式和MVC模式一樣，主要是分離視圖（View）和模型（Mod

20、el），它主要有一下四大優(yōu)點(diǎn)?？芍赜眯??？梢园岩恍┮晥D邏輯放在ViewModel里面，讓很多的View重用這段視圖邏輯，比如iOS里面有iPhone版本和iPad版本，除了交互展示不一樣外，業(yè)務(wù)邏輯的model是一致的。這樣，我們就可以以很小的代價(jià)去開發(fā)另一個(gè)app。低耦合性。視圖（view）可以獨(dú)立與模型（Model）變化和修改，一個(gè)ViewModel可以綁定到不同的“View”上，當(dāng)View變化的時(shí)候Model可以不發(fā)生變化，當(dāng)Model發(fā)生變化時(shí)View也可以不變。獨(dú)立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)，使用Expression

21、 Blend可以很容易設(shè)計(jì)界面并生成xml代碼。方便測(cè)試。在MVC下，Controller基本是無(wú)法測(cè)試的，里面混雜了個(gè)各種邏輯，而且分散在不同的地方。有了MVVM我們就可以測(cè)試?yán)锩娴膙iewModel，來(lái)驗(yàn)證我們的處理結(jié)果對(duì)不對(duì)。3 系統(tǒng)分析3.1 可行性的分析可行性研究(feasibility study)的目的，是為了弄清楚要開發(fā)的項(xiàng)目是否可以實(shí)現(xiàn)和是否值得去實(shí)現(xiàn)，該工作通常由專門的系統(tǒng)分析員去完成，并需要其寫出可行性論證報(bào)告。如果結(jié)論中認(rèn)為項(xiàng)目是可行，那么便可制定項(xiàng)目的實(shí)施計(jì)劃，同時(shí)開始進(jìn)行軟件的開發(fā)；如果結(jié)論中認(rèn)為項(xiàng)目是不可行，則應(yīng)該提出終止該項(xiàng)目的建議。可行性論證其實(shí)是在

22、另一個(gè)層次上進(jìn)行的一次簡(jiǎn)化了的需求分析與設(shè)計(jì)。但是它的目的不是去解決用戶提出的問題，而僅僅是為了確定這項(xiàng)的開發(fā)是否值得進(jìn)行，分析它可能存在的一些風(fēng)險(xiǎn)。換句話來(lái)說(shuō)，在投入大量精力前研究項(xiàng)目成功的可能性，減小項(xiàng)目可能出現(xiàn)的風(fēng)險(xiǎn)。即使研究的結(jié)論是不值得進(jìn)行，所花的精力也并沒有浪費(fèi)，因?yàn)樗苊饬艘淮胃蟮睦速M(fèi)。下面我們將根據(jù)本系統(tǒng)的特點(diǎn)具體進(jìn)行以下可行性分析。3.1.1 經(jīng)濟(jì)的可行性開發(fā)一個(gè)APP的目的主要是為了獲得較好的經(jīng)濟(jì)效益和社會(huì)效益，因次對(duì)待開發(fā)APP的經(jīng)濟(jì)可行性論證就成為了可行性研究的重要內(nèi)容。從成本到效益分析可用于評(píng)估系統(tǒng)的經(jīng)濟(jì)合理性，然后給出開發(fā)的成本估算，并將估算的成本和獲得的利潤(rùn)進(jìn)行

23、比較，從經(jīng)濟(jì)的角度論證要開發(fā)的軟件是否可行，一般來(lái)說(shuō)，開發(fā)中的成本主要包括以下四種：1） 購(gòu)置并安裝軟件和硬件以及相關(guān)設(shè)備的費(fèi)用。2） 軟件的開發(fā)費(fèi)用。3） 軟件安裝、運(yùn)行和維護(hù)的費(fèi)用。4） 人員的培訓(xùn)費(fèi)用。結(jié)合畢業(yè)設(shè)計(jì)的整個(gè)開發(fā)過(guò)程，可知該軟件開發(fā)所用到的全部軟件和平臺(tái)都是免費(fèi)的，所以在經(jīng)濟(jì)上是完全可行的。3.1.2 技術(shù)的可行性技術(shù)的可行性是可行性研究的重要內(nèi)容，由于系統(tǒng)分析和定義的過(guò)程是與系統(tǒng)技術(shù)可行性評(píng)估的過(guò)程同時(shí)進(jìn)行的，此時(shí)如果系統(tǒng)的功能、性能和目標(biāo)的不確定，那么會(huì)給技術(shù)可行性論證帶來(lái)諸多困難。因此，技術(shù)的可行性研究往往是系統(tǒng)開發(fā)過(guò)程中最難進(jìn)行的工作。該音樂播放器是Vue.js開發(fā)的

24、，調(diào)試起來(lái)比較簡(jiǎn)單，所需要的計(jì)算機(jī)硬件配置也不高，一般PC機(jī)足以滿足開發(fā)要求。軟件方面，使用的是微軟開發(fā)的一款真正的跨平臺(tái)編輯器visual studio code，該編輯器簡(jiǎn)單易用，技術(shù)成熟，而且還提供有豐富的插件和支持Git的使用，而且軟件也容易從網(wǎng)上獲得，完全能滿足開發(fā)需求。3.1.3 法律的可行性法律的可行性主要研究的是新系統(tǒng)的開發(fā)和使用是否會(huì)侵犯到他人權(quán)益，是否會(huì)觸犯到國(guó)家的法律法規(guī)。本次的畢業(yè)設(shè)計(jì)是由本人獨(dú)立完成的，開發(fā)的系統(tǒng)不會(huì)侵犯到任何人的權(quán)益，所用的軟件也都是通過(guò)合法途徑獲取，因此完全符合法律法規(guī)。綜上所述，本系統(tǒng)的開發(fā)從經(jīng)濟(jì)上、技術(shù)上、法律上都是完全可行的。3.2 軟件的需

25、求分析軟件的需求分析是指用戶對(duì)目標(biāo)軟件在性能、功能、行為以及設(shè)計(jì)約束等方面的期望。需求分析就是通過(guò)對(duì)應(yīng)用問題及其壞境的理解與分析，采用一系列的分析方法和技術(shù)，將用戶的需求逐步精確化、一致化、完美化，最終形成需求規(guī)模說(shuō)明文檔的過(guò)程。本節(jié)將會(huì)從不同的角度去描述軟件的需求。3.2.1 播放器的基本控制需求在著手開發(fā)系統(tǒng)之前首先要明確該系統(tǒng)應(yīng)該實(shí)現(xiàn)的一些最基本的功能，然后逐步細(xì)化，為每個(gè)功能創(chuàng)建一個(gè)模塊，再對(duì)各個(gè)模塊進(jìn)行開發(fā)。通過(guò)分析我們得出一款音樂播放器的基本控制如圖3-1所示：圖3-1 播放器的基本控制圖 用戶播放暫停 進(jìn)度控制 上一曲 下一曲 歌詞顯示 播放列表用例名稱：播放參與者：用戶目標(biāo)：使

26、得用戶可以播放在播放列表中選擇的音樂前置條件：播放器正在運(yùn)行基本事件流：用戶單擊播放按鈕或者點(diǎn)擊列表中的音樂，則播放器開始播放。用例名稱：暫停參與者： 用戶目標(biāo)：使得用戶可以暫停正在播放的音樂前置條件：音樂正在播放且未暫?；臼录鳎河脩魡螕魰和０粹o，播放器將暫停當(dāng)前的音樂用例名稱：進(jìn)度控制參與者： 用戶目標(biāo)：顯示音樂的播放進(jìn)步前置條件：音樂正在播放，或者暫?；臼录鳎猴@音樂的播放進(jìn)度用例名稱：上一曲/下一曲參與者：用戶目標(biāo)：使得用戶可以聽上一首或者下一首前置條件：音樂正在播放或暫?；臼录鳎河脩魡螕羯弦皇谆蛘呦乱皇装粹o時(shí)，播放對(duì)應(yīng)的音樂用例名稱：歌詞顯示參與者：用戶目標(biāo)：播放時(shí)顯示對(duì)應(yīng)歌

27、曲的歌詞前置條件：音樂正在播放或暫停基本事件流：音樂播放時(shí)，界面會(huì)顯示對(duì)應(yīng)的歌詞用例名稱：播放列表參與者：用戶目標(biāo)：使得用戶進(jìn)入播放列表前置條件：程序正在運(yùn)行基本事件流：用戶點(diǎn)擊播放列表，播放器顯示歌曲列表3.2.2 功能需求軟件的功能需求規(guī)定了開發(fā)人員必須在產(chǎn)品中實(shí)現(xiàn)的軟件功能，用戶使用這些功能來(lái)完成任務(wù)，滿足對(duì)業(yè)務(wù)需求。軟件的功能需求有時(shí)也被稱作行為需求（behavioral requirement），因?yàn)槲覀兞?xí)慣上總是用“應(yīng)該”對(duì)其進(jìn)行描述。軟件的功能需求描述是開發(fā)人員需要實(shí)現(xiàn)什么。它定義了一個(gè)軟件系統(tǒng)或組件的功能，也是一個(gè)系統(tǒng)所需要提供的功能及服務(wù)。功能可以用一組輸入、行為及

28、輸出的組合來(lái)表示。功能需求可以是技術(shù)細(xì)節(jié)、數(shù)據(jù)處理、計(jì)算或其他說(shuō)明系統(tǒng)希望達(dá)成的功能。功能需求會(huì)以非功能性需求（或是質(zhì)量需求）為其基礎(chǔ)。 結(jié)合音樂播放器所要實(shí)現(xiàn)的內(nèi)容，我們列出用戶操作的模塊，其中每個(gè)模塊對(duì)應(yīng)一個(gè)功能。 用戶啟動(dòng)程序進(jìn)入主界面，然后可以通過(guò)選擇希望播放的音樂類型，點(diǎn)擊后進(jìn)入該類型的播放列表。通過(guò)播放列表用戶可以實(shí)現(xiàn)對(duì)歌曲的查找、播放。播放過(guò)的音樂也會(huì)自動(dòng)形成一個(gè)列表，用戶可以對(duì)這個(gè)列表中的歌曲進(jìn)行播放，移除等操作，在播放音樂的時(shí)候用戶也可以通過(guò)點(diǎn)擊播放的縮略界面進(jìn)入播放的主頁(yè)面，進(jìn)行播放的更多操作等，其功能模塊時(shí)序圖如下3-2所示： 主界面打開音樂類型 播放

29、列表 播放界面 播放對(duì)象選擇音樂播放播放播放方法添加到播放列表播放頁(yè)面訪問播放方法返回播放界面 圖3-2 音樂播放器功能時(shí)序圖3.2.3 系統(tǒng)流程圖和系統(tǒng)結(jié)構(gòu)圖（1）音樂播放器的系統(tǒng)流程圖（圖3-3）程序啟動(dòng)？動(dòng)？Y播放主界面點(diǎn)擊列表？Y播放列表選擇歌曲？Y菜單選項(xiàng) 程序結(jié)束N退出返回清單N單擊設(shè)定？Y播放設(shè)定添加歌曲（2）系統(tǒng)功能表功能類別子功能子功能播放列表播放列表菜單退出播放歌曲菜單播放->進(jìn)入播放界面刪除->從列表中刪除歌曲播放界面播放播放歌曲->線程啟動(dòng)->時(shí)間更新暫停暫停歌曲->線程暫停->時(shí)間暫停停止停止歌曲->線程停止->時(shí)間停止

30、上一首播放列表索引變化->尋找上一ID歌曲下一首播放列表索引變化->尋找下一ID歌曲 播放界面菜單返回到播放列表返回到主菜單退出播放器隱藏播放界面主菜單退出程序程序退出進(jìn)入播放列表顯示播放列表4 播放器功能的設(shè)計(jì)與實(shí)現(xiàn)4.1 播放器的路由配置同AngularJS一樣，Vue.js也很適合用來(lái)做大型的單頁(yè)面應(yīng)用。Vue.js本身并沒有提供理由機(jī)制，不過(guò)官方以插件（vue-router）的形式提供了對(duì)路由的支持。4.1.1 如何裝載Vue-router提供了npm、bower、手動(dòng)編譯等安裝方式，可以根據(jù)業(yè)務(wù)需要來(lái)選擇其中的一種進(jìn)行使用，這三種安裝的方式及適應(yīng)場(chǎng)景如下：（1）npm當(dāng)業(yè)

31、務(wù)代碼使用webpack等支持CommonJS規(guī)范的模塊打包來(lái)構(gòu)建時(shí)，可以使用npm包來(lái)安裝：npm install vue-router因?yàn)関ue-router是Vue.js的一個(gè)插件，所以vue-router需要使用Vue.use注冊(cè)到Vue的對(duì)象上，在vue-router內(nèi)部會(huì)檢測(cè)到window.Vue對(duì)象是否存在，如果存在會(huì)自動(dòng)調(diào)用Vue.use()方法，否則需要手動(dòng)調(diào)用Vue.use來(lái)確保路由插件注冊(cè)到Vue中。在webpack等支持CommonJS規(guī)范的環(huán)境中，Vue對(duì)象并不會(huì)暴露到全局window對(duì)象中，而是會(huì)通過(guò)module.exports的形式輸出，因此我們需要手動(dòng)注冊(cè)：va

32、r Vue = require (vue)var VueRouter = require （vue）/ 安裝vue-routerVue.use(VueRouter)（2）bower當(dāng)業(yè)務(wù)代碼使用bower來(lái)管理時(shí)，可以使用bower安裝到指定目錄，為了便于舉例，假定該目錄為js/vendor。Bower install vue-router在HTML中，在vue文件之后引入vue-router：<!-引入vue-><script src=js/vendor/vue.js></script><!-引入vue-router-><script s

33、rc=js/vendor/vue-router.js></script>（3）手動(dòng)編譯當(dāng)我們想嘗試一些Vue中并未發(fā)布的新性能時(shí)，可以直接去克隆源碼，使用手動(dòng)構(gòu)建來(lái)實(shí)現(xiàn)，因?yàn)樵谡桨l(fā)布之前，有的性能可能會(huì)被官方移除，所以我不建議在生產(chǎn)環(huán)境中使用這種方式安裝。git clone https：/cd vue-routernpm imstallnpm run build4.1.2 如何配置在該畢業(yè)設(shè)計(jì)中，我使用到的是webpack的模塊打包工具，路由的配置主要在src/router/router.js中進(jìn)行配置。首先我們要引入vue和vue-router,并將vue-router注

34、冊(cè)到vue的對(duì)象上：import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)在上述過(guò)程中，我們已經(jīng)把路由配置完成并把路由注冊(cè)到了vue的對(duì)象上，接下來(lái)我們要完成的就是將組件進(jìn)行路由配置，在vue-router應(yīng)用中，每一個(gè)組件對(duì)應(yīng)一個(gè)組件，在路由組件中我們可以配置route字段來(lái)實(shí)現(xiàn)在路由切換的各個(gè)階段對(duì)路由進(jìn)行更好地控制，在項(xiàng)目中主要用到了四個(gè)同級(jí)的父組件，而每個(gè)父組件都有自己對(duì)應(yīng)的子組件分支，因?yàn)樵诼酚膳渲弥?，我們不僅要配置好父組件的路由地址，更要對(duì)子組件的地址進(jìn)行配置：const router = new VueRouter( routes: path: '/index', component: require('./views/index'), children: path: 'rage', component: require('./views/rage') , . path: 'hotSinger',