基于vue+elementui实现的web版网易云音乐(附件)【字数：9116】
[] Web版网易云音乐涵盖了PC版网易云的80%功能，其中包括主打歌单、推荐、社交等。现在在用的有网易云音乐PC客户端，移动端APP，但是有一些用户希望直接通过web浏览器进行访问网易云音乐，做到在线听音乐，为了满足这一需求，设计并实现一个web版网易云音乐，有歌单模块、排行榜模块、评论功能、搜索功能等。这些都是直接调用的网易云的服务端数据来完成的，前端页面采用Vue框架实现，可以高效去完成页面的渲染，播放功能的实现是采用的js的一个播放控件，能够让更多的网易云音乐用户聆听音乐，来提高用户的体验度。此课题采用的是前端开发框架Vue+element-ui，Element-ui库提供了非常丰富的组件，拿来即用，来达到与PC客户端网易云音乐一样的效果。
目录
一、 引言 1
二、 技术选型 1
三、 系统模块设计 2
四、 系统实现 2
（一） 页面相关设计 2
1. 基础页面设计 2
2. 轮播图 3
（二） 功能设计 4
1. 登录功能 4
2. 首页歌曲及歌手的搜索 5
3. 播放控件 8
4. 歌曲的播放 8
5. 查看播放进度 9
6. 调节音量 9
7. 播放列表按键及内容 9
8. 歌词播放页 10
9. 评论区 11
10. 排行榜 12
11. mv的播放 14
（三） 页面渲染优化 16
1. 打包优化 16
2. 菜单下拉优化 16
3. 组件库优化 17
（四） Nginx部署 18
五、 总结 19
致谢 20
参考文献 21
附录 22
[Abstract] The web version of Netease cloud music covers 80% of the functions of the PC version of Netease cloud, including the main song list, reco *好棒文|www.hbsrm.com +Q: ￥351916072$
mmendation, social networking, etc. Now there are Netease cloud music PC client and mobile app in use, but some users want to access Netease cloud music directly through the web browser and listen to music online. In order to meet this demand, a web version of Netease cloud music is designed and implemented, including song list module, ranking module, comment function, search function, etc. These are directly called Netease cloud serverside data to complete, frontend page using Vue framework, can efficiently complete the rendering of the page, the realization of the play function is a play control of JS, can let more Netease cloud music users listen to music, to improve the user experience. This project uses the frontend development framework Vue + element UI,The element UI library provides very rich components, which can be used immediately to achieve the same effect as Netease cloud music on PC client.
[key words] Web system; Vue+elementui; API interface; music
引言
根据2019H1中国手机各类应用使用时长占比调查显示，人们对网络音乐的需求占比高达10.7%，位居前四。大众在面对各式各样的音乐客户端进行选择时，除了以曲库丰富为基础，界面的人性化设计以及音乐社交互动的功能是否丰富都成为了必要的考量因素。2020年的线上音乐市场较2019年相比有了质的飞跃。基于基本音乐市场已定型和纯音乐app市场不断萎缩的大背景下，如何争夺已有的市场份额成为一新的难题。
以网易云举例，作为深受大众喜爱的音乐播放端之一，近几年凭借其出众文案成功激起人们的怀旧情怀，引起共鸣。然而对于网易云而言，移动端与web端的界面不统一，虽是其一特点却也成为了用户短暂体验感不适的一主要原因。
基于这一现象，现采用vue+elementui作为前端技术，后端接口调用网易云官方开放的API，拿到数据后进行双向绑定，渲染在页面上以此来实现web版网易云系统。在解决web端与移动端界面不匹配的问题之余，同时也可实现登录、在线播放、歌曲的搜索、播放与切换和视频播放以及查看评论等对大多数功能。
技术选型
该web版网易云系统决定采用JavaScript为网站开发前端语言，Vue.js作为web项目框架，elementui作为整个系统的前端样式库工具，后端程序这里不用开发，只需调用网易云音乐暴露的接口API即可拿到数据。
Vue框架
Vue.js是一套渐进式的构建用户界面框架，与react、angular相比，最大的一个优点就是轻量。其核心库即数据驱动与组件系统只关注视图层，并且很容易上手，易与其他库或者已有项目整合。它允许操作者将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript。作为前端开发人员的首选入门框架，它可以进行组件化开发，使得代码编写量大大减少，读者更加易于理解。
MySQL数据库
本次毕设虽然没有自己设计数据库，但是网易云提供的API是使用的MySQL数据库。之所以是采用MySQL数据库，是因为他支持集群，可以做主从复制。使用的是InnoDB存储引擎，支持事务，是聚簇索引。与oracel数据库相比，不需要手动commit事务，非常方便，而且他的sql语法也很容易上手。
目录
一、 引言 1
二、 技术选型 1
三、 系统模块设计 2
四、 系统实现 2
（一） 页面相关设计 2
1. 基础页面设计 2
2. 轮播图 3
（二） 功能设计 4
1. 登录功能 4
2. 首页歌曲及歌手的搜索 5
3. 播放控件 8
4. 歌曲的播放 8
5. 查看播放进度 9
6. 调节音量 9
7. 播放列表按键及内容 9
8. 歌词播放页 10
9. 评论区 11
10. 排行榜 12
11. mv的播放 14
（三） 页面渲染优化 16
1. 打包优化 16
2. 菜单下拉优化 16
3. 组件库优化 17
（四） Nginx部署 18
五、 总结 19
致谢 20
参考文献 21
附录 22
[Abstract] The web version of Netease cloud music covers 80% of the functions of the PC version of Netease cloud, including the main song list, reco *好棒文|www.hbsrm.com +Q: ￥351916072$
mmendation, social networking, etc. Now there are Netease cloud music PC client and mobile app in use, but some users want to access Netease cloud music directly through the web browser and listen to music online. In order to meet this demand, a web version of Netease cloud music is designed and implemented, including song list module, ranking module, comment function, search function, etc. These are directly called Netease cloud serverside data to complete, frontend page using Vue framework, can efficiently complete the rendering of the page, the realization of the play function is a play control of JS, can let more Netease cloud music users listen to music, to improve the user experience. This project uses the frontend development framework Vue + element UI,The element UI library provides very rich components, which can be used immediately to achieve the same effect as Netease cloud music on PC client.
[key words] Web system; Vue+elementui; API interface; music
引言
根据2019H1中国手机各类应用使用时长占比调查显示，人们对网络音乐的需求占比高达10.7%，位居前四。大众在面对各式各样的音乐客户端进行选择时，除了以曲库丰富为基础，界面的人性化设计以及音乐社交互动的功能是否丰富都成为了必要的考量因素。2020年的线上音乐市场较2019年相比有了质的飞跃。基于基本音乐市场已定型和纯音乐app市场不断萎缩的大背景下，如何争夺已有的市场份额成为一新的难题。
以网易云举例，作为深受大众喜爱的音乐播放端之一，近几年凭借其出众文案成功激起人们的怀旧情怀，引起共鸣。然而对于网易云而言，移动端与web端的界面不统一，虽是其一特点却也成为了用户短暂体验感不适的一主要原因。
基于这一现象，现采用vue+elementui作为前端技术，后端接口调用网易云官方开放的API，拿到数据后进行双向绑定，渲染在页面上以此来实现web版网易云系统。在解决web端与移动端界面不匹配的问题之余，同时也可实现登录、在线播放、歌曲的搜索、播放与切换和视频播放以及查看评论等对大多数功能。
技术选型
该web版网易云系统决定采用JavaScript为网站开发前端语言，Vue.js作为web项目框架，elementui作为整个系统的前端样式库工具，后端程序这里不用开发，只需调用网易云音乐暴露的接口API即可拿到数据。
Vue框架
Vue.js是一套渐进式的构建用户界面框架，与react、angular相比，最大的一个优点就是轻量。其核心库即数据驱动与组件系统只关注视图层，并且很容易上手，易与其他库或者已有项目整合。它允许操作者将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript。作为前端开发人员的首选入门框架，它可以进行组件化开发，使得代码编写量大大减少，读者更加易于理解。
MySQL数据库
本次毕设虽然没有自己设计数据库，但是网易云提供的API是使用的MySQL数据库。之所以是采用MySQL数据库，是因为他支持集群，可以做主从复制。使用的是InnoDB存储引擎，支持事务，是聚簇索引。与oracel数据库相比，不需要手动commit事务，非常方便，而且他的sql语法也很容易上手。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/509.html
