Spring Boot与Vue 3构建个人博客系统实战

1. 项目概述与技术选型

这个基于Spring Boot的个人博客系统是我在2023年完成的一个全栈项目，前后耗时约3个月。系统采用前后端分离架构，后端基于Spring Boot 2.7 + MyBatis Plus构建，前端使用Vue 3 + Element Plus实现。项目从零开始搭建，完整实现了用户认证、文章管理、评论互动等核心功能模块，并最终通过了严格的黑盒测试。

1.1 为什么选择Spring Boot

Spring Boot的自动配置特性大幅减少了XML配置的工作量。我在项目中主要利用了以下特性：

• 内嵌Tomcat服务器：无需额外部署，通过spring-boot-starter-web依赖即可获得完整的Web容器支持
• 自动配置的DataSource：只需在application.yml中配置数据库连接信息，Spring Boot会自动配置HikariCP连接池
• Starter依赖体系：通过spring-boot-starter-security、spring-boot-starter-data-redis等starter快速集成常用功能

实际开发中发现，Spring Boot的版本选择很关键。最初使用2.4版本时遇到与MyBatis Plus的兼容性问题，升级到2.7.0后解决。

1.2 前端技术选型考量

Vue 3的组合式API相比选项式API更适合复杂的前端交互场景。在博客系统中，我特别利用了：

• Vue Router实现前端路由管理
• Pinia替代Vuex进行状态管理
• Element Plus的富文本编辑器组件实现文章编辑功能
• Axios封装了带Token验证的HTTP请求拦截器

javascript复制// 请求拦截器示例
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Token'] = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

2. 系统架构设计

2.1 整体架构图

系统采用典型的三层架构：

1. 表现层：Vue前端 + Nginx反向代理
2. 业务层：Spring Boot应用服务
3. 数据层：MySQL + Redis缓存

2.2 数据库设计要点

核心表结构设计考虑了以下原则：

• 文章表(article)与分类表(category)采用多对一关系
• 评论表(comment)使用自关联实现多级评论
• 用户表(user)与角色表(role)实现RBAC权限控制

sql复制CREATE TABLE `article` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `content` longtext NOT NULL,
  `category_id` bigint DEFAULT NULL,
  `user_id` bigint NOT NULL,
  `view_count` int DEFAULT '0',
  `status` tinyint DEFAULT '0' COMMENT '0-草稿 1-已发布',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_category` (`category_id`),
  KEY `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.3 安全设计

系统安全方面实现了：

1. 密码加密：使用BCryptPasswordEncoder进行密码哈希存储
2. JWT认证：自定义Token生成和验证逻辑
3. 接口防护：Spring Security配置白名单和权限规则
4. XSS防护：自定义Jackson序列化器对输出内容进行转义

3. 核心功能实现

3.1 用户认证模块

认证流程采用JWT方案，关键实现点包括：

• Token生成时加入用户角色信息
• 设置1小时有效期并实现自动续期
• 通过拦截器验证Token有效性

java复制@Component
public class JwtInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        String token = request.getHeader("Token");
        if (StringUtils.isBlank(token)) {
            throw new UnauthorizedException("请先登录");
        }
        
        Claims claims = JwtUtil.parseToken(token);
        if (claims == null || JwtUtil.isTokenExpired(claims.getExpiration())) {
            throw new UnauthorizedException("Token已失效");
        }
        
        // 将用户信息存入ThreadLocal
        UserContext.setUserId(claims.get("userId", Long.class));
        return true;
    }
}

3.2 文章管理模块

支持的功能包括：

• Markdown格式文章编辑与渲染
• 多图上传（使用阿里云OSS存储）
• 定时发布（基于Spring Scheduled实现）
• 文章分类与标签管理

上传图片时需要注意：

1. 前端限制文件类型为image/*
2. 后端校验文件大小不超过5MB
3. 使用UUID重命名文件避免冲突

3.3 评论系统设计

实现特点：

• 支持@回复的层级评论结构
• 敏感词过滤（基于DFA算法）
• 新评论邮件通知（集成JavaMailSender）
• 评论分页加载（PageHelper实现）

4. 系统测试与优化

4.1 测试策略

采用分层测试方案：

1. 单元测试：JUnit + Mockito覆盖Service层
2. 集成测试：@SpringBootTest验证Controller
3. 性能测试：JMeter模拟并发请求

4.2 典型问题与解决

1. N+1查询问题：

• 现象：获取文章列表时频繁查询作者信息
• 解决方案：使用MyBatis Plus的@TableField(select = false)延迟加载

2. 缓存一致性问题：

• 现象：文章更新后缓存未及时失效
• 解决方案：采用@CacheEvict注解实现双删策略

3. 并发安全问题：

• 现象：文章阅读数统计存在并发误差
• 解决方案：使用Redis INCR命令原子性递增

4.3 性能优化措施

1. 引入Redis缓存：

• 热点文章内容缓存
• 用户权限信息缓存
• 网站访问统计缓存

2. SQL优化：

• 为常用查询字段添加索引
• 避免SELECT * 只查询必要字段
• 复杂查询使用@Select注解手写SQL

3. 前端优化：

• 路由懒加载
• 图片懒加载
• 组件按需引入

5. 部署方案

5.1 生产环境配置

推荐部署方案：

• 服务器：2核4G云服务器
• 中间件：Nginx + Docker容器化部署
• 数据库：MySQL 8.0主从架构
• 监控：Prometheus + Grafana监控系统

5.2 关键配置示例

Nginx配置片段：

nginx复制server {
    listen 80;
    server_name blog.example.com;
    
    location /api {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
    }
    
    location / {
        root /var/www/blog-frontend;
        try_files $uri $uri/ /index.html;
    }
}

Spring Boot多环境配置：

yaml复制# application-prod.yml
spring:
  datasource:
    url: jdbc:mysql://mysql-master:3306/blog?useSSL=false
    username: prod_user
    password: ${DB_PASSWORD}
  redis:
    host: redis-cluster
    password: ${REDIS_PASSWORD}

6. 开发心得

在开发过程中有几个特别值得注意的点：

1. 接口版本控制：从项目开始就应该在API路径中加入/v1/这样的版本标识，为后续升级留有余地。我最初没有考虑这点，导致后期不得不通过Nginx重写规则来解决兼容问题。

2. 异常处理体系：建议统一异常处理架构，我最终采用的方案是：

• 自定义BusinessException继承RuntimeException
• @RestControllerAdvice全局异常处理器
• 统一的Result包装类

3. 文档自动化：使用Swagger UI生成API文档可以节省大量时间。推荐配置：

java复制@Bean
public Docket api() {
    return new Docket(DocumentationType.SWAGGER_2)
            .select()
            .apis(RequestHandlerSelectors.basePackage("com.blog.controller"))
            .paths(PathSelectors.any())
            .build();
}

4. 前端工程化：建议从一开始就配置好：

• ESLint代码规范检查
• Prettier代码格式化
• Husky提交前检查
  这些配置在团队协作时尤为重要。