vue.js框架的网络音乐app【字数：9183】
摘 要现在的社会需要音乐来作为生活的润滑剂，给生活增添色彩。为此，本课题所设计的这个音乐平台，就可以为使用者找到最适合的那首音乐，在喧嚣中带来最适合使用者的一串音符。本课题主要运用vue、axios、SCSS等技术来开发了一款音乐APP，实现作为一款音乐播放器所应具有的音乐播放、歌曲推荐、歌曲收藏、歌曲搜索等功能。
Key Words: music vue.js axios SCSS ES6 目 录
1 绪论 1
1.1 课题的背景 1
1.2 课题研发的目的和意义 1
2 相关技术概述 2
2.1 开发工具与技术概述 2
2.2 Vue.js框架 2
2.3 Vuex 2
2.4 Vuerouter 2
2.5 Axios 2
2.6 SCSS 3
2.7 ES6 3
3 需求工程 4
3.1 问题定义 4
3.2 可行性研究 4
3.2.1 技术可行性 4
3.2.2 经济可行性 4
3.2.3 法律可行性 5
3.3 需求分析与建模 5
4 软件设计 9
4.1 软件架构 9
5 软件实现 10
5.1 环境配置 10
5.1.1 硬件环境 10
5.1.2 软件环境 10
5.2 项目目录结构 11
5.3 功能实现 12
5.3.1 标题栏 12
5.3.2 推荐模块 14
5.3.3 排行榜模块 16
5.3.4 歌手模块 18
5.3.5 歌曲列表组件 20
5.4 播放器模块 21
5.5 搜索模块 27
5.6 用户中心模块 29
5.7 软件后端 31
6 软件测试 32
6.1单元测试 32
7 结束语 34
参考文献 35
致谢 36 *好棒文|www.hbsrm.com +Q: *351916072*
绪论
课题的背景
自古以来，音乐便一直在社会中占据着相当的地位。就说中国，通过现在发现的古代文献记载，中国音乐的历史便已经可以追溯到黄帝。再说同样拥有悠久历史的欧洲，中世纪时期，宗教音乐占据主导，文艺复兴之后，音乐在欧洲的发展逐渐迎来鼎盛，之后譬如贝多芬、莫扎特、亨德尔等这些名字逐渐出现，这些名字如今都是世人皆知的。
现代社会的音乐当然已经没有了什么阶级等级之分，存在于这个世界上，我们便都可以享受到音乐带来的快乐。音乐已经渐渐深入到每一个人的生活之中，无论是前往商场，还是在家中电视里，或是在大街上每个人的耳机中，你都能找到音乐留下的足迹。
课题研发的目的和意义
最近几年，是一个移动设备风靡的年代。每个人都会拥有至少一部的智能手机。并且每个人都会用自己的手机在自己空闲的时候，或者需要寻找工作学习节奏的时候，来听一些音乐。快节奏的音乐能激活人的神经，使人学习工作的节奏加快，也会找到更多的灵感，运动中也可以更有力量去完成自己所需要完成的运动指标；慢节奏的音乐可以在需要的时候放松自己的神经，给紧张快节奏的生活打一注镇静剂。
音乐现在是人类生活的润滑剂，音乐如今已经不仅仅是一种以娱乐的形式而存在的了。既然越来越多的人都接触着音乐，开始喜欢上了音乐，那么我便想要设计制作一款软件来使用户能够通过该软件来接触到音乐，能够通过它了解每一首歌曲中不同的音符与歌词。
该Webapp以vue.js为基础，辅以一些与之相关的技术，来研究开发制作一款网络音乐APP。可以让人随时随地找到自己想要的歌曲音乐，点击播放按钮来播放音乐，并且能够通过推荐列表、歌手列表或是搜索歌曲、歌手，来找到自己心仪的那段旋律。
相关技术概述
开发工具与技术概述
该软件的所有代码都是通过Visual Studio Code（VS Code）来完成。
本软件主要是使用vue、vuex、vuerouter、vueaxios、SCSS、ES6等技术来完成开发的一款音乐Webapp。Flex布局可以适配常见的移动端。
Vue.js框架
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vuex
Vuex是Vue.js应用程序的状态管理模式+库。它是应用程序中所有组件的集中存储，其规则确保只能以可预测的方式改变状态。它还与Vue的官方devtools扩展集成，以提供诸如零配置时间旅行调试和状态快照导出/导入等高级功能。
Vuerouter
Vue Router是Vue.js的官方路由器。
它与Vue.js核心深度集成，使用Vue.js构建单页应用程序变得轻而易举。
Axios
Axios是一个基于promise的HTTP库，可以用在浏览器和Node.js中。
它的主要特征是：
从浏览器中创建 XMLHttpRequests；
从 node.js 创建 http 请求；
Key Words: music vue.js axios SCSS ES6 目 录
1 绪论 1
1.1 课题的背景 1
1.2 课题研发的目的和意义 1
2 相关技术概述 2
2.1 开发工具与技术概述 2
2.2 Vue.js框架 2
2.3 Vuex 2
2.4 Vuerouter 2
2.5 Axios 2
2.6 SCSS 3
2.7 ES6 3
3 需求工程 4
3.1 问题定义 4
3.2 可行性研究 4
3.2.1 技术可行性 4
3.2.2 经济可行性 4
3.2.3 法律可行性 5
3.3 需求分析与建模 5
4 软件设计 9
4.1 软件架构 9
5 软件实现 10
5.1 环境配置 10
5.1.1 硬件环境 10
5.1.2 软件环境 10
5.2 项目目录结构 11
5.3 功能实现 12
5.3.1 标题栏 12
5.3.2 推荐模块 14
5.3.3 排行榜模块 16
5.3.4 歌手模块 18
5.3.5 歌曲列表组件 20
5.4 播放器模块 21
5.5 搜索模块 27
5.6 用户中心模块 29
5.7 软件后端 31
6 软件测试 32
6.1单元测试 32
7 结束语 34
参考文献 35
致谢 36 *好棒文|www.hbsrm.com +Q: *351916072*
绪论
课题的背景
自古以来，音乐便一直在社会中占据着相当的地位。就说中国，通过现在发现的古代文献记载，中国音乐的历史便已经可以追溯到黄帝。再说同样拥有悠久历史的欧洲，中世纪时期，宗教音乐占据主导，文艺复兴之后，音乐在欧洲的发展逐渐迎来鼎盛，之后譬如贝多芬、莫扎特、亨德尔等这些名字逐渐出现，这些名字如今都是世人皆知的。
现代社会的音乐当然已经没有了什么阶级等级之分，存在于这个世界上，我们便都可以享受到音乐带来的快乐。音乐已经渐渐深入到每一个人的生活之中，无论是前往商场，还是在家中电视里，或是在大街上每个人的耳机中，你都能找到音乐留下的足迹。
课题研发的目的和意义
最近几年，是一个移动设备风靡的年代。每个人都会拥有至少一部的智能手机。并且每个人都会用自己的手机在自己空闲的时候，或者需要寻找工作学习节奏的时候，来听一些音乐。快节奏的音乐能激活人的神经，使人学习工作的节奏加快，也会找到更多的灵感，运动中也可以更有力量去完成自己所需要完成的运动指标；慢节奏的音乐可以在需要的时候放松自己的神经，给紧张快节奏的生活打一注镇静剂。
音乐现在是人类生活的润滑剂，音乐如今已经不仅仅是一种以娱乐的形式而存在的了。既然越来越多的人都接触着音乐，开始喜欢上了音乐，那么我便想要设计制作一款软件来使用户能够通过该软件来接触到音乐，能够通过它了解每一首歌曲中不同的音符与歌词。
该Webapp以vue.js为基础，辅以一些与之相关的技术，来研究开发制作一款网络音乐APP。可以让人随时随地找到自己想要的歌曲音乐，点击播放按钮来播放音乐，并且能够通过推荐列表、歌手列表或是搜索歌曲、歌手，来找到自己心仪的那段旋律。
相关技术概述
开发工具与技术概述
该软件的所有代码都是通过Visual Studio Code（VS Code）来完成。
本软件主要是使用vue、vuex、vuerouter、vueaxios、SCSS、ES6等技术来完成开发的一款音乐Webapp。Flex布局可以适配常见的移动端。
Vue.js框架
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vuex
Vuex是Vue.js应用程序的状态管理模式+库。它是应用程序中所有组件的集中存储，其规则确保只能以可预测的方式改变状态。它还与Vue的官方devtools扩展集成，以提供诸如零配置时间旅行调试和状态快照导出/导入等高级功能。
Vuerouter
Vue Router是Vue.js的官方路由器。
它与Vue.js核心深度集成，使用Vue.js构建单页应用程序变得轻而易举。
Axios
Axios是一个基于promise的HTTP库，可以用在浏览器和Node.js中。
它的主要特征是：
从浏览器中创建 XMLHttpRequests；
从 node.js 创建 http 请求；
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/456.html
