Spring Boot 3.X与Vue 3构建企业级后台管理系统-代码聚汇网

Spring Boot 3.X与Vue 3构建企业级后台管理系统

Noamwa

1. 项目概述

最近在搭建一个基于Spring Boot 3.X的后台管理系统demo，这个项目采用了前后端分离架构，后端使用Spring Boot 3.3.13，前端使用Vue 3。作为一个完整的系统管理平台，它集成了用户管理、系统日志、服务注册发现等基础功能模块，非常适合作为企业级应用的起点或者学习Spring Boot 3.X的参考项目。

这个demo最大的特点是完全基于最新的Spring Boot 3.X生态构建，使用了Spring Cloud 2022.0.0、MyBatis-Plus 3.5.6等最新版本的技术栈。相比传统的Spring Boot 2.X项目，3.X版本在性能、安全性和开发体验上都有显著提升，特别是对Java 17特性的支持更加完善。

2. 技术栈选型解析

2.1 后端技术栈

后端技术栈的选择经过了仔细考量，主要基于以下几个原则：

采用最新稳定版本，确保长期维护支持
选择社区活跃、文档完善的开源组件
兼顾性能和开发效率

具体技术组件如下：

核心框架：Spring Boot 3.3.13 + Spring Cloud 2022.0.0
ORM框架：MyBatis-Plus 3.5.6（简化了90%的CRUD操作）
数据库连接池：Druid 1.2.16（阿里开源的强大连接池）
服务注册发现：Nacos 2.3.2（替代Eureka的更好选择）
缓存：Redis（使用Spring Data Redis集成）
安全认证：JWT + Spring Security（现代无状态认证方案）

2.2 前端技术栈

前端采用了Vue 3组合式API开发，主要技术包括：

构建工具：Vite 6.0.3（极速的开发体验）
UI框架：Element Plus（基于Vue 3的企业级UI组件库）
状态管理：Pinia（Vuex的替代方案）
路由：Vue Router 4.x

3. 项目结构设计

3.1 后端项目结构

后端采用标准的Maven多模块结构，主要目录说明：

code复制stack/
├── src/
│   ├── main/
│   │   ├── java/com/zh/stack/
│   │   │   ├── aspect/            # AOP切面
│   │   │   ├── config/            # 配置类
│   │   │   ├── controller/        # 控制器
│   │   │   ├── entity/            # 实体类
│   │   │   ├── filter/            # 过滤器
│   │   │   ├── mapper/            # Mapper接口
│   │   │   ├── service/           # 服务层
│   │   │   └── util/              # 工具类
│   │   └── resources/
│   │       ├── db/                # 数据库脚本
│   │       ├── static/            # 静态资源
│   │       ├── application.yml    # 主配置文件
│   │       └── logback-spring.xml # 日志配置
└── pom.xml                        # Maven依赖管理

3.2 前端项目结构

前端采用Vite创建的Vue 3项目结构：

code复制frontend/
├── src/
│   ├── views/          # 页面组件
│   │   ├── Login.vue        # 登录页面
│   │   ├── MainLayout.vue   # 主布局
│   │   ├── UserManagement.vue # 用户管理
│   │   └── SystemLogs.vue   # 系统日志
│   ├── App.vue        # 应用入口组件
│   └── main.js        # 应用初始化
├── index.html         # HTML入口
├── package.json       # 前端依赖
└── vite.config.js     # Vite配置

4. 核心功能实现

4.1 用户管理模块

用户管理模块实现了完整的CRUD功能，包括：

用户列表分页查询：基于MyBatis-Plus的分页插件实现
用户增删改查：使用MyBatis-Plus的Service层封装方法
关键字搜索：动态SQL构造查询条件

关键代码示例：

java复制// UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {
    
    @Autowired
    private UserService userService;
    
    @GetMapping("/list")
    public Result<Page<User>> listUsers(
            @RequestParam(defaultValue = "1") Integer pageNum,
            @RequestParam(defaultValue = "10") Integer pageSize,
            @RequestParam(required = false) String keyword) {
        
        Page<User> page = new Page<>(pageNum, pageSize);
        LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
        
        if (StringUtils.isNotBlank(keyword)) {
            queryWrapper.like(User::getUsername, keyword)
                       .or()
                       .like(User::getNickname, keyword);
        }
        
        return Result.success(userService.page(page, queryWrapper));
    }
}

4.2 认证授权模块

采用JWT + Spring Security实现无状态认证：

登录流程：
- 用户提交用户名密码
- 后端验证通过后生成JWT令牌
- 令牌返回给前端存储
权限控制：
- 基于角色的访问控制(RBAC)
- 使用Spring Security的注解进行方法级权限控制

JWT工具类关键代码：

java复制// JwtUtil.java
public class JwtUtil {
    private static final String SECRET_KEY = "your-secret-key";
    private static final long EXPIRATION_TIME = 86400000; // 24小时
    
