# HatsuneMiku

**Repository Path**: karsonZ/hastsune-miku

## Basic Information

- **Project Name**: HatsuneMiku
- **Description**: HatsuneMiku是一款专为助眠音频内容打造的后台管理系统，致力于为平台运营者提供高效、便捷、可扩展的音频资源管理能力。系统支持音频资源的上传、分类、标签管理、播放统计、用户反馈收集等多项功能，帮助内容管理者精细化运营助眠音频内容，提升用户睡眠体验与平台服务质量。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 1
- **Created**: 2025-08-04
- **Last Updated**: 2026-06-26

## Categories & Tags

**Categories**: multimedia

**Tags**: 音频, 助眠, 推荐

## README

### <font style="color:#404040;">项目介绍</font>

<font style="color:#404040;">云梦眠荐是项目旨在打造一个集 助眠（ASMR）音频播放、分享与管理 于一体的在线音频平台，为用户提供舒缓治愈的沉浸式听觉体验。系统支持 音频浏览、分类检索、收藏与稍后再听、播放记录与个性化推荐等功能，用户可在收听过程中 实时评论、点赞与分享，实现多维度互动体验。</font>

### <font style="color:#404040;">技术架构</font>

系统采用Java + Vue 技术栈，基于SpringBoot框架进行构建，采用前后端分离架构设计。

#### 前端技术选型

Vue3 + TypeScript + axios + Pinia + VueRouter + Element-Plus

[前端项目地址](https://gitee.com/karsonZ/hatsune-miku-front)

```vue
1、下载依赖
pnpm install

2、启动项目
pnpm dev
```

#### 后端技术选型

JDK 17  + Spring Boot + MyBatis-plus + Mysql + Redis + RabbitMq + minio

> 下载依赖，前往application.yaml 配置好 Mysql ，Redis ，RabbitMq就完事了
>
> 对象存储服务采用动态配置机制去管理端更改下配置

### 运行环境及项目框架

| JDK 17                         |
| ------------------------------ |
| Mysql 8.0.30                   |
| SpringBoot 3.0.5               |
| Minio                          |
| MyBatis Plus 3.5.3.1           |
| RabbitMq 3.8                   |
| Maven 3.6.3                    |
| Nodejs ≥ 20.10.0  Npm ≥ 10.5.0 |
| Vue 3.x                        |
| Element - plus 2.11.3          |

### 项目功能

![image-20251020172512442](assert/image-20251020172512442.png)

### <font style="color:#404040;">个性化推荐列表流程</font>

#### 用户拉取推荐列表流程
![Snipaste_2025-10-20_20-59-27](assert/Snipaste_2025-10-20_20-59-27.png)
#### 推荐列表拉取流程
![Snipaste_2025-10-20_21-00-24](assert/Snipaste_2025-10-20_21-00-24.png)
### 热门推荐流程
#### 热门列表推荐定时任务拉取流程
![输入图片说明](assert/image-20251021133521266.png)

### 评论区站内内容分享

用户-> 收藏作品（可进行分类收藏）

用户-> 进入作品详情页 -> 对应作品下评论区 —> 选中自己收藏夹中内容发到评论区

其他用户-> 评论区里可以看到别的用户分享的站内作品点击即可跳转对应详情页

### 自定义标签投票流程

![输入图片说明](assert/Screenshot_20251021142459.png)

### 个性化随机推荐流程

#### 个性化随机推荐结果拉取

![输入图片说明](assert/Screenshot_20251021165433.png)

> 注：概率数组抽取出来结果为： 
>
> 标签： 开心      欢乐     实验   会根据不同权重组成不同比率的标签数组 其总和为100%
>
> 概率  0....10    11....40   41...100              那么分别抽中开心，欢乐，实验，这几个标签的概率就为10%，30%，60%.
>
> 通过随机取到不同的标签，去其标签对应的倒排索引中进行随机推荐 （取到的标签为用户兴趣程度TopK）

### 项目运行截图
![输入图片说明](assert/1760950197480-d98c555a-7201-4614-96c2-2e2ec6c3ece0.png)

首页推荐结果展示
![输入图片说明](assert/1760950234093-1f9fab6c-ad16-46b9-82a3-763419bc0f77.png)

首页全站作品分页展示

![输入图片说明](assert/1760950432484-68ebfdf9-6fb1-45ef-981c-94e1cacb7ac6.png)
作品详情页效果

![输入图片说明](assert/1760950466331-be0c6d0b-2092-4625-8c11-2e1a5de69a23.png)

评论区效果

![输入图片说明](assert/1760951185003-ab382c70-25b6-425c-95e2-6124ed62fe82.gif)

个性化随机推荐效果演示

![输入图片说明](assert/1760950555500-e5dfc32f-a918-4595-b28c-cd12a61f67e1.png)

收藏夹效果演示

![输入图片说明](assert/1760950585578-25a14b81-d532-4c6f-ba70-f5355713027a.png)

收藏夹内容管理

![输入图片说明](assert/1760950606800-a7e36adb-96ee-41bb-9ecb-88c31907ee52.png)

作品元信息管理

![输入图片说明](assert/1760950648930-7e6e4f2c-5778-497c-8706-9c552dc360a3.png)

标签检索效果演示
![输入图片说明](assert/1760950809910-be32ea10-0a5c-4bfb-a2f2-34f91ea1450a.png)

pc播放器效果演示
![输入图片说明](assert/1760950831455-43865e94-5745-4c60-9575-e21bea55f977.png)

播放列表效果演示
![输入图片说明](assert/Screenshot_20251020181426.png)
![输入图片说明](assert/Screenshot_20251020181517.png)
![输入图片说明](assert/Screenshot_20251020181547.png)
移动端兼容演示