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

毕业设计（论文） 题目： 基于Vue的音乐播放器的设计与实现 指导教师：职称：_ 指导教师(校外)：职称：_ 学生姓名：学号：_ _ 专业：计算机科学与技术（软件方向） 院（系）：信息工程学院_ 完成时间： _ 年月日 使用Vue实现音乐播放器的核心功能 摘 要 随着前端技术的发展和迭代，前端开发工程师在java的MVC框架基础上， 推出了前端的MVC，MVP，MVVM等架构模式，利用目前主流的前端开发技术，如 React、AngularJS 等，我们可以很轻松的构建起一个不需要服务器端渲染就可 以展示的WebApp，同时这类框架也都提供了前端路由功能，后台可以不再去控 制路由的跳转，将原本属于后台的业务逻辑全部丢给前端，做到了前后端的架 构分离，这也是近几年来最为流行和使用的开发手段。 2016年Vue2.0的正式发布，更是在前端开发工程师之间掀起了轩然大波， Vue的快速响应机制，数据绑定机制，组件化开发等，在功能和效率上做的尤 为突出，本文通过最先进的前端模式架构结合JavaScript、Vue-Router、DOM、 axios、vuex、Muse-UI（一个基于Vue2.x的material design 风格UI框架） 等前端的核心开发技术，在MVVM模式的基础上，来完成一个移动音乐播放器的 前端开发。 本论文的音乐播放器采用了WebApp的开发模式，利用HTML5语言提供的新 特性和Vue的新技术对播放器进行编写。同时给出了详细的系统设计过程换和 部分界面图及主要功能运行的流程图，本文还对开发过程中遇到的问题和解决 方法进行了详细的讨论，该音乐播放器主要通过 Vue的新技术去实现音乐的播 放、暂停、停止、上一首、下一首还有歌词的显示，播放的进度条等功能于一 体，性能良好。使用HTML5模式开发的WebApp还有它最为重要的一个优点就是， 在各种系统中它都能够独立运行，而不像安卓和iOS一样只能在各自的平台运 行，做到了真正的跨平台开发，实现了一次开发多平台使用。 I 关键词：音乐播放器，HTML5，Vue，MVVM，webpack Abstract With 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 rendering 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, which 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 front-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 front-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 interface 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 advantage 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. I Key words: music player, HTML5, Vue,MVVM, webpack 1 前言 1.1 选题背景 随着计算机技术的不断发展，移动互联网在生活中被应用的越来越广泛， 特别是多媒体技术在我们生活中被应用到的更多，这使得我们的业余生活变得 越来越丰富。 作为移动音乐播放器，市场有着很多种，比如：酷狗、QQ音乐、百度音乐 的等，这些都是一些非常优秀的播放器，针对市场上的主流的移动设备，主要 分为两大种，一种是以苹果公司的设备为主的 iOS 系统，另一种就是以Google 公司开发的基于 Linux 的自由及开放源代码的操作系统 Android。因此在开发 的过程中，要针对这两种设备开发两款匹配这两种设备的 App，这无疑加大了 开发的工作量，耗费了更多的开发时间。 使用Vue设计的这个音乐播放器使用到是HTML5的开发技术，做到了真正 彻底的跨平台开发，实现了一次开发多平台应用，极大的缩短了开发过程提高 了工作的效率。 1.2 HTML5发展现状及趋势 HTML5之所以能引发如此广泛的效应，其根本的原因在于它不只是一种标记 语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、 图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开 放化，从而使互联网也能够轻松实现类似桌面的应用体验。 HTML5的最显著的优势在于跨平台性。它可以轻易地移植到各种不同的开放 平台、应用平台上，打破各自为政的局面。这种强大的兼容性可以显著地降低 开发与运营成本，可以让企业特别是创业者获得更多的发展机遇。 此外，HTML5的本地存储特性也给使用者带来了更多便利。基于H5开发的 轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用 存储空间，特别适合手机等移动媒体。而H5让开发者无需依赖第三方浏览器插 件即可创建高级图形、版式、动画以及过渡效果，这也使得用户用较少的流量 就可以欣赏到炫酷的视觉听觉效果。 在国内，腾讯，阿里巴巴，百度，新浪等互联网公司也开始将自家的产品 开始向HTML5转换，而且随着苹果公司的iOS系统不再支持flash,更是使得H5 技术大火了一把，2014年10月29日，HTML5的规范制定完成，截止到目前， HTML5的普及已经广泛地被人们所接受，大概有90%以上网站都在使用HTML技 术，而在移动端，基本上全部都是HTML5的天下。 1 1.3 目的和意义 本次毕业设计的目的在于，结合HTML5所提供的先进思想和媒体的多样控 制手段，结合前后端架构分离的思想，利用Vue.js这个新的前端技术，开发出 满足用户对音乐播放器的习惯和对媒体播放器的要求，设计出一款符合用户体 验的，界面清楚明了，操作简单，可以在播放列表中加载多个多媒体文件，并 且能够实现连续播放的音乐播放器。该软件开发的意义在于，随着javascript 语法的不断扩充，使得前端设计师的责任不仅仅是再做一些简单的页面实现， 而且还能够更加高效的处理各种复杂的业务逻辑，完成从设计师向工程师的转 变。让前端开发的各种技术不断地运用到各种移动互联网的开发中。 2 2 相关技术简介 2.1 Vue.js的简介 Vue.js是一个构建数据驱动的 Web界面的渐进式框架。Vue.js的目标是通 过尽可能简单的API实现响应的数据绑定和组合的视图组件。与其他框架不同 的是，Vue.js采用自底向上增量开发的设计。它的核心库只关注视图层，并且 非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue.js完全有 能力驱动采用单文件组件和 Vue.js生态系统支持的库开发的复杂单页应用。 2.1.1 简单轻巧的Vue.js Vue.js是一款非常轻量级的库，它的生产版本的源码仅为 72.9KB。官网称 经过gzip压缩后的源码只有 25.11KB，相比AngularJS 的144KB缩小了一半， 而且Vue.js的使用还不依赖于其他的基础库。而且小巧还带给它了另一种好 处，就是可以让用户更自由的选择相应的解决方案，在配合其他库的方面它带 给了用户更大的空间。 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等插件来完成你想要的功能，同时你也可以使 用其他你想要使用的库或插件，如jQurey的Ajax等，这些Vue.js都能做到良 好的兼容。 2.1.3 Vue.js的组件化 在大型的应用中，为了分工、复用和可维护性，我们不可避免地需要将应 用抽象为多个相对独立的模块。在较为传统的开发模式中，我们只有在考虑复 用时才会将某一部分做成组件；但实际上，应用类 UI完全可以看作是全部由 组件树构成的，因此Vue.js的设计中将组件作为一个核心的概念，可以说，每 一个Vue.js应用都是围绕着组件来开发的。这可谓是它的一大亮点也是Vue.js 最为推崇的，最强大的功能之一，它的核心目标是为了可重用性高，减少重复 性的开发。我们可以把组件代码按照template、style、script的拆分方式， 放置到对应的.vue文件中进行管理，大大的提高了代码的重用性和可维护性。 3 2.1.4 Vue.js的双向数据绑定 Vue.js的另一个强大的功能就是他的双向数据绑定机制，对于一些富交 互、状态机类似的前端UI界面，Vue.js处理起来非常的方便、简单、快捷， 它将数据和视图相关联起来，当数据发生变化时，可以自动的更新视图。 2.2 MVVM模式的介绍 MVVM是Model-View-ViewModel的简写，说到MVVM模式，不得不提到得是 MVC模式，MVC是应用最广泛的软件架构之一，一般的MVC分为：Model（模型）、 Controller（控制器）和View（视图）。这主要是基于分层的目的让彼此的职 责分开，如图2-1所示。 Model View Controller 图2-1 MVC 通讯方式一 相比较MVC，MVVM只是把MVC的Controller改成了ViewModel，View的变化会 自动更新到ViewModel，ViewModel的变化也会自动同步到View上面显示。这 种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触 发对应的操作，如图2-2所示。 4 Model DataBinding ViewViewModel 图2-2 用户操作影响 MVVM模式和MVC模式一样，主要是分离视图（View）和模型（Model），它 主要有一下四大优点。 可重用性。可以把一些视图逻辑放在ViewModel 里面，让很多的View 重用 这段视图逻辑，比如iOS里面有iPhone 版本和iPad 版本，除了交互展示不一 样外，业务逻辑的 model 是一致的。这样，我们就可以以很小的代价去开发另 一个app。 低耦合性。视图（view）可以独立与模型（Model）变化和修改，一个ViewModel 可以绑定到不同的“View”上，当View 变化的时候Model可以不发生变化，当 Model 发生变化时 View也可以不变。 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设 计人员可以专注于页面设计， 使用 Expression Blend 可以很容易设计界面并生 成xml 代码。 方便测试。在 MVC 下，Controller 基本是无法测试的，里面混杂了个各种 逻辑，而且分散在不同的地方。有了 MVVM 我们就可以测试里面的 viewModel ， 来验证我们的处理结果对不对。 5 3 系统分析 3.1 可行性的分析 可行性研究(feasibility study)的目的，是为了弄清楚要开发的项目是 否可以实现和是否值得去实现，该工作通常由专门的系统分析员去完成，并需 要其写出可行性论证报告。如果结论中认为项目是可行，那么便可制定项目的 实施计划，同时开始进行软件的开发；如果结论中认为项目是不可行，则应该 提出终止该项目的建议。可行性论证其实是在另一个层次上进行的一次简化了 的需求分析与设计。但是它的目的不是去解决用户提出的问题，而仅仅是为了 确定这项的开发是否值得进行，分析它可能存在的一些风险。换句话来说，在 投入大量精力前研究项目成功的可能性，减小项目可能出现的风险。即使研究 的结论是不值得进行，所花的精力也并没有浪费，因为它避免了一次更大的浪 费。下面我们将根据本系统的特点具体进行以下可行性分析。 3.1.1 经济的可行性 开发一个APP的目的主要是为了获得较好的经济效益和社会效益，因次对 待开发APP的经济可行性论证就成为了可行性研究的重要内容。从成本到效益 分析可用于评估系统的经济合理性，然后给出开发的成本估算，并将估算的成 本和获得的利润进行比较，从经济的角度论证要开发的软件是否可行，一般来 说，开发中的成本主要包括以下四种： 1）购置并安装软件和硬件以及相关设备的费用。 2）软件的开发费用。 3）软件安装、运行和维护的费用。 6 4）人员的培训费用。 结合毕业设计的整个开发过程，可知该软件开发所用到的全部软件和平台都是 免费的，所以在经济上是完全可行的。 3.1.2 技术的可行性 技术的可行性是可行性研究的重要内容，由于系统分析和定义的过程是与 系统技术可行性评估的过程同时进行的，此时如果系统的功能、性能和目标的 不确定，那么会给技术可行性论证带来诸多困难。因此，技术的可行性研究往 往是系统开发过程中最难进行的工作。该音乐播放器是Vue.js开发的，调试起 来比较简单，所需要的计算机硬件配置也不高，一般PC机足以满足开发要求。 软件方面，使用的是微软开发的一款真正的跨平台编辑器visual studio code， 该编辑器简单易用，技术成熟，而且还提供有丰富的插件和支持Git的使用， 而且软件也容易从网上获得，完全能满足开发需求。 3.1.3 法律的可行性 法律的可行性主要研究的是新系统的开发和使用是否会侵犯到他人权益， 是否会触犯到国家的法律法规。本次的毕业设计是由本人独立完成的，开发的 系统不会侵犯到任何人的权益，所用的软件也都是通过合法途径获取，因此完 全符合法律法规。 综上所述，本系统的开发从经济上、技术上、法律上都是完全可行的。 3.2 软件的需求分析 软件的需求分析是指用户对目标软件在性能、功能、行为以及设计约束等 方面的期望。需求分析就是通过对应用问题及其坏境的理解与分析，采用一系 列的分析方法和技术，将用户的需求逐步精确化、一致化、完美化，最终形成 需求规模说明文档的过程。本节将会从不同的角度去描述软件的需求。 3.2.1 播放器的基本控制需求 在着手开发系统之前首先要明确该系统应该实现的一些最基本的功能，然 后逐步细化，为每个功能创建一个模块，再对各个模块进行开发。通过分析我 们得出一款音乐播放器的基本控制如图3-1所示： 7 用户 用例名称：播放 参与者：用户 播放 暂停 进度控制 上一曲 下一曲 歌词显示 播放列表 图3-1 播放器的基本控制图 目标：使得用户可以播放在播放列表中选择的音乐 前置条件：播放器正在运行 基本事件流：用户单击播放按钮或者点击列表中的音乐，则播放器开始播放。 用例名称：暂停 参与者： 用户 目标：使得用户可以暂停正在播放的音乐 前置条件：音乐正在播放且未暂停 8 基本事件流：用户单击暂停按钮，播放器将暂停当前的音乐 用例名称：进度控制 参与者： 用户 目标：显示音乐的播放进步 前置条件：音乐正在播放，或者暂停 基本事件流：显音乐的播放进度 用例名称：上一曲/下一曲 参与者：用户 目标：使得用户可以听上一首或者下一首 前置条件：音乐正在播放或暂停 基本事件流：用户单击上一首或者下一首按钮时，播放对应的音乐 用例名称：歌词显示 参与者：用户 目标：播放时显示对应歌曲的歌词 前置条件：音乐正在播放或暂停 基本事件流：音乐播放时，界面会显示对应的歌词 9 用例名称：播放列表 参与者：用户 目标：使得用户进入播放列表 前置条件：程序正在运行 基本事件流：用户点击播放列表，播放器显示歌曲列表 3.2.2 功能需求 软件的功能需求规定了开发人员必须在产品中实现的软件功能，用户使用 这些功能来完成任务，满足对业务需求。软件的功能需求有时也被称作行为需 求（behavioral requirement ），因为我们习惯上总是用“应该”对其进行描 述。软件的功能需求描述是开发人员需要实现什么。它定义了一个软件系统或 组件的功能，也是一个系统所需要提供的功能及服务。功能可以用一组输入、 行为及输出的组合来表示。功能需求可以是技术细节、数据处理、计算或其他 说明系统希望达成的功能。功能需求会以非功能性需求（或是质量需求）为其 基础。 结合音乐播放器所要实现的内容，我们列出用户操作的模块，其中每个模 块对应一个功能。 用户启动程序进入主界面，然后可以通过选择希望播放的音乐类型，点击 后进入该类型的播放列表。通过播放列表用户可以实现对歌曲的查找、播放。 播放过的音乐也会自动形成一个列表，用户可以对这个列表中的歌曲进行播放， 移除等操作，在播放音乐的时候用户也可以通过点击播放的缩略界面进入播放 的主页面，进行播放的更多操作等，其功能模块时序图如下 3-2所示： 10 主界面 添加 到播 播放列表播放界面播放对象 访问播 放方法 播放 打 开 音 乐 类 型 放列 表 选 择 音 乐 播 放 页面 播 放 返回播 放界面 播 放 方 法 图3-2 音乐播放器功能时序图 3.2.3 系统流程图和系统结构图 （1）音乐播放器的系统流程图（图3-3） 11 清单 退出 返回 单击设定？ Y 播放设定 程序启动？ Y 播放主界面 点击列表？ Y 播放列表 选择歌曲？ Y 菜单选项 程序结束 N 添加歌曲 N （2）系统功能表 12 功能类别 子功能 子功能 播放列表菜单 退出播放 歌曲菜单 播放->进入播放界面 播放列表 删除->从列表中删除歌曲 播放 播放歌曲->线程启动->时间更 新 暂停 暂停歌曲->线程暂停->时间暂 停 停止 停止歌曲->线程停止->时间停 止 播放界面 上一首 播放列表索引变化->寻找上一 ID歌曲 下一首 播放列表索引变化->寻找下一 ID歌曲 返回到播放列表 返回到主菜单 播放界面菜单 退出播放器 隐藏播放界面 主菜单 退出程序 程序退出 进入播放列表 显示播放列表 4 播放器功能的设计与实现 4.1 播放器的路由配置 同AngularJS一样，Vue.js也很适合用来做大型的单页面应用。Vue.js本 身并没有提供理由机制，不过官方以插件（vue-router）的形式提供了对路由 的支持。 4.1.1 如何装载 13 Vue-router提供了npm、bower、手动编译等安装方式，可以根据业务需要 来选择其中的一种进行使用，这三种安装的方式及适应场景如下： （1）npm 当业务代码使用 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 的形式输出，因此 我们需要手动注册： var Vue = require (vue) var VueRouter = require （vue） / 安装vue-router Vue.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 src=js/vendor/vue-router.js></script> （3）手动编译 14 当我们想尝试一些Vue中并未发布的新性能时，可以直接去克隆源码，使 用手动构建来实现，因为在正式发布之前，有的性能可能会被官方移除，所以 我不建议在生产环境中使用这种方式安装。 git clone https：/ cd vue-router npm imstall npm run build 4.1.2 如何配置 在该毕业设计中，我使用到的是webpack的模块打包工具，路由的配置主 要在src/router/router.js中进行配置。 首先我们要引入vue和vue-router,并将vue-router注册到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', 15 component: require('./views/rage') , . path: 'hotSinger', component: require('./views/hotSinger') , name: 'playerDetail', path: '/playerDetail/:id', component: require('./views/playerDetail') , path: '*', redirect: '/index/rage' ) 因为篇幅的原因我这里提供的主要的代码，以主页面（index）为例，在路由的 配置中，我们使用 path 关键字对设置路由的地址， component 来引入 index 组 件，重点在 children 中，我们在这里采用了与上述相似的方法来引入子组件的 各个中间，并为其配置路由的路径，这样的好处是使得路由的地址显得十分清 晰，父组件的内容在路由的地址里都是紧跟在父组件的路由地址之后。 4.1.3 路由切换的各个阶段 Vue-router将路由切换分为三个阶段，为了更好地理解各个阶段的完成工 作，我们先假定当前匹配的路径为/a/b/c，此路径对应三个嵌套 router-view， 如图4-1所示。 16 如图4-2所示，当用户接下来要访问的路径是a/d/e时，我们需要从a/b/c 路径对应的组件树切换到a/d/e对应的组件树。 Path：a/b/c A B C 图4-1所示 Path：a/b/c A B C 图4-2所示 Path：a/d/e A D E 在以上路由切换中，我们要做到一下几点工作： （1） 可以重用组件A，因为重新渲染后，组件A依然保持不变。 （2） 需要停用并移除组件B和C （3） 启用并激活组件D和E （4） 在执行步骤（2）和（3）之前，需要确保切换效果有效，也就是要 确保切换中涉及到的各个组件都能够按照所期望的那样被停用或激活。 路由切换的各个阶段如下： （1）可重用阶段 如图4-3所示，检查当前视图中是否存在可以重用的组件。这是通过对比 两颗新的组件树，找出共用的组件，然后检查他们的可重用性（通过canReuse） 来判断，在默认的情况下，所有的组件都是可重用的，除非是定制过的。 （2）验证阶段 如图4-4所示，检查当前组件是否与停用，以及新的组件是否可以被激活。 这是通过路由配置阶段的canDeactive和canActive钩子函数来进行判断的， 17 特别要注意的是，canDeactive按照从下至上的冒泡顺序来检查的，canactive 的检查顺序则与它相反。任何一个钩子函数都可以终止页面切换，如果在验证 阶段终止了界面切换，路由会保持当前应用状态，恢复到前一个路径。 参考文献 1 作者书名版次出版者，出版年：引用部分起止页码（著作图书文献） 2 作者文章名学术刊物名年，卷（期）：引用部分起止页码（学术刊物文 献） 18