《基于vue的音乐网站的设计与实现问题研究10000字【论文】》.docx

《《基于vue的音乐网站的设计与实现问题研究10000字【论文】》.docx》由会员分享，可在线阅读，更多相关《《基于vue的音乐网站的设计与实现问题研究10000字【论文】》.docx（37页珍藏版）》请在第一文库网上搜索。

1、基于VUe的音乐网站的设计与实现目录一、前言1(-)选题背景1(二)课题的目的和意义2()论文的组织结构2二、相关技术介绍3(一)VUejS技术简述3()SpringBoot框架5()MySQ1数据库8三、系统需求分析10(-)可行性分析10(-)需求分析10四、系统模块设计11(-)整体模块设计11(二)登录模块12(三)首页模块14五、各模块设计实现14(-)首页模块14(二)视听音乐模块25(三)点歌送祝福模块28(四)添加歌词模块33(五)下载音乐模块35六、网站系统测试35(-)集成测试35(二)确认测试35()系统测试36(四)测试结果36六、结束语37参考文献37一、前言(-)选

2、题背景互联网技术的进步和用户数量的增长导致了在线音乐产业的蓬勃发展。无论在国内还是国外，在线音乐市场都很活跃，全球数字娱乐产业近年来持续增长。从网络游戏到在线音乐到在线媒体。在今天的音乐浪潮中，随着音乐产业逐渐达到顶峰，音乐已经变得密不可分了。全球数字娱乐产业快速发展，网络电视等充满了激烈的竞争。在这种情况下，在线音乐已经发展起来。网络音乐已经改变了传统音乐产业的结构。网络音乐已经改变了传统音乐产业的结构。全球在线音乐市场的领先地区是欧洲、美国、韩国和日本。同时，全球在线音乐发展势头良好，不同类型的市场参与者纷纷进入这个行业。而中国的在线音乐市场虽然落后于欧美、日本和韩国，但中国的在线音乐发展

3、也在逐年增长，根据相关研究结果,市场规模从2012年的16亿元上升到2023年预计将达到352亿元。电脑网络技术的发展使人们通过音乐网站接触到了更多的音乐模式。网民数量的激增使更多的人们通过音乐网站接触到了音乐。在线音乐网站为音乐创作提供了更多的便利和载体。在线一音乐网站刺激了流行音乐的传播。在线音乐网站使人们欣赏音乐的方式发生了改变。在线音乐网站不但刺激了音乐的传播,也刺激了电子数码产品的频繁更新换代。(二)课题的目的和意义中国的网络音乐市场在与传统媒体、传媒和互联网的融合中日渐发展。在内容供应方面，它是由多渠道来源形成的，如自我生产、存储、版权购买、用户上传和协作整合。在在线服务方面，电信

4、和传统媒体都发挥着重要作用。在终端产品方面，在线音乐收听终端已经从一种媒介扩展到有网络连接的各种电子设备上，并以多种方式不断发展。从用户的消费习惯来看，除了传统的广告，付费服务、包月、版权相关的营销也越来越被用户接受，用户习惯。基于VueJs的网站商城设计是目前商城主流的设计方式，本研究通过VueJs技术设计音乐网站，能给音乐网站的相关设计提供思路借鉴。()论文的组织结构本论文是对备忘录系统的开发进行的详细介绍和论述。本篇文章一共分为六11i陈君，黄朝兵.在线音乐网站的设计与开发J.现代计算机，2012(10):5.21陈君.基于PHP的在线音乐网站的设计与实现D.武汉理工大学.个章节各个章节

5、具体内容如下:第一章简要的介绍了该课题的研究背景，系统的开发背景和意义。第二章对Vuejs系统技术进行了简要的介绍。第三章对系统需求进行分析，包括有可行性分析以及需求分析。第四章对系统模块进行了设计。第五章对实现各模块的功能。第六章对网站进行系统测试。（四）国内外研究现状互联网给学习者提供了丰富的超媒体资源，为网友创造出了一种由他们自由控制的娱乐环境，如果长期手动从网上找寻就会产生一种无所适从的感觉，从而降低网友的兴趣。目前有很少系统能实现这种网络音乐库的功能，更在以下方面涉及不多:没有实现在线实时试听不能方便的分类的检索的系统:单一的音乐网站只是线性的，不是层次状或网状的，也不支持相近歌曲的

