netease-music-spa

KO | EN

gitlite — search

#javascript #ai #golang #machine-learning #rust #deep-learning #linux #docker #macos #nodejs #java #awesome-list #ios #open-source

netease-music-spa

(★ 15)

模仿网易云音乐在线网站

netease-music-spa 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# netease-music-spa

> 基于vue框架的模仿网易云音乐web网站，利用[Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)提供的api，UI框架[ant-design-vue](https://vue.ant.design/docs/vue/introduce-cn/)。

## 后端API

> 请移步到[Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi),感谢大佬！

## 主要功能

+ 用户

1.手机密码登录

![login](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnjbqt89j20eh07zglq.jpg)

2.用户基本信息

+ 首页

1.banner

![banner](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnjvfedvj210t0bz3zp.jpg)

2.推荐歌单

![recommend-playlist](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnk6lvxej20vu0llgoz.jpg)

3.最新音乐

![newest-songs](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnkihjehj20v50dljsa.jpg)

4.推荐mv

![recommend-mvs](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnl0pdd2j20ux07at9c.jpg)

5.推荐电台节目

![recommend-programs](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnlbhqgxj20uv07ajs2.jpg)

+ 排行榜

1.各类排行榜

![ranking-list](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnloe6a2j20xp0mu40n.jpg)

2.排行榜详情页

![ranking-list-detail](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnm3oi6aj20wu0oomyg.jpg)

+ mv

1.mv详情页（播放mv，mv评论）

![mv](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnmj265vj20sd0p6gns.jpg)

+ 歌单

1.首页展示全部分类推荐歌单

![playlist](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnmz52rjj21hc1c8b2a.jpg)

2.点击不同分类展示推荐歌单

![category](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnnc81htj207p08fwel.jpg)

3.歌单详情页（单首播放/歌单加入播放列表）

![detail](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnnu51h1j20wn0pgtam.jpg)

+ 主播电台

1.电台分类（点击展示分类推荐）

![dj-category](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnoaptjvj20we0ki3zx.jpg)

2.精彩节目推荐

![program-recommend](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnoplqssj20vb0d2dgv.jpg)

3.精选电台

![dj-recommend](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnp42wwej20vw0dnjth.jpg)

4.今日优选

![today-recommend](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnpk33zkj20vt07xt9a.jpg)

5.电台台主详情页（单首节目播放/所有节目加入播放列表）

![detail](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnq0ipk7j20wk0pigo0.jpg)

+ 歌手

1.首页展示推荐歌手

![artists](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnqjg7h2j21hc1314qp.jpg)

2.歌手分类

3.歌手详情页（热门歌曲、mv、专辑、歌手简介）

![detail](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnr7pdupj20q60nwta2.jpg)

+ 新碟上架

1.最新专辑

![newest-albums](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnrt5cbdj21hc2044qr.jpg)

2.全部新碟

3.专辑详情页（单首播放/专辑加入播放列表）

![detail](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnsbk3ybj20wg0phgnc.jpg)

+ 我的音乐（需要登录）

1.我创建的歌单

2.我收藏的歌单

3.歌单详情页（单首播放/歌单加入播放列表）

4.每日推荐歌曲、歌单

![my-music](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnsl94oij21gm0qracc.jpg)

+ 音乐详情页

1.歌曲基本信息

2.歌曲评论（可评论）

3.相似歌曲推荐

4.包含这首歌的歌单

![detail](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnt3vn9vj20zc0qjmzx.jpg)

+ 搜索

1.歌曲搜索

![search-songs](http://ww1.sinaimg.cn/large/826d6e88ly1g6gntpnpwaj20wt0kcwfm.jpg)

2.专辑搜索

![search-albums](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnu19x6sj20r00lgwgu.jpg)

3.歌单搜索

![search-playlists](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnudn21bj20qm0n5ad7.jpg)

4.歌手搜索

![search-artists](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnus6j7rj20qq0lh76q.jpg)

5.MV搜索

![search-mvs](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnv7nh86j20q20m3ac8.jpg)

6.主播电台

![search-djs](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnviezcaj20ps0lidi1.jpg)

+ 播放器

![player](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnvrr2hdj20wm0290st.jpg)

+ 播放列表

1.展示播放列表所有歌曲

2.支持点击单首播放、删除

3.当前播放歌曲根据专辑封面颜色自适应背景色高亮

4.清空播放列表

![playlist](http://ww1.sinaimg.cn/large/826d6e88ly1g6gnw3pc1ej21gy0qtdiu.jpg)

+ 更多功能开发中...

## 播放器

> [音频播放器Aplayer](https://github.com/MoePlayer/APlayer)
>
> [视频播放器chimee](http://chimee.org/)

## windows部署运行 - 使用nginx

+ 安装nginx
+ 配置nginx开启gzip，接口转发
+ npm run build
+ 拷贝dist目录下的文件到nginx项目启动目录
  
```
gzip  on;

gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php;

location ~ /api/{
   rewrite ^/api/(.*)$ /$1 break;
   proxy_pass xxx(后端地址);
}
```

netease-music-spa

netease-music-spa 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

netease-music-spa

netease-music-spa 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README