基于Vue的音乐播放器的设计与实现

1、精选优质文档-倾情为你奉上毕业设计（论文）题 目： 基于Vue的音乐播放器的设计与实现 指导教师： 职称：_ 指导教师(校外)： 职称： _ 学生姓名： 学号：_ _专 业： 计算机科学与技术（软件方向） 院（系）： 信息工程学院_ 完成时间： _ 年 月 日专心-专注-专业使用Vue实现音乐播放器的核心功能摘 要随着前端技术的发展和迭代，前端开发工程师在java的MVC框架基础上，推出了前端的MVC，MVP，MVVM等架构模式，利用目前主流的前端开发技术，如React、AngularJS等，我们可以很轻松的构建起一个不需要服务器端渲染就可以展示的WebApp，同时这类框架也都提供了前端路由功

2、能，后台可以不再去控制路由的跳转，将原本属于后台的业务逻辑全部丢给前端，做到了前后端的架构分离，这也是近几年来最为流行和使用的开发手段。2016年Vue2.0的正式发布，更是在前端开发工程师之间掀起了轩然大波，Vue的快速响应机制，数据绑定机制，组件化开发等，在功能和效率上做的尤为突出，本文通过最先进的前端模式架构结合JavaScript、Vue-Router、DOM、axios、vuex、Muse-UI（一个基于Vue2.x的material design 风格UI框架）等前端的核心开发技术，在MVVM模式的基础上，来完成一个移动音乐播放器的前端开发。本论文的音乐播放器采用了WebApp的开

3、发模式，利用HTML5语言提供的新特性和Vue的新技术对播放器进行编写。同时给出了详细的系统设计过程换和部分界面图及主要功能运行的流程图，本文还对开发过程中遇到的问题和解决方法进行了详细的讨论，该音乐播放器主要通过Vue的新技术去实现音乐的播放、暂停、停止、上一首、下一首还有歌词的显示，播放的进度条等功能于一体，性能良好。使用HTML5模式开发的WebApp还有它最为重要的一个优点就是，在各种系统中它都能够独立运行，而不像安卓和iOS一样只能在各自的平台运行，做到了真正的跨平台开发，实现了一次开发多平台使用。关键词：音乐播放器，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 选题背景随着计算机技术的不断发展，移动互联网在生活中被应用的越来越广泛，特别是多媒体技术

11、在我们生活中被应用到的更多，这使得我们的业余生活变得越来越丰富。作为移动音乐播放器，市场有着很多种，比如：酷狗、QQ音乐、百度音乐的等，这些都是一些非常优秀的播放器，针对市场上的主流的移动设备，主要分为两大种，一种是以苹果公司的设备为主的iOS 系统，另一种就是以Google公司开发的基于Linux的自由及开放源代码的操作系统Android。因此在开发的过程中，要针对这两种设备开发两款匹配这两种设备的App，这无疑加大了开发的工作量，耗费了更多的开发时间。使用Vue设计的这个音乐播放器使用到是HTML5的开发技术，做到了真正彻底的跨平台开发，实现了一次开发多平台应用，极大的缩短了开发过程提高了

12、工作的效率。1.2 HTML5发展现状及趋势HTML5之所以能引发如此广泛的效应，其根本的原因在于它不只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。HTML5的最显著的优势在于跨平台性。它可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。这种强大的兼容性可以显著地降低开发与运营成本，可以让企业特别是创业者获得更多的发展机遇。此外，HTML5的本地存储特性也给使用者带来了更多便利。基于H5开发的轻应用比本地APP拥有更短的启

13、动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。而H5让开发者无需依赖第三方浏览器插件即可创建高级图形、版式、动画以及过渡效果，这也使得用户用较少的流量就可以欣赏到炫酷的视觉听觉效果。在国内，腾讯，阿里巴巴，百度，新浪等互联网公司也开始将自家的产品开始向HTML5转换，而且随着苹果公司的iOS系统不再支持flash,更是使得H5技术大火了一把，2014年10月29日，HTML5的规范制定完成，截止到目前，HTML5的普及已经广泛地被人们所接受，大概有90%以上网站都在使用HTML技术，而在移动端，基本上全部都是HTML5的天下。1.3 目的和意义本次毕业设计的目的在于

