SpringBoot+Vue全栈开发IT交流平台实践

1. 项目概述与技术选型

在当前的开发者生态中，技术交流与知识共享已成为推动技术进步的重要方式。传统论坛系统往往存在性能瓶颈、交互体验差等问题，而采用SpringBoot+Vue的全栈架构能有效解决这些痛点。这个IT交流平台项目采用前后端分离设计，后端基于SpringBoot 2.7提供RESTful API服务，前端使用Vue 3组合式API开发，数据库选用MySQL 8.0，是一套可直接部署运行的企业级解决方案。

技术栈选型的核心考量：

• SpringBoot：简化了传统SSM框架的复杂配置，内置Tomcat服务器和自动配置机制，使开发者能快速构建生产级应用。其Starter机制让集成MyBatis-Plus、Redis等组件变得异常简单
• Vue.js：渐进式前端框架的优势在于灵活的组件化开发，配合Vue Router和Pinia状态管理，能轻松实现SPA应用的开发需求
• MySQL：作为最流行的关系型数据库，其事务支持和ACID特性保证了用户数据的一致性和安全性

提示：实际部署时建议使用Nginx作为前端静态资源服务器和反向代理，同时配置HTTPS加密传输

2. 数据库设计与核心表结构

2.1 用户系统设计

用户表(user)采用纵向分表设计，核心字段包括：

sql复制CREATE TABLE `user` (
  `user_id` bigint NOT NULL AUTO_INCREMENT COMMENT '雪花算法ID',
  `username` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
  `encrypted_pwd` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT 'BCrypt加密',
  `email` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `avatar_url` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `last_login_time` datetime DEFAULT NULL,
  `status` tinyint DEFAULT '1' COMMENT '0-禁用 1-正常',
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `idx_username` (`username`),
  UNIQUE KEY `idx_email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

密码安全策略：

1. 前端使用RSA加密传输密码
2. 后端采用BCryptPasswordEncoder进行二次加密存储
3. 登录失败5次后触发账户锁定机制

2.2 文章模块设计

文章表(article)采用JSON字段存储扩展属性：

sql复制CREATE TABLE `article` (
  `article_id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL,
  `title` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `content` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `category` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
  `tags` json DEFAULT NULL COMMENT '标签数组',
  `publish_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `update_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
  `view_count` int DEFAULT '0',
  `like_count` int DEFAULT '0',
  `comment_count` int DEFAULT '0',
  `is_top` tinyint DEFAULT '0' COMMENT '是否置顶',
  PRIMARY KEY (`article_id`),
  KEY `idx_user` (`user_id`),
  KEY `idx_category` (`category`),
  FULLTEXT KEY `ft_title_content` (`title`,`content`) /* 全文索引 */
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

注意：大文本字段建议单独分表存储，避免影响主表查询性能

3. 后端核心实现

3.1 SpringBoot应用架构

项目采用经典的三层架构：

code复制com.example.platform
├── config       # 配置类
├── controller   # 表现层
├── service      # 业务逻辑层
│   └── impl     # 实现类
├── dao          # 数据访问层
├── entity       # 实体类
├── dto          # 数据传输对象
├── vo           # 视图对象
├── util         # 工具类
└── exception    # 异常处理

启动类配置示例：

java复制@SpringBootApplication
@MapperScan("com.example.platform.dao")
@EnableCaching
@EnableAsync
public class PlatformApplication extends SpringBootServletInitializer {
    public static void main(String[] args) {
        SpringApplication.run(PlatformApplication.class, args);
    }
    
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(PlatformApplication.class);
    }
}

3.2 用户认证实现

基于JWT的认证流程：

1. 用户登录成功后生成Token
2. Token存入Redis并设置过期时间
3. 通过拦截器验证请求头中的Token

核心代码片段：

java复制@RestController
@RequestMapping("/api/auth")
public class AuthController {
    
    @Autowired
    private UserService userService;
    
    @Autowired
    private RedisTemplate<String, String> redisTemplate;
    
    @PostMapping("/login")
    public Result<LoginVO> login(@Valid @RequestBody LoginDTO dto) {
        User user = userService.getByUsername(dto.getUsername());
        if(!passwordEncoder.matches(dto.getPassword(), user.getPassword())) {
            throw new BusinessException("密码错误");
        }
        
        String token = JwtUtil.generateToken(user.getUserId());
        redisTemplate.opsForValue().set(
            "token:" + user.getUserId(), 
            token,
            2, 
            TimeUnit.HOURS
        );
        
        LoginVO vo = new LoginVO();
        vo.setToken(token);
        vo.setUserInfo(userConvert.toVO(user));
        return Result.success(vo);
    }
}

4. 前端工程化实践

4.1 Vue项目结构

采用最新的Vue3 + Vite技术栈：

code复制src/
├── api/            # API请求
├── assets/         # 静态资源
├── components/     # 公共组件
├── composables/    # 组合式函数
├── router/         # 路由配置
├── stores/         # Pinia状态管理
├── styles/         # 全局样式
├── utils/          # 工具函数
├── views/          # 页面组件
├── App.vue         # 根组件
└── main.js         # 入口文件

4.2 文章编辑组件实现

使用Tiptap编辑器实现富文本编辑：

vue复制<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import { common, createLowlight } from 'lowlight'

const lowlight = createLowlight(common)

const editor = useEditor({
  content: '<p>Hello World!</p>',
  extensions: [
    StarterKit,
    CodeBlockLowlight.configure({
      lowlight,
    }),
  ],
})
</script>

<template>
  <div class="editor">
    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
      <div class="menu-bar">
        <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
          Bold
        </button>
        <!-- 其他格式按钮 -->
      </div>
    </editor-menu-bar>
    <editor-content class="editor__content" :editor="editor" />
  </div>
</template>

5. 系统部署方案

5.1 生产环境部署

推荐使用Docker Compose编排服务：

yaml复制version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
      - DB_URL=jdbc:mysql://mysql:3306/platform
    depends_on:
      - mysql
      - redis

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    volumes:
      - ./frontend/dist:/usr/share/nginx/html

  mysql:
    image: mysql:8.0
    environment:
      - MYSQL_ROOT_PASSWORD=root123
      - MYSQL_DATABASE=platform
    volumes:
      - mysql_data:/var/lib/mysql

  redis:
    image: redis:6-alpine
    ports:
      - "6379:6379"

volumes:
  mysql_data:

5.2 性能优化建议

1. 前端优化：

   • 使用Vite的代码分割功能
   • 配置合理的缓存策略
   • 开启Gzip压缩

2. 后端优化：

   • 添加SpringBoot Actuator监控
   • 配置Hikari连接池参数
   • 启用MyBatis二级缓存

3. 数据库优化：

   • 为常用查询字段创建索引
   • 定期执行OPTIMIZE TABLE
   • 配置合理的innodb_buffer_pool_size

6. 常见问题排查

6.1 跨域问题解决方案

SpringBoot配置类示例：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*")
            .maxAge(3600);
    }
}

6.2 文件上传大小限制

需要在application.yml中配置：

yaml复制spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 20MB

6.3 事务失效场景

常见原因及解决方案：

1. 方法非public修饰 - 改为public
2. 自调用问题 - 通过AopContext解决
3. 异常被捕获未抛出 - 重新抛出RuntimeException
4. 数据库引擎不支持 - 使用InnoDB

这个项目在开发过程中最大的收获是理解了如何设计可扩展的API接口，以及前后端协同开发的规范制定。特别是在权限控制方面，RBAC模型与前端路由权限的联动实现需要精心设计