197 lines
9.4 KiB
Markdown
197 lines
9.4 KiB
Markdown
# wangyiyun(网抑云)
|
||
|
||
> wangyiyun 是一款web端的"缝合怪"播放器，具有音乐搜索、播放、歌词显示、播放历史、查看歌曲评论、网易云用户歌单播放同步等功能，此项目是对本人毕设项目的重新修改再发布，之前的git记录太乱了，并且上传过许多乱七八糟的大文件，使得clone时会把大文件的上传记录给clone下来，从2024年1月开始，网易云开始严查NeteaseCloudMusicApi，此项目已放入私人仓库。
|
||
|
||
模仿 QQ 音乐网页版界面，采用 `flexbox` 和 `position` 布局；<br />
|
||
wangyiyun 虽然是响应式，但主要以 PC 端为主，移动端只做相应适配；<br />
|
||
本项目没有做兼容性的处理，基本上只要是现代浏览器都能访问，IE除外
|
||
|
||
- [在线演示地址](https://music.icoding.fun/)
|
||
|
||
## 免责声明
|
||
|
||
1. 本项目是一个**毕业设计项目**，旨在**只用于完成毕业设计**。
|
||
|
||
2. 本项目**不提供任何音频存储和贩卖服务**。所有音频内容均由网易云音乐的第三方 API 提供，**仅供个人学习研究使用，严禁将其用于任何商业及非法用途**，版权归原始平台所有。
|
||
|
||
3. 使用本项目造成的任何纠纷、责任或损失**由使用者自行承担**。本项目开发者不对因使用本项目而产生的任何直接或间接责任承担责任，并保留追究使用者违法行为的权利。
|
||
|
||
4. **请使用者在使用本项目时遵守相关法律法规，不得将本项目用于任何商业及非法用途**。如有违反，一切后果由使用者自负。同时，使用者应该自行承担因使用本项目而带来的风险和责任。
|
||
|
||
5. 本项目使用了网易云音乐的[第三方 API 服务](https://github.com/Binaryify/NeteaseCloudMusicApi)，对于该第三方 API 服务造成的任何问题，本项目开发者不承担责任。
|
||
|
||
6. 自2024年1月开始，网易云已经将NeteaseCloudMusicApi封停，之后再也不会更新，此项目后期可能无法使用，或者改为一款本地播放源的项目。
|
||
|
||
请在使用本项目之前仔细阅读以上免责声明，并确保您已完全理解并接受其中的所有条款和条件。如果您不同意或无法遵守这些规定，请不要使用本项目。
|
||
|
||
## 安装与使用
|
||
|
||
### 检查 node 版本
|
||
|
||
```sh
|
||
# 查看 node 版本，确保 node 版本高于 12 版本
|
||
node -v
|
||
```
|
||
|
||
### wangyiyun
|
||
|
||
```sh
|
||
# 下载 wangyiyun
|
||
git clone https://git.icoding.fun/yigencong/wangyiyun
|
||
|
||
# 进入 wangyiyun 播放器目录
|
||
cd wangyiyun
|
||
|
||
# 安装依赖 推荐使用 pnpm
|
||
pnpm install
|
||
# 或者
|
||
npm install
|
||
|
||
# 本地运行 wangyiyun
|
||
npm run serve
|
||
|
||
# 编译打包
|
||
npm run build
|
||
```
|
||
|
||
### 后台 api 服务（本地开发）
|
||
|
||
[网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi)
|
||
|
||
```sh
|
||
# 下载 NeteaseCloudMusicApi
|
||
git clone --depth=1 https://github.com/Binaryify/NeteaseCloudMusicApi
|
||
|
||
# 进入 NeteaseCloudMusicApi 后台服务目录
|
||
cd NeteaseCloudMusicApi
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 运行后台 api 服务 访问 http://localhost:3000
|
||
node app.js
|
||
```
|
||
|
||
### 注意点
|
||
|
||
**运行 wangyiyun 后无法获取音乐请检查后台 `api` 服务是否启动(即控制台请求报 404)**<br />
|
||
**线上部署不是直接将整个项目丢到服务器，再去运行 `npm run serve` 命令**<br />
|
||
**项目打包前 `VUE_APP_BASE_API_URL` 必须改后台 `api` 服务地址为线上地址，不能是本地地址**
|
||
|
||
### docker一键化部署
|
||
|
||
```sh
|
||
docker pull yigencong/wangyiyun:v1.0
|
||
docker run -d -p 3001:3001 --name wangyiyun yigencong/wangyiyun:v1.0
|
||
```
|
||
|
||
## 技术栈
|
||
|
||
- [Vue Cli](https://cli.vuejs.org/zh/) Vue 脚手架工具
|
||
- [Vue 2.x](https://v2.cn.vuejs.org/) 核心框架
|
||
- [Vue Router](https://router.vuejs.org/zh/) 页面路由
|
||
- [Vuex](https://vuex.vuejs.org/zh/) 状态管理
|
||
- ES6 （JavaScript 语言的下一代标准）
|
||
- Less（CSS 预处理器）
|
||
- Axios（网络请求）
|
||
- FastClick（解决移动端 300ms 点击延迟）
|
||
|
||
## 项目结构目录图（使用 tree 生成）
|
||
|
||
<details>
|
||
<summary>展开查看</summary>
|
||
<pre><code>
|
||
├── public // 静态资源目录
|
||
│ └─index.html // 入口 html 文件
|
||
├── screenshots // 项目截图
|
||
├── src // 项目源码目录
|
||
│ ├── api // 数据交互目录
|
||
│ │ └── index.js // 获取数据
|
||
│ ├── assets // 资源目录
|
||
│ │ └── background // 启动背景图目录
|
||
│ │ └── img // 静态图片目录
|
||
│ ├── base // 公共基础组件目录
|
||
│ │ ├── wyy-dialog
|
||
│ │ │ └── wyy-dialog.vue // 对话框组件
|
||
│ │ ├── wyy-icon
|
||
│ │ │ └── wyy-icon.vue // icon 组件
|
||
│ │ ├── wyy-loading
|
||
│ │ │ └── wyy-loading.vue // 加载动画组件
|
||
│ │ ├── wyy-no-result
|
||
│ │ │ └── wyy-no-result.vue // 暂无数据提示组件
|
||
│ │ ├── wyy-progress
|
||
│ │ │ └── wyy-progress.vue // 进度条拖动组件
|
||
│ │ └── wyy-toast
|
||
│ │ ├── index.js // wyy-toast 组件插件化配置
|
||
│ │ └── wyy-toast.vue // 弹出层提示组件
|
||
│ ├── components // 公共项目组件目录
|
||
│ │ ├── lyric
|
||
│ │ │ └── lyric // 歌词和封面组件
|
||
│ │ └── wyy-header
|
||
│ │ │ └── wyy-header.vue // 头部组件
|
||
│ │ ├── music-btn
|
||
│ │ │ └── music-btn.vue // 按钮组件
|
||
│ │ ├── music-list
|
||
│ │ │ └── music-list.vue // 列表组件
|
||
│ │ └── volume
|
||
│ │ └── volume.vue // 音量控制组件
|
||
│ ├── pages // 页面组件目录
|
||
│ │ ├── comment
|
||
│ │ │ └── comment.vue // 评论
|
||
│ │ ├── details
|
||
│ │ │ └── details.vue // 排行榜详情
|
||
│ │ ├── historyList
|
||
│ │ │ └── historyList.vue // 我听过的（播放历史）
|
||
│ │ ├── playList
|
||
│ │ │ └── playList.vue // 正在播放
|
||
│ │ ├── search
|
||
│ │ │ └── search.vue // 搜索
|
||
│ │ ├── topList
|
||
│ │ │ └── topList.vue // 排行榜页面
|
||
│ │ ├── userList
|
||
│ │ │ └── userList.vue // 我的歌单
|
||
│ │ ├── wangyiyun.js // 播放器事相关件绑定
|
||
│ │ └── music.vue // 播放器主页面
|
||
│ ├── router
|
||
│ │ └── index.js // 路由配置
|
||
│ ├── store // vuex 的状态管理
|
||
│ │ ├── actions.js // 配置 actions
|
||
│ │ ├── getters.js // 配置 getters
|
||
│ │ ├── index.js // 引用 vuex，创建 store
|
||
│ │ ├── mutation-types.js // 定义常量 mutations 名
|
||
│ │ ├── mutations.js // 配置 mutations
|
||
│ │ └── state.js // 配置 state
|
||
│ ├── styles // 样式文件目录
|
||
│ │ ├── index.less // wangyiyun 相关基础样式
|
||
│ │ ├── mixin.less // 样式混合
|
||
│ │ ├── reset.less // 样式重置
|
||
│ │ └── var.less // 样式变量（字体大小、字体颜色、背景颜色）
|
||
│ ├── js // 数据交互目录
|
||
│ │ ├── axios.js // axios 简单封装
|
||
│ │ ├── hack.js // 修改 nextTick
|
||
│ │ ├── mixin.js // 组件混合
|
||
│ │ ├── song.js // 数据处理
|
||
│ │ ├── storage.js // localStorage 配置
|
||
│ │ └── util.js // 公用 js 方法
|
||
│ ├── App.vue // 根组件
|
||
│ ├── config.js // 配置文件（播放器默认配置、版本号等）
|
||
│ └── main.js // 入口主文件
|
||
└── vue.config.js // vue-cli 配置文件
|
||
|
||
</code></pre>
|
||
|
||
</details>
|
||
|
||
## 功能与界面
|
||
|
||
- 播放器
|
||
- 快捷键操作
|
||
- 歌词滚动
|
||
- 正在播放
|
||
- 排行榜
|
||
- 歌单详情
|
||
- 搜索
|
||
- 播放历史
|
||
- 查看评论
|
||
- 同步网易云歌单
|