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

毕业设计（论文）题目：基于Vue的音乐播放器的设计与实现指导教师：职称：______________指导教师(校外)：职称：___________学生姓名：学号：____________专业：计算机科学与技术（软件方向）院（系）：信息工程学院___________完成时间：______________________________年月日I使用Vue实现音乐播放器的核心功能摘要随着前端技术的发展和迭代，前端开发工程师在java的MVC框架基础上，推出了前端的MVC，MVP，MVVM等架构模式，利用目前主流的前端开发技术，如React、AngularJS等，我们可以很轻松的构建起一个不需要服务器端渲染就可以展示的WebApp，同时这类框架也都提供了前端路由功能，后台可以不再去控制路由的跳转，将原本属于后台的业务逻辑全部丢给前端，做到了前后端的架构分离，这也是近几年来最为流行和使用的开发手段。2016年Vue2.0的正式发布，更是在前端开发工程师之间掀起了轩然大波，Vue的快速响应机制，数据绑定机制，组件化开发等，在功能和效率上做的尤为突出，本文通过最先进的前端模式架构结合JavaScript、Vue-Router、DOM、axios、vuex、Muse-UI（一个基于Vue2.x的materialdesign风格UI框架）等前端的核心开发技术，在MVVM模式的基础上，来完成一个移动音乐播放器的前端开发。本论文的音乐播放器采用了WebApp的开发模式，利用HTML5语言提供的新特性和Vue的新技术对播放器进行编写。同时给出了详细的系统设计过程换和部分界面图及主要功能运行的流程图，本文还对开发过程中遇到的问题和解决方法进行了详细的讨论，该音乐播放器主要通过Vue的新技术去实现音乐的播放、暂停、停止、上一首、下一首还有歌词的显示，播放的进度条等功能于一体，性能良好。使用HTML5模式开发的WebApp还有它最为重要的一个优点就是，在各种系统中它都能够独立运行，而不像安卓和iOS一样只能在各自的平台运行，做到了真正的跨平台开发，实现了一次开发多平台使用。关键词：音乐播放器，HTML5，Vue，MVVM，webpackIAbstractWiththedevelopmentofthefront-endtechnologyanditerativedevelopmentengineerinMVCbasedontheframeworkofJava,launchedinfrontofMVC,MVP,MVVMarchitecture,usingthecurrentmainstreamtechnologydevelopment,suchasReact,AngularJSandsoon,wecaneasilyconstructaserver-siderenderingcandisplayWebApp,theframeworkalsoprovidesfront-endroutingfunction,thebackgroundcanbenolongertocontroltheroutingofthejump,thebusinesslogicoriginallybelongingtothebackgroundallthrowntothefront,dobeforeandaftertheendofthearchitectureisseparated,whichisthemostpopularinrecentyearsandtheuseofdevelopmenttools.In2016,Vue2.0officiallyreleased,itcausedagreatdisturbancebetweenthefront-enddevelopmentengineer,rapidresponsemechanismofVue,databindingmechanism,componentdevelopment,thefunctionandefficiencyofthefront-endarchitectureisparticularlyprominent,throughthemostadvancedmodeofcombinationofJavaScript,Vue-Router,DOM,Axios,vuex,Muse-UI(abasedonthematerialdesignstyleUIframeworkVue2.x)coretechnologyforthedevelopmentofthefrontend,onthebasisofMVVM,tocompletethefront-enddevelopmentofamobilemusicplayer.ThemusicplayerusingtheWebAppdevelopmentmodel,newtechnologyandnewcharacteristicofVueandusingHTML5languagetoprovidefortheplayertowrite.Italsogivestheflowchartofthesystemdesignprocesswiththechangeandpartoftheinterfacediagramandmainfunction,thispaperalsoencounteredintheprocessofdevelopmentproblemsandSolutionswerediscussedindetail,themusicplayerplay,pause,stop,ontheone,thenextsong,lyricsdisplayandotherfunctions,goodperformanceof.WebAppaswellasitsmostimportantadvantageisthatinvarioussystemsitcanrunindependently,unlikeAndroidandiOSasplatformtorunonlyintheirtheachievedtruecrossplatformdevelopment,toachieveamultiplatformdevelopment.Keywords:musicplayer,HTML5,Vue,MVVM,webpack11前言1.1选题背景随着计算机技术的不断发展，移动互联网在生活中被应用的越来越广泛，特别是多媒体技术在我们生活中被应用到的更多，这使得我们的业余生活变得越来越丰富。作为移动音乐播放器，市场有着很多种，比如：酷狗、QQ音乐、百度音乐的等，这些都是一些非常优秀的播放器，针对市场上的主流的移动设备，主要分为两大种，一种是以苹果公司的设备为主的iOS系统，另一种就是以Google公司开发的基于Linux的自由及开放源代码的操作系统Android。因此在开发的过程中，要针对这两种设备开发两款匹配这两种设备的App，这无疑加大了开发的工作量，耗费了更多的开发时间。使用Vue设计的这个音乐播放器使用到是HTML5的开发技术，做到了真正彻底的跨平台开发，实现了一次开发多平台应用，极大的缩短了开发过程提高了工作的效率。1.2HTML5发展现状及趋势HTML5之所以能引发如此广泛的效应，其根本的原因在于它不只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。HTML5的最显著的优势在于跨平台性。它可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。这种强大的兼容性可以显著地降低开发与运营成本，可以让企业特别是创业者获得更多的发展机遇。此外，HTML5的本地存储特性也给使用者带来了更多便利。基于H5开发的轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。而H5让开发者无需依赖第三方浏览器插件即可创建高级图形、版式、动画以及过渡效果，这也使得用户用较少的流量就可以欣赏到炫酷的视觉听觉效果。在国内，腾讯，阿里巴巴，百度，新浪等互联网公司也开始将自家的产品开始向HTML5转换，而且随着苹果公司的iOS系统不再支持flash,更是使得H5技术大火了一把，2014年10月29日，HTML5的规范制定完成，截止到目前，HTML5的普及已经广泛地被人们所接受，大概有90%以上网站都在使用HTML技术，而在移动端，基本上全部都是HTML5的天下。21.3目的和意义本次毕业设计的目的在于，结合HTML5所提供的先进思想和媒体的多样控制手段，结合前后端架构分离的思想，利用Vue.js这个新的前端技术，开发出满足用户对音乐播放器的习惯和对媒体播放器的要求，设计出一款符合用户体验的，界面清楚明了，操作简单，可以在播放列表中加载多个多媒体文件，并且能够实现连续播放的音乐播放器。该软件开发的意义在于，随着javascript语法的不断扩充，使得前端设计师的责任不仅仅是再做一些简单的页面实现，而且还能够更加高效的处理各种复杂的业务逻辑，完成从设计师向工程师的转变。让前端开发的各种技术不断地运用到各种移动互联网的开发中。32相关技术简介2.1Vue.js的简介Vue.js是一个构建数据驱动的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的使用还不依赖于其他的基础库。而且小巧还带给它了另一种好处，就是可以让用户更自由的选择相应的解决方案，在配合其他库的方面它带给了用户更大的空间。2.1.2Vue.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.3Vue.js的组件化在大型的应用中，为了分工、复用和可维护性，我们不可避免地需要将应用抽象为多个相对独立的模块。在较为传统的开发模式中，我们只有在考虑复用时才会将某一部分做成组件；但实际上，应用类UI完全可以看作是全部由组件树构成的，因此Vue.js的设计中将组件作为一个核心的概念，可以说，每一个Vue.js应用都是围绕着组件来开发的。这可谓是它的一大亮点也是Vue.js最为推崇的，最强大的功能之一，它的核心目标是为了可重用性高，减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式，放置到对应的.vue文件中进行管理，大大的提高了代码的重用性和可维护性。42.1.4Vue.js的双向数据绑定Vue.js的另一个强大的功能就是他的双向数据绑定机制，对于一些富交互、状态机类似的前端UI界面，Vue.js处理起来非常的方便、简单、快捷，它将数据和视图相关联起来，当数据发生变化时，可以自动的更新视图。2.2MVVM模式的介绍