14、，结合HTML5所提供的先进思想和媒体的多样控制手段，结合前后端架构分离的思想，利用Vue.js这个新的前端技术，开发出满足用户对音乐播放器的习惯和对媒体播放器的要求，设计出一款符合用户体验的，界面清楚明了，操作简单，可以在播放列表中加载多个多媒体文件，并且能够实现连续播放的音乐播放器。该软件开发的意义在于，随着javascript语法的不断扩充，使得前端设计师的责任不仅仅是再做一些简单的页面实现，而且还能够更加高效的处理各种复杂的业务逻辑，完成从设计师向工程师的转变。让前端开发的各种技术不断地运用到各种移动互联网的开发中。2 相关技术简介2.1 Vue.js的简介Vue.js是一个构建数据驱

15、动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。与其他框架不同的是，Vue.js采用自底向上增量开发的设计。它的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue.js完全有能力驱动采用单文件组件和Vue.js生态系统支持的库开发的复杂单页应用。2.1.1 简单轻巧的Vue.jsVue.js是一款非常轻量级的库，它的生产版本的源码仅为72.9KB。官网称经过gzip压缩后的源码只有25.11KB，相比AngularJS的144KB缩小了一半，而且Vue.js的使用还不依赖于其他的基础库。而且小巧还带给

16、它了另一种好处，就是可以让用户更自由的选择相应的解决方案，在配合其他库的方面它带给了用户更大的空间。2.1.2 Vue.js的插件化Vue.js虽然小巧，但是“麻雀虽小，五脏俱全”，在构建大型应用的时候，Vue.js使用起来也是得心应手。如Vue.js的核心默认是不包含Router、Ajax、表单验证等功能的，但是如果项目中需要用到Router、Ajax或者是表单验证等功能，可以直接使用Vue.js提供的官方库Vue-router及第三方的插件Vue-resource（在2.0版本后，官方也推荐使用axios，该论文中就是使用的axios），或者是Vue-validator等插件来完成你想要的

17、功能，同时你也可以使用其他你想要使用的库或插件，如jQurey的Ajax等，这些Vue.js都能做到良好的兼容。2.1.3 Vue.js的组件化在大型的应用中，为了分工、复用和可维护性，我们不可避免地需要将应用抽象为多个相对独立的模块。在较为传统的开发模式中，我们只有在考虑复用时才会将某一部分做成组件；但实际上，应用类 UI完全可以看作是全部由组件树构成的，因此Vue.js的设计中将组件作为一个核心的概念，可以说，每一个Vue.js应用都是围绕着组件来开发的。这可谓是它的一大亮点也是Vue.js最为推崇的，最强大的功能之一，它的核心目标是为了可重用性高，减少重复性的开发。我们可以把组件代码按照

18、template、style、script的拆分方式，放置到对应的.vue文件中进行管理，大大的提高了代码的重用性和可维护性。2.1.4 Vue.js的双向数据绑定Vue.js的另一个强大的功能就是他的双向数据绑定机制，对于一些富交互、状态机类似的前端UI界面，Vue.js处理起来非常的方便、简单、快捷，它将数据和视图相关联起来，当数据发生变化时，可以自动的更新视图。2.2 MVVM模式的介绍MVVM是Model-View-ViewModel的简写，说到MVVM模式，不得不提到得是MVC模式，MVC是应用最广泛的软件架构之一，一般的MVC分为：Model（模型）、Controller（控制器）

19、和View（视图）。这主要是基于分层的目的让彼此的职责分开，如图2-1所示。 Model ViewController图2-1 MVC通讯方式一相比较MVC，MVVM只是把MVC的Controller改成了ViewModel，View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上面显示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作，如图2-2所示。 Model View ViewModel图2-2 用户操作影响DataBindingMVVM模式和MVC模式一样，主要是分离视图（View）和模型（Mod

20、el），它主要有一下四大优点。可重用性。可以把一些视图逻辑放在ViewModel里面，让很多的View重用这段视图逻辑，比如iOS里面有iPhone版本和iPad版本，除了交互展示不一样外，业务逻辑的model是一致的。这样，我们就可以以很小的代价去开发另一个app。低耦合性。视图（view）可以独立与模型（Model）变化和修改，一个ViewModel可以绑定到不同的“View”上，当View变化的时候Model可以不发生变化，当Model发生变化时View也可以不变。独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression

21、 Blend可以很容易设计界面并生成xml代码。方便测试。在MVC下，Controller基本是无法测试的，里面混杂了个各种逻辑，而且分散在不同的地方。有了MVVM我们就可以测试里面的viewModel，来验证我们的处理结果对不对。3 系统分析3.1 可行性的分析可行性研究(feasibility study)的目的，是为了弄清楚要开发的项目是否可以实现和是否值得去实现，该工作通常由专门的系统分析员去完成，并需要其写出可行性论证报告。如果结论中认为项目是可行，那么便可制定项目的实施计划，同时开始进行软件的开发；如果结论中认为项目是不可行，则应该提出终止该项目的建议。可行性论证其实是在

