SpringBoot+Vue全栈博客开发实战指南

1. 项目概述：从零搭建个人博客系统

去年帮学弟调试毕业设计时，我完整走通了SpringBoot+Vue的全栈博客开发流程。这个技术组合既能满足高校对Java技术栈的考核要求，又符合当前企业级开发的主流趋势。系统采用经典的前后端分离架构，前端用Vue3+Element Plus实现响应式界面，后端基于SpringBoot 2.7提供RESTful API，数据库选用MySQL 8.0，配合Redis缓存提升性能。

提示：建议开发环境统一使用JDK17+Node16+IDEA2022组合，避免版本兼容性问题

2. 技术架构设计

2.1 后端技术栈选型

SpringBoot作为基础框架，主要依赖包括：

• spring-boot-starter-web（Web支持）
• mybatis-plus（数据库操作）
• spring-boot-starter-security（安全认证）
• hutool-all（工具包）
• lombok（简化代码）

数据库设计遵循三范式原则，核心表包括：

sql复制CREATE TABLE `article` (
  `id` int NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `content` longtext,
  `user_id` int DEFAULT NULL,
  `view_count` int DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.2 前端技术方案

Vue3组合式API开发，主要技术点：

• Vue Router 4实现动态路由
• Axios封装请求拦截器
• Pinia状态管理
• Markdown-it解析文章内容
• highlight.js代码高亮

典型组件结构：

code复制src/
├── api/            # 接口定义
├── assets/         # 静态资源  
├── components/     # 公共组件
│   ├── Editor.vue  # 富文本编辑器
│   └── Header.vue  # 导航栏
├── router/         # 路由配置
├── stores/         # 状态管理
└── views/          # 页面组件

3. 核心功能实现

3.1 文章发布流程

1. 前端通过Quill富文本编辑器获取Markdown内容
2. 调用/api/article接口提交JSON数据：

json复制{
  "title": "SpringBoot实战",
  "content": "## 1. 项目创建...",
  "tags": ["Java", "后端"]
}

3. 后端使用MyBatis Plus的@TableField处理HTML转义：

java复制@TableField(typeHandler = HtmlEscapeTypeHandler.class)
private String content;

3.2 用户认证方案

采用JWT+Spring Security的认证流程：

1. 登录成功生成Token：

java复制String token = Jwts.builder()
    .setSubject(username)
    .setExpiration(new Date(System.currentTimeMillis() + 60 * 60 * 1000))
    .signWith(SignatureAlgorithm.HS512, "yourSecretKey")
    .compact();

2. 前端在axios拦截器中添加Header：

javascript复制service.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer ' + getToken()
  return config
})

4. 开发避坑指南

4.1 跨域问题解决方案

后端配置类需添加：

java复制@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

4.2 常见性能优化

1. 文章列表分页查询优化：

java复制Page<Article> page = new Page<>(current, size);
articleMapper.selectPage(page, Wrappers.<Article>lambdaQuery()
    .orderByDesc(Article::getCreateTime));

2. Redis缓存热门文章：

java复制@Cacheable(value = "hotArticles", key = "#root.methodName")
public List<Article> getHotArticles() {
    return articleMapper.selectList(...);
}

5. 部署上线实践

5.1 后端打包配置

pom.xml需添加：

xml复制<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <excludes>
                    <exclude>
                        <groupId>org.projectlombok</groupId>
                        <artifactId>lombok</artifactId>
                    </exclude>
                </excludes>
            </configuration>
        </plugin>
    </plugins>
</build>

5.2 前端部署要点

1. 修改vue.config.js生产环境配置：

javascript复制module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/blog/' 
    : '/',
  outputDir: 'dist',
  assetsDir: 'static'
}

2. Nginx配置示例：

nginx复制location / {
    root   /usr/share/nginx/html/blog;
    index  index.html;
    try_files $uri $uri/ /index.html;
}

location /api {
    proxy_pass http://127.0.0.1:8080;
}

6. 毕业设计加分项

1. 集成Elasticsearch实现全文检索
2. 添加Swagger接口文档
3. 实现第三方登录（GitHub/微信）
4. 开发移动端适配版本
5. 接入阿里云OSS存储图片

我在实际开发中发现，使用Docker Compose统一管理服务能显著降低部署复杂度。建议在docker-compose.yml中定义MySQL、Redis等服务，配合GitHub Actions实现CI/CD自动化部署。