vue-163-music(网易云音乐web版)
用vue仿写163音乐客户端版。
原计划仿写完所有页面，碍于网易的接口API有限，实现页面也有限。
不推荐手机端访问。
页面高度为670px，1366 X 768分辨率及其以下按F11全屏浏览效果更佳
欢迎issue，pr，star or follow！我将继续开源更多有趣的项目
推荐一个React全家桶写的 追书神器
在线版
点击进入
部分效果截图
更多效果gif图
工具&技能
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 接口测试工具
使用
git clone https://*github*.co*m/ShanaMaid/vue-163-music.git
cd vue-163-music
npm install
# 启动api转发
node server/newapi.js
# 开发环境
npm run dev
访问 http://lo**cal*host:8080/
# 打包
npm run build
# 实际环境
cd server
node app.js
访问 http://**loca*lhost:3000/
实现功能
发现音乐
- 个性推荐(推荐歌单中除每日歌曲推荐外，其余歌单可点击进入)
播放音乐
- 上一曲
- 播放
- 暂停
- 下一曲
- 进度控制
- 音量控制
音乐搜索
输入搜索关键词，回车键搜索，或者点击放大镜图标
- 单曲(单击或双击歌曲添加至音乐播放列表，部分音乐会存在版权问题无法播放)
- 歌手
- 专辑
- 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.*1**63.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.*1**63.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://moo*nli*b*.com/606.html
