vue 163 music
1.0.0
VUE를 사용하여 163 Music Client 버전을 모방하십시오.
원래 계획은 모든 페이지를 모방하는 것이었지만 Netease의 제한된 인터페이스 API로 인해 구현 페이지도 제한됩니다.
모바일 액세스 권장은 권장되지 않습니다.
페이지 높이는 670px , 1366 X 768 해상도이며 아래는 F11로 전체 화면에서 찾아 보는 것이 좋습니다.
환영 issue , pr , star 또는 follow ! 더 흥미로운 프로젝트를 계속 오픈 할 것입니다
React Family Bucket이 작성한 책을 쫓는 도구를 추천하십시오
입력하려면 클릭하십시오
더 많은 효과 GIF
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware 는 HTTP 프록시의 미들웨어로, HTTP 요청을 전달하고 크로스 도메인 요청
store.js 는 localStorage 처리하는 훌륭한 휠입니다. 기본 localStorage 문자열 유형 저장 만 지원합니다. 휠이 캡슐화 된 후 Array , Object , function , Set 및 기타 유형을 직접 저장할 수 있습니다.
animate.css CSS 애니메이션 라이브러리
vue-slider-component 슬라이더 구성 요소
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/
검색 키워드를 입력하거나 검색을 위해回车键하거나放大镜아이콘을 클릭하십시오.
API 인터페이스를 통해 얻은 MV 재생량은 기본적으로 부정확하며 그 이유는 아직 발견되지 않았습니다. 다른 유형의 재생량은 정확합니다.
|
|—— 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 静态资源目录
이 프로젝트는 Netease Dad의 인터페이스를 사용하며 전달을 위해 http-proxy-middleware 사용해야합니다. 개발 환경에서는 config/index.js 에서 다음 구성을 dev 에 추가해야합니다.
proxyTable: {
'/api': {
target: 'http://music.163.com',
changeOrigin: true,
headers: {
Referer: 'http://music.163.com/'
}
}
}
실제 환경에서 서버 측 구성
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);
반환 된 데이터는 js src/components/deal/ Directory에서 해체됩니다. 예를 들어 단일 검색 결과가 해체됩니다.
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는 src/components/store 디렉토리에 있습니다
vue-router 라우팅 구성 관리는 src/components/router 디렉토리에 있습니다.
사용자 정의 필터는 src/components/filters/ 디렉토리에 있습니다
Netease Cloud Music 인터페이스는 http://moonlib.com/606.html에서 제공됩니다
