在线音乐网站的设计与实现.docx

《在线音乐网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《在线音乐网站的设计与实现.docx（52页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在线音乐网站的设计与实现 摘 要 随着全球移动互联网的发展，越来越多的上网设备被人们所使用，这带来了软件跨 平台的困难，Web网站作为运行的软件，通过它诸多新特性实现了跨平台的运行使得开 发成本大大降低，而web音乐网站正是实现多平台下的数据共享以及使用，使得用户能 更加随心所欲地获取自己的音乐信息。 本次设计是基于Vue的在线音乐网站。 本次设计采用了Vue以及 Node.js作为开发环境。在设计中使用了前后端分离的开 发模式，使用了MVVM架构的Vue实现前端的数据绑定以及展示，在网络交互的方面 上充分使用Ajax的技术来实现与后端Node服务端交互，而本地数据库采用了MongoDB 非关

2、系数据库，在最终完成的作品中实现流行的Token认证登录，以及歌单的收藏和获 取，高性能的网站响应，以及歌曲播放历史，歌曲播放，歌曲排行榜，新歌专辑推荐， 歌手信息获取，和用户管理的前后端分离的 Web系统。 本次设计的 Web在音乐网站虽然功能并不太完善，但是使用到的诸多技术包括Web 网络编程，数据库编程，以及前端架构使用和前后端分离的开发思想是具有一定的实用 价值的。 关键词：Web；音乐网站；前后端分离；数据库编程；Vue框架； 1 Design and implementation of news app system based on iOS Abstract With the d

3、evelopment of the global mobile Internet， more and more Internet dev ices 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-platfor m operation makes the development cost greatly reduced， and w

4、eb music website is t o achieve multi-platform data sharing and use，so that users can get their music infor mation more freely. This design uses Vue and Node.js as the development environment. In the desig n， the front-end development mode is separated from the back-end， using the MVV M architecture

5、 of Vue to realize the front-end data binding and display， and using A jax technology to fully interact with the back-end Node server， while the local datab ase uses MongoDB non-relational database to realize the popular Token authentication login， song list collection and acquisition， high performa

6、nce 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 s ystem. The design of the Web in the music website is not perfect， but the design uses many technologies includin

7、g 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 2 目 录 1 绪论 . 6 1.1 WEB系统概述 . 6 1.2 在线音乐网站的特点及研究意义 . 6 2总体设计 . 7 2.1系统功能要求 .

8、 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

9、最新专辑模块的实现. 13 4.2.1 最新专辑的展示页. 14 3 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 用户注册功

10、能测试. 32 5.2 用户登录功能测试. 32 5.3 用户个人信息功能测试. 33 5.4 首页模块测试. 33 5.5 搜索功能模块测试. 34 5.6 详细页模块测试. 35 5.7 播放功能模块测试. 36 6结论 . 37 参考文献 . 38 谢 辞 . 39 附 录 . 40 4 1 绪论 1.1 Web系统概述 1990年Tim以HTML为开发基础完成了最初的Web服务器，其后他在1991年上推广 了Web的概念，直到1994年万维网联盟（World Wide Web Consortium）即W3C组织成 立标志了万维网的面世。 目前实现前后端分离的关键即是异步数据交互技术 A

11、jax即“Asynchronous Javascript And XML”和重要的基础框架 JavaScript 为后续的 Jquery，YUI 等框架的 实现提供了基础，这两项技术正是 Web 系统发展的“铁器时代”， 在 1998 年前后得 到了应用。但是由于标准的不统一使得发生了两次浏览器大战，于是W3C组织在2014 年 10 月 28 日，W3C 正式发布 HTML 5.0 推荐标准，即H5。而例如Node.js、JSON、前 端MVVM框架、Bootstrap、移动Web、混合 App、则是 web“现代化时代”。 1.2在线音乐网站的特点及研究意义 随着互联网的发展，人们早已无法

12、离开网络，而在年轻人中有着不少热爱音乐的 群体，他们热爱与人分享自己喜爱的音乐，分享自己对音乐的感受和想法，而现在大多 的音乐网站想要使用完全的云服务都要下载客户端，并且由于在版权竞争的作用下，更 多的厂商花费资金去购买版权而忽视了一些云服务，以及前端排版的更新问题，且传统 的页面相对于Vue的单页面富应用的特性有着先天的弱势，导致了挺多线上的音乐网站 存在的操作不便，繁琐，加载时间长等诸多不利因素，为了避免这种问题在线音乐系统 应运而生。 目前国内拥有最大的手机用户群体，且作为比较新兴的前端技术 Vue的单页富应用 程序十分多，它不仅可以对移动端进行开发，以往人们想在别人的电脑上听自己曾听过

