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