vue仿163musicPC端

前言

http://blog.shanamaid.top/2017/03/21/vue仿163musicPC端/

vue2越来越受欢迎，无奈现在在公司做的平台是以ng1.x为主，一直没有机会练手vue2，虽然写过一些小demo，但是与完整的项目相比较中间会少很多东西。于是趁在公司空闲的时候以及周末双休，自己用vue2复写了163musicPC端。相比较之掘金上大大写的很多都是纯静态页面vue2，实际开发中肯定会涉及到接口、数据渲染方面，本项目接口通过http-proxy-middleware，一个http代理的中间件，进行http请求转发，实现跨域请求，直接复用网易爸爸的接口，在服务端对返回的JSON进行解构即可。

介绍

vue-163-music(网易云音乐web版)，用vue仿写163音乐客户端版。

原计划仿写完所有页面，碍于网易的接口API有限，实现页面也有限。

Github项目地址:https://github.com/ShanaMaid/vue-163-music

欢迎issue，pr，star or follow！我将继续开源更多有趣的项目

在线版

点击进入 http://www.shanamaid.top:3000/
腾讯学生云主机，最低配，存在卡顿，建议clone到本地进行体验

使用

git clone https://github.com/ShanaMaid/vue-163-music.git

cd vue-163-music

npm install

# 开发环境

npm run dev

访问 http://localhost:8080/

# 打包

npm run build

# 实际环境

cd server

node app.js

访问 http://localhost:3000/

效果截图

工具&技能

vue + vuex+ vue-router + vue-resource

express

http-proxy-middleware 一个http代理的中间件，进行http请求转发，实现跨域请求

store.js 一个非常棒的处理localStorage的轮子，原生localStorage只支持存储字符串类型，轮子进行封装后可以直接存储Array、Object、function、Set等类型

animate.css css动画库

vue-slider-component 滑块组件

postman 接口测试工具

实现功能

发现音乐

个性推荐(推荐歌单中除每日歌曲推荐外，其余歌单可点击进入)

播放全部

|—— server 服务端

| |—— app.js 服务端启动入口文件

| |—— static 打包后的资源文件

| |__ index.html 网页入口

|——src 资源文件

| |—— assets 组件静态资源库

| |—— components 组件库

| |—— deal 163api返回的JSON字符串解构

| |—— filters 自定义过滤器

| |—— router 路由配置

| |—— store vuex状态管理

| |—— App.vue 163SPA

| |__ main.js SPA入口

|__ static 静态资源目录

一些注意事项

项目中使用了网易爸爸的接口，需要使用http-proxy-middleware进行转发，开发环境下需要在config/index.js中的dev中添加下列配置即可

proxyTable: {

'/api': {

target: 'http://music.163.com',

changeOrigin: true,

headers: {

Referer: 'http://music.163.com/'

}

实际环境中，服务器端配置

var express = require('express');

var proxy = require('http-proxy-middleware');

var app = express();

app.use('/static', express.static('static'));

app.use('/api', proxy({

target: 'http://music.163.com',

changeOrigin: true,

headers: {

Referer: 'http://music.163.com/'

}

));

app.get('/', function (req, res) {

res.sendFile(__dirname + '/index.html');

});

app.listen(3000);

对返回的数据解构js文件位于src/components/deal/目录下，比如对单曲搜索结果进行解构

single: (data) => {

let list = []

let count = data.result.songCount

if (count === 0) {

return {list, count}

}

for (let item of data.result.songs) {

let singer = ''

let {

name,

mp3Url,

duration,

id,

album: {

name: albumName

}

} = item

for (let item of item.artists) {

singer += item.name + ' '

}

list.push({name, mp3Url, duration, id, albumName, singer})

}

return {list, count}

}

vuex状态管理位于src/components/store目录下

vue-router路由配置管理位于src/components/router目录下

自定义过滤器位于src/components/filters/目录下

网易云音乐接口来源于http://moonlib.com/606.html

Github项目地址:https://github.com/ShanaMaid/vue-163-music

总结

本项目的实际意义在于熟悉vue生态链以及ES6语法，同时思考如何用vue构建实现一个完整的项目。

最后的感觉vue2在开发中带来的体验确实很棒，vue2能如此之火自然有它的道理。

如果觉得本项目不错的话，别忘记star哦！