摘要
冯清个人资料Internet使全球走向信息化，走向数字化时代，为全球的用户提供了数字便利和数据传输便利的操作平台，大大缩短了人与人之间信息传递和信息交换以及信息资源交换的时间。音乐软件APP几乎人人都有，但在这个音乐软件百花齐放百家争鸣的时代，我们听不同歌手的歌需要不同的软件，于是我开发了这个基于vue.js的在线音乐平台。本平台的构建技术是以vue.js为基底，后台数据库支撑用的是MongoDB分布式文档存储数据库。该数据库的特点是高性能，易部署，易使用。此网站严格按照软件工程中的指导方法来进行构建以及测试。赋予了音乐网站管理用户信息注册登陆用户播放MV 音乐搜索等功能。
关键词：音乐  vue.js  登录注册音乐搜索
第一章绪论
1.1 课题的研究背景及意义
目前，随着中国的进步和开放型经济的到来，在这个计算机技术和互联网飞速发展的时代，人们的日常生活也发生巨大的改变，人们的生活水平提高消费水平也提高，但压力也是随之而来的提高，所以人们经常听歌解压，这也正是我研究这个音乐平台的主要原因，由于盈利和版权问题还有资源的互利，现有
几大音乐巨头公司，例如QQ音乐，网易云音乐，酷狗音乐，酷我音乐盒等，不同的平台有着不同的资源，导致我们现在听歌需要下载到很多听歌软件，而且不同软件又有不同的功能所以这次选题的意义就是实现一个音乐网站基于现在年轻人喜欢的多样性的集合各软件优点的音乐网站。让人们在工作中为生活带来无尽的欢乐和放松生活的闲暇之余带来音乐的快乐。
1.2 国内外研究现状
1.2.1国内研究现状
从目前来看，随着互联网技术和人们生活水平的提高，当人们的温饱不再是生活中的大部分压力的时候，人们开始追求更高质量的生活，有的人把精力放在培养自己的身体上，例如健身，养身，运动。有的人则是追求精神上的更高领域，例如知识，眼界，音乐等等，作为当代大学生的我来说，我在课余时间还有闲暇之余十分喜欢听歌，所以这也是我研究音乐在线网站的一个重要原因之一。
还有一个重要的原因就是国内听歌软件由于几大音乐软件巨头占据了绝对的优势和垄断地位使得喜欢听音乐的人需要下载很多听歌软件，国内的听歌软件由网易于音乐，QQ音乐，酷狗音乐等几大巨头占据，近年来音乐版权成本增长明显，三大唱片公司（环球音乐，华纳音乐，索尼音乐）打包版权。[1]就比如我来我想听周杰伦的歌我就要去QQ音乐听取。如果我想看更多有趣和真实的评论我就需要下载网易云音乐，所以对一个喜欢听音乐的人来说，他需要下载好几个音乐软件，且产品同质化的现
象较为严重，一家公司推出一个功能另一家公司也立即跟风推出，且风格极为类似。
1.2.2国外研究现状
国外的听歌软件主要是两个，一个是iTunes音乐商城和Spotify，iTunes是一种网络音乐销售商点，界面整合在iTunes播放软件中，使得透过网络购买版权音乐档案的机制变得更便利，iTunes音乐商城最大的特点即是与硬件设备捆绑，这也离不开苹果iPod终端本身在设计和产品理念上的出众。[1]
Spotify则是使用会员收费制和用户创造内容模式随着整个Spotify生态的不断发展壮大，它能够吸引更多用户来创造更多内容，并形成良性循环。[1]
1.3 主要内容及安排
本文遵循软件工程方法论进行系统分析、总体设计、详细设计和软件测试，实现了在线音乐网站的登录注册，网站首页，歌曲推荐，精选歌单，热门榜单，新歌首发，热门电台，歌手列表，歌曲排行榜，歌词，音乐搜索，MV播放等功能。章节内容安排如下：
第一章：分析国内外关于在线音乐网站和听歌软件及听歌APP研究现状。
第二章：对本文所采用的搭建工具、技术、环境以及数据库进行介绍。
第三章：进行在线音乐网站的需求分析，包括可行性分析、功能结构分析。
第四章：系统开发环境搭建，数据库中表设计以及系统前后台运行流程描述。郭京飞电视剧大全
第五章：进行系统实现与展示。
第六章：系统测试。
第二章关键技术介绍
2.1 Vue.js介绍
2.1.1 Vue.js的概述和特点寻水的鱼
Vue.js 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue.js被设计为可以自底向上逐层应用。Vue.js的核心库只关注视图层，方便与第三方库或既有项目整合。[2]
任嘉伦老婆大闹锦衣剧组Vue.js的特点：
（1）灵活开放：可以把Vue.js当做JavaScript，也可以用它的工具来搭建系统，是可以灵活选择的，所以说Vue.js是灵活开放的。
（2）易学易用：我认为Vue.js的核心易学点是注重关注视图层，用户只需使用简单的API将数据绑定即可，在有HTML CSS JavaScript的基础上，快速上手。
[2]
（3）性能好，易优化：20kb min+gzip 运行大小、超快虚拟DOM、最省心的优化。[2]
（4）有多种方式实现过渡效果：在过渡CSS和动画应用class，第三方动画库如Animate.css，Velocity.js。
2.2 AXIOS介绍
2.2.1 AXIOS的概述和特点
AXIOS是一个基于promise的HTTP库可以应用在浏览器和node.js。
AXIOS的特点：
（1）转换请求数据：可通过将相关的传递给AXIOS来发出请求，例如一个data 作为请求数据，则可以对data进行转换处理。
（2）响应数据：对数据进行快速响应。
（3）取消请求：能够取消请求，例如data取消请求。
2.3 SASS预处理器概述和特点
2.3.1 SASS预处理器的概述和特点
SASS预处理器是CSS预处理器的一种。SASS预处理器添加程序属性。不需要考虑浏览器兼容性。
SASS预处理器的特点：
（1）简洁：代码编辑和实现方面较为简洁。
（2）适应性强：对配置和环境的要求不高，在当前属于频繁使用。
（3）可读性强：代码及其运行十分简单，理解起来不困难且代码赏心悦目。
（4）易维护：易于后期代码的维护，以及后期的更新迭代等问题。
2.4 JavaScript CSS HTML概述和特点
2.4.1 HTML的概述和特点
HTML(Hyper Text Markup Language，超文本标记语言)是标准通用标记语言下的应用。[3]
HTML的特点：
（1）兼容性好：硬件与软件间，软件与软件间。
（2）开放性高：该语言有相当多的空间可以去拓展。
（3）性能高：效用及其效率高。
（4）嵌入型强：更易嵌入，减少软件间或软硬件的磨合。
2.4.3 CSS的概述和特点
CSS是Cascading Style Sheets（层叠样式表）的简称，CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）[4] CSS的特点：
（1）缩短代码量：在功能一样情况下，CSS的代码量会缩短。
天大地大歌词（2）提高预览速度：因代码量缩短，故而预览速度加快，及响应速度加快。
（3）易编写：CSS不需要编译，相较于其他的来说，是相对易编写的。
（4）易布局：数据段，代码段。
2.4.5 JavaScript的概述和特点
JavaScript是Net-scape公司推出的一种基于对象和事件驱动的解释性编程语言。[5]
JavaScript的特点：
（1）无需预编译：JavaScript无需预编译，故而易编写。
（2）可嵌入：更易嵌入，减少软件间或软硬件的磨合。勇往直前歌词
（3）自带基本数据：提供能多数据，这些数据都是可以直接加载的。
（4）可实现交互：可实现对象交互。
2.5 vue-router概述和特点
2.5.1 vue-router的概述和特点
vue-router可以理解为前端路由跳转的管理。vue-router采用的是路径质检的切换。[6]