摘 要：在以前科技还没有现在这么发达的社会时，人们会购买随身听，MP3等播放器来听音乐。而现在，每个用户都会使用不同的音乐APP来播放音乐。但是通过APP来播放音乐，势必会使手机内存被占用。因此，本文从移动端设计入手，实现用户能在移动端网页上进行音乐播放等功能。

本文利用Hbuilder工具进行代码编译，使用HTML5+CSS3进行页面的搭建和美化，利用JavaScript技术进行各种事件之间的交互，基于VUE框架和VUEX状态管理工具，在浏览器中储存各种数据以及数据的处理。

因为浏览器为了安全起见，会有一个同源策略。本项目通过Node.js搭建后端，获取网易云音乐提供的数据，解决了跨域问题。再通过Axios向后端发送请求，获取响应的数据，最后渲染到页面上。

 

关键词：移动端；音乐播放器；VUE；VUEX；CSS3；HTML5

 

目 录

摘 要

Abstract

第1章 绪 论

1.1背景与意义

1.1.1 背景

1.1.2 意义

1.2国内外发展（应用）现状

1.2.1国内发展（应用）现状

1.2.2国外发展（应用）现状

1.3论文所做工作及思路

1.4论文的结构

第2章 预备知识及原理说明

2.1超文本标记语言(HTML)

2.1.1超文本标记语言(HTML)的概念

2.1.2超文本标记语言(HTML)的原理

2.1.3超文本标记语言(HTML)的用途

2.2 JavaScript

2.2.1 JavasSript概述

2.2.2 JavaScript和ECMAScript的关系

2.2.3 JavaScript的用途

2.3 Vue

2.3.1 Vue的概述

2.3.2 Vue的核心特点

2.3.2.1双向数据绑定（响应式数据绑定）

2.3.2.2 组件化开发

2.3.2.3 虚拟DOM

2.4 Vuex

2.4.1Vuex的概述

2.4.2Vuex的五个属性

2.5 本章小结

 

第3章 基于VUEX移动终端播放器的分析

3.1需求分析

3.2功能说明

3.2.1音乐首页

3.2.2 搜索框

3.2.3歌单

3.2.4排行榜

3.2.5歌单详情

3.2.6音乐播放界面

3.2.7个人中心界面

3.2.8注册页面

3.2.9 登录页面

3.3本章小结

第4章 基于VUEX移动终端播放器设计

4.1音乐播放器总体设计

4.1.1音乐播放器的工作流程

4.2音乐播放器的详细设计

4.2.1音乐播放器主要页面

4.2.2音乐播放器的重要组件

4.2.3 Vuex的结构

4.2.3.1 State

4.2.3.2 Getters

4.2.3.3 Mutation

4.2.3.4 Actions

4.3本章小结

第5章 基于VUEX移动终端播放器实现

5.1开发工具

5.1.1 Hbuilder（Web开发IDE）

5.1.2 Chrome（谷歌浏览器）

5.2功能实现

5.2.1 音乐播放功能

5.2.2音乐首页

5.2.3全部歌单页面

 

5.2.4排行榜页面

5.2.5个人中心页面

5.2.6登录页面

5.2.7注册页面

5.2.8歌单详情页面

5.2.9搜索框功能

5.3本章小结

第6章 基于Vuex移动终端播放器测试与运行

6.1项目测试

6.1.1白盒测试

6.1.2黑盒测试

6.1.3综合测试

6.2项目运行

6.3本章小结

第7章 总 结

致 谢

参考文献