1. 项目背景与核心价值

作为山东大学软件学院创新实训的阶段性成果，这个个人博客项目远不止是一个简单的技术作业。在当今内容为王的时代，个人博客已成为开发者展示技术实力、沉淀知识体系的重要载体。我选择从零搭建博客系统，而非直接使用现成平台，正是为了深入掌握Web开发全链路技术栈。

这个项目最吸引我的地方在于其"麻雀虽小，五脏俱全"的特点。一个完整的博客系统需要处理前端展示、后端逻辑、数据存储、用户认证等核心模块，是检验全栈开发能力的绝佳试金石。通过这个项目，我系统性地实践了Vue+SpringBoot的技术组合，并深入理解了组件化开发、RESTful API设计等现代Web开发理念。

2. 技术架构设计

2.1 前端技术选型

采用Vue3作为前端框架，主要基于以下考量：

• 组合式API更适合复杂业务逻辑组织
• 与Vue Router、Pinia等生态工具无缝集成
• 渐进式框架特性便于功能扩展

具体实现中特别注重：

1. 使用SFC单文件组件规范代码结构
2. 通过axios实现前后端分离通信
3. 采用Element Plus组件库加速UI开发

// 典型组件示例 export default { setup() { const articles = ref([]) const loadData = async () => { articles.value = await axios.get('/api/articles') } return { articles, loadData } } }

2.2 后端技术方案

SpringBoot作为后端框架的优势：

• 自动配置简化了传统SSM框架的繁琐配置
• 内嵌Tomcat便于部署
• 丰富的starter依赖快速集成常用功能

核心模块设计：

• 文章管理：CRUD接口+Markdown解析
• 用户认证：JWT+Spring Security
• 数据缓存：Redis加速热点数据访问

// 典型Controller示例 @RestController @RequestMapping("/api/articles") public class ArticleController { @Autowired private ArticleService articleService; @GetMapping public Result listArticles() { return Result.success(articleService.list()); } }

3. 关键实现细节

3.1 Markdown内容处理

博客核心功能是内容展示，需要解决：

1. 编辑器集成：使用Toast UI Editor
2. 内容存储：原始Markdown+渲染后HTML双存储
3. 代码高亮：引入highlight.js

<!-- 前端渲染示例 --> <div class="content"> <div v-html="compiledMarkdown"></div> </div>

3.2 权限控制方案

采用RBAC模型实现：

• 角色分为：游客、普通用户、管理员
• 权限粒度控制到API级别
• JWT令牌包含角色信息

安全注意事项：

1. 密码必须加盐哈希存储
2. 敏感接口需要@PreAuthorize注解
3. JTT设置合理过期时间

4. 部署与优化

4.1 生产环境部署

采用Docker容器化部署：

• 前端Nginx镜像
• 后端Java镜像
• MySQL+Redis独立容器

docker-compose.yml关键配置：

services: frontend: image: nginx:alpine ports: - "80:80" volumes: - ./dist:/usr/share/nginx/html backend: image: openjdk:11-jre ports: - "8080:8080"

4.2 性能优化实践

1. 前端：

• 路由懒加载
• 组件按需引入
• 静态资源CDN加速

2. 后端：

• MyBatis二级缓存
• Spring Cache注解
• 异步日志记录

5. 开发心得与建议

通过这个项目，我深刻体会到几个关键点：

1. 接口设计先行：先定义好API文档再开发，避免前后端频繁对接
2. 异常处理要全面：特别是文件上传、表单验证等场景
3. 日志系统很重要：ELK栈能极大提升排查效率

给后来者的建议：

• 从简单功能开始迭代，不要追求一步到位
• 善用Swagger等API文档工具
• 单元测试虽然耗时但值得投入

这个博客项目我会持续维护，下一步计划加入：

• 文章分类标签系统
• 评论互动功能
• 访问统计看板