# 在线音乐网站

**Repository Path**: qq28069933146/music

## Basic Information

- **Project Name**: 在线音乐网站
- **Description**: 该项目是基于网易云api实现的一个在线音乐播放网站,分为在线部分与用户个人部分。该项目的主要技术栈是vue3.2+ts+pinia+vue-router+elementui-plus,后续仍然会继续迭代功能
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-11-24
- **Last Updated**: 2023-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
## 项目描述

1. 本项目是基于网易云开源 api 实现的一个在线播放网站，涵盖在线部分与用户个人数据部分，主要技术栈是 vue3.2+ts+pinia+vue-router+elementui-plus,主要实现了首页音乐推荐，音乐馆，音视频播放，歌词同步，二维码登录，歌手详情查看，综合搜索，歌单，深色模式与浅色模式等等
2. 生产环境下部署api过后无法登陆，属于网易云api的问题
---

## 项目说明

1. 本项目仅供学习，请不要用于其它任何用途
2. 本项目不提供后端服务，要使用后端请去https://binaryify.github.io/NeteaseCloudMusicApi下载后端
3. 项目的后端接口为 http://localhoust 3000，要修改可以去 request.ts 修改
4. ui文件夹是我为了放置 md 图片资源的，可用删除

---

## 项目启动

1. 安装后端，然后 Node app.js 启动后端
2. npm install 下载依赖
3. npm run dev 运行项目

---

## 项目截图

---

### 无需登陆部分

1. 首页
   ![首页](./ui/%E9%A6%96%E9%A1%B5.png)
2. 歌单页
   ![歌单详情页](./ui/%E6%AD%8C%E5%8D%95%E9%A1%B5.png)
3. 视频推荐页
   ![视频推荐页](./ui/%E8%A7%86%E9%A2%91%E9%A1%B5.png)
4. 视频播放页
   ![视频播放页](./ui/%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E9%A1%B5.png)
5. 歌手页
   ![歌手页](./ui/%E6%AD%8C%E6%89%8B%E9%A1%B5.png)
6. 歌手详情页，在此页面可用查看歌手的专辑，视频，详情，热门歌曲
   ![歌手详情页](./ui/%E6%AD%8C%E6%89%8B%E8%AF%A6%E6%83%85%E9%A1%B5.png)
7. 搜索页，可根据关键词搜索歌曲，歌单，歌手，视频，专辑
   ![搜索页](./ui/%E6%90%9C%E7%B4%A2%E9%A1%B51.png)
8. 歌曲详情页
   ![歌曲详情页](./ui/%E6%AD%8C%E6%89%8B%E8%AF%A6%E6%83%85%E9%A1%B5.png)
9. 音乐馆页
   ![音乐馆页](./ui/%E9%9F%B3%E4%B9%90%E9%A6%86.png)
10. 黑夜模式
    ![黑夜模式](./ui/%E9%BB%91%E5%A4%9C%E6%A8%A1%E5%BC%8F.png)

---

### 需要登陆部分

1. 用户喜欢的音乐页
   ![喜欢音乐页](./ui/%E7%94%A8%E6%88%B7%E5%96%9C%E6%AC%A2%E9%A1%B5.png)
2. 用户最近播放页，在此页面可查看用户最近播放的音乐视频
   ![最近播放页](./ui/%E6%9C%80%E8%BF%91%E6%92%AD%E6%94%BE%E9%A1%B5.png)