音乐之家
基于 Vue 2 与音乐目录 API，实现歌曲搜索、历史记录、音乐播放与歌词展示的前端应用。
用 API 数据与前端状态组织一条完整的音乐应用流程。
01 / 项目快照
独立开发者
Vue 2 · Vue CLI · Vuex · Axios
Local music-catalogue API
Search · History · Playback · Lyrics
02 / 用户想完成什么？
输入关键词，找到一首歌，进入播放与歌词。
03 / 应用架构
三个视图和一套轻量前端组织。
├── router — page routing
├── store — shared state
├── request — API methods
└── views — Home · Search · Lyrics / Player
报告记录主页、搜索页面、歌词页面三种主要视图；搜索页面返回主页，选择歌曲后进入歌词/播放器，关闭后回到搜索结果。
04 / API 数据流
Axios 将本地 Node API 的歌曲数据带回 UI。
Node app.js 开启 3000 端口，api/index.js 配置接口路径和 5 秒 timeout；无网络无法请求，网络繁忙可能返回 code -460。
05 / 从关键词到歌曲列表
默认 30 条结果，歌名与歌手成为选择入口。
用户输入歌曲名或歌手名后调用搜索接口，默认显示 30 首结果。每次搜索的关键词进入历史记录；搜索页的历史可点击重新搜索，但主页历史没有此交互。
06 / 播放与歌词
歌曲 URL、播放状态与歌词渲染。
选择歌曲后获取 URL，进入歌词页时请求歌词并处理渲染。中间按钮可暂停/继续；上一曲、下一曲图标未绑定事件，歌词可滚动查看但不会随播放进度同步。
07 / 状态如何流动
Vuex 与组件状态共同支撑不同视图。
↓
Shared application state
↓
Home · Search · Lyrics / Player
报告使用 Vuex，也记录了当时为减少跨页面传值复杂度，部分搜索/播放器切换采用 v-if / v-else 而非完全以 Router 处理的折中。
08 / 运行证据
匿名化 UI，保留功能工作痕迹。
09 / 项目边界
搜索、历史、结果列表、播放、暂停/继续、歌词获取与渲染、关闭歌词页。
上一曲、下一曲，以及按播放进度同步歌词滚动。
10 / 从页面进入应用
它让我第一次把 UI、状态、API、异步请求、用户交互和媒体播放组合成完整应用流程。
如果今天重做，我会使用 Vue 3、Composition API、Pinia、更清晰的 Router View、播放器状态机、进度条与同步歌词、上一/下一曲、错误/加载/空状态、响应式播放器和搜索 debounce。这些是今天的改进方向，不是 2023 年既有功能。