HTML仿网易云音乐首页静态,用 Vue.js 模仿一个简单的网易云音乐

前言：自己学习VUEJS也一段时间，但一直没有做出来一东西。我自己一直喜欢用网易云音乐app，于是乎就做了这个app。

技术栈

vue全家桶 (vue vue-router vuex)

axios

Muse-UI(一个基于Vue2.x的material design 风格UI框架)

功能与思路分析

我之前学习JS的时候对Html5 audio研究过，也写过一些例子，那时的功能并不是很全面。在写这个程序之前，我好好的查阅了当前的HTML5中的audio标签，发现园子上一位园友总结的很不错(这里)。于是就先把网易云音乐最基本的功能实现，歌单部分(这也是我喜欢网易云音乐的原因这一)，然后实现音乐的上一曲、下一曲，播放、暂停。列表功能。

后台

后台采用.net做为后台提供系统请求所用的API(源码)，原理很简单就是用.net伪装成一个客户端去访问网易云音乐的API然后，把返回的json数据转发出来。同时服务端做下跨域处理。

核心代码：

///

/// 请求网易云音乐接口

///

/// 要请求的接口类型

/// 要请求的接口类型的对象

/// 请求结果(JSON)

public static string Request(T config) where T : RequestData, new()

{

// 请求URL

string requestURL = config.Url;

// 将数据包对象转换成QueryString形式的字符串

string @params = config.FormData.ParseQueryString();

bool isPost = config.Method.Equals("post", StringComparison.CurrentCultureIgnoreCase);

if (!isPost)

{

// get方式 拼接请求url

string sep = requestURL.Contains('?') ? "&" : "?";

requestURL += sep + @params;

}

HttpWebRequest req = (HttpWebRequest)WebRequest.Create(requestURL);

req.Accept = "*/*";

req.Headers.Add("Accept-Language", "zh-CN,zh;q=0.8,gl;q=0.6,zh-TW;q=0.4");

// 如果服务端启用了GZIP，那么下面必须解压，否则一直乱码。

// 参见：http://www.crifan.com/set_accept_encoding_header_to_gzip_deflate_return_messy_code/

req.Headers.Add("Accept-Encoding", "gzip,deflate,sdch");

req.ContentType = "application/x-www-form-urlencoded";

req.KeepAlive = true;

req.Host = "music.163.com";

req.Referer = "http://music.163.com/search/";

req.UserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537";

// 设置cookies

req.Headers[