# 微服务cloud前端 **Repository Path**: zmd1992/springcloud-ui ## Basic Information - **Project Name**: 微服务cloud前端 - **Description**: 基于 Spring Boot 3.2 + Spring Cloud 2023 + Vue3 的前后端分离微服务项目，内置 RBAC 权限、代码生成、定时任务、日志收集、链路追踪、服务监控等完整功能。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-09-22 - **Last Updated**: 2026-09-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # SpringCloud Demo 企业级微服务架构 > 基于 Spring Boot 3.2 + Spring Cloud 2023 + Vue3 的前后端分离微服务项目，内置 RBAC 权限、代码生成、定时任务、日志收集、链路追踪、服务监控等完整功能。 --- ## 📖 项目简介 这是一个企业级微服务架构脚手架，整合了当前主流的技术栈，开箱即用。项目包含： - **完整的 RBAC 权限体系**：用户、角色、菜单、部门、字典 - **代码生成器**：一键生成前后端 CRUD 代码 - **分布式定时任务**：基于 XXL-Job - **日志收集分析**：ELK 技术栈，支持日志全文检索 - **链路追踪**：Micrometer Tracing + Zipkin - **服务监控**：Spring Boot Admin + Redis 监控 - **多主题/暗黑模式**：前端支持多种主题色和暗黑模式 - **多环境配置**：Nacos 配置中心管理，支持 dev/prod 环境 --- ## 🛠 技术栈 ### 后端技术栈 | 分类 | 技术 | 版本 | 说明 | |------|------|------|------| | 基础框架 | Spring Boot | 3.2.0 | 微服务基础框架 | | 微服务 | Spring Cloud | 2023.0.x | 微服务治理 | | 阿里巴巴 | Spring Cloud Alibaba | 2023.0.1.0 | Nacos、Sentinel 等 | | 注册/配置中心 | Nacos | 2.x | 服务注册 + 配置管理 | | 网关 | Spring Cloud Gateway | 4.x | 响应式网关 | | ORM | MyBatis-Plus | 3.5.x | 数据库 ORM | | 数据库 | MySQL | 8.0+ | 关系型数据库 | | 缓存 | Redis | 6.0+ | 缓存 + 分布式锁 | | 搜索引擎 | Elasticsearch | 9.5.4 | 全文检索 | | 日志收集 | Logstash + Kibana | 9.5.4 | ELK 日志分析 | | 链路追踪 | Micrometer Tracing | 1.x | Zipkin 上报 | | 熔断限流 | Resilience4j + Sentinel | - | 服务容错 | | 定时任务 | XXL-Job | 2.x | 分布式任务调度 | | 接口文档 | SpringDoc OpenAPI | 2.3.0 | Swagger 3 文档 | | 认证授权 | JWT + Spring Security | - | 无状态认证 | | 工具库 | Hutool + Fastjson2 | - | Java 工具集 | | JDK | Java | 17 | LTS 版本 | ### 前端技术栈 | 分类 | 技术 | 版本 | 说明 | |------|------|------|------| | 框架 | Vue 3 | 3.4.x | Composition API | | 语言 | TypeScript | 5.x | 类型安全 | | 构建工具 | Vite | 5.x | 前端构建 | | UI 组件库 | Element Plus | 2.x | 桌面端 UI | | 状态管理 | Pinia | 2.x | 轻量状态管理 | | 路由 | Vue Router | 4.x | 前端路由 | | HTTP | Axios | 1.x | 请求库 | | CSS | SCSS | - | 预处理器 | | 图标 | Iconify | - | 图标方案 | --- ## 项目截图 ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20155334.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160002.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160016.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160029.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160055.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160108.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160116.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160125.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160143.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160151.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160326.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160304.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160251.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160232.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160221.png)![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-09-23%20160211.png) ## 📂 项目结构 ``` springcloud-demo/ ├── springcloud-ui/ # 前端项目（Vue3 + Vite） │ ├── src/ │ │ ├── api/ # 接口请求层 │ │ │ ├── monitor/ # 监控相关接口 │ │ │ ├── system/ # 系统管理接口 │ │ │ └── tool/ # 工具相关接口 │ │ ├── assets/ # 静态资源 │ │ │ ├── icons/ # SVG 图标 │ │ │ └── images/ # 图片资源 │ │ ├── components/ # 公共组件 │ │ │ ├── IconPicker/ # 图标选择器 │ │ │ ├── RightToolbar/ # 表格右侧工具栏 │ │ │ └── ... │ │ ├── layout/ # 布局组件 │ │ │ ├── components/ # 布局子组件 │ │ │ │ ├── Sidebar/ # 侧边栏 │ │ │ │ ├── Navbar/ # 顶部导航 │ │ │ │ ├── TagsView/ # 标签页 │ │ │ │ └── Settings/ # 设置面板 │ │ │ └── index.vue # 布局入口 │ │ ├── router/ # 路由配置 │ │ ├── store/ # Pinia 状态管理 │ │ │ ├── modules/ # 各模块 store │ │ │ └── index.ts │ │ ├── styles/ # 全局样式 │ │ ├── utils/ # 工具函数 │ │ │ ├── request.ts # Axios 封装 │ │ │ └── auth.ts # 认证工具 │ │ ├── views/ # 页面视图 │ │ │ ├── login/ # 登录页 │ │ │ ├── home/ # 首页 │ │ │ ├── system/ # 系统管理 │ │ │ │ ├── user/ # 用户管理 │ │ │ │ ├── role/ # 角色管理 │ │ │ │ ├── menu/ # 菜单管理 │ │ │ │ ├── dept/ # 部门管理 │ │ │ │ ├── post/ # 岗位管理 │ │ │ │ ├── dict/ # 字典管理 │ │ │ │ └── config/ # 参数配置 │ │ │ ├── monitor/ # 监控管理 │ │ │ │ ├── operlog/ # 操作日志 │ │ │ │ ├── loginlog/ # 登录日志 │ │ │ │ ├── online/ # 在线用户 │ │ │ │ ├── cache/ # 缓存监控 │ │ │ │ └── server/ # 服务监控 │ │ │ └── tool/ # 开发工具 │ │ ├── gen/ # 代码生成 │ │ ├── job/ # 定时任务 │ │ └── swagger/ # 接口文档 │ │ ├── App.vue │ │ └── main.ts │ ├── index.html │ ├── package.json │ ├── vite.config.ts │ └── tsconfig.json │ └── springcloud-api/ # 后端项目 ├── pom.xml # 父级 Maven 依赖管理 ├── common-core/ # 公共模块 │ └── src/main/ │ ├── java/com/example/common/core/ │ │ ├── config/ # 配置类（Web、ES、MyBatis 等） │ │ ├── constant/ # 常量定义 │ │ ├── domain/ # 实体类 │ │ ├── enums/ # 枚举 │ │ ├── exception/ # 全局异常处理 │ │ ├── handler/ # MetaObjectHandler（自动填充） │ │ └── utils/ # 工具类 │ └── resources/ ├── gateway/ # 网关服务（端口 8086） │ └── src/main/ │ ├── java/com/example/gateway/ │ │ ├── config/ # 网关配置 │ │ ├── filter/ # 全局过滤器 │ │ └── GatewayApplication.java │ └── resources/ │ ├── bootstrap.yml # Nacos 配置入口 │ └── logback-spring.xml ├── system/ # 系统管理服务（端口 8084） │ └── src/main/ │ ├── java/com/example/system/ │ │ ├── controller/ # 控制器 │ │ ├── service/ # 业务逻辑 │ │ │ └── impl/ │ │ ├── mapper/ # MyBatis Mapper │ │ └── SystemApplication.java │ └── resources/ │ ├── bootstrap.yml │ ├── application.yml │ ├── logback-spring.xml │ └── mapper/ # XML Mapper 文件 ├── gen/ # 代码生成服务 │ └── src/main/ │ └── ... ├── job/ # 定时任务服务（端口 8083） │ └── src/main/ │ └── ... └── msg/ # 消息服务 └── src/main/ └── ... ``` --- ## 📋 环境要求 | 软件 | 最低版本 | 推荐版本 | 说明 | |------|---------|---------|------| | JDK | 17 | 17 LTS | 必须 17+ | | Node.js | 16 | 18 LTS | 前端构建 | | Maven | 3.6 | 3.8+ | 后端构建 | | MySQL | 8.0 | 8.0.x | 数据库 | | Redis | 6.0 | 7.x | 缓存 | | Nacos | 2.0 | 2.3+ | 注册/配置中心 | | Elasticsearch | 9.x | 9.5.4 | 搜索引擎 | | Logstash | 9.x | 9.5.4 | 日志收集 | | Kibana | 9.x | 9.5.4 | 日志可视化 | | Docker | - | 20.x | 可选，用于 Zipkin | --- ## 🚀 快速开始 ### 第一步：初始化数据库 ```sql -- 创建数据库 CREATE DATABASE springcloud_demo DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; -- 执行项目 SQL 脚本（建表 + 初始数据） USE springcloud_demo; SOURCE /path/to/sql/schema.sql; ``` ### 第二步：启动中间件 ```bash # 1. 启动 Redis redis-server # 2. 启动 Nacos（单机模式） cd nacos/bin startup.bat -m standalone # 访问 http://localhost:8848/nacos 账号密码 nacos/nacos # 3. 启动 Elasticsearch cd elasticsearch-9.5.4/bin elasticsearch.bat # 4. 启动 Logstash cd logstash-9.5.4/bin logstash.bat -f ../config/logstash.conf # 5. 启动 Kibana cd kibana-9.5.4/bin kibana.bat # 6. 启动 Zipkin（可选） docker run -d -p 9411:9411 openzipkin/zipkin # 7. 启动 XXL-Job Admin（可选） # 执行 xxl-job-admin 的 SQL，然后启动 admin 服务 ``` ### 第三步：Nacos 配置 在 Nacos 控制台创建以下配置（DEFAULT_GROUP）： | Data ID | 格式 | 说明 | |---------|------|------| | `common.yml` | YAML | 公共配置（数据库、Redis、ES、链路追踪等） | | `system.yml` | YAML | system 服务配置 | | `system-dev.yml` | YAML | system 开发环境配置 | | `gateway.yml` | YAML | 网关路由配置 | | `logback-nacos` | Properties | 日志参数（log.home、log.level、log.pattern） | ### 第四步：启动后端 ```bash cd springcloud-api # 编译整个项目 mvn clean install -DskipTests # 按顺序启动（IDEA 中运行 Application 类）： # 1. GatewayApplication 端口 8086 # 2. SystemApplication 端口 8084 # 3. JobApplication 端口 8083 # 4. GenApplication 端口随机 # 5. MsgApplication 端口随机 ``` ### 第五步：启动前端 ```bash cd springcloud-ui # 安装依赖 npm install # 开发模式启动 npm run dev # 生产构建 npm run build ``` ### 第六步：访问系统 | 服务 | 地址 | 账号 | |------|------|------| | 前端页面 | http://localhost:3000 | admin / admin123 | | Nacos 控制台 | http://localhost:8848/nacos | nacos / nacos | | Kibana | http://localhost:5601 | - | | Zipkin | http://localhost:9411 | - | | Swagger 文档 | http://localhost:8084/doc.html | - | | XXL-Job 控制台 | http://localhost:8080/xxl-job-admin | admin / 123456 | --- ## 🔧 端口分配 | 服务 | 端口 | 说明 | |------|------|------| | gateway | 8086 | API 网关入口 | | system | 8084 | 系统管理服务 | | job | 8083 | 定时任务服务 | | gen | 8085 | 代码生成服务 | | msg | 8087 | 消息服务 | | Nacos | 8848 | 注册/配置中心 | | MySQL | 3306 | 数据库 | | Redis | 6379 | 缓存 | | Elasticsearch | 9200 | 搜索引擎 | | Logstash | 5044 | 日志接收端口 | | Kibana | 5601 | 日志可视化 | | Zipkin | 9411 | 链路追踪 | | 前端 | 3000 | Vue3 开发服务器 | --- ## 📦 功能模块 ### 系统管理 - ✅ 用户管理：CRUD、角色分配、重置密码、导入导出 - ✅ 角色管理：菜单权限、数据权限、角色分配 - ✅ 菜单管理：目录/菜单/按钮三级、路由配置、图标选择 - ✅ 部门管理：树形结构、数据权限 - ✅ 岗位管理：岗位 CRUD - ✅ 字典管理：数据字典维护、缓存刷新 - ✅ 参数设置：系统参数配置 ### 监控中心 - ✅ 在线用户：在线用户列表、强制下线 - ✅ 登录日志：登录记录、登出记录 - ✅ 操作日志：操作日志查询、详情、删除 - ✅ 缓存监控：Redis 信息、key 查看 - ✅ 服务监控：JVM、CPU、内存、磁盘 ### 开发工具 - ✅ 代码生成：表选择、字段配置、预览下载 - ✅ 接口文档：Swagger 在线调试 - ✅ 定时任务：任务管理、执行日志 --- ## 🎨 前端特色 - **多主题**：内置多套主题色，支持一键切换 - **暗黑模式**：支持浅色/深色主题切换 - **侧边栏布局**：支持左侧菜单/顶部菜单两种布局 - **标签页**：多标签页导航，支持关闭其他/全部 - **响应式**：适配不同屏幕尺寸 - **权限控制**：按钮级权限指令 - **动态路由**：根据菜单动态生成路由 --- ## 🗄 数据库设计 主要表结构： | 表名 | 说明 | |------|------| | sys_user | 用户表 | | sys_role | 角色表 | | sys_menu | 菜单表 | | sys_dept | 部门表 | | sys_post | 岗位表 | | sys_dict_type | 字典类型表 | | sys_dict_data | 字典数据表 | | sys_config | 参数配置表 | | sys_logininfor | 登录日志表 | | sys_oper_log | 操作日志表 | | sys_job | 定时任务表 | --- ## 📝 开发规范 ### 后端规范 - 包名统一使用 `com.example.模块名` - Controller 层只做参数校验和结果封装，不写业务逻辑 - Service 层写业务逻辑，接口 + 实现分离 - Mapper 层只做数据库操作 - 实体类继承 BaseEntity，包含创建人/时间、更新人/时间 - 统一返回结果 `Result` - 全局异常处理 `GlobalExceptionHandler` ### 前端规范 - 组件名使用 PascalCase - API 函数使用 camelCase - 页面组件放在 views 下，公共组件放在 components - 使用 TypeScript 类型定义，避免 any - SCSS 嵌套写法，不使用全局样式污染 ### Git 分支规范 - `main`：生产分支 - `dev`：开发分支 - `feature/xxx`：功能分支 - `bugfix/xxx`：修复分支 --- ## 📦 部署说明 ### 后端部署 ```bash # 打包 mvn clean package -DskipTests # 运行 java -jar system.jar --spring.profiles.active=prod ``` ### 前端部署 ```bash # 打包 npm run build # 将 dist 目录部署到 Nginx ``` ### Docker 部署（可选） 项目支持 Docker 容器化部署，使用 Dockerfile + docker-compose。 --- ## ❓ 常见问题
1. Nacos 配置不生效？ - 确认 bootstrap.yml 中 Nacos 地址正确 - 确认 Data ID 和 Group 完全匹配 - 确认配置格式（YAML/Properties）正确 - 检查是否加了 `refresh: true`
2. 跨域问题？ - 网关统一处理跨域，前端不需要额外配置 - 确认请求都经过网关（8086）
3. 密码加密方式？ - 使用 BCryptPasswordEncoder - 密码哈希以 `$2a$` 开头
4. 如何重置 admin 密码？ ```sql UPDATE sys_user SET password='$2a$10$xxx' WHERE username='admin'; ``` 使用 BCrypt 生成新密码后更新即可。
--- ## 📄 License MIT License，可自由使用和修改。