在线音乐网站的设计与实现
             
摘  要
随着全球移动互联网的发展，越来越多的上网设备被人们所使用，这带来了软件跨平台的困难，Web网站作为运行的软件，通过它诸多新特性实现了跨平台的运行使得开发成本大大降低，而web音乐网站正是实现多平台下的数据共享以及使用，使得用户能更加随心所欲地获取自己的音乐信息。
本次设计是基于Vue的在线音乐网站。
本次设计采用了Vue以及Node.js作为开发环境。在设计中使用了前后端分离的开发模式，使用了MVVM架构的Vue实现前端的数据绑定以及展示，在网络交互的方面上充分使用Ajax的技术来实现与后端Node服务端交互，而本地数据库采用了MongoDB非关系数据库，在最终完成的作品中实现流行的Token认证登录，以及歌单的收藏和获取，高性能的网站响应，以及歌曲播放历史，歌曲播放，歌曲排行榜，新歌专辑推荐，歌手信息获取，和用户管理的前
后端分离的Web系统。
本次设计的Web在音乐网站虽然功能并不太完善，但是使用到的诸多技术包括Web网络编程，数据库编程，以及前端架构使用和前后端分离的开发思想是具有一定的实用价值的。
关键词：Web；音乐网站；前后端分离；数据库编程；Vue框架；

Design and implementation of news app system based on iOS
Abstract
With the development of the global mobile Internet， more and more Internet devices are used by people， which brings the difficulty of cross-platform software， web site as the running software， through its many new features to achieve cross-platform operation makes the development cost greatly reduced， and web music website is to achieve multi-platform data sharing and use， so that users can get their music information more freely.
This design uses Vue and Node.js as the development environment. In the design， the front-end development mode is separated from the back-end， using the MVVM architecture of Vue to realize the front-end data binding and display， and using Ajax technology to fully interact with the back-end Node server， while the local database uses MongoDB non-relational database to realize the popular Token authentication login， song list collection and acquisition， high performance website response， and song playback history， song playback， song charts， new album recommendation， singer information acquisition， and user management of the front-end separated Web system.
The design of the Web in the music website is not perfect， but the design uses many technologies including Web programming， database programming， and front-end architecture use and front-end separation of the development idea is of some practical value.
Keywords: Web; music website; Network programming; Database programming;Vue


1 绪论    6
1.1 Web系统概述    6
1.2 在线音乐网站的特点及研究意义    6
2总体设计    7
2.1系统功能要求    7
2.2方案论证    7
2.2.1 首页模块    7
2.2.2 详细信息模块    7
2.2.3 播放模块    8
2.2.4用户模块    8
2.3 系统框图    9
3软件开发环境及开发技术介绍    10
3.1软件开发环境    10
3.1.1 VSCODE简介    10
3.1.2 PostMen介绍    10
3.2开发技术介绍    10
3.2.1 Vue框架简介    10
3.2.2 JSON简介    10
3.2.3 Mongodb简介    10
3.2.4 MVVM设计模式简介    10
4系统具体设计与实现    11
4.1 首页的响应式布局的实现    11
4.2 最新专辑模块的实现    13
4.2.1 最新专辑的展示页    14
4.2.2 最新专辑详细页的实现    17
4.3热门榜单模块的实现    19
4.3.1 热门榜单详细页的实现    19
4.3.2 播放列表传值的实现    19
4.4 热门歌手模块的实现    20
4.4.1 热门歌手列表页的实现    20
4.4.2 歌手详细页的实现    21
4.5用户中心模块的实现    23
4.5.1 用户注册功能的实现    23
4.5.2 用户登录功能的实现    26
4.5.3个人中心的实现    27
4.5.4用户收藏列表以及历史列表的实现    29
5 软件测试    32
5.1 用户注册功能测试    32
5.2 用户登录功能测试    32
5.3 用户个人信息功能测试    33
5.4 首页模块测试    33
5.5 搜索功能模块测试    34
5.6 详细页模块测试    35
5.7 播放功能模块测试    36
6结论    37
参考文献    38
谢  辞    39

1 绪论
1.1 Web系统概述
1990年Tim以HTML为开发基础完成了最初的Web服务器，其后他在1991年上推广了Web的概念，直到1994年万维网联盟（World Wide Web Consortium）即W3C组织成立标志了万维网的面世。
目前实现前后端分离的关键即是异步数据交互技术Ajax即“Asynchronous Javascript And X
ML”和重要的基础框架JavaScript为后续的Jquery，YUI等框架的实现提供了基础，这两项技术正是Web系统发展的“铁器时代在线代码运行器”， 在 1998 年前后得到了应用。但是由于标准的不统一使得发生了两次浏览器大战，于是W3C组织在2014 年 10 月 28 日，W3C 正式发布 HTML 5.0 推荐标准，即H5。而例如Node.js、JSON、前端MVVM框架、Bootstrap、移动Web、混合App、则是web“现代化时代”。
1.2在线音乐网站的特点及研究意义
随着互联网的发展，人们早已无法离开网络，而在年轻人中有着不少热爱音乐的体，他们热爱与人分享自己喜爱的音乐，分享自己对音乐的感受和想法，而现在大多的音乐网站想要使用完全的云服务都要下载客户端，并且由于在版权竞争的作用下，更多的厂商花费资金去购买版权而忽视了一些云服务，以及前端排版的更新问题，且传统的页面相对于Vue的单页面富应用的特性有着先天的弱势，导致了挺多线上的音乐网站存在的操作不便，繁琐，加载时间长等诸多不利因素，为了避免这种问题在线音乐系统应运而生。
目前国内拥有最大的手机用户体，且作为比较新兴的前端技术Vue的单页富应用程序十分多，它不仅可以对移动端进行开发，以往人们想在别人的电脑上听自己曾听过的歌需要
一首一首搜索，这样做十分耗时，于是本项目就在于实现云端记录用户歌单，历史和歌曲资源以及用户评论，让音乐更加贴近我们。本项目是基于Node.js后端以及 前端：Vue，Vuex，VueRouter，开发的在线音乐网站让用户能够轻松快速的听上高品质的音乐。在PC端更是有着众多大厂使用它。这是使得本身就需要把资源放在音乐传输上的在线音乐应用可以有更高的效率去运行。最大程度地复用可以让它有更多的资源去实现高品质音乐的传输，并且音乐网站的交互可以使小范围的用户更多的交流，可以改变人们在信息传播上的被动。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。