vue 163 music
1.0.0
Utilisez Vue pour imiter la version 163 Music Client.
Le plan d'origine était d'imiter toutes les pages, mais en raison de l'API d'interface limitée de NetEase, les pages de mise en œuvre sont également limitées.
L'accès mobile n'est pas recommandé.
La hauteur de la page est 670px , 1366 X 768 Résolution et ci-dessous pour mieux parcourir en plein écran avec F11
issue de bienvenue, pr , star ou follow ! Je continuerai à open source des projets plus intéressants
Recommander un outil de recherche de livres écrits par React Family Bucket
Cliquez pour entrer
Plus d'effets GIF
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware est un middleware pour le proxy HTTP, qui transmet les demandes HTTP et implémente les demandes de domaine transversal
store.js est une grande roue qui gère localStorage . Le localStorage natif ne prend en charge que le stockage des types de chaînes. Une fois la roue encapsulée, il peut stocker directement Array , Object , function , Set et d'autres types.
bibliothèque d'animation animate.css CSS
Composant de vue-slider-component
Outil de test d'interface 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/
Entrez les mots clés de recherche,回车键pour rechercher ou cliquez sur放大镜
La quantité de lecture MV obtenue via l'interface API est fondamentalement inexacte, et la raison n'a pas encore été trouvée. La quantité de lectures des autres types est exacte.
|
|—— 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 静态资源目录
Le projet utilise l'interface de NetEase Dad et doit utiliser http-proxy-middleware pour le transfert. Dans l'environnement de développement, vous devez ajouter la configuration suivante dev dans config/index.js
proxyTable: {
'/api': {
target: 'http://music.163.com',
changeOrigin: true,
headers: {
Referer: 'http://music.163.com/'
}
}
}
En environnement réel, configuration côté serveur
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);
Les données renvoyées sont déconstruites dans le répertoire js src/components/deal/ , par exemple, les résultats de recherche uniques sont déconstruits.
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 est situé dans src/components/store
La gestion de la configuration du routage vue-router est située dans src/components/router
Le filtre personnalisé est situé dans src/components/filters/ répertoire
L'interface musicale NetEase Cloud vient de http://moonlib.com/606.html
