vue 163 music
1.0.0
Verwenden Sie Vue, um die 163 Music Client -Version nachzuahmen.
Der ursprüngliche Plan bestand darin, alle Seiten nachzuahmen, aber aufgrund der begrenzten Schnittstellen -API von NetEase sind die Implementierungsseiten ebenfalls begrenzt.
Der mobile Zugang wird nicht empfohlen.
Die Seitenhöhe beträgt 670px , 1366 X 768 Auflösung und unten sind besser im Vollbild mit F11 zu durchsuchen
issue , pr , star oder follow ! Ich werde weiterhin open Source interessantere Projekte
Empfehlen Sie ein von React Family Bucket geschriebenes Tool zur Buchverjüngung
Klicken Sie hier, um einzugeben
Weitere Effekte GIFs
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware ist eine Middleware für HTTP-Proxy, die HTTP-Anforderungen weiterleitet und Cross-Domain-Anforderungen implementiert
store.js ist ein tolles Rad, das localStorage behandelt. Die einheimische localStorage unterstützt nur die Speichern von Streichentypen. Nachdem das Rad eingekapselt ist, kann es direkt Array , Object , function , Set und andere Typen speichern.
animate.css CSS -Animationsbibliothek
vue-slider-component Schiebereglerkomponente
postman -Schnittstellen -Testwerkzeug
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/
Geben Sie Suchschlüsselwörter ein,回车键, um zu suchen, oder klicken Sie auf放大镜
Die Menge an MV -Wiedergabe, die durch die API -Schnittstelle erhalten wird, ist im Grunde ungenau, und der Grund wurde noch nicht gefunden. Die Menge an Wiedergabetypen anderer Typen ist korrekt.
|
|—— 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 静态资源目录
Das Projekt verwendet die Schnittstelle von NetEase Dad und muss http-proxy-middleware zur Weiterleitung verwenden. In der Entwicklungsumgebung müssen Sie die folgende Konfiguration zum dev in config/index.js
proxyTable: {
'/api': {
target: 'http://music.163.com',
changeOrigin: true,
headers: {
Referer: 'http://music.163.com/'
}
}
}
In der tatsächlichen Umgebung serverseitige Konfiguration
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);
Die zurückgegebenen Daten werden im js src/components/deal/ Verzeichnis dekonstruiert, beispielsweise werden die einzelnen Suchergebnisse dekonstruiert.
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 -Statusverwaltung befindet sich im Verzeichnis src/components/store
vue-router -Routing-Konfigurationsmanagement befindet sich im Verzeichnis src/components/router
Der benutzerdefinierte Filter befindet sich im src/components/filters/ Verzeichnis
Netase Cloud Music Interface kommt von http://moonlib.com/606.html
