vue框架下的音乐播放器的设计与实现【字数：9430】
在信息技术发展特别快的现在，多媒体技术也越来越受到人们的重视，娱乐变成了人们常谈的话题，在匆忙的上班生活，紧张的考试前夕，很多的人通过音乐，视频得到一丝放松。表达感情的方法有很多种，音乐就是其中之一。要想做出一个大家都认可的音乐播放器不仅要有优秀的音乐播放效果，还要方便用户操作。下面对音乐播放器的设计与实现进行了分析与叙述。本系统主要基于Visual Studio Code 平台开发的，运用了Vue.js 语言、Node包管理器、Vue Router、Vue-lazyLoa、Vuex、 Axios、Jsonp等技术作为开发平台设计出相应的操作界面，通过Google Chrome内部测试，期望做出漂亮的界面、所需功能基本完善、操作简单的设计目标。在设计本系统之前，首先需要整理出系统的所需功能，包括音乐播放器的列表管理、播放方式的基本控制、上下歌曲的选择、歌词的显示、歌曲界面显示等功能。系统采用模块式设计方法，根据音乐播放器的各项需求将功能分别置于四个模块当中。后台数据采用了网上开放的api，实现了页面操作和后台数据连接，最终实现了以上的各个功能，为用户提供了便利的操作。
keywords：Vue frame; C++; music player; modularization 目录
1 绪论 1
1.1课题研究背景 1
1.2目的和意义 1
1.3开发工具和技术 1
1.4本文的结构 2
2 需求分析 3
2.1软件需求 3
2.2系统需求分析 3
2.2.1系统的功能需求 3
2.2.2界面的要求 3
2.2.3性能需求 4
2.2.4可靠性要求 4
2.2.5运行环境需求 4
3 系统设计 5
3.1软件结构设计 5
3.2系统设计思想 5
3.3 功能模块设计 6
3.4系统总体流程设计 7
4 系统实现 8
4.1实现概况 8
4.2排行榜功能模块 8
4.3推荐功能模块 10
4.4歌曲页面播放模块 10
4.5 *好棒文|www.hbsrm.com +Q: ^351916072#
搜索功能模块 12
4.6歌曲播放控制模块 13
4.7歌曲播放随机算法 14
5 系统测试与性能分析 15
5.1兼容性测试 15
5.2 功能测试 17
5.2.1推荐列表 17
5.2.2 歌手 17
5.2.3 搜索 18
5.2.4歌曲详情页 18
5.2.5播放方式 19
5.2.6播放列表 19
总 结 21
参考文献 23
致 谢 24
系统对人体健康的影响 25
1 绪论
1.1课题研究背景
计算机技术的发展应用在现在的生活中运用处处可见，在多媒体技术应用也是十分的常见。现代社会上每个人至少有一部智能手机，这每部手机上都有自带的音乐播放器，音乐播放器就是音频解码器的可视化操作界面。平常我没事的时候就很喜欢听音乐，遇到很喜欢的歌也会跟朋友一起分享，再加上我是学软件工程的，如果能够用自己所学的知识做出一款易于操作，功能强大，能获得大众都喜欢的音乐播放器，对我自己来说也会是件很有成就感的事情。
因此我选择的课题是基于VUE框架下的音乐播放器的设计与实现，该APP的主要是实现基本的歌曲播放，音乐播放方式的控制，搜索，歌曲的排行榜，推荐等功能。
1.2目的和意义
现如今，大家对手机的音乐播放功能越来越关心，大部分人在选择购买手机时都会关心手机的音质问题，从这点就足以看出大家对音乐的追求，现在市场上出现了很多种播放器，但新的播放器还在不断问世，因此来说一款性能良好的功能齐全的音乐播放器一定会很受欢迎。我觉得音乐播放器不仅仅只是性能优越，还要便于操作和使用。因此一款性能良好的音乐播放器软件对于手机本身也是非常重要的，目前来说市场上的每一个手机都有自己的一款音乐播放器软件，通过软件元素可以达到人性化的设置，同时在操作方面还提供了便利的途径。当然市场上之所以会有各种各样的音乐播放软件的出现，说明还没有出现一款音乐播放软件能够完全的符合所有的用户需求。本课题就是用Vue框架进行音乐播放器的设计与实现，能够让我们更清楚地了解音乐播放器的各个功能的实现过程和用户的需求。
1.3开发工具和技术
（1）Visual Studio Code：代码编辑器，拥有非常强大的软件功能，简单清晰的界面，友好的操作方式等。
（2）Google Chrome：开发者工具，一套内置到Chrome的调试工具。方便开发人员进行调试，轻松节省大量开发时间。
（3）Npm：Node包管理器。它有助于发现可重用代码的包并以强大的新方式组装它们。此Web开发工具是一个命令行使用程序，用于与帮助打包的所述存储库进行交互。
（4）Vue：Vue.js是目前三大前端开发框架中较为轻量形的一种框架。与其他框架不一样的地方是，学习起来相对简单一点。Vue的核心库只关注图层，其它的库与现在已有的项目易于整合，不管是单文件组件还是Vue生态系统支持的库开发，Vue都有足够的能力驱动。
（5）Vue Router：路由管理器。Vue.js的核心深度集成，简化构建单页面应用。
（6）VuelazyLoad：懒加载插件，用于在应用程序中延迟加载图像。轻巧，功能强大且易于使用，适用于加载任何图像类型，在加载图像时添加加载类，支持Vue1.0和Vue2.0。
（7）Vuex：Vuex是Vue.js应用程序的状态管理模式。当项目中有大量的数据交互时，所有组件状态以及相应的规则都是它集中管理的。Vuex的主要作用是将状态单独分离出来，采用统一的方式进行处理，来保证各组件间的状态同步（以及统一组件再次显示时的状态保持）。
（8）Axios：一个基于promise的HTTP库，主要用于请求和相应，自动转换JSON数据。
（9）Jsonp：网页需要跨域时使用，可以让网页从别的域名（网站）那获取资料，就是跨域读取数据。
1.4本文的结构
本文具体内容由需求分析、系统设计、系统实现和软件测试这几个部分组成，主要就是讲述了音乐播放器的设计与实现的过程，重点描述了软件的设计方案、实现方法、采用的开发工具和相关设计，剖析部分重要功能的开发过程。本系统会在一定的环境条件下对系统的重要模块进行测试，来证实系统的可靠性，可行性及稳定性。
2 需求分析
2.1软件需求
随着信息时代的进步，IT行业的发展，音乐播放器在互联网上出现的种类也越来越多，功能也就越来越强大，呈现的样式也越来越多样化。跟其他软件相比较而言，音乐播放器的基本功能实现并不是太复杂，但由于涉及了许多课本上没学到的知识，给这次的编写的过程增加了些许难度。我的课题是基于Vue框架下的音乐播放器的设计与实现。希望通过此次毕业设计的编写，借此提升自己编写代码的综合能力。
keywords：Vue frame; C++; music player; modularization 目录
1 绪论 1
1.1课题研究背景 1
1.2目的和意义 1
1.3开发工具和技术 1
1.4本文的结构 2
2 需求分析 3
2.1软件需求 3
2.2系统需求分析 3
2.2.1系统的功能需求 3
2.2.2界面的要求 3
2.2.3性能需求 4
2.2.4可靠性要求 4
2.2.5运行环境需求 4
3 系统设计 5
3.1软件结构设计 5
3.2系统设计思想 5
3.3 功能模块设计 6
3.4系统总体流程设计 7
4 系统实现 8
4.1实现概况 8
4.2排行榜功能模块 8
4.3推荐功能模块 10
4.4歌曲页面播放模块 10
4.5 *好棒文|www.hbsrm.com +Q: ^351916072#
搜索功能模块 12
4.6歌曲播放控制模块 13
4.7歌曲播放随机算法 14
5 系统测试与性能分析 15
5.1兼容性测试 15
5.2 功能测试 17
5.2.1推荐列表 17
5.2.2 歌手 17
5.2.3 搜索 18
5.2.4歌曲详情页 18
5.2.5播放方式 19
5.2.6播放列表 19
总 结 21
参考文献 23
致 谢 24
系统对人体健康的影响 25
1 绪论
1.1课题研究背景
计算机技术的发展应用在现在的生活中运用处处可见，在多媒体技术应用也是十分的常见。现代社会上每个人至少有一部智能手机，这每部手机上都有自带的音乐播放器，音乐播放器就是音频解码器的可视化操作界面。平常我没事的时候就很喜欢听音乐，遇到很喜欢的歌也会跟朋友一起分享，再加上我是学软件工程的，如果能够用自己所学的知识做出一款易于操作，功能强大，能获得大众都喜欢的音乐播放器，对我自己来说也会是件很有成就感的事情。
因此我选择的课题是基于VUE框架下的音乐播放器的设计与实现，该APP的主要是实现基本的歌曲播放，音乐播放方式的控制，搜索，歌曲的排行榜，推荐等功能。
1.2目的和意义
现如今，大家对手机的音乐播放功能越来越关心，大部分人在选择购买手机时都会关心手机的音质问题，从这点就足以看出大家对音乐的追求，现在市场上出现了很多种播放器，但新的播放器还在不断问世，因此来说一款性能良好的功能齐全的音乐播放器一定会很受欢迎。我觉得音乐播放器不仅仅只是性能优越，还要便于操作和使用。因此一款性能良好的音乐播放器软件对于手机本身也是非常重要的，目前来说市场上的每一个手机都有自己的一款音乐播放器软件，通过软件元素可以达到人性化的设置，同时在操作方面还提供了便利的途径。当然市场上之所以会有各种各样的音乐播放软件的出现，说明还没有出现一款音乐播放软件能够完全的符合所有的用户需求。本课题就是用Vue框架进行音乐播放器的设计与实现，能够让我们更清楚地了解音乐播放器的各个功能的实现过程和用户的需求。
1.3开发工具和技术
（1）Visual Studio Code：代码编辑器，拥有非常强大的软件功能，简单清晰的界面，友好的操作方式等。
（2）Google Chrome：开发者工具，一套内置到Chrome的调试工具。方便开发人员进行调试，轻松节省大量开发时间。
（3）Npm：Node包管理器。它有助于发现可重用代码的包并以强大的新方式组装它们。此Web开发工具是一个命令行使用程序，用于与帮助打包的所述存储库进行交互。
（4）Vue：Vue.js是目前三大前端开发框架中较为轻量形的一种框架。与其他框架不一样的地方是，学习起来相对简单一点。Vue的核心库只关注图层，其它的库与现在已有的项目易于整合，不管是单文件组件还是Vue生态系统支持的库开发，Vue都有足够的能力驱动。
（5）Vue Router：路由管理器。Vue.js的核心深度集成，简化构建单页面应用。
（6）VuelazyLoad：懒加载插件，用于在应用程序中延迟加载图像。轻巧，功能强大且易于使用，适用于加载任何图像类型，在加载图像时添加加载类，支持Vue1.0和Vue2.0。
（7）Vuex：Vuex是Vue.js应用程序的状态管理模式。当项目中有大量的数据交互时，所有组件状态以及相应的规则都是它集中管理的。Vuex的主要作用是将状态单独分离出来，采用统一的方式进行处理，来保证各组件间的状态同步（以及统一组件再次显示时的状态保持）。
（8）Axios：一个基于promise的HTTP库，主要用于请求和相应，自动转换JSON数据。
（9）Jsonp：网页需要跨域时使用，可以让网页从别的域名（网站）那获取资料，就是跨域读取数据。
1.4本文的结构
本文具体内容由需求分析、系统设计、系统实现和软件测试这几个部分组成，主要就是讲述了音乐播放器的设计与实现的过程，重点描述了软件的设计方案、实现方法、采用的开发工具和相关设计，剖析部分重要功能的开发过程。本系统会在一定的环境条件下对系统的重要模块进行测试，来证实系统的可靠性，可行性及稳定性。
2 需求分析
2.1软件需求
随着信息时代的进步，IT行业的发展，音乐播放器在互联网上出现的种类也越来越多，功能也就越来越强大，呈现的样式也越来越多样化。跟其他软件相比较而言，音乐播放器的基本功能实现并不是太复杂，但由于涉及了许多课本上没学到的知识，给这次的编写的过程增加了些许难度。我的课题是基于Vue框架下的音乐播放器的设计与实现。希望通过此次毕业设计的编写，借此提升自己编写代码的综合能力。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/455.html
