本项目是面向个人开发者的技术博客系统，立项初衷是解决个人技术知识零散、缺乏系统化沉淀与展示载体的痛点。在日常学习与开发过程中，开发者积累的技术笔记、项目经验、踩坑总结等内容，常分散在本地文档、社交平台等多个渠道，难以统一管理、高效分享，也无法形成个人技术品牌。
本系统基于 Vue、TypeScript、ElementUI 搭建前端界面，结合 MySQL 数据库实现数据存储，打造集文章创作、分类管理、标签检索、评论互动于一体的个人博客平台，适配 Web 端内容平台场景，满足个人开发者技术分享、知识沉淀、学习复盘的核心业务需求，帮助开发者系统化梳理技术栈，打造专属个人技术阵地，同时为技术交流提供便捷的线上载体。
### 1. 文章管理系统
- **Markdown编辑器**：支持富文本编辑、代码高亮、实时预览
- **Gitee导入**：一键从Gitee仓库导入Markdown文档
- **分类与标签**：多级分类管理、标签关联
- **SEO优化**：自定义关键词、描述、Slug
- **置顶与发布**：文章状态管理、定时发布
### 2. 技能展示系统
- **分类展示**：按技术栈分类展示技能
- **熟练度可视化**：动态进度条展示掌握程度
- **图标定制**：自定义技能图标
### 3. 项目展示系统
- **项目卡片**：封面、描述、技术栈标签
- **多平台链接**：Demo地址、GitHub、Gitee
- **项目分类**：个人项目、开源贡献、企业项目
### 4. 评论与留言系统
- **评论功能**：支持多级回复、点赞
- **留言板**：访客留言、管理员回复
- **审核机制**：评论审批、垃圾过滤
### 5. 访问统计系统
- **PV/UV统计**：页面访问量、独立访客
- **设备分析**：浏览器、操作系统、设备类型
- **路径追踪**：用户访问路径分析
### 6. AI助手模块
- **智能问答**：基于大语言模型的技术问答
- **聊天记录**：对话历史记录与管理
### 7. 音乐播放器
- **在线播放**：背景音乐自动播放
- **歌单管理**：自定义音乐列表
- **视觉效果**：渐变背景、动态效果
### 8. 工具导航
- **分类导航**：开发工具、在线服务分类
- **快捷入口**：常用工具一键访问
### 1. 性能优化 - 首屏加载提升 **60%+**
**SSR服务端渲染**
- 采用Nuxt 3 SSR模式，首屏HTML由服务端预渲染
- **优化效果**：首屏加载时间从纯CSR的 **3.5s+ 降至 1.2s**
- 关键指标：LCP（最大内容绘制）从2.8s优化至0.9s，提升 **68%**
**代码分割与懒加载**
- 路由级代码分割，按需加载页面组件
- 第三方库（如marked、highlight.js）异步加载
- 首屏JS体积从 **280KB 降至 120KB**，减少 **57%**
**图片优化**
- 使用Nuxt Image自动转换为WebP/AVIF格式
- 响应式图片适配不同屏幕尺寸
- 图片加载速度提升 **40%**，带宽节省 **35%**
**缓存策略**
- 静态资源设置 `Cache-Control: max-age=31536000`
- API响应缓存（高频访问接口设置TTL）
- 重复访问页面加载时间 **< 300ms**
### 2. 前端架构设计
**组件化开发**
- 原子化组件拆分：Button、Card、Avatar等基础组件
- 业务组件复用：ArticleCard、ProjectCard、CommentItem
- 组件复用率达 **60%**，开发效率提升
**状态管理**
- 前端使用Pinia进行全局状态管理
- 后端采用DTO模式确保数据类型安全
- 双向数据流清晰，易于维护
**组合式API**
- 全部使用Vue 3 Composition API
- 自定义Composables封装业务逻辑（如 `useApi`、`useMeteor`）
- 代码可读性和可测试性显著提升
### 3. 用户体验优化
**响应式设计**
- 移动端优先设计，支持3
评论