音乐客户端（music）

基于 Vue 2 的在线音乐播放器前端，界面与交互参考网易云音乐。包含用户系统、歌单 / 歌手浏览、歌曲播放、歌词、搜索、评论、收藏、评分等完整功能。

配套独立后端服务（默认监听 http://localhost:8085/music）。前端仅负责界面与交互，数据全部来自后端 API。

✨ 功能特性

• 👤 用户系统：注册、登录、个人信息修改、头像上传
• 🎵 播放器：底部常驻 PlayBar + 隐藏 SongAudio 音频组件，支持播放 / 暂停 / 上下首 / 音量 / 进度
• 📜 歌词：Lyric 页解析并展示时间轴歌词，随播放进度高亮
• 📚 歌单：歌单列表、按风格筛选、歌单详情（歌曲列表）、歌单评分
• 🎤 歌手：歌手列表、按性别分类、歌手详情与专辑
• 🔍 搜索：按歌名 / 歌单名检索
• ❤️ 收藏与评分：收藏歌曲 / 歌单，对歌单打分
• 💬 评论与点赞：歌曲 / 歌单评论，评论点赞
• ⬆️ 上传：音乐文件、头像上传
• 🎚️ 设置页：个人与偏好设置

🧱 技术栈

类别	选型
框架	Vue 2.6
路由	vue-router 3
状态管理	Vuex 3（song / user / configure 三个模块）
UI 组件库	Element UI 2.4
HTTP	axios 0.18
样式	SCSS
构建	webpack 3（vue-cli webpack 模板 1.3.1）

📁 目录结构

src/
├── main.js                 # 入口，挂载 ElementUI / router / store
├── App.vue                 # 全局布局：SongAudio/Header/Aside/RouterView/PlayBar/Footer
├── api/
│   ├── http.js             # axios 实例、拦截器、baseURL
│   └── index.js            # 各业务接口封装
├── assets/                 # 样式(scss)、图标(iconfont)、静态图片
├── components/             # PlayBar / SongAudio / TheHeader / TheAside / Comment / Upload ...
├── mixins/index.js         # 公共方法（播放、歌词解析、提示、图片地址拼接）
├── pages/                  # 各路由页面（Home/LoginIn/SignUp/...）
├── router/index.js         # 路由表
└── store/                  # Vuex：song(播放) / user(登录) / configure(全局配置)

主要路由：/（首页）、/login-in、/sign-up、/song-list、/my-music、/song-list-album/:id、/singer、/singer-album/:id、/lyric/:id、/search、/setting、/404。

🖥️ 环境要求

• Node.js（建议 Node 14 / 16；依赖较旧，不推荐 Node 18+ 直接跑 webpack 3）
• 一个正在运行的后端服务，监听 http://localhost:8085

前端在 src/store/configure.js 中写死了后端 HOST = http://localhost:8085；src/api/http.js 中 baseURL = http://localhost:8085/music。如后端端口 / 路径不同，请相应修改这两处。

🚀 快速开始

npm install              # 安装依赖（含 webpack3 旧依赖，耗时较长）
npm run dev              # webpack-dev-server，默认 http://localhost:8080
npm run build            # 构建到 dist/
npm run build --report   # 构建并打开包分析
npm test                 # 运行 unit + e2e 测试

若 npm install 因旧依赖报错，可尝试 npm install --legacy-peer-deps 或在 Node 14 / 16 环境下安装。

🔌 后端接口

接口约定见仓库内 API Documentation.md（基础 URL http://localhost:8085/music，application/x-www-form-urlencoded，JSON 响应）。主要控制器：

• ConsumerController：登录 / 注册 / 更新用户 / 头像
• SingerController：歌手列表 / 按性别查询
• SongController：歌曲查询（按 ID / 歌手 / 歌名）
• SongListController：歌单列表 / 按风格 / 关键字
• CommentController：评论 / 点赞
• CollectionController：收藏
• RankController：评分
• FileController：头像 / 音乐文件上传

⚠️ 必须启动对应的后端，否则所有请求会 404 / 超时。

📝 状态管理说明

• song：当前播放曲目、播放列表、进度、音量、歌词等，关键字段持久化到 sessionStorage
• user：用户 id / username / avator，持久化到 localStorage
• configure：后端 HOST、登录态、侧边栏显隐等