vue 163 music
1.0.0
ใช้ Vue เพื่อเลียนแบบรุ่นไคลเอนต์ 163 เพลง
แผนเดิมคือการเลียนแบบทุกหน้า แต่เนื่องจาก API อินเตอร์เฟสที่ จำกัด ของ NetEase หน้าการใช้งานจึงมี จำกัด เช่นกัน
ไม่แนะนำให้เข้าถึงมือถือ
ความสูงของหน้าคือ 670px , 1366 X 768 ความละเอียดและด้านล่างดีกว่าที่จะเรียกดูเต็มหน้าจอด้วย F11
issue ยินดีต้อนรับ pr star หรือ follow ! ฉันจะยังคงโอเพนซอร์สโครงการที่น่าสนใจมากขึ้น
แนะนำเครื่องมือไล่หนังสือที่เขียนโดย React Family Bucket
คลิกเพื่อเข้าสู่
เอฟเฟกต์เพิ่มเติม gifs
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware เป็นมิดเดิลแวร์สำหรับ http proxy ซึ่งส่งต่อคำขอ HTTP และดำเนินการตามคำขอข้ามโดเมน
store.js เป็นล้อที่ยอดเยี่ยมที่จัดการ localStorage localStorage ดั้งเดิมรองรับการจัดเก็บประเภทสตริงเท่านั้น หลังจากที่ล้อถูกห่อหุ้มแล้วสามารถจัดเก็บ Array Object function Set โดยตรงและประเภทอื่น ๆ
animate.css CSS Animation Library
ส่วนประกอบตัวเลื่อน 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/
ป้อนคำหลักค้นหา回车键เพื่อค้นหาหรือคลิกไอคอน放大镜
จำนวนการเล่น MV ที่ได้จากอินเตอร์เฟส API นั้นไม่ถูกต้องและยังไม่พบเหตุผล จำนวนการเล่นประเภทอื่น ๆ นั้นถูกต้อง
|
|—— 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 สำหรับการส่งต่อ ในสภาพแวดล้อมการพัฒนาคุณต้องเพิ่มการกำหนดค่าต่อไปนี้ใน dev ใน config/index.js
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 ตั้งอยู่ในไดเรกทอรี src/components/store
การจัดการการกำหนดค่าการกำหนดเส้นทาง vue-router อยู่ในไดเรกทอรี src/components/router
ตัวกรองที่กำหนดเองอยู่ใน src/components/filters/ ไดเร็กทอรี
NetEase Cloud Music Interface มาจาก http://moonlib.com/606.html