    public static String generateToken(String username) {
        return Jwts.builder()
                .setSubject(username)
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
                .signWith(SignatureAlgorithm.HS256, SECRET_KEY)
                .compact();
    }
    
    public static String getUsernameFromToken(String token) {
        return Jwts.parser()
                .setSigningKey(SECRET_KEY)
                .parseClaimsJws(token)
                .getBody()
                .getSubject();
    }
}

4.3 系统日志模块

通过AOP实现操作日志自动记录：

日志切面：拦截Controller方法调用
日志内容：记录操作人、操作时间、方法名、参数等
异步记录：使用@Async避免影响主流程性能

日志切面实现：

java复制// LogAspect.java
@Aspect
@Component
@RequiredArgsConstructor
public class LogAspect {
    private final LogService logService;
    
    @Pointcut("@annotation(com.zh.stack.annotation.OperateLog)")
    public void logPointCut() {}
    
    @Around("logPointCut()")
    public Object around(ProceedingJoinPoint joinPoint) throws Throwable {
        MethodSignature signature = (MethodSignature) joinPoint.getSignature();
        Method method = signature.getMethod();
        
        long beginTime = System.currentTimeMillis();
        Object result = joinPoint.proceed();
        long time = System.currentTimeMillis() - beginTime;
        
        saveLog(joinPoint, method, time, result);
        return result;
    }
    
    private void saveLog(ProceedingJoinPoint joinPoint, Method method, long time, Object result) {
        OperateLog operateLog = method.getAnnotation(OperateLog.class);
        
        Log log = new Log();
        log.setOperation(operateLog.value());
        log.setTime(time);
        log.setMethod(method.getName());
        log.setParams(JsonUtils.toJson(joinPoint.getArgs()));
        log.setResult(JsonUtils.toJson(result));
        
        // 异步保存日志
        logService.saveLog(log);
    }
}

5. 关键配置详解

5.1 数据库配置

使用Druid连接池的优化配置：

yaml复制spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/stack?useUnicode=true&characterEncoding=UTF-8
    username: root
    password: root
    druid:
      initial-size: 5
      min-idle: 5
      max-active: 20
      max-wait: 60000
      time-between-eviction-runs-millis: 60000
      min-evictable-idle-time-millis: 300000
      validation-query: SELECT 1
      test-while-idle: true
      test-on-borrow: false
      test-on-return: false

5.2 MyBatis-Plus配置

MyBatis-Plus的常用配置项：

yaml复制mybatis-plus:
  mapper-locations: classpath*:/mapper/**/*.xml
  type-aliases-package: com.zh.stack.entity
  global-config:
    db-config:
      id-type: auto
      table-prefix: t_
      logic-delete-field: deleted  # 逻辑删除字段
      logic-delete-value: 1       # 已删除值
      logic-not-delete-value: 0   # 未删除值
  configuration:
    map-underscore-to-camel-case: true
    cache-enabled: false

5.3 Nacos服务发现配置

Nacos作为服务注册中心的配置：

yaml复制spring:
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848
        namespace: 3a95c589-19a6-4834-b385-bc61c6ac7fe4
        register-enabled: true

6. 开发环境搭建

6.1 后端环境准备

JDK 17+：Spring Boot 3.x要求的最低版本
MySQL 8.x：建议使用8.0以上版本
Redis 6.x+：用于缓存和会话管理
Nacos 2.3.2+：服务注册与配置中心
Maven 3.8+：项目构建工具

6.2 前端环境准备

Node.js 18+：Vite和Vue 3的运行环境
npm/yarn：包管理工具
VSCode：推荐的前端开发IDE

6.3 初始化步骤

克隆项目代码
创建MySQL数据库并执行schema.sql
启动Nacos和Redis服务
后端使用mvn spring-boot:run启动
前端使用npm install安装依赖后npm run dev启动

7. 常见问题与解决方案

7.1 启动类问题

问题1：Spring Boot应用启动失败，报"java.lang.UnsupportedClassVersionError"

原因：JDK版本不匹配，Spring Boot 3.x需要JDK 17+

解决方案：

检查JDK版本：java -version
安装JDK 17或更高版本
配置IDE使用正确的JDK

7.2 数据库连接问题

问题2：连接MySQL时报"Public Key Retrieval is not allowed"

原因：MySQL 8.x默认要求SSL连接

解决方案：
在数据库连接URL中添加参数：

code复制jdbc:mysql://localhost:3306/stack?allowPublicKeyRetrieval=true&useSSL=false

7.3 MyBatis-Plus常见问题

问题3：MyBatis-Plus分页不生效

原因：未配置分页插件

解决方案：
添加分页插件配置类：

java复制@Configuration
public class MybatisPlusConfig {
    
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

7.4 Nacos集成问题

问题4：服务注册到Nacos失败

原因：可能是命名空间或分组配置错误