ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

开源一款可商用的中后台:Spring Boot 4 微服务 + 四套前端(Vue3 / React)

开源一款可商用的中后台:Spring Boot 4 微服务 + 四套前端(Vue3 / React) 大家好我是心念。最近把做了很久的一套中后台开源出来了名字叫心念后台xn-admin。这不是又一个「只能学习、商用要买授权」的模板。它采用Apache License 2.0个人自用、二次开发、商业项目、闭源交付都可以只要遵守许可证里的版权声明和 NOTICE 要求。当前版本是1.0.0。仓库都在 Gitee / GitHub国内访问 Gitee 更方便。一、它是什么解决什么问题做业务系统时登录、权限、组织、字典、文件、日志、定时任务、代码生成……这些模块几乎每次都要重写一遍。市面上的后台脚手架很多但常见几个痛点前端只有一套团队用 Vue 还好想用 React 或 Options API 就得自己移植后端是单体业务长大了再拆微服务成本很高许可证不清晰看起来开源商用可能要付费或改版权工程化偏弱格式化、单测、CI、提交规范各写各的心念后台想做成一件事一套后端契约四套管理端任选功能对齐可直接当商业项目起步模板。架构很简单浏览器四套管理端任选其一 ↓ /api /uploads /ws xn-gateway :8088Spring Cloud Gateway Nacos ├── xn-system :8081 登录 / RBAC / 组织 / 字典 / 公告 / 监控 / 代码生成 ├── xn-file :8082 文件、分片上传、MinIO ├── xn-log :8083 登录 / 操作 / 异常 / 任务日志 └── xn-job :8084 Quartz 定时任务中间件是常见组合MySQL、Redis、Nacos、MinIO。二、仓库一览都是独立开源开源范围是「1 个微服务后端 4 套管理端」。官网xn-home是品牌落地页可选。仓库说明GiteeGitHubxn-admin-cloud微服务后端必需GiteeGitHubxn-admin-vue3-ts功能基准Vue 3 TypeScript Element PlusGiteeGitHubxn-admin-vue3-jsVue 3 JavaScriptCompositionGiteeGitHubxn-admin-vue2-jsVue 3 JavaScriptOptions APIGiteeGitHubxn-admin-react-tsReact 19 TypeScript Ant DesignGiteeGitHub说明两点避免误会vue2-js不是 Vue 2。目录名表示「第二套 JS 写法」运行时是 Vue 3组件用 Options APIdata/methods/computed方便习惯老写法的团队。四套前端对接同一网关http://127.0.0.1:8088开发端口错开React1800、vue2-js1801、vue3-js1802、vue3-ts1803可以同时开着对比。React 端刻意没用 Element 的视觉去「套壳」用的是 Ant Design 原生主色和布局业务能力跟 Vue 基准对齐。在线演示官网https://xinniankeji.vipVue3 TShttps://vue3-ts.xinniankeji.vipVue3 JShttps://vue3-js.xinniankeji.vipVue3 Optionshttps://vue2.xinniankeji.vipReacthttps://react.xinniankeji.vip演示账号请以官网说明为准本地开发默认是SuperAdmin/SuperAdmin、admin/admin仅用于本机登录后请立刻改密。三、技术栈后端xn-admin-cloudJava 21、Maven 多模块自带mvnwSpring Boot 4、Spring Cloud Gateway、NacosJPA Flyway、Redis、MinIO、Quartz、OpenAPI前端以基准xn-admin-vue3-ts为例Vue 3.5、TypeScript、Vite 8、Element PlusPinia、Vue Router、AxiosECharts、wangEditor、ExcelJSESLint、Prettier、Vitest、Husky、commitlintReact 端是 React 19 Ant Design TypeScript。工程化我比较在意后端有 SpotlessGoogle Java Format、SpotBugs、JaCoCo、Enforcer强制 JDK 21前后端都有 GitHub Actions / Gitee Go。提交走 Conventional Commits例如feat(system): 增加密码策略。四、功能清单后台该有的尽量齐接口和菜单种子已经齐了页面由配套前端承接。域能力认证会话登录 / 登出 / 注册 / 图形与滑块验证码 / JWT 续期 / 改密 / 头像 / 动态菜单组织账号用户CRUD、导入导出、启停/ 单位树 / 岗位权限安全RBAC数据权限全部 / 本单位及下级 / 本单位 / 本人按钮级权限锁定、限流、密码规则基础数据字典类型与数据系统设置系统配置、登录页、远程存储、联系与捐赠、用户 UI 偏好、表格列偏好内容运营公告发布、撤回、已读、WebSocket/ 站内信监控在线用户与强制下线 / 服务 / Redis / SQL日志登录 / 操作 / 异常 / 任务日志查询、详情、删除、清空、导出后端已齐前端页面还在补文件浏览、上传、建目录、删除、分片上传任务Quartz CRUD、启停、立即执行工具回收站、代码生成、路由一键生成几个我自己比较在意的点1. 数据权限不是摆设角色可以配全部、本单位及下级、本单位、仅本人。中后台如果没有这一层多单位场景很快就会翻车。2. page-ui 驱动列表页搜索项、表格列、按钮往往由后端 page-ui 下发前端用xnPageLayoutxnSearchxnTable组合。典型结构xnPageLayout ├── #aside → xnTreePanel可选单位树等 ├── #search → xnSearch ├── #toolbar→ xnButton └── #table → xnTable新业务页可以少写一堆重复的搜索表单和表格配置。3. 一套后端四种前端口味TypeScript / JavaScript、Composition / Options、Vue / React团队怎么舒服怎么选不必为了脚手架先换技术栈。4. 代码生成 回收站 分片上传这三块在真实项目里出现频率很高我没有当成「以后再说」的附属功能。五、界面预览以下截图来自基准管理端xn-admin-vue3-ts。登录与首页组织与账号权限与安全系统监控内容与设置文件与任务六、和常见后台脚手架的差异我自己的定位市面上若依、Jeecg 等都很成熟我没有打算「替代谁」。心念后台更适合这几类人想用较新的 Spring Boot 4 Java 21微服务结构而不是先上一个大单体团队里同时有 Vue 和 React或有人只熟悉 Options API需要明确可商用的 Apache-2.0不想后续被授权卡住希望列表页、权限、文件、任务这些中后台基础能力开箱即用当前架构也有取舍文末会写清楚避免看完仓库才发现对不上预期。七、本地怎么跑起来1. 准备中间件需要 JDK 21、Maven 3.9仓库自带mvnw、Node.js 20以及 MySQL、Redis、Nacos、MinIO。可以用 Docker Compose也可以本机安装。库名默认xn_admin。2. 启动后端五个服务仓库根目录profile 用dev,cloud
返回列表