vue 163 music
1.0.0
Use o Vue para imitar a versão do 163 Music Client.
O plano original era imitar todas as páginas, mas devido à API de interface limitada do NetEase, as páginas de implementação também são limitadas.
O acesso móvel não é recomendado.
A altura da página é de 670px , 1366 X 768 resolução e abaixo é melhor para navegar em tela cheia com F11
Bem -vindo issue , pr , star ou follow ! Continuarei a abrir projetos mais interessantes
Recomende uma ferramenta de busca de livros escrita por React Family Bucket
Clique para inserir
Mais gifs de efeitos
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware é um middleware para proxy HTTP, que encaminha solicitações HTTP e implementa solicitações de domínio cruzado
store.js é uma ótima roda que lida com localStorage . O localStorage nativo suporta apenas o armazenamento de tipos de string. Depois que a roda é encapsulada, ela pode armazenar diretamente Array , Object , function , Set e outros tipos.
animate.css CSS Animation Library
componente vue-slider-component
Ferramenta de teste de 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/
Digite as palavras -chave da pesquisa,回车键para pesquisar ou clique放大镜
A quantidade de reprodução de MV obtida através da interface da API é basicamente imprecisa e o motivo ainda não foi encontrado. A quantidade de reprodução de outros tipos é 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 静态资源目录
O projeto usa a interface do NetEase Dad e precisa usar http-proxy-middleware para encaminhamento. No ambiente de desenvolvimento, você precisa adicionar a seguinte configuração ao dev no config/index.js
proxyTable: {
'/api': {
target: 'http://music.163.com',
changeOrigin: true,
headers: {
Referer: 'http://music.163.com/'
}
}
}
No ambiente real, a configuração do lado do 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);
Os dados retornados são desconstruídos no diretório js src/components/deal/ , por exemplo, os resultados de pesquisa única são desconstruídos.
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}
}
O gerenciamento de status vuex está localizado no diretório src/components/store
O gerenciamento de configuração de roteamento vue-router está localizado src/components/router
O filtro personalizado está localizado no src/components/filters/ diretório
A interface de música em nuvem netease vem de http://moonlib.com/606.html