6、查询、检索功能，找歌只能靠输入和分类查找实现，不便干相关性和方便性的查询:网友只能每次重复查找，不能记录网友的喜好、之前收藏，这就浪费了一定的时间和网络资源。综上所述，网络音乐库的好与坏，严重影响了网友的上网时间和对一个音乐系统的影响力，同时也影响了系统使用的效率。因此音乐网站是一个很有必要的娱乐系统，并且还有很大的发展空间。二、相关技术介绍（）VUejS技术简述Web前端技术迭代的速度很快，其发展的历史可以概述为三个阶段：第一个阶段使用的是静态页面，即最早的HTM1页面。第二个阶段使用得是ASP、JSP.PHP等动态脚本语言，在HTM1里面增加了变量绑定，但是这些变量由服务端填充之后仍然以H

7、TM1的形式发给客户端，此时的前端主要是做Dem0,整个平台的开发模式一般使用MVC模式，这种模式严重阻碍了前端开发效率，也让后端不能专注于业务开发，也正是由于此类问题催生了第三个阶段-Web2.0阶段，实现了前后端分离（如图2-1）o该阶段的核心技术是AJAX,VUe.js、Angu1arJsReactjs等框架都使用了AJAX技术，其在界面控件的数据在客户端HTM1里面用js变量绑定，客户端自己控制刷新，需要读写数据的时候用AJAX和服务端进行通信。由于此时的Web页面需要数据交互时走AJAX请求，所以根本就不需要重新加载页面，从而但诞生了SPAo开发成本也相应的降低，之前开发的接都是针对

8、表现层的，很难写测试用例，前后端分离之后，使得开发和测试工作能够并行开展，测试人员更加专注于性能和功能测试，开发人员更加专注于开发工作，大大提升了系统研发效率。唱互依s相互用怦隼不商灯后瑞分码图2-1前后端分离的重要性VUe是一个用于构建用户界面的渐进式的框架，并且VUe有很多特点和Web开发中常见的高级功能：解耦视图和数据、可复用的组件、前端路由技术、状态管理、虚拟DOM。131单东林、张晓菲、魏然.锋利的jqueryM.北京：人民邮电出版社，2009.图2-2组件树VUe除了可以开发大型单页面应用，并解决数据绑定的问题，还支持组件化。组件化思想提供了一种抽象的思维方式，是VUe中重要的开发

9、思想，目的是简化处理逻辑，从而让页面的管理和维护更加容易。通过开发出独立可复用的组件来构造应用，每个功能块完成属于自己这部分独立的功能，而每一个组件又可以进行细分。任何的应用都会被抽象成一颗组件树（如图2-2）,最终将页面封装成若干个组件，采用积木式编程，这样页面的复用度达到了最高，大大提高了代码的利用率，从而提升开发效率久VUe相对于AngUIar和ReaC1更为简单易学，易于上手。核心库只关注视图层，便于与第三方库或既有项目整合。综合以上优点，本文使用了VUe作为前端主体框架。（二）SpringBoot框架在介绍SPringBOOt之前，先让我们来了解一下SPring。SPring是一个轻

10、量级的IoC（InversionofContro1,控制反转）和AOP（AspectOrientedProgramming,面向切面编程）的容器框架，其模块架构如图2-3,从下向上依次观察其架构共有6个部分，依次是测试、Spring核心容器、面向切面编程、InStrUmentation、数据访问与集成、Web与远程调用。党建.Web前端开发最佳实践M.北京：机械工业出版社，2005.数帮访问与集成QBC1ITranSaCtionORM一IQXMIMessagingJMSWeb与否聊I标IIWebSoCket1IPOrtIetIII面向切面编程AOPAspectsInstrumentInstru

