基于Vue的音乐播放器的设计与实现(论文+源码)_kaic

这篇具有很好参考价值的文章主要介绍了基于Vue的音乐播放器的设计与实现(论文+源码)_kaic。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

摘  要
随着前端技术的发展和迭代,前端开发工程师在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一样只能在各自的平台运行,做到了真正的跨平台开发,实现了一次开发多平台使用。

关键词:音乐播放器,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.

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.3  目的和意义
本次毕业设计的目的在于,结合HTML5所提供的先进思想和媒体的多样控制手段,结合前后端架构分离的思想,利用Vue.js这个新的前端技术,开发出满足用户对音乐播放器的习惯和对媒体播放器的要求,设计出一款符合用户体验的,界面清楚明了,操作简单,可以在播放列表中加载多个多媒体文件,并且能够实现连续播放的音乐播放器。该软件开发的意义在于,随着javascript语法的不断扩充,使得前端设计师的责任不仅仅是再做一些简单的页面实现,而且还能够更加高效的处理各种复杂的业务逻辑,完成从设计师向工程师的转变。让前端开发的各种技术不断地运用到各种移动互联网的开发中。
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文件中进行管理,大大的提高了代码的重用性和可维护性。
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所示。
 
相比较MVC,MVVM只是把MVC的Controller改成了ViewModel,View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上面显示。这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作,如图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,来验证我们的处理结果对不对。

3 系统分析
3.1  可行性的分析
可行性研究(feasibility study)的目的,是为了弄清楚要开发的项目是否可以实现和是否值得去实现,该工作通常由专门的系统分析员去完成,并需要其写出可行性论证报告。如果结论中认为项目是可行,那么便可制定项目的实施计划,同时开始进行软件的开发;如果结论中认为项目是不可行,则应该提出终止该项目的建议。可行性论证其实是在另一个层次上进行的一次简化了的需求分析与设计。但是它的目的不是去解决用户提出的问题,而仅仅是为了确定这项的开发是否值得进行,分析它可能存在的一些风险。换句话来说,在投入大量精力前研究项目成功的可能性,减小项目可能出现的风险。即使研究的结论是不值得进行,所花的精力也并没有浪费,因为它避免了一次更大的浪费。下面我们将根据本系统的特点具体进行以下可行性分析。
3.1.1  经济的可行性
开发一个APP的目的主要是为了获得较好的经济效益和社会效益,因次对待开发APP的经济可行性论证就成为了可行性研究的重要内容。从成本到效益分析可用于评估系统的经济合理性,然后给出开发的成本估算,并将估算的成本和获得的利润进行比较,从经济的角度论证要开发的软件是否可行,一般来说,开发中的成本主要包括以下四种:
1)购置并安装软件和硬件以及相关设备的费用。
2)软件的开发费用。
3)软件安装、运行和维护的费用。
4)人员的培训费用。
结合毕业设计的整个开发过程,可知该软件开发所用到的全部软件和平台都是免费的,所以在经济上是完全可行的。
3.1.2  技术的可行性
技术的可行性是可行性研究的重要内容,由于系统分析和定义的过程是与系统技术可行性评估的过程同时进行的,此时如果系统的功能、性能和目标的不确定,那么会给技术可行性论证带来诸多困难。因此,技术的可行性研究往往是系统开发过程中最难进行的工作。该音乐播放器是Vue.js开发的,调试起来比较简单,所需要的计算机硬件配置也不高,一般PC机足以满足开发要求。软件方面,使用的是微软开发的一款真正的跨平台编辑器visual studio code,该编辑器简单易用,技术成熟,而且还提供有丰富的插件和支持Git的使用,而且软件也容易从网上获得,完全能满足开发需求。
3.1.3  法律的可行性
法律的可行性主要研究的是新系统的开发和使用是否会侵犯到他人权益,是否会触犯到国家的法律法规。本次的毕业设计是由本人独立完成的,开发的系统不会侵犯到任何人的权益,所用的软件也都是通过合法途径获取,因此完全符合法律法规。
综上所述,本系统的开发从经济上、技术上、法律上都是完全可行的。
3.2  软件的需求分析
软件的需求分析是指用户对目标软件在性能、功能、行为以及设计约束等方面的期望。需求分析就是通过对应用问题及其坏境的理解与分析,采用一系列的分析方法和技术,将用户的需求逐步精确化、一致化、完美化,最终形成需求规模说明文档的过程。本节将会从不同的角度去描述软件的需求。
 

基于Vue的音乐播放器的设计与实现(论文+源码)_kaic

基于Vue的音乐播放器的设计与实现(论文+源码)_kaic

 文章来源地址https://www.toymoban.com/news/detail-464880.html

