vue 仿 163musicPC 端项目 (支持歌曲搜索播放等)

前言

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

介绍

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

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

不推荐手机端访问。

页面高度为670px，1366 X 768分辨率及其以下按 F11 全屏浏览效果更佳

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/ 

效果截图

https://github.com/ShanaMaid/vue-163-music/tree/master/screenshot

工具&技能

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 接口测试工具

实现功能

发现音乐

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

播放音乐

• 上一曲
• 播放
• 暂停
• 下一曲
• 进度控制
• 音量控制

音乐搜索

输入搜索关键词，回车键搜索，或者点击放大镜图标

• 单曲(单击或双击歌曲添加至音乐播放列表，部分音乐会存在版权问题无法播放)
• 歌手
• 专辑
• MV
• 歌单(左键点击进入歌单列表)
• 主播电台 (单期节目部分单击或双击歌曲添加至音乐播放列表，目前不存在版权问题)
• 用户

歌单

• 播放全部

播放列表

• 切歌(单击切歌)
• 删歌(鼠标悬浮在要删除的歌曲上，点击右侧小 X)
• 清空播放列表
• 本地缓存播放列表

一些问题

通过 api 接口获取的 mv 播放量基本不准，尚未找到原因，其余类型的播放量准确

目录结构

| | build | config | 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哦！