11、mentTomcatInstrumentationSPnnMJ心容器ContextBeansExpressionContextSupport测或test图2-3SPring模块架构图(1)测试：提供了对测试功能的支持。(2)SPring核心容器。BeanS是SPring的组件，用来定义Bean,Core是SPring核心工具类包。COre和BeanS模块提供了整个框架最基础的部分，包括了IOC和DI(DependencyInjection,依赖注入)。ComeXt建立在Core和Beans模块提供的基础之上，它提供了框架式访问对象的方式，Core.Beans、Context构成了Spring的

12、骨架，是Spring中最常用的三个功能。ContextSupport是对Context的扩展支持，Expression为Spring提供了表达式的语言支持。(3)面向切面编程。该部分主要包含两个模块：AOP模块和Aspects模块。AoP模块提供了面向切面的编程实现。Aspects模块提供了与ASPeCtJ错误!未找到引用源。的集成，这是一个功能强大且成熟的AOP框架。重点介绍一下何为AOP:在软件开发中，散布于应用中多处的功能被称为横切关注点(cross-cuttingconcern),比如说日志，安全和事务管理等。通常来讲，这些横切关注点从概念上是与应用的业务逻辑相分离的，但是往往会直接嵌

13、入到应用的业务逻辑之中。把这些横切关注点与业务逻辑相分离正是AOP所要解决的问题。横切关注点可以被模块化为特殊的类，这些类被称为切面(ASPeCt)。AOP区别于我们平时接触的C)OP(C)bjectOrientedProgramming,面向对象编程)编程思想。OoP提倡模块化和对象化，而Ac)P则提倡针对同一类问题的统一处理，主要用于不想侵入原有代码的场景，允许开发者通过定义方法拦截器及切入点对代码进行集成，继承过程无耦合，实现了关注点的分离，从而达到处理平台中分布于各个模块中的相关问题的目的。(4) InStnImentation支持。实现InStrUmentatiOn支持，一般用以应用

14、服务器的监测。(5)数据访问与集成。提供了对JDBC连接的封装，以及对事务、对象-关系映射、对象-XM1映射以及消息队列的支持。(6)Web与远程调用。提供了Web的基础功能以及对WebSOCket、Port1et等环境的支持。作为平台，SPring抽象了我们在许多应用开发中遇到的共性问题，为开发者提供了一站式的解决方案，开箱即用，具有简单、可测和松耦合等特性。Spring采取了以下四种关键策略来降低JaVa开发的复杂性。(1)基于POJo(P1ainOrdinaryJavaObject,简单的JaVa对象)的轻量级和最小侵入性编程。Pe)JO实际上就是普通的JaVaBean,Bean是SPr

15、ing管理的基本单位，在基于Spring的Java应用中，Bean的是一个非常广义的概念，所有的Java对象都被当成Bean处理，包括数据源、Hibernate的SessionFactory.事务管理器等。Spring把类转换成Bean,通过操作Bean实现编程目标。其意义在于Bean的简单和灵活，能够任意扩展，从而胜任多个场合，即能够实现一个模型贯穿多个层。很多框架会强迫应用继承他们的类或实现他们的接口从而让应用和框架进行绑定，强迫开发者编写大量冗余代码。应用与框架绑定不易于迁移，通常也很难编写测试代码。SPring尽量降低自身的AP1对开发者的代码的侵入，允许在应用系统对SPring框架的各个功能模块进行自由选择和组装，并且不强制要求应用系统的类必须从Spring框架的系统API的某个类来继承或者实现某个接口,宫臣.大连官臣共享音乐网站的设计与实现D.大连理工大学，2015.从而达到了最小侵入性。（2）通过DI（依赖注入）和面向接口实现松散耦合。DI即依赖注入，是指通过DI对象的依赖关系由系统中负责协调各对象的第三方组件在创建对象时进行设定，依赖关系会被注入到相关的对象