vue 163 music
1.0.0
استخدم VUE لتقليد إصدار عميل الموسيقى 163.
كانت الخطة الأصلية هي تقليد جميع الصفحات ، ولكن بسبب محدودية واجهة برمجة تطبيقات الواجهة من Netease ، فإن صفحات التنفيذ محدودة أيضًا.
لا ينصح الوصول إلى الهاتف المحمول.
ارتفاع الصفحة هو 670px ، 1366 X 768 دقة وأسفل من الأفضل للتصفح في ملء الشاشة مع F11
مرحبًا بك issue ، pr ، star أو follow ! سأستمر في فتح مشاريع أكثر إثارة للمصدر
أوصي بأداة مطاردة للكتاب كتبها دلو عائلة React
انقر للدخول
المزيد من الآثار GIFs
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware هو برامج وسيطة لوكيل HTTP ، والتي توجيه طلبات HTTP وتنفيذ طلبات المائدة عبر المجال
store.js هي عجلة رائعة تتعامل مع localStorage . يدعم localStorage الأصلية فقط تخزين أنواع السلسلة. بعد تغليف العجلة ، يمكنها تخزين Array Object function Set الأخرى مباشرة.
مكتبة الرسوم المتحركة CSS CSS animate.css
vue-slider-component 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/ الدليل ، على سبيل المثال ، يتم تفكيك نتائج البحث الفردي.
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 من http://moonlib.com/606.html
