摘要:历史的车轮滚滚向前，社会的快速发展和进步，越来越多的人开始享受着网络的便利，越来越多的人开始在网上冲浪，看电影，看小说，看体育赛事来缓解工作之后的疲惫，当然，音乐当然也是其中最缓解疲惫的一种方式，尤其近几年来，随着移动互联网浪潮的高速发展，智能手机的大力推广，硬件的快速更新换代，4G甚至未来的5G技术的不断普及，让在线类的网站不在拘束于硬件和网速的制约，网络的传播很快，能够跨平台，高效的传播，便捷的传输方式的优势迅速流行。并且在欧美风，港台热，日韩流的冲击下，音乐已经深入我们的日常生活，音乐与我们几乎融为一体。在线收听音乐试听已经成为我们生活中的一种愉悦生活的情调，因此，为了能让更多的音乐被大家共享，我认为在线的音乐网站是不能缺少的。

近几年来，随着移动互联网如雨后春笋般发展，人们对手机的依赖慢慢超过了对计算机的依赖。人们在网上聊天交友（Facebook，Twitter，Google+），在网上请教问题（Quora，Stack Overflow），搜索查阅资料（Google，Yahoo，Bing，Yandex），在网上看视频（YouTube，Megavideo，Hulu）。除此之外，我发现很多人还会在网上进行电子商务交易，多媒体的下载，有着很多的使用者。尤其是近些年电子商务的高速发展，大大减少了我们对周围环境的熟悉和依赖，无论是世界各地哪里的网友，都可以浏览到世界各地的各类不同的信息，非常的方便和实用，由于以上的优势和便捷，近些年来各种各样的网站参差不齐如爆发性火山一样喷发，出现在网络的各个角落，这也是我做一个在线的音乐网站设计的实际意义。

本音乐网站主要集中在前端的实现，实现前后端的完全分离，利用前端VueJs框架+PHP写的API实现的SPA（single page application），就是现在比较流行的单页面应用，包括页面无刷新切换（vue-router路由控制实现），音乐动态展示，在线试听，歌曲封面标题滚动，歌词同步，单曲，随机，列表循环播放等信息，囊括在前端实现。后端使用PHP  API，实现前后端分离的高效开发，也便于维护。

本网站界面友好，采用HTML5和CSS3，JAVAScript布局和展示，网站交互性和美观性都值得品味，主要参考网易云音乐和虾米音乐的界面设计，与目前市场上主流的音乐网站有所不同，操作简单，界面简洁。各个组件层级之间切换高效，页面无刷新，减少网络延时带来的网站卡顿，减轻服务器压力。同时，网站采用现在移动端比较流行的rem的响应式设计，实现各个手机屏幕分辨率和平板的多端自适应。实现了一套代码，多端适用，大大的减少了开发成本，也利于维护。

根据网站所需功能，采用PHP + VueJS的技术方案，充分利用软件工程思维方法，总体上用结构化生命周期法进行系统分析和设计，并且采用快速的原型法来实现系统，如果不太考虑性能的话，单页面应用还可以直接打包成native app。

关键词：Vuejs；PHP；SPA；HTML5

目录

摘要

Abstract

1引言-1

1.1项目的来源及背景-1

1.2项目研究的意义-1

1.3 国内外的现状-1

1.4 国内音乐网站存在问题-2

2系统规划和可行性分析-2

2.1 系统调研-2

2.1.1音乐的信息基本浏览功能-3

2.1.2用户注册登录的功能-3

2.1.3音乐的试听功能-3

2.2 系统分析-3

2.2.1系统平台-3

2.2.2模块分析-3

3开发工具与技术-4

3.1  HTML&CSS的概述-4

3.1.1 HTML&HTML5概述-4

3.1.2 CSS&SASS概述-4

3.2  JavaScript的概述-4

3.3  VueJS的概述-5

3.3.1简介-5

3.3.2概念综述-5

3.3.3模型 (Model) -6

3.4  PHP+MYSQL的概述-6

3.4.1  PHP，PHP    是世界上最好的编程语言。-6

3.4.2 MYSQL，MySQL 是世界上最流行的开源数据库服务器。-6

3.5  响应式设计的概述-6

3.5.1响应式介绍-6

3.5.2移动端rem布局-7

3.6  开发环境与工具概述-8

3.6.1服务器搭建的环境：-8

3.6.2开发工具：-8

4系统设计与实现-9

4.1　系统功能设计-9

4.1.1　域名的注册，服务器的搭建-9

4.1.2　登录注册功能的实现-13

4.1.3　音乐播放首页歌单详情页-21

结  论-24

致  谢-25

参考文献 -26