Vue 3 + Element Plus 打造支持 Java/.NET 的统一前端中台

小码编匠
44 阅读5分钟

前言

企业级中后台系统开发中，前后端技术栈的多样性与业务复杂度日益增长。为解决 UI 框架绑定过紧、后端语言割裂、功能重复造轮子等问题。

vben-web 作为该系列的统一 Web 前端入口，基于社区优秀项目 ruoyi-plus-vben5 改造而来，将原 Ant Design Vue 版本全面迁移至 Element Plus，同时保留对多 UI 框架的支持能力。

其核心理念是：一套前端，对接多种后端（Java / .NET），共享基础能力，灵活扩展业务。

项目采用最新前端技术栈（Vue 3 + Vite + TypeScript + pnpm），提供开箱即用的权限管理、工作流、文件存储、监控告警等企业级功能，并通过插件化设计实现高内聚、低耦合的架构目标。

项目简介

vben-web 是 vben 系列框架的统一 WEB 前端，基于玲娜贝er大佬的 ruoyi-plus-vben5 改造，将 Ant Design Vue 版本改造成 Element Plus 版本。

vben5 使用了最新前端技术栈，提供丰富的组件和模板以及多种偏好设置组合方案，应用层可自由选择 UI 框架（Element Plus、Ant Design Vue、Native UI）。

体验地址

快速启动

Java 后端

准备工作

1、安装 Java 17 或更高版本，并在 pom.xml 中设置 java.version

2、根据 application-dev.yml 创建空 MySQL 数据库（默认库名：vben-java，账号：root，密码：123456）

3、启动 Redis（默认无密码）

数据库初始化

运行 VbenSetup 应用，程序将自动创建表结构并初始化数据，完成后自动退出。

启动后台 API

运行 VbenAdmin。也可启动 VbenJpa 或 VbenMybatis 查看对应 ORM 示例。

.NET 后端

准备工作

1、安装 .NET 8（或 .NET 10）SDK，并在 .csproj 中设置 TargetFramework

2、根据 web.Development.json 创建空 MySQL 数据库（默认库名：vben-net，账号：root，密码：123456）

3、启动 Redis（默认无密码）

启动后台 API

运行 VbenAdmin，系统将基于 SqlSugar CodeFirst 自动建表，并通过 Init 服务填充初始数据。

也可启动 VbenFurion 或 VbenNative 查看不同技术栈示例。

Web 前端

准备工作

  • Node.js ≥ 20.15.0

  • 全局安装 pnpm：npm install -g pnpm

启动前台 WEB

pnpm install      # 安装依赖
pnpm dev:ele      # 启动 Element Plus 版本

访问 http://localhost:5666/ 预览。

主要特色

  • 插件化架构：公共功能抽离为独立扩展包，结构解耦，易于维护与复用。

  • 多应用共享：业务模块以“多基础模块 + 多应用”方式组织，支持多个上层应用共用同一套基础能力。

  • 自研工作流引擎：不依赖 Activiti/Camunda 等第三方引擎，前端使用 BPMN.js + FormCreate，后端完全自实现，支持复杂流程扩展。

  • 统一数据规范：

数据库主键统一命名为 ID

表字段采用 SAP 风格命名（如 CREATE_TIME, UPDATE_BY）

  • 多后端兼容：同一套前端可无缝对接 Java 或 .NET 后端，API 接口规范一致。

项目效果

系统登录

系统主题

系统主页

系统管理

监控中心

流程管理

辅助工具

内置功能支持情况

业务模块功能说明Java 版本.NET 版本
用户管理新增用户、分配部门/角色/岗位等√√
部门管理组织机构树，支持数据权限√√
岗位管理用户职务配置√√
菜单管理菜单、操作权限、按钮权限标识√√
角色管理基于部门、用户、岗位、群组分配权限√√
字典管理固定数据维护√√
参数管理系统动态参数配置√√
通知公告公告发布与维护√×（待支持）
客户端管理PC/小程序等客户端管理，支持短信/密码登录、Token 时效控制√×（待支持）
操作日志正常与异常操作日志记录查询√√
登录日志登录记录及异常分析√√
文件管理本地 + 分布式对象存储，支持上传/下载/删除√√
在线用户管理在线用户监控与强制踢出√×（待支持）
定时任务任务管理、执行器、日志、报表√√
代码生成生成 C# / Vue / SQL CRUD 代码并下载√×
系统接口自动生成 API 文档√（Apifox）√（Swagger UI）
服务监控CPU、内存、磁盘、堆栈、在线日志监控√√
缓存监控Redis 缓存信息查询与命令统计√√
在线构建器拖拽生成 HTML 表单√√
使用案例功能示例集合√√
工作流BPMN.js 流程图 + FormCreate 表单，自研流程引擎√（持续扩展）×（待 Java 版本稳定后移植）

项目源码

Gitee：gitee.com/vben/vben-w…

关键词

vben-web, Vue 3, Element Plus, 前端框架, 中后台系统, 微服务架构, 多后端支持, Java 后端, .NET 后端, 工作流引擎, 代码生成, RBAC 权限, 插件化架构, SAP 字段规范, pnpm, Vite

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

avatar
文章
阅读
粉丝