SpringBoot Vue3 Vben UniApp 的企业管理系统一套后端如何撑起 PC 与移动两端演示地址http://ruoyioffice.com | 源码1·GitHubruoyi-office | 源码2·GitCoderuoyi-office | 源码3·Giteeruoyi-office | 微信17156169080备注「RuoYi Office」做企业管理系统技术选型往往卡在三件事后端能不能按业务域拆开又共用权限PC 端要扛复杂台账和流程设计手机端要随时审待办、现场扫码。Spring Boot Vue3 Vben UniApp是一条已在 RuoYi Office 落地的组合一套/admin-apiPC 管全量App 管现场账号、组织、流程同源。本文按栈讲清「怎么分工、怎么同源、适合交付什么」。▲ 三层分工Spring Boot 统一 API · Vue3 Vben 管配置与全量 · UniApp 管审批与现场底座只建一次引言企业管理系统真正难的是「同源」单做一个 CRUD 后台不难难的是问题拼凑做法同源做法登录账号PC 一套、App 又注册一遍同一用户中心、同一 Token 体系审批PC 能审、手机只能看通知同一 Flowable 引擎待办两端可见改字段改三次PC/H5/小程序后端字段一处两端调同一 API权限角色各配各的RBAC 数据权限一处生效部署微服务还是单体吵架半年同一套代码支持双模式切换RuoYi Office 把答案落成Java 17 / Spring Boot 3 后端 Vue3 Vben AdminAnt Design Vue管理端 UniApp 移动端再叠加统一工作流与多租户。下面不按「模块超市」罗列功能而按技术栈拆解。一、总体架构三层而不是三个系统┌─────────────────────────────────────────┐ │ UniAppH5 / 微信小程序 / App │ 待办、打卡、扫码、轻表单 ├─────────────────────────────────────────┤ │ Vue3 Vben Adminweb-antd │ 全量管理、流程/表单设计、报表 ├─────────────────────────────────────────┤ │ Spring Boot 3模块化 可选微服务 │ /admin-api · Security · Flowable └─────────────────────────────────────────┘ ↑ 同一组织、角色、字典、文件、消息▲ PC 工作台待办、通知、应用入口聚合——「企业管理系统」的第一屏是协同而不是孤岛模块▲ 一套后端多端呈现管理端做深移动端做快数据与权限不另起炉灶二、后端Spring Boot 模块化业务域可插拔2.1 为什么是 Spring Boot 3 Java 17企业项目要长期演进权限、租户、文件、MQ、定时任务都会叠上来。Spring Boot 3 生态与现代 Java 语法方便把横切能力沉到 framework starter业务模块只关心领域服务。典型分层层职责*-api对外 DTO、枚举、Feign/API 契约*-serverController / Service / DO / MapperframeworkSecurity、MyBatis、Redis、WebSocket、Excel…gateway / server微服务网关或单体启动入口业务上按域拆系统、基础设施、BPM、OA、HRM、资产、CRM、ERP…新模块接入时复用登录鉴权与数据权限而不是复制一套用户表。2.2 统一 API 前缀与鉴权管理端与移动端都走同一套管理 API如/admin-api/{module}/...Token 校验、租户隔离、操作日志同一套过滤器链。移动端不是「另写一个轻量后端」而是同一权限模型下的另一套 UI。2.3 工作流是一等公民请假、用印、用车、资产领用、合同审批……全部进 Flowable。PC 上用简单流程设计器或 BPMN 设计器配置节点App 只消费待办任务。流程改来改去改配置尽量少改代码——这对企业管理系统的生命力至关重要。▲ 流程中心与业务菜单并列审批不是某个模块私藏的按钮而是平台能力2.4 单体与微服务同一业务代码可用构建参数在单体快速交付、私有化小团队与微服务网关、按域扩缩间切换。选型期不必被「必须上 K8s」绑架也保留长大后的拆分路径。三、PC 端Vue3 Vben Admin 扛住「重管理」企业管理系统的 PC 端不是官网 Landing而是动态路由 菜单权限登录后按角色拉菜单复杂列表筛选、导出、主子表、批量操作表单设计器 / 流程设计器低代码配置审批单多页签长任务编辑合同、配流程、看台账Vben Admin 5.x Ant Design Vue Vite适合这种密度工程化 Monorepo、类型完备、布局与权限钩子成熟。RuoYi Office 主应用落在apps/web-antd按后端模块镜像api/与views/二开时「找页面 找同名业务域」。web-antd/src/ api/{module}/... # 与后端模块同构 views/{module}/... # 列表 / 详情 / 设计器页 components/ # 上传、字典、表单设计器封装 store/ router/ # 权限路由与用户态适合放在 PC 的能力系统配置、组织权限、流程模型、资产台账全量字段、报表与导入导出。把这些硬塞进小程序体验与维护都会崩。四、移动端UniApp 扛住「轻作业」移动端目标不是 1:1 复制 PC而是三类高频场景场景例子随时审批待办列表、同意/驳回、加签意见现场作业考勤打卡、资产扫码认物/盘点轻量发起请假、用车等简化表单UniApp Vue3一套代码发布 H5 / 微信小程序 / App与后端仍走同一 API。分包按业务切开如pages-bpm、pages-asset避免主包膨胀。▲ 移动端首页入口收敛到「我要办的事」而不是把 PC 菜单原样缩小分工原则PC 配规则App 执行规则。例如资产盘点——PC 建计划与看差异审批手机负责扫码实盘。五、底座能力只建一次全模块共用无论做 OA 还是资产下面这些都不该每个业务重写用户 / 组织 / 岗位— 入职开一人全模块可见RBAC 数据权限— 角色菜单 部门数据范围多租户— SaaS 或集团隔离文件与对象存储— 附件、合同、资产照片消息通知— 站内信 / 推送与待办联动字典与参数— 状态枚举、开关配置代码生成— 表结构 → 前后端 CRUD 骨架有了底座扩展「资产管理」「办公用品」是加业务域不是新立一个登录系统。▲ 模块可按需启用技术栈固定业务能力按项目裁剪——这才是企业管理系统的交付方式六、这套栈适合谁、不适合谁适合不太适合硬套要私有化、要源码、要二开的中小团队与集成商只要一个纯官网 表单收集OA 审批 移动待办是刚需强定制游戏级交互、与业务无关的 C 端社交希望 PC 深、App 快而不是两套产品坚持 App 与 PC 功能 100% 对等成本极高已有 Java / Vue 人力团队只会单一端且拒绝学习曲线RuoYi Office 在此栈上已落地协同办公、人力资源、资产、CRM、进销存等能力基础协同与系统能力可在线体验更完整的商业能力可按版本咨询——技术路径一致模块按授权启用。七、本地与演示怎么跑起来印象路径在线演示http://ruoyioffice.com/web/账号admin/admin123本地常见启动印象# 后端单体示例启动工程内 server 模块默认 API 48080# PCpnpmdev:antd# 代理到 /admin-api# 移动pnpmdev# H5或 pnpm dev:mp 微信小程序建议体验顺序PC 登录看工作台与流程中心 → 发起一张审批单 → 手机/H5 打开同一账号待办处理 → 再进资产或 OA 菜单感受「同权限不同 UI」。源码仓库GitHub | GitCode | Gitee常见问题FAQUniApp 和 Vben 会不会维护两套业务逻辑业务规则应尽量沉在后端 Service前端只做展示与交互。重复校验可以有但「能不能批、状态怎么变」以后端为准。为什么不直接用 React / Flutter可以换但成本是生态与现有组件流程设计、表单设计、中后台密度。Vben Ant Design Vue UniApp 对中国企业中后台与小程序发布路径更顺。必须上微服务吗不必。中小交付优先单体流量与团队边界清晰后再拆。同一仓库双模式是务实选项。和「一体化平台全景介绍」有何不同全景文讲业务模块超市与产品主线本文讲SpringBoot Vben UniApp 技术分工与同源架构——给选型开发者看栈是否匹配团队。学生毕设能用吗能。技术栈主流、模块多适合选 OA/审批/资产等子域做深注意标注开源协议与演示账号规范。结语企业管理系统的技术本质是用一套后端契约服务两种交互密度Vben 负责配置与全量治理UniApp 负责移动审批与现场作业Spring Boot 把安全、租户、流程、业务域稳住。RuoYi Office 按这个分工落地让「一个平台管好整个企业」从口号变成可运行的工程结构。你们团队现在是 PC 单端还是已经 App 跟审有没有踩过「手机一套用户、PC 一套用户」的坑欢迎评论区交流。想要体验 RuoYi Office 的强大功能在线演示http://ruoyioffice.com/web/账号 admin / admin123源码仓库GitHub | GitCode | Gitee技术咨询添加微信17156169080备注「RuoYi Office」⭐如果觉得不错请给个 Star 支持一下 SpringBoot + Vue3 Vben + UniApp 的企业管理系统：一套后端如何撑起 PC 与移动两端
SpringBoot Vue3 Vben UniApp 的企业管理系统一套后端如何撑起 PC 与移动两端演示地址http://ruoyioffice.com | 源码1·GitHubruoyi-office | 源码2·GitCoderuoyi-office | 源码3·Giteeruoyi-office | 微信17156169080备注「RuoYi Office」做企业管理系统技术选型往往卡在三件事后端能不能按业务域拆开又共用权限PC 端要扛复杂台账和流程设计手机端要随时审待办、现场扫码。Spring Boot Vue3 Vben UniApp是一条已在 RuoYi Office 落地的组合一套/admin-apiPC 管全量App 管现场账号、组织、流程同源。本文按栈讲清「怎么分工、怎么同源、适合交付什么」。▲ 三层分工Spring Boot 统一 API · Vue3 Vben 管配置与全量 · UniApp 管审批与现场底座只建一次引言企业管理系统真正难的是「同源」单做一个 CRUD 后台不难难的是问题拼凑做法同源做法登录账号PC 一套、App 又注册一遍同一用户中心、同一 Token 体系审批PC 能审、手机只能看通知同一 Flowable 引擎待办两端可见改字段改三次PC/H5/小程序后端字段一处两端调同一 API权限角色各配各的RBAC 数据权限一处生效部署微服务还是单体吵架半年同一套代码支持双模式切换RuoYi Office 把答案落成Java 17 / Spring Boot 3 后端 Vue3 Vben AdminAnt Design Vue管理端 UniApp 移动端再叠加统一工作流与多租户。下面不按「模块超市」罗列功能而按技术栈拆解。一、总体架构三层而不是三个系统┌─────────────────────────────────────────┐ │ UniAppH5 / 微信小程序 / App │ 待办、打卡、扫码、轻表单 ├─────────────────────────────────────────┤ │ Vue3 Vben Adminweb-antd │ 全量管理、流程/表单设计、报表 ├─────────────────────────────────────────┤ │ Spring Boot 3模块化 可选微服务 │ /admin-api · Security · Flowable └─────────────────────────────────────────┘ ↑ 同一组织、角色、字典、文件、消息▲ PC 工作台待办、通知、应用入口聚合——「企业管理系统」的第一屏是协同而不是孤岛模块▲ 一套后端多端呈现管理端做深移动端做快数据与权限不另起炉灶二、后端Spring Boot 模块化业务域可插拔2.1 为什么是 Spring Boot 3 Java 17企业项目要长期演进权限、租户、文件、MQ、定时任务都会叠上来。Spring Boot 3 生态与现代 Java 语法方便把横切能力沉到 framework starter业务模块只关心领域服务。典型分层层职责*-api对外 DTO、枚举、Feign/API 契约*-serverController / Service / DO / MapperframeworkSecurity、MyBatis、Redis、WebSocket、Excel…gateway / server微服务网关或单体启动入口业务上按域拆系统、基础设施、BPM、OA、HRM、资产、CRM、ERP…新模块接入时复用登录鉴权与数据权限而不是复制一套用户表。2.2 统一 API 前缀与鉴权管理端与移动端都走同一套管理 API如/admin-api/{module}/...Token 校验、租户隔离、操作日志同一套过滤器链。移动端不是「另写一个轻量后端」而是同一权限模型下的另一套 UI。2.3 工作流是一等公民请假、用印、用车、资产领用、合同审批……全部进 Flowable。PC 上用简单流程设计器或 BPMN 设计器配置节点App 只消费待办任务。流程改来改去改配置尽量少改代码——这对企业管理系统的生命力至关重要。▲ 流程中心与业务菜单并列审批不是某个模块私藏的按钮而是平台能力2.4 单体与微服务同一业务代码可用构建参数在单体快速交付、私有化小团队与微服务网关、按域扩缩间切换。选型期不必被「必须上 K8s」绑架也保留长大后的拆分路径。三、PC 端Vue3 Vben Admin 扛住「重管理」企业管理系统的 PC 端不是官网 Landing而是动态路由 菜单权限登录后按角色拉菜单复杂列表筛选、导出、主子表、批量操作表单设计器 / 流程设计器低代码配置审批单多页签长任务编辑合同、配流程、看台账Vben Admin 5.x Ant Design Vue Vite适合这种密度工程化 Monorepo、类型完备、布局与权限钩子成熟。RuoYi Office 主应用落在apps/web-antd按后端模块镜像api/与views/二开时「找页面 找同名业务域」。web-antd/src/ api/{module}/... # 与后端模块同构 views/{module}/... # 列表 / 详情 / 设计器页 components/ # 上传、字典、表单设计器封装 store/ router/ # 权限路由与用户态适合放在 PC 的能力系统配置、组织权限、流程模型、资产台账全量字段、报表与导入导出。把这些硬塞进小程序体验与维护都会崩。四、移动端UniApp 扛住「轻作业」移动端目标不是 1:1 复制 PC而是三类高频场景场景例子随时审批待办列表、同意/驳回、加签意见现场作业考勤打卡、资产扫码认物/盘点轻量发起请假、用车等简化表单UniApp Vue3一套代码发布 H5 / 微信小程序 / App与后端仍走同一 API。分包按业务切开如pages-bpm、pages-asset避免主包膨胀。▲ 移动端首页入口收敛到「我要办的事」而不是把 PC 菜单原样缩小分工原则PC 配规则App 执行规则。例如资产盘点——PC 建计划与看差异审批手机负责扫码实盘。五、底座能力只建一次全模块共用无论做 OA 还是资产下面这些都不该每个业务重写用户 / 组织 / 岗位— 入职开一人全模块可见RBAC 数据权限— 角色菜单 部门数据范围多租户— SaaS 或集团隔离文件与对象存储— 附件、合同、资产照片消息通知— 站内信 / 推送与待办联动字典与参数— 状态枚举、开关配置代码生成— 表结构 → 前后端 CRUD 骨架有了底座扩展「资产管理」「办公用品」是加业务域不是新立一个登录系统。▲ 模块可按需启用技术栈固定业务能力按项目裁剪——这才是企业管理系统的交付方式六、这套栈适合谁、不适合谁适合不太适合硬套要私有化、要源码、要二开的中小团队与集成商只要一个纯官网 表单收集OA 审批 移动待办是刚需强定制游戏级交互、与业务无关的 C 端社交希望 PC 深、App 快而不是两套产品坚持 App 与 PC 功能 100% 对等成本极高已有 Java / Vue 人力团队只会单一端且拒绝学习曲线RuoYi Office 在此栈上已落地协同办公、人力资源、资产、CRM、进销存等能力基础协同与系统能力可在线体验更完整的商业能力可按版本咨询——技术路径一致模块按授权启用。七、本地与演示怎么跑起来印象路径在线演示http://ruoyioffice.com/web/账号admin/admin123本地常见启动印象# 后端单体示例启动工程内 server 模块默认 API 48080# PCpnpmdev:antd# 代理到 /admin-api# 移动pnpmdev# H5或 pnpm dev:mp 微信小程序建议体验顺序PC 登录看工作台与流程中心 → 发起一张审批单 → 手机/H5 打开同一账号待办处理 → 再进资产或 OA 菜单感受「同权限不同 UI」。源码仓库GitHub | GitCode | Gitee常见问题FAQUniApp 和 Vben 会不会维护两套业务逻辑业务规则应尽量沉在后端 Service前端只做展示与交互。重复校验可以有但「能不能批、状态怎么变」以后端为准。为什么不直接用 React / Flutter可以换但成本是生态与现有组件流程设计、表单设计、中后台密度。Vben Ant Design Vue UniApp 对中国企业中后台与小程序发布路径更顺。必须上微服务吗不必。中小交付优先单体流量与团队边界清晰后再拆。同一仓库双模式是务实选项。和「一体化平台全景介绍」有何不同全景文讲业务模块超市与产品主线本文讲SpringBoot Vben UniApp 技术分工与同源架构——给选型开发者看栈是否匹配团队。学生毕设能用吗能。技术栈主流、模块多适合选 OA/审批/资产等子域做深注意标注开源协议与演示账号规范。结语企业管理系统的技术本质是用一套后端契约服务两种交互密度Vben 负责配置与全量治理UniApp 负责移动审批与现场作业Spring Boot 把安全、租户、流程、业务域稳住。RuoYi Office 按这个分工落地让「一个平台管好整个企业」从口号变成可运行的工程结构。你们团队现在是 PC 单端还是已经 App 跟审有没有踩过「手机一套用户、PC 一套用户」的坑欢迎评论区交流。想要体验 RuoYi Office 的强大功能在线演示http://ruoyioffice.com/web/账号 admin / admin123源码仓库GitHub | GitCode | Gitee技术咨询添加微信17156169080备注「RuoYi Office」⭐如果觉得不错请给个 Star 支持一下