项目概述 • 技术栈 • 功能模块 • 快速开始 • 项目截图
--- ## 项目概述 **CmdAdmin** 是一个基于 **Spring Boot 4** 和 **Vue 3** 的企业级管理系统脚手架，采用前后端分离架构设计，提供了完整的用户认证、权限管理、动态路由和菜单管理功能。系统界面美观、功能完善、易于扩展，适合作为企业级应用的基础框架。 ### 核心特性 - 🚀 **最新技术栈**：Spring Boot 4 + Vue 3 + TypeScript - 🔐 **安全认证**：JWT + Spring Security + Redis 分布式会话 - 🎨 **精美界面**：Element Plus + SCSS 现代化 UI 设计 - 📊 **数据可视化**：ECharts 图表展示 - ⏰ **定时任务**：Quartz 分布式任务调度 - 📝 **日志管理**：登录日志、操作日志、异常日志完整记录 - 🔧 **系统监控**：服务器监控、Redis 缓存监控 - 🌐 **前后端分离**：RESTful API 设计，支持跨域 --- ## 技术栈 ### 后端技术 | 技术 | 版本 | 说明 | |------|------|------| | [Spring Boot](https://spring.io/projects/spring-boot) | 4.0.0 | 核心框架，提供自动配置和快速开发能力 | | [JDK](https://openjdk.org/) | 21 | Java 开发工具包，使用最新 LTS 版本 | | [Spring Data JPA](https://spring.io/projects/spring-data-jpa) | - | 数据持久层，简化数据库操作 | | [Spring Security](https://spring.io/projects/spring-security) | - | 安全框架，提供认证和授权功能 | | [Spring Boot Quartz](https://docs.spring.io/spring-boot/docs/current/reference/html/io.html#io.quartz) | - | 定时任务调度框架 | | [Spring Boot Actuator](https://docs.spring.io/spring-boot/docs/current/reference/html/actuator.html) | - | 应用监控和管理端点 | | [PostgreSQL](https://www.postgresql.org/) | 15+ | 关系型数据库，主数据存储 | | [Redis](https://redis.io/) | 6+ | 缓存数据库，会话存储和缓存 | | [JWT (JSON Web Token)](https://jwt.io/) | 0.12.5 | 无状态身份认证机制 | | [Fastjson2](https://github.com/alibaba/fastjson2) | 2.0.50 | 高性能 JSON 处理库 | | [Lombok](https://projectlombok.org/) | - | 代码简化工具，减少样板代码 | | [Maven](https://maven.apache.org/) | 3.8+ | 项目构建和依赖管理工具 | ### 前端技术 | 技术 | 版本 | 说明 | |------|------|------| | [Vue](https://vuejs.org/) | 3.5.13 | 渐进式 JavaScript 框架 | | [Vue Router](https://router.vuejs.org/) | 4.5.0 | 官方路由管理器，支持动态路由 | | [Pinia](https://pinia.vuejs.org/) | 3.0.2 | 状态管理库，Vuex 的继任者 | | [TypeScript](https://www.typescriptlang.org/) | 5.8.3 | 类型安全的 JavaScript 超集 | | [Vite](https://vitejs.dev/) | 6.2.6 | 下一代前端构建工具，极速冷启动 | | [Element Plus](https://element-plus.org/) | 2.9.7 | 基于 Vue 3 的组件库 | | [Element Plus Icons](https://element-plus.org/en-US/component/icon.html) | 2.3.2 | 图标库 | | [ECharts](https://echarts.apache.org/) | 5.6.0 | 开源可视化库，数据图表展示 | | [SCSS](https://sass-lang.com/) | 1.86.3 | CSS 预处理器，支持变量和嵌套 | | [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import) | 19.1.2 | 自动导入 API，无需手动 import | | [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) | 28.4.1 | 组件自动导入，支持 Element Plus 按需加载 | --- ## 功能模块 ### 🔐 认证授权 - **JWT 认证**：基于 JWT 的无状态认证机制 - **Redis 会话**：登录令牌存储于 Redis，支持分布式部署 - **Token 刷新**：支持无感知续期，自动刷新过期令牌 - **多端登录控制**：支持限制同时登录设备数量 ### 👥 系统管理 | 模块 | 功能说明 | |------|----------| | **用户管理** | 用户增删改查、状态管理、密码重置、批量导入导出 | | **角色管理** | 角色增删改查、菜单权限分配、数据权限隔离 | | **菜单管理** | 多级菜单嵌套、图标配置、动态路由生成、权限标识 | | **部门管理** | 树形结构展示、部门负责人、数据权限隔离 | | **岗位管理** | 岗位信息维护、编码管理、排序管理 | ### 🛠️ 系统工具 | 模块 | 功能说明 | |------|----------| | **字典管理** | 字典类型管理、字典数据维护、支持缓存刷新 | | **参数管理** | 系统运行参数配置、运行时参数调整、参数缓存 | | **通知公告** | 公告发布管理、公告类型设置、公告状态管理 | | **定时任务** | Cron 表达式配置、任务调度、执行日志、暂停/恢复/立即执行 | ### 📊 系统监控 | 模块 | 功能说明 | |------|----------| | **服务器监控** | CPU 使用率、内存使用、磁盘空间、JVM 运行状态、系统负载 | | **缓存监控** | Redis 连接状态、缓存 Key 列表、缓存命中率、缓存清理操作 | ### 📝 日志管理 | 模块 | 功能说明 | |------|----------| | **登录日志** | 登录信息记录、IP/地点/浏览器/OS、登录状态、条件查询 | | **操作日志** | 操作行为记录、请求参数、操作结果、执行时长、异常信息 | | **异常日志** | 系统异常捕获、异常堆栈信息、发生时间、请求信息 | --- ## 项目截图 ### 登录页面 简洁美观的登录界面，支持记住密码功能。  ### 系统首页 数据可视化仪表盘，展示关键业务指标和统计图表。  ### 服务器监控 实时监控服务器运行状态，包括 CPU、内存、磁盘、JVM 等信息。  ### 缓存监控 Redis 缓存实时监控，支持查看缓存 Key、过期时间等详细信息。  ### 操作日志 完整的操作日志记录，支持按模块、操作人员等条件查询。  --- ## 目录结构 ``` cmdAdmin/ ├── src/ # 后端源代码 │ ├── main/ │ │ ├── java/ # Java 源代码 │ │ │ └── com/ │ │ │ └── cmdadmin/ │ │ │ ├── CmdAdminApplication.java # 应用启动类 │ │ │ ├── common/ # 公共组件 │ │ │ │ ├── config/ # 配置类 │ │ │ │ ├── filter/ # 过滤器 │ │ │ │ ├── response/ # 统一响应格式 │ │ │ │ └── utils/ # 工具类 │ │ │ └── system/ # 系统模块 │ │ │ ├── controller/ # 控制器 │ │ │ ├── entity/ # 实体类 │ │ │ ├── repository/ # 数据访问层 │ │ │ └── service/ # 业务逻辑层 │ │ └── resources/ # 资源文件 │ │ ├── db/ # 数据库脚本 │ │ ├── application.yml # 应用配置 │ │ └── logback-spring.xml # 日志配置 │ └── test/ # 测试代码 ├── admin-web/ # 前端代码 │ ├── src/ │ │ ├── api/ # API 接口 │ │ ├── assets/ # 静态资源 │ │ ├── components/ # 公共组件 │ │ ├── directives/ # 自定义指令 │ │ ├── router/ # 路由配置 │ │ ├── services/ # 服务层（API 封装） │ │ ├── stores/ # 状态管理（Pinia） │ │ ├── views/ # 页面视图 │ │ └── App.vue # 根组件 │ ├── package.json │ └── vite.config.ts ├── docs/ # 文档和截图 │ └── images/ # 项目截图 ├── pom.xml # Maven 配置 └── README.md # 项目说明文档 ``` --- ## 快速开始 ### 环境要求 - **JDK**：21+ - **Maven**：3.8+ - **Node.js**：18+ - **PostgreSQL**：15+ - **Redis**：6+ ### 后端启动 1. **创建数据库** ```sql CREATE DATABASE cmdadmin WITH ENCODING = 'UTF8'; ``` 2. **修改配置文件** 编辑 `src/main/resources/application.yml`，配置数据库和 Redis 连接信息。 ```yaml spring: datasource: url: jdbc:postgresql://localhost:5432/cmdadmin username: postgres password: 123456 driver-class-name: org.postgresql.Driver data: redis: host: localhost port: 6379 password: database: 0 ``` 3. **启动后端服务** ```bash # 方式一：使用 Maven mvn spring-boot:run # 方式二：打包后运行 mvn clean package java -jar target/cmdAdmin-1.0-SNAPSHOT.jar ``` 后端服务默认运行在 `http://localhost:8080` ### 前端启动 1. **进入前端目录** ```bash cd admin-web ``` 2. **安装依赖** ```bash npm install ``` 3. **启动开发服务器** ```bash npm run dev ``` 前端开发服务器默认运行在 `http://localhost:3000` 4. **构建生产环境** ```bash npm run build ``` --- ## 配置说明 ### JWT 配置 ```yaml jwt: secret: cmd_admin_secret_key_2024 # JWT 密钥 expiration: 86400000 # 过期时间（毫秒），默认 24 小时 refresh-expiration: 604800000 # 刷新令牌过期时间（毫秒），默认 7 天 redis-key-prefix: "jwt:token:" # Redis 中存储令牌的前缀 ``` ### 前端代理配置 在 `admin-web/vite.config.ts` 中配置： ```typescript server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } ``` --- ## 前端组件使用说明 ### 字典组件 系统内置字典组件，基于字典类型自动加载字典数据。 #### DictSelect - 字典下拉选择 ```vue如果这个项目对您有帮助，请给个 ⭐ Star 支持一下！