3.5 KiB
前端开发反思报告
1. 我的界面展示
1.1 首页 - 歌单列表
这是 VibeVault 的首页，采用了紫色渐变背景营造音乐氛围。左侧卡片展示所有歌单列表，每个歌单显示名称、创建者和歌曲数量。顶部搜索框支持实时搜索歌单。右上角显示登录/注册按钮，方便用户快速进入系统。
1.2 用户登录
点击"登录"按钮弹出登录窗口，采用模态框设计避免页面跳转。表单包含用户名和密码输入框，底部有取消和登录按钮。输入框有 focus 状态高亮，提升用户体验。
1.3 创建歌单
登录后可以创建新歌单。点击"创建新歌单"按钮弹出创建窗口，输入歌单名称即可创建。创建成功后列表自动刷新，新歌单会立即显示在列表中。
1.4 歌单详情与歌曲管理
点击左侧歌单，右侧显示详情。包括歌单名称、创建者、歌曲数量等信息。如果是自己的歌单，会显示"添加歌曲"和"删除歌单"按钮。歌曲列表展示每首歌的名称、歌手和时长，支持单独删除。
1.5 添加歌曲
在自己的歌单中点击"添加歌曲"，弹出添加窗口。需要填写歌曲名称、歌手和时长（秒）。添加成功后歌单详情自动刷新，新歌曲立即显示。
2. 我遇到的最大挑战
前端开发中最大的挑战是 JWT Token 的管理和 API 认证对接。
最初我直接在每个需要认证的请求中手动添加 Authorization 头，代码写得很乱。更麻烦的是，登录成功后 Token 没有持久化，刷新页面就丢失了，用户需要重新登录。
我的解决过程：
- 首先把 Token 存储到
localStorage，这样刷新页面后仍能保持登录状态 - 封装了统一的请求头处理，在每个需要认证的
fetch调用中自动添加Authorization: Bearer ${token} - 在页面加载时检查
localStorage中是否有 Token，如果有则自动恢复登录状态
另一个挑战是跨域问题。开发时前端和后端端口不同，导致请求被浏览器拦截。最终我选择把前端 HTML 放在 Spring Boot 的 static 目录下，这样前后端同源，彻底避免了跨域问题。
这个过程让我理解了：前后端分离架构中，认证状态的管理是核心问题。Token 的存储、传递、过期处理都需要仔细设计。
3. 如果重新做一遍
如果重新做，我会改进以下几点：
首先是使用前端框架。目前用原生 JavaScript 写的代码，DOM 操作和状态管理都很原始。如果用 Vue 或 React，可以更优雅地处理数据绑定和组件复用，代码也更容易维护。
其次是增加加载状态。目前点击按钮后没有 loading 提示，用户不知道请求是否在进行中。我会添加 loading 动画，在请求期间禁用按钮，避免重复提交。
第三是完善错误处理。目前只是简单地用 Toast 提示"操作失败"，没有具体说明原因。我会解析后端返回的错误信息，给用户更明确的提示，比如"用户名已存在"而不是"注册失败"。
最后是响应式设计。虽然加了媒体查询，但在手机上的体验还不够好。我会使用更完善的响应式方案，确保移动端也有良好的使用体验。