山楂小栈-数字名片产品系统

面向个人开发者、内容创作者与求职者的个人内容沉淀与展示场景。个人博客作为"数字名片"，用于集中展示技术文章、项目作品与个人经历，解决个人作品分散在各平台、缺乏统一呈现阵地的问题；同时帮助创作者沉淀知识、积累影响力，并作为求职面试中可在线验证的能力证明，弥补简历单一文本的局限性。

前后端分离架构，由前台展示站、管理后台和 Express API 三端组成。前台面向访客，包含首页（站点统计与最新文章）、文章列表（滚动无限加载分页）、文章详情（Markdown 渲染、代码高亮与一键复制、阅读进度条、浏览量统计）、项目展示、图库（瀑布流 + 灯箱预览，支持键盘和触摸切换）、留言墙（发表留言与点赞）、友情链接、关于我（个人简介、技能、网站信息与更新日志）以及独立的 Live2D 黑猫看板娘页面；站点外壳为三栏响应式布局，配有时钟、日历、音乐播放器和暗色模式切换等侧边栏小部件，并针对移动端做了抽屉式菜单适配。管理后台基于 Element Plus 搭建，提供登录鉴权，以及仪表盘（统计卡片 + ECharts 图表）和文章、项目、相册、图片上传、友链、留言、关于等模块的增删改查与审核功能，其中文章支持 Markdown 编辑与预览、标签与状态管理。后端使用 Express + MySQL 提供 REST 接口，公开只读的列表与详情接口供前台调用，管理接口统一挂 JWT 鉴权，提供文章/标签/项目/相册/友链/留言/站点配置的完整 CRUD、文件上传和后台统计；图片经服务端代传上传阿里云 OSS（未配置时回退本地存储），并做实时缩放与 WebP 压缩。数据层包含文章、标签及关联、项目、图库、友链、留言、站点配置和管理员账号等表。安全方面采用 JWT + bcrypt 密码哈希、全量参数化查询、DOMPurify 消毒、上传 MIME 白名单以及留言、点赞、登录的 IP 限流。项目目前尚待补充文章搜索、评论、回到顶部、上一篇/下一篇导航、标签聚合页和友链自助提交等功能。

独立全栈开发。全栈架构：Vue3 + Vue Router 搭建 SPA，「布局壳 + 嵌套子路由」组织页面，10 条路由全懒加载（页面级 chunk 2–4 KB）；Express + MySQL 独立设计 44 个 REST 接口，含 JWT 鉴权、bcrypt 密码存储与接口限流。
性能优化：定位首屏瓶颈并逐项量化——中文字体 25.6 MB 全量加载改为 cn-font-split 分片 + unicode-range 按用字按需加载（配 font-display: swap 消除白屏）；图片按 2 倍屏预算重制（头像 1287 KB→6.8 KB）；Element Plus 全量改按需引入（实际仅用 el-card），入口包 997 KB→102 KB（gzip −88%）。首屏总传输 27.7 MB→约 1.1 MB。
安全与工程细节：文章内容经 marked 渲染后由 DOMPurify 消毒再 v-html，防存储型 XSS，外链走协议白名单校验；上传按 MIME 白名单生成扩展名而不采信用户文件名，服务端代理上传 OSS（密钥不下发前端）；手写 debounce/throttle 治理高频事件并成对解绑，避免监听器泄漏。
交互与 SEO：CSS 变量驱动一键暗色模式；移动端响应式（汉堡菜单 + 抽屉侧边栏）；图库大图预览（Teleport 全屏遮罩 + 键盘/触摸切换）；逐页 meta + 构建时生成 sitemap 完成 SEO，Nginx + Docker 部署。
后端接口与文件存储：Express + MySQL 独立设计 44 个 REST 接口，实现 JWT 鉴权、bcrypt 加盐密码存储，以及登录 / 留言 / 点赞接口限流；基于 multer 内存存储实现图片上传，由服务端代理上传阿里云 OSS（密钥不下发前端），按 MIME 白名单生成扩展名而不采信用户文件名，未配置 OSS 时自动回退本地存储，数据库只存相对路径以避免更换域名导致历史图片失效。