【开源推荐】心念后台 xn-admin：Spring Cloud 微服务后端 + 四套前端（React / Vue），Apache 2.0 可商用

心念后台 xn-admin：Spring Cloud 微服务后端 + 四套前端（React / Vue）架构解析

摘要：心念后台（xn-admin） 是一套基于 Spring Cloud 微服务 的完整开源后台管理系统，采用 Apache 2.0 协议。项目包含 1 个微服务后端（网关 + 系统 / 文件 / 日志 / 任务四业务服务）与 4 套管理端前端（React 19 + Ant Design、Vue3 + TS、Vue3 + JS、Vue2 风格），共用同一网关 API。后端基于 Java 21 + Spring Boot 4 + Nacos + MySQL + Redis + MinIO + Quartz，提供 RBAC 权限、动态路由、page-ui 驱动 CRUD、系统监控、日志审计、代码生成、文件分片上传等能力；前端提供 30+ 通用业务组件，支持多布局与主题切换。本文从架构设计、技术栈选型、工程化实践等角度，分析该项目的实现思路，供学习 Spring Cloud 微服务或中后台系统设计的开发者参考。 关键词：后台管理系统、Spring Boot 4、Spring Cloud、React 19、Vue 3、Ant Design、Element Plus、RBAC、开源、可商用

一、项目地址与体验入口

心念后台（xn-admin） 采用 Apache License 2.0 开源，个人学习、自用部署、商业项目均可使用。

1.1 源码仓库

说明：开源范围为一微服务后端 + 四套管理端，共用同一网关 API。

1.2 快速入口

二、项目简介

2.1 这是什么？

心念后台 是一套面向中后台场景的完整开源管理系统，不是「只有几个页面的 Demo」，而是从登录鉴权、权限体系、组织管理，到文件上传、定时任务、系统监控、日志审计、代码生成等企业级能力一应俱全的可落地方案。

整体采用 前后端分离 + 微服务 架构：

• 一个后端：xn-admin-cloud，按网关 / 系统 / 文件 / 日志 / 任务拆成 5 个 Spring Boot 服务
• 四套管理端：React、Vue3+TS、Vue3+JS、Vue2 风格（Options API），共用同一套 REST API，按团队技术栈自由选型

2.2 为什么要做四套前端？

考虑到前端技术栈的多样性，不同团队、不同项目对框架和语言各有偏好：有人用 React，有人用 Vue；有人习惯 TypeScript，有人更熟悉 JavaScript；写法上也有 Composition API 与 Options API 之分。

心念后台因此提供 四套管理端，对接同一套后端 API，业务能力一致，各自采用原生 UI 风格（React 用 Ant Design，Vue 用 Element Plus），避免「换皮仿壳」：

四套前端开发端口错开（1800–1803），可同时联调同一后端，方便按团队习惯选型，也便于横向对比不同技术栈的实现方式。

2.3 核心特色（区别于普通 Admin 模板）

2.4 技术栈总览

四套管理端业务能力一致，差异仅在框架、语言与 UI 组件库，可按团队习惯任选其一对接后端。

选型建议：

• 团队主栈是 React → xn-admin-react-ts（Ant Design）
• 团队主栈是 Vue，且用 TypeScript → xn-admin-vue3-ts（Element Plus）
• 团队主栈是 Vue，且用 JavaScript → xn-admin-vue3-js（Composition）或 xn-admin-vue2-js（Options API）
• 只需后端、前端自研 → 拉取 xn-admin-cloud，对接网关 8088 即可

三、整体架构