22、另一个层次上进行的一次简化了的需求分析与设计。但是它的目的不是去解决用户提出的问题，而仅仅是为了确定这项的开发是否值得进行，分析它可能存在的一些风险。换句话来说，在投入大量精力前研究项目成功的可能性，减小项目可能出现的风险。即使研究的结论是不值得进行，所花的精力也并没有浪费，因为它避免了一次更大的浪费。下面我们将根据本系统的特点具体进行以下可行性分析。3.1.1 经济的可行性开发一个APP的目的主要是为了获得较好的经济效益和社会效益，因次对待开发APP的经济可行性论证就成为了可行性研究的重要内容。从成本到效益分析可用于评估系统的经济合理性，然后给出开发的成本估算，并将估算的成本和获得的利润进行

23、比较，从经济的角度论证要开发的软件是否可行，一般来说，开发中的成本主要包括以下四种：1） 购置并安装软件和硬件以及相关设备的费用。2） 软件的开发费用。3） 软件安装、运行和维护的费用。4） 人员的培训费用。结合毕业设计的整个开发过程，可知该软件开发所用到的全部软件和平台都是免费的，所以在经济上是完全可行的。3.1.2 技术的可行性技术的可行性是可行性研究的重要内容，由于系统分析和定义的过程是与系统技术可行性评估的过程同时进行的，此时如果系统的功能、性能和目标的不确定，那么会给技术可行性论证带来诸多困难。因此，技术的可行性研究往往是系统开发过程中最难进行的工作。该音乐播放器是Vue.js开发的

24、，调试起来比较简单，所需要的计算机硬件配置也不高，一般PC机足以满足开发要求。软件方面，使用的是微软开发的一款真正的跨平台编辑器visual studio code，该编辑器简单易用，技术成熟，而且还提供有丰富的插件和支持Git的使用，而且软件也容易从网上获得，完全能满足开发需求。3.1.3 法律的可行性法律的可行性主要研究的是新系统的开发和使用是否会侵犯到他人权益，是否会触犯到国家的法律法规。本次的毕业设计是由本人独立完成的，开发的系统不会侵犯到任何人的权益，所用的软件也都是通过合法途径获取，因此完全符合法律法规。综上所述，本系统的开发从经济上、技术上、法律上都是完全可行的。3.2 软件的需

25、求分析软件的需求分析是指用户对目标软件在性能、功能、行为以及设计约束等方面的期望。需求分析就是通过对应用问题及其坏境的理解与分析，采用一系列的分析方法和技术，将用户的需求逐步精确化、一致化、完美化，最终形成需求规模说明文档的过程。本节将会从不同的角度去描述软件的需求。3.2.1 播放器的基本控制需求在着手开发系统之前首先要明确该系统应该实现的一些最基本的功能，然后逐步细化，为每个功能创建一个模块，再对各个模块进行开发。通过分析我们得出一款音乐播放器的基本控制如图3-1所示：图3-1 播放器的基本控制图 用户播放暂停 进度控制 上一曲 下一曲 歌词显示 播放列表用例名称：播放参与者：用户目标：使

26、得用户可以播放在播放列表中选择的音乐前置条件：播放器正在运行基本事件流：用户单击播放按钮或者点击列表中的音乐，则播放器开始播放。用例名称：暂停参与者： 用户目标：使得用户可以暂停正在播放的音乐前置条件：音乐正在播放且未暂停基本事件流：用户单击暂停按钮，播放器将暂停当前的音乐用例名称：进度控制参与者： 用户目标：显示音乐的播放进步前置条件：音乐正在播放，或者暂停基本事件流：显音乐的播放进度用例名称：上一曲/下一曲参与者：用户目标：使得用户可以听上一首或者下一首前置条件：音乐正在播放或暂停基本事件流：用户单击上一首或者下一首按钮时，播放对应的音乐用例名称：歌词显示参与者：用户目标：播放时显示对应歌

