# Music-Player

**Repository Path**: Atopos17/music-player

## Basic Information

- **Project Name**: Music-Player
- **Description**: Java期末作业，一个基于Javalin框架和vue框架的音乐播放器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-02-20
- **Last Updated**: 2025-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MusicPlayer - 在线音乐播放器

一个基于 Vue 3 + TypeScript + Java 开发的在线音乐播放器，支持音乐播放、歌单管理、用户系统等功能。

学校的 Java 期末作业，历时一个半月。



## 项目预览

![首页界面-展示热门音乐和最近播放](img/home.png)

  首页界面 - 展示热门推荐音乐和用户最近播放的音乐

  

![音乐播放界面-支持歌词同步显示](img/music.png)

  音乐播放界面 - 支持歌词同步显示和音效调节

  ​
![搜索界面-实时搜索建议](img/search.png)

  搜索界面 - 支持实时搜索建议

  

![歌单列表-展示用户创建的歌单](img/playlist.png)

  歌单列表界面 - 展示用户创建和收藏的歌单

  

![歌单详情-展示歌单内的音乐](img/playlist_detail.png)

  歌单详情界面 - 展示歌单信息和包含的音乐列表

  

![音乐库-浏览所有音乐](img/library.png)

音乐库界面 - 支持浏览和管理所有音乐

  ​
![个性化设置-主题色和背景设置](img/update.png)

  资源界面 - 允许用户上传歌曲

  


## 项目

1. 前端：
   - 🎨 Vue3 + TypeScript类型检查，代码质量up
   - 🎵 Web Audio API实现专业音效处理
   - 🌈 响应式设计，支持多端适配
   - 🎯 组件化开发，代码复用性强

2. 后端：
   - ⚡ 轻量级Javalin框架，启动快速
   - 🔒 JWT + BCrypt确保安全性
   - 📦 文件系统+数据库混合存储

3. 功能：
   - 🎨 支持自定义主题色，个性化设置
   - 🎵 HTML5 Web Audio API 音效处理，多种音效模式
   - 🔍 实时搜索提示
   - 📋 歌单社交分享

## 环境依赖

- Node >= 16.0.0
- npm >= 8.0.0
- Java >= 8
- Maven >= 3.6
- MySQL >= 8.0


## 技术栈

### 前端

- Vue 3：渐进式JavaScript框架
  - Vite：vue平台
  - Pinia：Vue状态管理
  - Vue Router：Vue路由
  - Element Plus：组件库
- TypeScript：类型化JavaScript
- SCSS：CSS预处理器
- Axios：Ajax请求发送
- Web Audio API

### 后端

- Java
- Javalin：轻量级Web框架
- HikariCP：高性能数据库连接
- MySQL：关系型数据库
- JWT：用户认证
- BCrypt：密码加密
- JAudiotagger：音频文件处理

## 启动


### 数据库配置

1. 进入数据库表结构`schema.sql`文件所在目录
```bash
cd server/music-player/
```
2. 创建数据库
```sql
CREATE DATABASE music_server;
```
3. 导入数据库表结构
```bash
mysql -u username -p music_server < schema.sql
```
4. 修改数据库配置
- 配置文件位置：`server/music-player/src/data/MySQL.conf`

```properties
ip=localhost
port=3306
user=your_username
password=your_password
```

> 详细的表结构定义请查看 `schema.sql`

### 前端启动

```bash
# 进入前端目录
cd client/music-player/
# 安装依赖
npm install
# 启动前端开发服务器
npm run dev
```
> 默认启动在 3000 端口。如需修改，请在 `vite.config.ts` 中配置:
- `client/music-player/vite.config.ts`：

```typescript
server: {
  port: 3000,  // 修改这里的端口号
  host: true,
  strictPort: true
}
```

### 后端启动

```bash
# 进入后端目录
cd server/music-player/
# 打包
mvn package
# 运行
java -jar target/music-api-1.0-SNAPSHOT.jar
```
> 默认启动在 4000 端口。如需修改:
> 1. 修改 `Main.java` 中的 `start(4000)` 
> 2. 同时修改前端 `src/config/index.ts` 中的 `BASE_URL` 端口号，这决定前端请求后端api的地址

- `client/music-player/src/config/index.ts`：
```typescript
export const API_CONFIG = {
  BASE_URL: 'http://127.0.0.1:4000',  // 修改这里的端口号
  API_PREFIX: '/api'
}
```
- `server/music-player/src/main/java/Main.java`：
```java
Javalin app = Javalin.create(config -> {
      // ...
  }).start(4000);  // 修改这里的端口号
```

## 项目结构

### 前端结构

```bash
client/music-player/
├── public/ # 静态资源
├── src/
│   ├── api/ # API 接口
│   ├── components/ # 组件
│   │   ├── Auth/ # 认证相关组件
│   │   ├── Detail/ # 详情页组件
│   │   ├── Footer/ # 底部组件
│   │   ├── Header/ # 头部组件
│   │   ├── Home/ # 首页组件
│   │   ├── Library/ # 音乐库组件
│   │   ├── PlayBar/ # 播放控制栏
│   │   ├── PlayList/ # 播放列表组件
│   │   ├── Search/ # 搜索组件
│   │   └── Theme/ # 主题色设置组件
│   ├── config/ # 配置文件
│   ├── router/ # 路由配置
│   ├── stores/ # Pinia状态管理
│   ├── styles/ # 样式文件
│   ├── utils/ # 工具函数
│   └── views/ # 页面主视图组件
├── index.html
└── package.json
```

### 后端结构

```bash
server/music-player/
├── src/
│   ├── controller/ # 控制器层
│   ├── service/ # 服务层
│   ├── dao/ # 数据访问层
│   ├── entity/ # 实体类
│   ├── util/ # 工具类
│   └── Main.java # 程序入口
├── pom.xml
└── storage/ # 文件存储目录
    ├── covers/ # 图片
    ├── lyrics/ # 歌词文件
    └── music/ # 音乐文件
```