biji/doc/development_plan.md

项目开发与美化计划

本计划旨在为您的笔记项目提供一个清晰、分步走的开发与美化路线图。

第一阶段：基础功能完善与安全加固

这个阶段的目标是补齐核心功能，并确保应用的安全性。

• 任务1.1：实现用户认证与授权
  • 后端: JWT。
    • 实现 UserDetailsService 来加载用户信息。
    • 创建 JWT 工具类，用于生成和验证 Token。
    • 创建登录接口，成功后返回 JWT。
    • 创建一个 JWT 过滤器，用于保护需要授权的接口。
  • 前端: 实现登录页面和 Token 管理。
    • 创建登录页面组件。
    • 调用登录接口，并将获取到的 JWT 存储在 localStorage 或 sessionStorage 中。
    • 封装 axios，在请求头中自动添加 Authorization 字段。
    • 实现路由守卫，未登录用户访问受保护页面时跳转到登录页。
    • 实现登出功能。

第二阶段：核心体验提升 - UI美化与交互优化

这个阶段的目标是全面提升应用的颜值和易用性。

• 任务2.1：引入Element Plus UI库
  • 前端: 安装并配置 Element Plus。
    • 运行 npm install element-plus --save。
    • 在 main.js 中全局引入 Element Plus。
    • 使用 Element Plus 的组件重构现有页面，如按钮、表单、布局等。
• 任务2.2：响应式布局
  • 前端: 使用 Element Plus 的栅格系统或 CSS Flexbox/Grid 来实现响应式布局，确保在不同设备上都能良好显示。
• 任务2.3：升级Markdown编辑器
  • 前端: 调研并集成一个功能更强大的Markdown编辑器，例如 vditor 或 cherry-markdown。
    • 替换现有的 MarkdownEditor.vue 组件。
    • 确保新编辑器与应用的集成，包括内容的双向绑定和图片的上传。
• (可选任务)任务：重构前端页面
  • 前端: 重新对整个页面进行重构，使其更简洁、易用。

第三阶段：高级功能拓展

这个阶段我们将为应用增加更多有价值的功能。

• 任务3.1：实现笔记名模糊搜索
  • 后端: 。
    • 可以通过搜索的笔记的名称来模糊搜索笔记。
    • 在 Spring Boot 中添加相应的客户端依赖。
    • 创建搜索接口。
  • 前端: 添加搜索框和搜索结果展示页面。
• 任务3.2：实现笔记分享
  • 后端:
    • 为笔记表增加一个 share_token 字段。
    • 创建生成分享链接的接口。
    • 创建通过分享链接访问笔记的公开接口。
  • 前端:
    • 在笔记操作中增加“分享”按钮。
    • 创建一个公开的笔记展示页面，用于显示分享的笔记。