vue 163 music
1.0.0
Используйте Vue, чтобы подражать версии клиента 163 музыки.
Первоначальный план состоял в том, чтобы имитировать все страницы, но из -за ограниченного интерфейса API NetEase страницы реализации также ограничены.
Мобильный доступ не рекомендуется.
Высота страницы составляет 670px , 1366 X 768 разрешение, а ниже лучше просмотреть на полном экране с F11
Добро issue , pr , star или follow ! Я буду продолжать открывать более интересные проекты
Рекомендую инструмент преследования книги, написанный Bucket Eact Family Bucket
Нажмите, чтобы ввести
Больше эффектов GIF
vue + vuex + vue-router + vue-resource
express
http-proxy-middleware -это промежуточное программное обеспечение для HTTP Proxy, которое направляет 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/
Введите ключевые слова поиска,回车键для поиска или нажмите значок放大镜
Количество воспроизведения 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/ Directory
Интерфейс Cloud Music Netease поступает с http://moonlib.com/606.html
