vue 163 music

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.com/ShanaMaid/vue-163-music.git

cd vue-163-music

npm install 

# 启动api转发
node server/newapi.js


# 开发环境
npm run dev
访问 http://localhost:8080/

# 打包
npm run build

# 实际环境
cd server
node app.js
访问 http://localhost: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.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