Vue+SpringBoot全栈博客开发实战
1. 项目背景与核心价值
作为山东大学软件学院创新实训的阶段性成果，这个个人博客项目远不止是一个简单的技术作业。在当今内容为王的时代，个人博客已成为开发者展示技术实力、沉淀知识体系的重要载体。我选择从零搭建博客系统，而非直接使用现成平台，正是为了深入掌握Web开发全链路技术栈。
这个项目最吸引我的地方在于其"麻雀虽小，五脏俱全"的特点。一个完整的博客系统需要处理前端展示、后端逻辑、数据存储、用户认证等核心模块，是检验全栈开发能力的绝佳试金石。通过这个项目，我系统性地实践了Vue+SpringBoot的技术组合，并深入理解了组件化开发、RESTful API设计等现代Web开发理念。
2. 技术架构设计
2.1 前端技术选型
采用Vue3作为前端框架，主要基于以下考量：
- 组合式API更适合复杂业务逻辑组织
- 与Vue Router、Pinia等生态工具无缝集成
- 渐进式框架特性便于功能扩展
具体实现中特别注重：
- 使用SFC单文件组件规范代码结构
- 通过axios实现前后端分离通信
- 采用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内容处理
博客核心功能是内容展示，需要解决：
- 编辑器集成：使用Toast UI Editor
- 内容存储：原始Markdown+渲染后HTML双存储
- 代码高亮：引入highlight.js
<!-- 前端渲染示例 --> <div class="content"> <div v-html="compiledMarkdown"></div> </div>3.2 权限控制方案
采用RBAC模型实现：
- 角色分为：游客、普通用户、管理员
- 权限粒度控制到API级别
- JWT令牌包含角色信息
安全注意事项：
- 密码必须加盐哈希存储
- 敏感接口需要@PreAuthorize注解
- 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 性能优化实践
- 前端：
- 路由懒加载
- 组件按需引入
- 静态资源CDN加速
- 后端：
- MyBatis二级缓存
- Spring Cache注解
- 异步日志记录
5. 开发心得与建议
通过这个项目，我深刻体会到几个关键点：
- 接口设计先行：先定义好API文档再开发，避免前后端频繁对接
- 异常处理要全面：特别是文件上传、表单验证等场景
- 日志系统很重要：ELK栈能极大提升排查效率
给后来者的建议：
- 从简单功能开始迭代，不要追求一步到位
- 善用Swagger等API文档工具
- 单元测试虽然耗时但值得投入
这个博客项目我会持续维护，下一步计划加入：
- 文章分类标签系统
- 评论互动功能
- 访问统计看板