• Stars
    star
    788
  • Rank 57,762 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

【停止维护】网易云音乐web版,支持PC端常用功能,localStorage保存播放列表

vue-163-music(网易云音乐web版)

用vue仿写163音乐客户端版。

原计划仿写完所有页面,碍于网易的接口API有限,实现页面也有限。

不推荐手机端访问。

页面高度为670px1366 X 768分辨率及其以下按F11全屏浏览效果更佳

欢迎issueprstar or follow!我将继续开源更多有趣的项目

推荐一个React全家桶写的 追书神器

在线版

点击进入

部分效果截图

3

更多效果gif图

工具&技能

vue + vuex+ vue-router + vue-resource

express

http-proxy-middleware 一个http代理的中间件,进行http请求转发,实现跨域请求

store.js 一个非常棒的处理localStorage的轮子,原生localStorage只支持存储字符串类型,轮子进行封装后可以直接存储ArrayObjectfunctionSet等类型

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
  • 歌单(左键点击进入歌单列表)
  • 主播电台 (单期节目部分单击或双击歌曲添加至音乐播放列表,目前不存在版权问题)
  • 用户

歌单

  • 播放全部

播放列表

  • 切歌(单击切歌)
  • 删歌(鼠标悬浮在要删除的歌曲上,点击右侧小X)
  • 清空播放列表
  • 本地缓存播放列表

一些问题

通过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 静态资源目录

一些注意事项

项目中使用了网易爸爸的接口,需要使用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/目录下,比如对单曲搜索结果进行解构

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/目录下

网易云音乐接口来源于http://moonlib.com/606.html

More Repositories

1

oho-reader

【停止维护】哦豁阅读器!API源自追书神器,免费使用!填坑完成!使用react
JavaScript
569
star
2

hexo-theme-shana

what's a cool hexo theme!
Stylus
179
star
3

vue-image-scroll

a good vue-image-scroll component!
Vue
77
star
4

terminal-translate

a terminal-translate tool
JavaScript
75
star
5

frontend-guidelines-zh-CN

本文原文是一篇来自Github上@bendc的6,539星的文章,在此声明,原作者保有所有权利,本文仅供技术探讨学习。
65
star
6

websocket-express-webchat

【停止维护】基于websocket的一个简单的聊天室
JavaScript
36
star
7

archer-svgs

异步加载svg解决方案
TypeScript
27
star
8

Astraea

help developer output the typescript interfaces of api by swagger.json or json
TypeScript
16
star
9

wx-2048

微信小程序,还原游戏2048,目前实现部分功能
JavaScript
14
star
10

ShanaMaid.github.io

个人技术博客,欢迎探讨学习
HTML
9
star
11

shaco

a plugin helps render view automatically!
JavaScript
9
star
12

Kurumi

Install npm dependencies that run directly in the browser!Imports source code URLs(it must support UMD)! most of all, It don't affect global variable as same as webpack
TypeScript
8
star
13

JX3Spider

剑网三那些事儿【已废弃】
5
star
14

xhr-proxy-plus

help proxy xhr, the same as axios interceptor
JavaScript
4
star
15

react-use-mobx

React hook for MobX and Mobx React!
TypeScript
4
star
16

fe-project-quanlity

3
star
17

CSDNSpider

PHP
3
star
18

mobx

mobx分享
JavaScript
3
star
19

baidu-tieba-api

api docs about baidu-tieba !
3
star
20

tieba-robot

百度贴吧机器人,自动回帖
PHP
2
star
21

koa-swagger-mock

It's a middleware for swagger-mock!
JavaScript
2
star
22

Git.php

you can use git by php throught this !Git的PHP库
PHP
2
star
23

dependency-parse-plugin

Detect dependencies of each file in modules compiled with Webpack
JavaScript
2
star
24

akua

It can solve your nested if-tree, make it become chainable if!
TypeScript
2
star
25

copy-icon-font

JavaScript
2
star
26

chaos

阅读、音乐趣味app,采用rn开发
Objective-C
1
star
27

oho-reader-RN

哦豁阅读器RN版
Objective-C
1
star