vue 163 music

vue-163-music (NetEase Cloud Music web version)

Use vue to imitate the 163 music client version.

The original plan was to imitate all pages, but due to the limited interface API of NetEase, the implementation pages are also limited.

Mobile access is not recommended.

Page height is 670px , 1366 X 768 resolution and below are better to browse in full screen with F11

Welcome issue , pr , star or follow ! I will continue to open source more interesting projects

Recommend a book-chasing tool written by React Family Bucket

Online version

Click to enter

Some effects screenshots

More effects gifs

Tools & Skills

vue + vuex + vue-router + vue-resource

express

http-proxy-middleware is a middleware for http proxy, which forwards http requests and implements cross-domain requests

store.js is a great wheel that handles localStorage . The native localStorage only supports storing string types. After the wheel is encapsulated, it can directly store Array , Object , function , Set and other types.

animate.css css animation library

vue-slider-component slider component

postman interface testing tool

use

 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/

Implement functions

Discover music

• Personalized recommendations (except for daily song recommendations on the recommended song list, you can click to enter the rest of the song list)

Play music

• Previous song
• Play
• pause
• Next song
• Progress control
• Volume control

Music Search

Enter search keywords,回车键to search, or click放大镜icon

• Single (click or double-click the song to add to the music playlist, some concerts have copyright issues that cannot be played)
• singer
• Album
• MV
• Playlist (left click to enter the playlist list)
• Anchor Radio (click or double-click the song in the single-event program part to add it to the music playlist, there is currently no copyright issue)
• user

Song list

• Play all

Playlist

• Cut song (click cut song)
• Delete songs (the mouse is suspended on the song you want to delete, click the small X on the right)
• Clear the playlist
• Local cache playlist

Some questions

The amount of MV playback obtained through the API interface is basically inaccurate, and the reason has not been found yet. The amount of playbacks of other types is accurate.

Directory structure

 |
|—— 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 静态资源目录

Some things to note

The project uses NetEase Dad's interface and needs to use http-proxy-middleware for forwarding. In the development environment, you need to add the following configuration to dev in config/index.js

 proxyTable: {
  '/api': {
      target: 'http://music.163.com',
      changeOrigin: true,
      headers: {
          Referer: 'http://music.163.com/'
      }
  }
}

In actual environment, server-side configuration

 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);

The returned data is deconstructed in the js src/components/deal/ directory, for example, the single search results are deconstructed.

 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 status management is located in src/components/store directory

vue-router routing configuration management is located in src/components/router directory

The custom filter is located in src/components/filters/ directory

NetEase Cloud Music interface comes from http://moonlib.com/606.html