13、 的歌需要一首一首搜索，这样做十分耗时，于是本项目就在于实现云端记录用户歌单， 历史和歌曲资源以及用户评论，让音乐更加贴近我们。本项目是基于Node.js后端以及 前端：Vue，Vuex，VueRouter，开发的在线音乐网站让用户能够轻松快速的听上高品质 的音乐。在 PC 端更是有着众多大厂使用它。这是使得本身就需要把资源放在音乐传输 上的在线音乐应用可以有更高的效率去运行。最大程度地复用可以让它有更多的资源去 实现高品质音乐的传输，并且音乐网站的交互可以使小范围的用户更多的交流，可以改 变人们在信息传播上的被动。 5 2总体设计 2.1系统功能要求 该系统可以获取数据库，以及网易云音乐的歌

14、曲歌单资源，并用特定样式显示出来， 并且支持对收听历史，歌曲，歌单收藏并对自己的信息进行管理。 1）获取音乐信息（包括推荐歌单、推荐榜单、推荐歌手）的浏览； 2）用户能够收藏自己喜欢的歌单以及音乐； 3）用户可以在自己的收藏界面中获取已经收藏的歌单，并可以进行浏览收藏的歌单。 4）用户可以在系统中注册并上传个人头像，注册完成后可使用账号登录。 5）用户登录后开放收藏，收听历史等使用权限。 2.2方案论证 2.2.1 首页 首页分为三个部分，头部导航栏，中部内容，以及尾部。. 本次设计的音乐网站首页为响应式主页，头部导航栏以及中部内容显示都使用了 CSS3媒体查询（media Media Que

15、ries）方式实现响应式的展示。头部导航栏会判断当 期的路由位置，选择对应的标签给予高亮，但是在低分辨率下即手机等设备下浏览的话 高亮路由标签列表以及搜索栏将隐藏，转而显示一个下拉按钮，变为类似下拉菜单的显 示模式以适应低分辨率下的展示。 中部推荐内容部分采用Vue组件封装好，一共有四种类型，首先是首页轮播图，轮 播图也采用响应式实现，信息皆是由进入首页时候在 Vue的created 生命周期通过ajax 请求并发从后端获取的信息若网络请求有误将隐藏信息内容，首先展示的是每日随机推 荐，最新的专辑，再是流行歌手，最后是热门榜单的推荐，点击分别能进入随机推荐页 面，专辑的详细页，歌手的详细页，榜

16、单的详细页或是直接播放。 2.2.2 详细信息模块 详细信息模块由歌曲详细，歌手详细，榜单详细，专辑详细构成。 详细页都有头部和尾部组成，头部采用 flex 布局，自适应宽度，由信息页的类型 决定头部图片的内容，进入头部也时会在created生命周期中后去Vue的$route实例下 的 params 参数，部分的页面需要有分页操作所以会在创建时初始化并且通过aioxs 访 问对应的后端API去获取信息并展示数据，由于有部分页是分页的，而Vue虚拟Dom的 特性必须要给 img 标签加 key 提高 diff 算法的性能，否则会出现图片闪回的情况，为 6 了避免这种情况的发生，大部分是图片都是采

17、用的懒加载并且会将url地址绑定为key 以优化换页时的性能。页面提供包括（歌手，榜单，专辑，歌曲）的图片，介绍，以及 出版日期，类型，以及歌曲列表，并且会添加路由跳转形成回环。 2.2.3 播放模块 播放模块由播放器以及播放列表构成 播放页面包括有歌词的滚动显示，用户可以通过点击播放按钮实现暂停和继续播 放，上一首以及下一首按钮，并且展示已经在播放列表中的歌曲，用户可以通过音量按 钮控制播放的音量大小，还能通过随机播放按钮以及单曲循环等选择自己想要的播放模 式。进度条提供拖动改变以及点击改变，通过监听 audio 标签的 ontimeupdate 事件进 行监听实现播放时间的实时更改以及歌曲

18、的长度时间。 移动端播放模块实现图如下： 2.2.4用户模块 系统用户模块的主要功能有用户的注册和登录、对个人信息的管理、用户对收藏信 息的管理。 注册登录是用户信息记录的基础功能，收藏音乐，收藏歌单，必须在用户在登录状 态下才能使用，否则将跳转至登录页面进行登录。注册功能可以自行上传图片作为头像， 并且可以设置自己的昵称，等。 登录后用户可以进入个人中心查看到收藏以及历史信息，以实现多平台都能够共享 播放过的数据，并且登录状态会将服务端返回的Token暂时放存放在本地，以至于使其 维持登录状态。 7 2.3 系统框图 在未登录状态下，用户可以正常的使用音乐搜索，专辑推荐，获取音乐信息，歌手