基于Vue的音乐播放器的设计与实现(论文+源码)_kaic

 

 

到了这里,关于基于Vue的音乐播放器的设计与实现(论文+源码)_kaic的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于微信小程序的音乐播放器设计与实现(源码+lw+部署文档+讲解等)

    💗 博主介绍 :✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻 精彩专栏 推荐订阅 👇🏻 2023-2024年最值得选的微信小程序毕业设

    2024年02月03日
    浏览(35)
  • 82、基于stm32单片机音乐喷泉设计播放器频谱彩灯系统设计(程序+原理图+参考论文+开题报告+任务书+设计资料+元器件清单等)

    随着人们生活水平的提高和建立绿色城市的向往,音乐喷泉以其独特的魅力和特殊的功能,愈来愈成为休闲娱乐产业中的一项重要产品,音乐喷泉的兴建也越来越多。 根据目前音乐喷泉的发展现状,介绍了一个以STM32单片机为核心的小型音乐喷泉控制系统。给出了一个简洁的单

    2024年02月12日
    浏览(133)
  • 基于FPGA设计的音乐播放器

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 本文将介绍如何使用FPGA和PCM5102音频解码模块来制作音乐播放器,从生成PCM格式的音频文件开始,到如何编写I2S总线协议代码,音频数据的储存等。 PCM(Pulse Code Modulation,脉冲编码调制)音频数据是未经压

    2023年04月23日
    浏览(55)
  • 基于android音乐播放器的设计

    本科毕业论文(设计)诚信声明 本人郑重声明:所呈交的毕业论文(设计),题目《………基于android音乐播放器的设计……………………………》是本人在指导教师的指导下,进行研究工作所取得的成果。对本文的研究作出重要贡献的个人和集体,均已在文章以明确方式注

    2024年02月03日
    浏览(51)
  • 基于微信小程序的音乐播放器设计

    目 录 1绪论 1 1.1选题背景及意义 1 1.2发展现状 1 1.2.1什么是微信小程序 1 1.2.2小程序市场的现状 4 1.3研究主要内容 4 2系统技术 5 2.1 Java语言 5 2.2 SSM框架 6 2.3 Vue.js框架 7 2.4 Eclipse开发工具 8 2.5数据库 9 2.6系统开发环境概述 10 3系统分析 12 3.1 功能需求(用例图分析) 12 3.1.1 网络音

    2024年02月11日
    浏览(37)
  • 基于FPGA的音乐播放器硬件电路设计

    基于FPGA的音乐播放器硬件电路设计 随着嵌入式系统技术的不断发展,音乐播放器作为一种便携式设备得到了广泛的应用。本文将介绍一种基于FPGA(Field Programmable Gate Array)的音乐播放器硬件电路设计方案,该方案可以实现高质量的音频播放和文件存储功能。 系统概述 基于

    2024年02月02日
    浏览(67)
  • 基于FPGA的音乐播放器系统设计_kaic

    摘 要 音乐播放器随处可见,广播、CD、MP3、车载播放器、智能家居等系统,都用播放器娱乐着我们的生活。FPGA以硬件描述语言完成的电路设计,具有运算速度快,编程简单又稳定性,长期维护,成本等优点,本文基于FPGA实现音乐播放器设计。 本设计基于FPGA片上系统(SoC)完成

    2024年02月06日
    浏览(58)
  • 在Winform(C++/CLR)平台设计的(本地&在线)音乐播放器(基于WMP(Windows Media Player)控件实现)

    首先,祝贺阿根廷获得2022世界杯冠军! Winform作为一个比较老的平台,应用其实越来越少了,而即使设计Winform程序,多数人也会选择C#,而不是C++。但是题主在学校学习一门课程被迫使用了Winform/C++,并完成了课程作业,在此分享以下自己的作业,也当作学习纪录。在完成这

    2024年02月09日
    浏览(47)
  • Android程序设计之音乐播放器实现

    基于MediaPlayer技术实现在线音乐播放器,播放在线音乐,后端使用SpringBoot将音乐存放在Tomcat服务器。app通过网络请求获取音乐,从而实现在线音乐播放。该项目分为用户端和管理员端 一、核心技术Service组件介绍 Service它可以在后台执行长时间运行操作而没有用户界面的应用组

    2024年02月04日
    浏览(59)
  • 硬件课程设计:基于STM32的多功能播放器之MP3音乐播放

    3.1.1 设计思路         音乐播放是手机等电子产品最常见的功能,也是最具娱乐性的功能,在该模块中,我先从SD卡中读取已存放的MP3音乐文件,然后将读取的字节流依次送人VS1053中进行解码和播放,同时从VS1053相关的寄存器中读取音乐播放时间,在LCD上实时显示歌曲信息。

    2023年04月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包