┌─────────────────────────────────────────────────────────────┐
│ 四套管理端前端 │
│ React (1800) │ Vue3+TS (1803) │ Vue3+JS (1802) │ Vue2 (1801) │
└──────────────────────────┬──────────────────────────────────┘
│ /api /uploads /ws
▼
┌────────────────────────┐
│ xn-gateway :8088 │ ← 统一网关入口
└───────────┬────────────┘
│ Nacos 服务发现 (lb://)
┌─────────────────┼─────────────────┬──────────────┐
▼ ▼ ▼ ▼
xn-system:8081 xn-file:8082 xn-log:8083 xn-job:8084
登录/RBAC/组织 文件/分片上传 各类日志 定时任务
│ │ │ │
└─────────────────┴─────────────────┴──────────────┘
│
MySQL │ Redis │ MinIO │ Nacos
(docker compose 一键拉起)

网关路由规则：

四、后端：xn-admin-cloud

4.1 技术栈

4.2 微服务拆分

4.3 核心能力

• 认证与会话：JWT 登录 / 登出 / 续期，图形验证码、滑块验证码
• 权限体系：RBAC + 数据权限（全部 / 本单位及下级 / 本单位 / 本人）
• 动态路由：后端配置菜单与路由，前端按需注册
• page-ui 驱动 CRUD：列表页搜索、表格、按钮由后端配置驱动
• 内容运营：公告（含 WebSocket 推送）、站内信
• 系统监控：在线用户、服务状态、Redis、SQL 监控
• 系统工具：文件管理、定时任务、回收站、代码生成、接口文档

4.4 三步本地启动

第 1 步：启动中间件

cd xn-admin-cloud
docker compose up -d

会拉起 MySQL（3306）、Redis（6379）、Nacos（8849）、MinIO（9000）。Nacos 首次约 30–60 秒就绪。

第 2 步：启动五个后端服务

Windows：

scripts\\run-dev.bat

Linux / macOS：

chmod +x mvnw scripts/run-dev.sh
./scripts/run-dev.sh

网关地址：http://127.0.0.1:8088 健康检查：http://127.0.0.1:8088/actuator/health

第 3 步：启动任一前端

另开终端，进入对应前端仓库执行 npm install && npm run dev 即可。

五、前端：四套管理端详解

5.1 四套前端对比

四套前端对接同一网关 8088，Vite 开发服务器代理 /api、/uploads、/ws 到网关，端口错开便于同时联调：

三套 Vue 管理端界面与功能一致（共用同一套 Element Plus 截图）；React 版业务能力对齐，但使用 Ant Design 原生视觉（主色 #1677ff、浅色侧栏 + 白顶栏），不做 Element 仿壳。

下文以 React 版 为主展示界面与工程结构。

5.2 React 版技术栈

5.3 与 Vue 基准的差异

业务能力与 Vue 基准对齐，视觉刻意区分：React 版使用 Ant Design 原生风格，不做 Element 仿壳。

5.4 React 版目录结构

src/
├── api/ # 接口模块（auth、user、role、route、notice、logs…）
├── components/ # 通用组件（Xn* / Auth / ThemePicker…）
├── config/ # 应用 / 客户端 / 主题等配置
├── hooks/ # usePageUi、usePermission 等
├── layouts/ # AdminLayout 及 Side / Top / Mix / Columns
├── pages/ # 业务页面（由 view-loader 懒加载）
├── router/ # 静态路由 + 动态注册与守卫
├── stores/ # Zustand：user、permission、menu、tagsView、theme…
├── styles/ # 全局样式
├── types/ # 类型定义
└── utils/ # request、icons、excel、download、view-loader…

典型列表页组合：

XnPageLayout
├── aside → XnTreePanel（可选）
├── search → XnSearch
├── toolbar → XnButton + XnExport
└── table → XnTable

配置通常来自后端 page-ui 与 <XnAuth> 权限控制。

5.5 通用组件体系（React 示例）

React 版提供 30+ 以 Xn 前缀命名的业务组件，与 Vue 基准一一对应，每个组件目录下有独立 README。典型列表页组合：

Vue 版同样提供 xnPageLayout、xnTable、xnSearch 等对应组件，命名风格为 camelCase。

5.6 React 版快速启动

cd xn-admin-react-ts
npm install
npm run dev

浏览器访问：http://localhost:1800

Vite 已代理到网关：

生产构建：

npm run build # tsc + vite 构建
npm run preview # 本地预览
npm run ci # typecheck + lint + format + build 全量检查

六、界面预览（React + Ant Design）

图片公网地址：https://xinniankeji.vip/docs/images/xn-admin-react-ts/。CSDN 粘贴 Markdown 后若「转存失败」，可在编辑器里用「图片 → 本地上传」从 xn-admin-react-ts/docs/images/ 上传。

6.1 登录与首页

登录页 — 支持图形 / 滑块验证码、JWT 鉴权

工作台首页 — 多布局、主题可切换、公告 WebSocket 推送

6.2 组织与权限

用户管理 — CRUD、导入导出、启停、数据权限

角色与权限 — RBAC、按钮级权限、动态路由

路由管理 — 后端配置菜单，前端动态注册

6.3 系统监控

服务监控 — CPU、内存、JVM、磁盘等

在线用户 — 实时在线列表、强制下线

Redis / SQL 监控

6.4 日志管理

登录日志、操作日志、异常日志、任务日志，均支持查询、详情、删除、清空、导出。

6.5 系统工具

定时任务 — Quartz CRUD、启停、立即执行

代码生成 — 根据数据表一键生成前后端代码

接口文档 — 内置 Swagger UI

文件管理 — 浏览、上传、分片上传、MinIO 存储

6.6 其它模块（可选配图）

字典管理

公告管理

系统配置

安全策略

回收站

个人中心

七、功能清单（后端 + 前端闭环）

认证与权限

• JWT 登录 / 登出 / 会话刷新
• 图形验证码、滑块验证码
• RBAC 角色权限 + 数据权限
• 动态菜单 / 路由
• 按钮级权限（React：<Auth>；Vue：v-permission）

组织与基础数据

• 用户、单位（树形）、岗位
• 字典类型与字典数据
• Excel 导入导出

系统设置

• 系统配置、登录页配置
• 远程存储（MinIO 等）
• 安全策略（锁定、限流、密码规则）
• 个人 UI 偏好、表格列个性化

内容运营

• 公告（发布、撤回、已读、WebSocket 推送）
• 站内信、联系与捐赠

监控与日志

• 在线用户、服务监控、Redis 监控、SQL 监控
• 登录 / 操作 / 异常 / 任务日志

系统工具

• 文件管理（含大文件分片上传）
• 定时任务（Quartz）
• 回收站、代码生成
• 接口文档（Swagger UI）

前端工程特性

• 多布局：侧边栏 / 顶栏 / 混合 / 分栏
• 主题：自定义主色与背景
• 页面标签栏（TagsView）
• 30+ 通用业务组件（XnTable、XnSearch、XnCron、XnUpload 等）
• page-ui 配置化 CRUD，减少重复代码

八、适用场景

• 学习 Spring Cloud 微服务：网关、Nacos 发现、多服务拆分、Flyway 迁移的完整实践
• 快速搭建中后台系统：企业 / 政府 / 教育 / SaaS 管理端，RBAC、监控、日志开箱即用
• 多技术栈选型对比：四套前端同一后端，React vs Vue、TS vs JS 一目了然
• 二次开发起步：page-ui CRUD、代码生成、通用组件可直接复用，专注业务差异
• 商业项目交付：Apache 2.0 允许闭源商用，无需单独购买授权

九、许可证说明

本项目采用 Apache License 2.0：

十、总结

xn-admin 不是简单的 CRUD 模板，而是一套可落地的微服务后台方案。再次附上核心链接，方便收藏：

如果你在做后台管理系统选型，或想系统学习 Spring Cloud + React/Vue 全栈，欢迎 Star、Fork，也欢迎 在线体验。

建议 CSDN 标签：

Spring Cloud Spring Boot React Vue3 后台管理系统 开源项目 Ant Design 微服务 RBAC Java

建议封面图：