19、信息等功能。 在登录状态下，用户可以查看自己收听的歌曲历史信息，以及编辑增加自己的收藏 歌单，以实现多平台的数据共享。 下图为本设计的在线音乐网站的功能模块图： 图2.2 系统功能模块图 3软件开发环境及开发技术介绍 3.1软件开发环境 3.1.1 Vscode简介 VsCode的全称是Visual Studio Code，是微软于2015年发布的一款免费开源的现 代化轻量级代码编辑器。 VsCode一经发布就非常受到前端开发者的欢迎，一是其插件生态环境十分良好，有 很多的插件可以使用和开发，而有由于前端技术迭代十分的快速，使得开发者需要频繁 的使用各种框架和工具，VsCode的插件生态就使得

20、这一个程序就可以完成各种各样的开 8 发任务，插件由开发者发布也是因为如此发布的插件可以让开发者提高开发效率。 3.1.2 Postman Postman是款强大网页调试工具的客户端，postman为用户提供强大的 Web API & HTTP 请求调试功能。它能够修改http头部，带自定义的params，修改body，使用get、 post、put、patch、delete 等http请求并且能够将测试集合保存，并提供JSON数据的高 亮解析以方便开发者了解数据结构。 在本次设计中，各类接口的调试都是通过Postman进行的。 3.2开发技术介绍 3.2.1 Vue框架简介 Vue框架是一个

21、用于构建前端的渐进式框架，它和很多大型开发框架不同，它可以 让你的项目一部分使用Vue并且它使得原来前端开发的既要关注视图又要关注DOM操作 的开发模式转变成了关注数据的开发模式，使得上手更加的轻松以及开发时间的大大缩 减。还十分有利于第三方库的整合和混入，Vue完全能够实现复杂SPA（single page web application）的运作，它提供了数据的双向绑定，前端路由配置，项目的编译压缩等 一系列功能。 Vue十分出名的所谓“全家桶”即Vue，VueCli，VueX，VueRouter，axios，能够让 开发者十分快速的完成项目，总结起来就是：1.项目构建工具、2.路由配置、3

22、.状态信 息管理、4.http请求库。 3.2.2 JSON简介 JSON是一种数据交换格式。与XML用途相似但比起XML，使用JSON来书写数据储存 和传输有着明显的优势。JSON的可读性和编写的特性都要优于XML，并且由于其形式与 JavaScript 中的对象十分相似，并且 JavaScript 中也封装了 JSON 方法可以进行 JSON 和对象的轻松转换。使得如今各种后端接口基本都是以 json 形式传播数据，这些都是 让JSON成为更加优先的数据交换语言格式。 总而言之，JSON 的可读性和编码解码程度以及网络资源占用方面，并且使用起来非 常方便使得如今的开发中前后端分离项目数据交

23、互基本都是使用 JSON的。 3.2.3 MongoDB简介 MongoDB是一个基于分布式文件存储的数据库，它多大用在 Web应用中，它最大 9 的特点就是非关系型，且部署十分快速方便，Node.js 的 mongoose 插件就是在 Node.js 异步环境下对MongoDB数据库进行简便操作的工具。由于它是非关系数据库并且可以 以JSON对象形式储存工具使得MongoDB在Web应用中十分常见。 3.2.4 MVVM设计模式简介 MVVM是Model-View-ViewModel的缩写，它的三个字母包括了三个英文，其中： M即Model是指数据模型，数据模型是程序设计时的数据结构；V指的

24、是View，它是 指页面布局正是我们通俗的网页，它负责将数据展示给用户并且处理数据交互的层面； V指的是ViewModel，负责View与Modle 的数据连接，与更新。 自从MVVM出现后 VM就更多的抽离了原本属于 C中的业务逻辑，MVVM主要 解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。 当和Model频繁发生变化，开发者需要主动更新到View。 4系统具体设计与实现 4.1首页的响应式布局的实现 网站首页作为了解一个网站内容的初始是十分关键的一个页面，并且由于此次在线 音乐网站的多平台特性，需要使得首页在各个设备下都能够正常的浏览，通常有几个实 现的方

25、式。 1:运用 Nginx（一个高性能的 HTTP 和反向代理 web 服务器）识别 Http 请求中的 useragent获取用户的设备类型从而重定向到移动端的 web地址去，或者到Pc端的web 地址上。 2:写两套Css样式文件和两套Dom界面 加载在同一个页面里并用onresize方法去 监听页面的实时变化，并且使用 CSS3 中的媒体查询判断不同屏幕尺寸下显示哪一套 dom，不显示的Dom会使用display：none去隐藏。 3:写两套CSS文件，但是只些一套Dom，在Vue的created的函数中添加对onresize 进行监听，并通过 CSS3 的媒体查询将不同屏幕尺寸下的样式

