# music

**Repository Path**: tsftian/music

## Basic Information

- **Project Name**: music
- **Description**: 基于SpringBoot+vue的移动端音乐播放器
music-serve：后端接口
music-manage：音乐后台（Web端）
music-client：音乐前台（移动端）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-12-12
- **Last Updated**: 2024-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# music

### 介绍
基于SpringBoot+vue的移动端音乐播放器 <br>
music-serve：后端接口  <br>
music-manage：音乐后台（Web端）<br>
music-client：音乐前台（移动端）<br>

### 项目截图
#### 一、音乐后台
#### 登录
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/manage-login.PNG)
#### 歌手管理
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/manage-singer.PNG)
#### 歌手歌曲管理
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/manage-singersong.PNG)
#### 榜单管理
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/manage-rank.PNG)
#### 榜单歌曲管理
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/manage-ranksong.PNG)
#### 二、音乐前台
#### 推荐、歌手、榜单、搜索
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-recommend.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-singer.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-rank.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-search.PNG)
#### 歌手详情页、榜单详情页、播放页
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-singerdetail.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-rankdetail.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-player1.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-player.PNG)
#### 搜索详情页、个人中心、添加歌曲页、歌曲添加成功
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-search2.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-user.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-addsong1.PNG)
![image text](https://gitee.com/linxinyan/music/raw/master/image/image/client-addsong.PNG)

### 技术栈
    后端
    Spring Boot
    MyBatis
    MySQL
    
    前端
    Vue
    Vue-Cli3
    ElementUI
    axios
    Vue-Router
    Vuex   
    ES6
### music-client目录结构
    src:
        ├─api                   ->向后端请求数据
        ├─base
        │  ├─confirm            ->删除时的提示框，是否真正删除
        │  ├─listview           ->歌手列表的主要组件
        │  ├─loading            ->等待数据加载时显示的组件(一个转圈圈的图案)
        │  ├─no-result          ->搜索结果不存在时显示的组件
        │  ├─progress-bar       ->播放器页面的进度条
        │  ├─progress-circle    ->mini播放器的播放按钮
        │  ├─scroll             ->实现页面滚动的组件
        │  ├─search-box         ->搜索框组件
        │  ├─search-list        ->搜索历史列表
        │  ├─slider             ->轮播图组件
        │  ├─song-list          ->歌曲列表
        │  ├─switches           ->最近播放/搜索历史
        │  └─top-tip 		->成功添加歌曲提示
        ├─common               
        │  ├─fonts
        │  ├─image
        │  ├─js
        │  └─stylus
        ├─components            ->公共组件
        │  ├─add-song           ->添加歌曲页面
        │  ├─m-header           ->首页顶部
        │  ├─music-list         ->歌手详情页主要组件
        │  ├─player             ->播放器页面
        │  ├─playlist           ->mini播放器右下角的歌曲列表
        │  ├─rank               ->榜单页面
        │  ├─recommend          ->推荐页面
        │  ├─search             ->搜索页面
        │  ├─singer             ->歌手页面(引用listview)
        │  ├─singer-detail      ->歌手详情页(引用music-list)
        │  ├─suggest            ->搜索结果列表
        │  ├─tab                ->导航栏(推荐、歌手、排行、搜索)
        │  ├─top-list           ->榜单详情页面
        │  └─user-center        ->个人中心页面（我喜欢的/最近听的）
        ├─router                ->路由相关文件
        ├─store                 ->vuex相关代码
        ├─main.js             
        └─App.vue
    index.html                  ->添加meta标签，移动端常见设置
    package.json                ->添加了
                                ->"fastclick": "^1.0.6"：解决移动端点击300毫秒延迟
                                ->"babel-runtime": "^6.26.0",:对es语法进行转义
                                ->"babel-polyfill": "^6.26.0",对es6api进行转义，例如promise等

### music-client实现的功能
推荐页面、歌手页面、榜单页面、搜索页面、歌手详情页、榜单详情页、播放器页面、播放列表、用户中心等
#### 推荐页面
由轮播图、热门歌曲推荐组成<br>
轮播图使用better-scroll实现，详见slider组件<br>
推荐的歌曲通过axios向后端请求数据，其中图片采用懒加载技术vue-lazyload，优化页面加载速度 <br>
为了更好的用户体验，当数据未请求到时，显示loading组件
#### 歌手页面
实现左侧歌手列表与右侧字母列表的联动 <br>
左侧的歌手列表通过axios向后端请求数据并重构其数据结构；歌手图片使用懒加载技术vue-lazyload，优化页面加载速度 <br>
右侧的字母列表与左侧歌手列表联动，滚动固定标题实现
#### 榜单页面
通过axios向后端请求数据
#### 搜索页面
由搜索框、搜索历史列表、搜索结果列表组成 <br>
通过搜索框的关键字请求API获取数据（搜索结果列表），并使用SetTimeout对请求进行了节流处理；若搜索结果为空，使用no-result组件 <br>
考虑到移动端键盘占屏的问题，对滚动前的input做了blur()操作 <br>
通过localstorage对搜索历史进行缓存，清空搜索历史使用confirm组件
#### 歌手详情页、榜单详情页
由图片+歌曲列表组成 <br>
通过歌手id和榜单id向后端请求数据并进行前端路由跳转 <br>
点击歌曲列表的某首歌，将歌曲信息传递到父组件，父组件调用vuex的actions中的方法，实现歌曲播放
#### 播放器页面 
通过vuex管理播放状态、播放列表、播放模式等进行管理<br>
播放模式有：顺序播放、单曲循环、随机播放，原理是调整播放列表中的歌曲顺序 <br>
播放、暂停等功能通过HTML5的audio实现 <br>
中部唱片动画使用第三方 JS 动画库 create-keyframe-animation 实现 <br>
抽象了一个横向进度条组件和一个圆形进度条组件，横向进度条可以拖动小球和点击进度条来改变播放进度，圆形进度条组件使用SVG的circle元素<br>
歌词通过第三方库lyric-parser进行处理，实现了侧滑显示歌词、歌词跟随进度条高亮等交互效果 <br>
通过localstorage存储喜欢歌曲、播放过的歌曲
#### 播放列表
显示当前播放的歌曲列表，可实现修改播放模式、删除歌曲、收藏歌曲、清空播放列表（使用confirm组件）、添加歌曲（使用add-song组件）的功能
#### 用户中心
将localstorage中存储的喜欢的歌曲列表、播放历史显示出来