27、曲的歌词前置条件：音乐正在播放或暂停基本事件流：音乐播放时，界面会显示对应的歌词用例名称：播放列表参与者：用户目标：使得用户进入播放列表前置条件：程序正在运行基本事件流：用户点击播放列表，播放器显示歌曲列表3.2.2 功能需求软件的功能需求规定了开发人员必须在产品中实现的软件功能，用户使用这些功能来完成任务，满足对业务需求。软件的功能需求有时也被称作行为需求（behavioral requirement），因为我们习惯上总是用“应该”对其进行描述。软件的功能需求描述是开发人员需要实现什么。它定义了一个软件系统或组件的功能，也是一个系统所需要提供的功能及服务。功能可以用一组输入、行为及

28、输出的组合来表示。功能需求可以是技术细节、数据处理、计算或其他说明系统希望达成的功能。功能需求会以非功能性需求（或是质量需求）为其基础。 结合音乐播放器所要实现的内容，我们列出用户操作的模块，其中每个模块对应一个功能。 用户启动程序进入主界面，然后可以通过选择希望播放的音乐类型，点击后进入该类型的播放列表。通过播放列表用户可以实现对歌曲的查找、播放。播放过的音乐也会自动形成一个列表，用户可以对这个列表中的歌曲进行播放，移除等操作，在播放音乐的时候用户也可以通过点击播放的缩略界面进入播放的主页面，进行播放的更多操作等，其功能模块时序图如下3-2所示： 主界面打开音乐类型 播放

29、列表 播放界面 播放对象选择音乐播放播放播放方法添加到播放列表播放页面访问播放方法返回播放界面 图3-2 音乐播放器功能时序图3.2.3 系统流程图和系统结构图（1）音乐播放器的系统流程图（图3-3）程序启动？动？Y播放主界面点击列表？Y播放列表选择歌曲？Y菜单选项 程序结束N退出返回清单N单击设定？Y播放设定添加歌曲（2）系统功能表功能类别子功能子功能播放列表播放列表菜单退出播放歌曲菜单播放->进入播放界面删除->从列表中删除歌曲播放界面播放播放歌曲->线程启动->时间更新暂停暂停歌曲->线程暂停->时间暂停停止停止歌曲->线程停止->时间停止

30、上一首播放列表索引变化->寻找上一ID歌曲下一首播放列表索引变化->寻找下一ID歌曲 播放界面菜单返回到播放列表返回到主菜单退出播放器隐藏播放界面主菜单退出程序程序退出进入播放列表显示播放列表4 播放器功能的设计与实现4.1 播放器的路由配置同AngularJS一样，Vue.js也很适合用来做大型的单页面应用。Vue.js本身并没有提供理由机制，不过官方以插件（vue-router）的形式提供了对路由的支持。4.1.1 如何装载Vue-router提供了npm、bower、手动编译等安装方式，可以根据业务需要来选择其中的一种进行使用，这三种安装的方式及适应场景如下：（1）npm当业

31、务代码使用webpack等支持CommonJS规范的模块打包来构建时，可以使用npm包来安装：npm install vue-router因为vue-router是Vue.js的一个插件，所以vue-router需要使用Vue.use注册到Vue的对象上，在vue-router内部会检测到window.Vue对象是否存在，如果存在会自动调用Vue.use()方法，否则需要手动调用Vue.use来确保路由插件注册到Vue中。在webpack等支持CommonJS规范的环境中，Vue对象并不会暴露到全局window对象中，而是会通过module.exports的形式输出，因此我们需要手动注册：va

32、r Vue = require (vue)var VueRouter = require （vue）/ 安装vue-routerVue.use(VueRouter)（2）bower当业务代码使用bower来管理时，可以使用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）手动编译当我们想尝试一些Vue中并未发布的新性能时，可以直接去克隆源码，使用手动构建来实现，因为在正式发布之前，有的性能可能会被官方移除，所以我不建议在生产环境中使用这种方式安装。git clone https：/cd vue-routernpm imstallnpm run build4.1.2 如何配置在该毕业设计中，我使用到的是webpack的模块打包工具，路由的配置主要在src/router/router.js中进行配置。首先我们要引入vue和vue-router,并将vue-router注

34、册到vue的对象上：import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)在上述过程中，我们已经把路由配置完成并把路由注册到了vue的对象上，接下来我们要完成的就是将组件进行路由配置，在vue-router应用中，每一个组件对应一个组件，在路由组件中我们可以配置route字段来实现在路由切换的各个阶段对路由进行更好地控制，在项目中主要用到了四个同级的父组件，而每个父组件都有自己对应的子组件分支，因为在路由配置中，我们不仅要配置好父组件的路由地址，更要对子组件的地址进行配置：const router = new VueRouter( routes: path: '/index', component: require('./views/index'), children: path: 'rage', component: require('./views/rage') , . path: 'hotSinger',