26、导入到 Dom 中，这样不仅 可以减少Dom元素的渲染也可以增加开发效率，但是这样也使得样式文件分类要有严格 的控制，否则后续修改会后比较麻烦的地方，所以通用的媒体查询样式类似版心等就会 单独抽离成一个common.css文件以便后续更新改动。 首页轮播图由于也采用响应式变化，要使用过Ref获取图片的高度然后赋给轮播图。 window.onresize = () = this.imgHeight = this.$refs.imgHeight0.offsetHeight + px; ; 10 setBannerHeight() if (document.body.clientWidth 768)

27、 this.imgHeight = 350px; else if (document.body.clientWidth let album = ; album.id = item.id; album.name = item.name; album.picUrl = item.blurPicUrl; album.singer = item.artists.map(item) = item.name).join(/); album.alias = item.alias; return album; ); return response(result.status， albums); 14 retu

28、rn response(result.status， ); 分页功能使用了elementUi中的el-pagination其中current-page属性记录当前 所在的分页，在页面初始化时候会使用this.pageIndex = this.$route.params.id;去 获取URL中的页数，由于前端路由和后端路由的不同所以具体的页面是在前端获取页面 的页面值，并且再通过 ajax 请求去获取当页的数据，并且保存在一个数组中，而在下 一次更改页面的时候需要先去数组内核对是否已经有数据了，如果有数据则直接从数组 内引用而不需要再次通过 ajax 请求获取使得服务器压力大大减小，而且也优化了

29、前端 的用户体验不需要频繁的发出网络请求。 由于Vue的虚拟dom比对算法Diff算法的性能问题，会使得页面切换后img标签 的Src改变，但是还没有由于用户还没有取得图片资源的这段时间内，页面的图片还会 沿用此前的Src会使得页面的图片切换不统一或者说切换混乱，所以页面的img会绑定 key属性，以提高Diff算法的能力，并且在全局使用懒加载的形式加强前端的新能，没 有浏览到的图片不加载以实现更好的用户体验。 4.2.2 最新专辑详情页的实现 最新专辑详情页由头部的专辑信息、播放全部按钮、列表信息，右侧的简介显示栏， 以及底部的云音乐的评论信息。 最新专辑详细页的信息由路由开始，首先采用动态

30、路由实现详细页的路由，并且在 详细页的 created 生命周期中获取路由的 params 信息即在其他页面跳转到详细页的时 候会将专辑的ID当做params的一部分，然后到了最新专辑详细页的created周期的时 候就会获取这个ID再通过已经封装好的内容去调用获取信息的方法。 由于Vue虚拟dom渲染的机制问题，如果data中没有对应的信息就会报错所以在 模板渲染的dom前加上了v-if判断，当data 中的数据部位空时才会进行渲染，并且由 于部分专辑的歌曲可能会有首的原因我采取的是超过 10 首以上的默认为隐藏，使用 ShowMore=false 作为控制显示与否的控制，默认为不显示点击更

31、多按钮则会显示。 并且渲染列表会通过使用v-if去判断v-for中index的数值是单数还是双数去决 定单双行的样式形式即:class=(index % 2 = 0 ? even : odd )，并且为了使 得列表的显示风格更为固定所以列表采用的flex 布局，并且为其设置了固定的百分比 宽度并且超出影藏显示省略号，使得显示更加的复合我们的日常使用。并且对原本数据 中歌曲长度仅返回时间戳形式的转换，并且将其算法封装成函数集成到 tool 目录下的 moment.js 函数中使得之后的时间戳格式化有了一个更方便的转化方式，直接引入该文 件调用方法即可。 转换函数： 15 clock(timeSt

32、amp) let result = parseInt(timeStamp); let h = Math.floor(result / 3600) 10 ? 0 + Math.floor(result / 3600) : Math.floor(result / 3600); let m = Math.floor(result / 60) % 60) 10 ? 0 + Math.floor(result / 60) % 60) : Math.floor(result / 60) % 60); let s = Math.floor(result % 60) 10 ? 0 + Math.floor(result % 60) : Math.floor(result % 60); result = $h:$m:$s; return result; 针对音乐资源可能存在的无版权的情况，我采取的是在 API接口中获取信息后判断 是否有资源的情况即在访问接口的信息后在data.playlist.tracks.st中使用高阶函数 循环筛选数据并判断其长度，如果其长度不大于0则在返回的数据中设置song.Banner 字段为true，name在template字段中会对渲染列表的song.banner字段