vue 163 music
1.0.0
Use Vue para imitar la versión del cliente 163 Music.
El plan original era imitar todas las páginas, pero debido a la API de interfaz limitada de NetEase, las páginas de implementación también son limitadas.
No se recomienda el acceso móvil.
La altura de la página es 670px , resolución de 1366 X 768 y a continuación es mejor navegar en pantalla completa con F11
¡Bienvenido issue , pr , star o follow ! Continuaré abierto de código. Proyectos más interesantes
Recomendar una herramienta de búsqueda de libros escrita por React Family Bucket
Haga clic para ingresar
Más efectos gifs
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware es un middleware para el proxy HTTP, que reenvía solicitudes HTTP e implementa solicitudes de dominio cruzado
store.js es una gran rueda que maneja localStorage . El Native localStorage solo admite los tipos de cuerdas de almacenamiento. Después de encapsular la rueda, puede almacenar directamente Array , Object , function , Set y otros tipos.
animate.css CSS Animation Library
componente deslizante vue-slider-component
Herramienta de prueba de interfaz 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/
Ingrese las palabras clave de búsqueda,回车键para buscar o haga clic en放大镜
La cantidad de reproducción de MV obtenida a través de la interfaz API es básicamente inexacta, y la razón aún no se ha encontrado. La cantidad de reproducciones de otros tipos es precisa.
|
|—— 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 静态资源目录
El proyecto utiliza la interfaz NetEte Dad y necesita usar http-proxy-middleware para reenviar. En el entorno de desarrollo, debe agregar la siguiente configuración al dev en config/index.js
proxyTable: {
'/api': {
target: 'http://music.163.com',
changeOrigin: true,
headers: {
Referer: 'http://music.163.com/'
}
}
}
En el entorno real, la configuración del lado del servidor
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);
Los datos devueltos se deconstruyen en el js src/components/deal/ Directorio, por ejemplo, los resultados de búsqueda únicos están deconstruidos.
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 se encuentra en src/components/store
La gestión de configuración de enrutamiento vue-router se encuentra en src/components/router
El filtro personalizado se encuentra en src/components/filters/
La interfaz de Música en la nube de NetEase proviene de http://moonlib.com/606.html
