vue 163 music

VUE-163-Music (NetEase Cloud Music Web Version)

Gunakan VUE untuk meniru versi Klien Musik 163.

Rencana awal adalah untuk meniru semua halaman, tetapi karena antarmuka API yang terbatas dari NetEase, halaman implementasi juga terbatas.

Akses seluler tidak disarankan.

Tinggi halaman adalah 670px , resolusi 1366 X 768 dan di bawahnya lebih baik untuk menelusuri layar penuh dengan F11

issue selamat datang, pr , star atau follow ! Saya akan terus membuka sumber proyek yang lebih menarik

Rekomendasikan alat pengejar buku yang ditulis oleh React Family Bucket

Versi online

Klik untuk masuk

Beberapa efek tangkapan layar

Lebih banyak efek gif

Alat & Keterampilan

vue + vuex + vue-router + vue-resource

express

http-proxy-middleware adalah middleware untuk proxy http, yang meneruskan permintaan http dan mengimplementasikan permintaan domain lintas

store.js adalah roda hebat yang menangani localStorage . localStorage asli hanya mendukung penyimpanan jenis string. Setelah roda dienkapsulasi, ia dapat secara langsung menyimpan Array , Object , function , Set , dan jenis lainnya.

animate.css CSS Animation Library

Komponen vue-slider-component

Alat Pengujian Antarmuka postman

menggunakan

 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/

Menerapkan fungsi

Temukan musik

• Rekomendasi yang dipersonalisasi (kecuali untuk rekomendasi lagu harian pada daftar lagu yang disarankan, Anda dapat mengklik untuk memasukkan daftar lagu lainnya)

Mainkan musik

• Lagu sebelumnya
• Bermain
• berhenti sebentar
• Lagu berikutnya
• Kontrol kemajuan
• Kontrol volume

Pencarian Musik

Masukkan kata kunci pencarian,回车键untuk mencari, atau klik ikon放大镜

• Single (klik atau klik dua kali lagu untuk ditambahkan ke daftar putar musik, beberapa konser memiliki masalah hak cipta yang tidak dapat dimainkan)
• penyanyi
• Album
• MV
• Daftar putar (klik kiri untuk masuk ke daftar putar)
• Anchor Radio (klik atau klik dua kali lagu di bagian program event tunggal untuk menambahkannya ke daftar putar musik, saat ini tidak ada masalah hak cipta)
• pengguna

Daftar Lagu

• Mainkan semua

Daftar putar

• Cut Song (klik Cut Song)
• Hapus lagu (mouse ditangguhkan pada lagu yang ingin Anda hapus, klik X kecil di sebelah kanan)
• Hapus daftar putar
• Daftar Putar Cache Lokal

Beberapa pertanyaan

Jumlah pemutaran MV yang diperoleh melalui antarmuka API pada dasarnya tidak akurat, dan alasannya belum ditemukan. Jumlah pemutaran dari jenis lain akurat.

Struktur Direktori

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

Beberapa hal yang perlu diperhatikan

Proyek ini menggunakan antarmuka NetEase Dad dan perlu menggunakan http-proxy-middleware untuk meneruskan. Di lingkungan pengembangan, Anda perlu menambahkan konfigurasi berikut ke dev in config/index.js

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

Dalam lingkungan yang sebenarnya, konfigurasi sisi server

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

Data yang dikembalikan didekonstruksi dalam js src/components/deal/ direktori, misalnya, hasil pencarian tunggal didekonstruksi.

 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 terletak di direktori src/components/store

Manajemen Konfigurasi Routing vue-router terletak di direktori src/components/router

Filter khusus terletak di src/components/filters/ Direktori

Netease Cloud Music Interface berasal dari http://moonlib.com/606.html