# 音乐PC端-前端

**Repository Path**: zhu-liang/music-pc-terminal---front-end

## Basic Information

- **Project Name**: 音乐PC端-前端
- **Description**: 对之前的高仿网易云音乐系统的重构，代码更清晰。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://117.72.189.56:82/#/discover/recommend
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-11
- **Last Updated**: 2025-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, Vue, 音乐系统, TypeScript

## README

## 技术栈

本项目是对以前自己的项目 https://gitee.com/zhu-liang/cloud-music-pc 的重构。
​ 本项目由vite+vue3+pinia+ts+element-plus写的高仿网易云音乐，实现了网易云音乐的主要核心功能。

## 后端

本项目后端来自:https://binaryify.github.io/NeteaseCloudMusicApi/
该项目已经被网易云律师函警告版权，源码下架，但是接口没有失效，可以在Github上找到其他用户备份的曾经的开源代码。

## 配置

本项目大部分配置不需要改，2025年5月前都能直接运行。5月后后端服务器到期，你需要自己部署NeteaseCloudMusicApi后端，修改后端接口地址。
@/vite.config.ts

```js
// 配置代理
  server: {
    proxy: {
      '/api': {
        target: 'http://8.137.110.245:3000/', # 后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
```

@/utils/request.ts
这个文件里URL需要修改为新的后端服务器地址

## 本地部署本项目

- pull

```sh
git pull https://gitee.com/zhu-liang/music-pc-terminal---front-end
```

或者直接下载ZIP

- 安装

```sh
npm i
#或者
yarn
```

- 运行

```sh
npm run dev
yarn dev
```

- 打包

```sh
npm run build
yarn build
```

## 功能介绍

### 菜单

#### 发现音乐(主页)

- 个性推荐 （推荐歌单）
- 歌单 （歌单分类/多标签分类）
- 排行榜
- 歌手（歌手分类、热门歌手）

#### MV视频

- 视频分类
- MV展示列表

#### 每日推荐

- 每日推荐歌曲歌单（需要登陆）

#### 个人信息

- 收藏歌单
- 创建歌单
- 关注列表
- 粉丝列表
- 动态（更新中）

#### 登录模块

- 自动生成二维码扫码登录 （实时刷新二维码）

- cookie 本地保存登录token记录，下次打开不用重新登录

#### 搜索模块

- 搜索歌曲
- 搜索歌单专辑
- 搜索歌手

#### 播放模块（技术难点）

- 歌曲播放时间绑定，随意拖拽进度条
- 音量控制
- 播放模式（随机，顺序，单曲循环）
- 播放列表

### 分页

#### 歌曲详情页(技术难点)

- 歌词滚动
- 唱片旋转
- 最新热评

#### 歌单详情页

- 播放、收藏、分享 交互设计
- 歌单评论
- 歌单歌曲列表
- 歌单介绍

#### 专辑详情页

- 同歌单详情页

#### 排行榜单详情页

- 同歌单详情页

#### 歌手详情页

- 热门歌曲
- 歌手自己MV
- 专辑
- 歌手介绍
- 关注交互

#### MV详情页

- MV播放
- 相关MV推荐列表
- 评论

#### 用户详情页

- 关注、粉丝列表
- 创建歌单
- 首次歌单

#### 评论模块

- 热门评论
- 最新评论
- 评论人用户详情页链接
- 发送评论
- 删除自己评论（有延迟）