Gin + Vue3 + ElementPlus 低代码实践:从表结构到增删改查

发布时间:2026/10/30 1:17:09
Gin + Vue3 + ElementPlus 低代码实践:从表结构到增删改查

本文同步自 EasyGoAdmin 官方文档站:http://docs.gin.elevue.easygoadmin.vip ,最新版本与完整文档以官方站为准。

📚 项目介绍

EasyGoAdmin Gin+ElementPlus 版,是基于 Gin、Vue3、TypeScript、ElementPlus 的企业级多租户后台敏捷开发框架。核心能力:代码生成器一键产出后端八件套 + 前端整套 CRUD(同步创建菜单/权限/字典/路由,幂等),MySQL/PostgreSQL/SqlServer/Oracle/Sqlite 五方言自由切换,全局钩子统一处理审计字段、软删除与租户隔离,业务代码零侵入。

框架以简化开发、提升效率为初衷,内置代码生成器,可根据已建表结构一键生成整个模块的增删改查代码,并同步创建菜单、权限节点与字典数据,切实实现低代码开发,缩短研发周期。

框架提供体系化的后端能力:多租户数据隔离、RBAC 权限与分级数据权限、JWT 双令牌认证、接口限流、操作日志审计、在线用户/服务器/缓存三组监控、可视化定时任务等开箱即用;并配有全局钩子机制,审计字段、数据软删、租户归属等横切逻辑统一在数据层自动完成,业务开发零负担。

数据库全面支持 MySQL、PostgreSQL、SqlServer、Oracle、Sqlite 五种主流数据库并可灵活切换,配套整库迁移工具,跨数据库迁移一条命令完成;前端提供动态菜单、25+ 公共组件与统一请求层,开箱即用;同时提供 Docker 全栈编排,覆盖开发到部署全流程。

🍻 项目特点

  • 低代码开发:代码生成器读表结构一键产出后端八件套 + 前端整套 CRUD 代码,并同步创建菜单、权限节点、字典数据与路由注册(幂等),支持 HTTP 与 CLI 两种方式。解决"重复写 CRUD、手工建菜单权限易漏配"的问题。
  • 多数据库支持:内置 MySQL、PostgreSQL、SqlServer、Oracle、Sqlite 五方言驱动适配可灵活切换;配套整库迁移工具,源库内省 → 方言 DDL 翻译 → 分批搬运 → 序列修复,跨库迁移一条命令完成。解决"换库改 SQL、跨库迁移成本高"的问题。
  • 企业级多租户:数据层全局租户隔离(全局钩子改写 + dao.Ctx 唯一查询入口),租户 CRUD、专属域名与平台管理开箱即用。解决"SaaS 多租户改造侵入业务代码"的问题。
  • 细粒度权限体系:RBAC(用户-角色-菜单)+ 四档数据权限(全部/本部门及以下/本部门/仅本人),多角色自动取最宽松,超管/平台绕过。解决"数据权限按部门/个人精细控制"的问题。
  • 安全基座:JWT 双令牌(访问+刷新轮换、黑名单登出/强踢)、图形验证码、固定窗口接口限流(认证入口更严阈值)、操作日志审计、演示环境写保护。解决"认证会话安全与接口防刷"的问题。
  • 全局钩子机制:审计字段盖章、软删除改写、租户隔离统一在数据层生效,业务代码零侵入。解决"横切逻辑分散、易遗漏"的问题。
  • 统一响应与规范:全链路驼峰、统一错误码、分页/筛选三件套定稿,枚举显示名由字典驱动(唯一真相,文案改字典即生效)。解决"前后端字段/错误码不统一"的问题。
  • 现代化前端:Vue3 + TypeScript + Element Plus + Vite,动态菜单路由、封装请求层、25+ 公共组件(表格/表单/上传/富文本/Excel/行政区划等)。解决"前端重复造轮子"的问题。
  • 完善监控运维:在线用户监控(可强制下线)、服务器监控、缓存监控;Redis 故障自动降级内存,服务不中断。解决"线上可观测性与缓存故障兜底"的问题。
  • 定时任务框架:数据库可视化配置任务,支持 cron/固定频率/仅一次三种模式与 1 并行/单例/放弃三种执行策略,多实例经分布式锁不双跑。解决"多实例重复执行、任务不可视"的问题。
  • Docker 容器化:内置多阶段 Dockerfile(静态编译、非 root、健康检查)与 docker-compose 全栈编排(后端+MySQL+Redis),敏感配置环境变量注入。解决"开发到部署环境不一致"的问题。
  • 文档与质量保障:140+ 篇开发者文档(架构/实战/部署/规范)、OpenAPI 原生输出(/swagger)、黄金样本接口回归基线。解决"上手成本与接口回归保障"的问题。

🍪 内置模块

  • 用户管理:维护管理系统的用户,支持租户内唯一校验、角色全量重写、城市编解码、Excel 导入导出与数据权限接线。
  • 角色管理:角色菜单管理与权限分配、设置角色所拥有的菜单权限,支持四档数据权限配置。
  • 菜单管理:配置系统菜单、操作权限、按钮权限标识等,菜单即权限,承载权限节点定义。
  • 部门管理:管理系统组织架构,树形结构维护,是数据权限按部门过滤的基础。
  • 职级管理:管理用户担任的职级,支持 Excel 导入导出。
  • 岗位管理:管理用户担任的岗位。
  • 租户管理:多租户开通、配置与停启用,事务化开户,租户级数据全局隔离。
  • 字典管理:对系统中常用的较为固定的数据进行统一维护,枚举文案改字典即生效。
  • 配置管理:对系统的常规配置信息进行维护。
  • 参数管理:系统运行参数的统一维护与读取。
  • 城市管理:统一对全国行政区划进行维护,对其他模块提供行政区划数据支撑。
  • 分类管理:树形分类数据的统一维护,支撑内容模块。
  • 文章管理:文章的发布、维护与富文本内容处理。
  • 通知公告:系统通知公告信息发布维护。
  • 友链管理:对系统友情链接、合作伙伴等相关外链进行集成维护管理。
  • 文件模板管理:富文本/上传等文件模板的统一管理。
  • 定时任务:可视化配置调度任务(cron/固定频率/仅一次),含执行日志查询,多实例经分布式锁不双跑。
  • 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。
  • 登录日志:系统登录日志记录查询,包含登录异常。
  • 在线用户监控:当前在线用户查询与强制下线。
  • 服务器监控:运行时、磁盘与数据库/Redis 连通性监测。
  • 缓存监控:Redis 运行状态与内存使用监测(降级内存模式可见)。
  • 个人中心:当前登录用户的个人信息便捷修改。
  • 代码生成:一键生成模块 CRUD 功能,读表结构产出后端八件套 + 前端整套 CRUD,同步创建菜单、权限、字典与路由,重复执行幂等,支持 HTTP 与 CLI。
  • 案例演示:代码生成器一键生成后的演示案例。

👷 软件信息

  • 软件名称:EasyGoAdmin敏捷开发框架Gin+ElementPlus版本
  • 软件作者:@小蚂蚁云 团队
  • 软件协议:Apache-2.0
  • 官网网址:https://www.easygoadmin.vip
  • 演示地址:http://manage.gin.elevue.easygoadmin.vip

📖完整文档(140+ 篇,含架构、模块开发、五方言 SQL、部署规范)见官方文档站:
http://docs.gin.elevue.easygoadmin.vip

💻源码与版本下载见 Gitee:
https://gitee.com/easygoadmin/EasyGoAdmin_Gin_EleVue

📌 版本说明

版本名称版本说明适用场景/选型建议版本地址
GoFrame+Layui混编版采用GoFrame v2、Layui等框架研发传统混编、习惯 Layui 的团队https://gitee.com/easygoadmin/EasyGoAdmin_GoFrame_Layui
GoFrame+ElementPlus前后端分离版采用GoFrame v2、Vue3、TypeScript、ElementPlus等框架研发前后端分离版本偏好 GoFrame 生态 + ElementPlushttps://gitee.com/easygoadmin/EasyGoAdmin_GoFrame_EleVue
GoFrame+AntDesign前后端分离版采用GoFrame v2、Vue3、TypeScript、AntDesign等框架研发前后端分离版本偏好 AntDesign 视觉体系https://gitee.com/easygoadmin/EasyGoAdmin_GoFrame_AntdVue
GoFrame+NaiveUI前后端分离版采用GoFrame v2、Vue3、TypeScript、NaiveUI等框架研发前后端分离版本偏好 NaiveUI 轻量风格https://gitee.com/easygoadmin/EasyGoAdmin_GoFrame_NaiveVue
Gin+Layui混编版采用Gin、Layui等框架研发传统混编、习惯 Layui 的团队https://gitee.com/easygoadmin/EasyGoAdmin_Gin_Layui
Gin+ElementPlus前后端分离版(当前文档版本)采用Gin、Vue3、TypeScript、ElementPlus等框架研发前后端分离版本Gin 生态 + ElementPlus,前后端分离首选https://gitee.com/easygoadmin/EasyGoAdmin_Gin_EleVue
Gin+AntDesign前后端分离版采用Gin、Vue3、TypeScript、AntDesign等框架研发前后端分离版本偏好 AntDesign 视觉体系https://gitee.com/easygoadmin/EasyGoAdmin_Gin_AntdVue
Gin+NaiveUI前后端分离版采用Gin、Vue3、TypeScript、NaiveUI等框架研发前后端分离版本偏好 NaiveUI 轻量风格https://gitee.com/easygoadmin/EasyGoAdmin_Gin_NaiveVue
Beego+Layui混编版采用Beego、Layui等框架研发传统混编、习惯 Layui 的团队https://gitee.com/easygoadmin/EasyGoAdmin_Beego_Layui
Beego+ElementPlus前后端分离版采用Beego、Vue3、TypeScript、ElementPlus等框架研发前后端分离版本偏好 Beego 生态 + ElementPlushttps://gitee.com/easygoadmin/EasyGoAdmin_Beego_EleVue
Beego+AntDesign前后端分离版采用Beego、Vue3、TypeScript、AntDesign等框架研发前后端分离版本偏好 AntDesign 视觉体系https://gitee.com/easygoadmin/EasyGoAdmin_Beego_AntdVue
Beego+NaiveUI前后端分离版采用Beego、Vue3、TypeScript、NaiveUI等框架研发前后端分离版本偏好 NaiveUI 轻量风格https://gitee.com/easygoadmin/EasyGoAdmin_Beego_NaiveVue
Iris+Layui混编版采用Iris、Layui等框架研发传统混编、习惯 Layui 的团队https://gitee.com/easygoadmin/EasyGoAdmin_Iris_Layui
Iris+ElementPlus前后端分离版采用Iris、Vue3、TypeScript、ElementPlus等框架研发前后端分离版本偏好 Iris 生态 + ElementPlushttps://gitee.com/easygoadmin/EasyGoAdmin_Iris_EleVue
Iris+AntDesign前后端分离版采用Iris、Vue3、TypeScript、AntDesign等框架研发前后端分离版本偏好 AntDesign 视觉体系https://gitee.com/easygoadmin/EasyGoAdmin_Iris_AntdVue
Iris+NaiveUI前后端分离版采用Iris、Vue3、TypeScript、NaiveUI等框架研发前后端分离版本偏好 NaiveUI 轻量风格https://gitee.com/easygoadmin/EasyGoAdmin_Iris_NaiveVue

🍪 项目结构

EasyGoAdmin_Gin_EleVue/ ├── cmd/ # 可执行入口 │ ├── api/ # 服务入口(make run → go run ./cmd/api,含 -check-config 一致性检查) │ ├── gen/ # 代码生成器(后端四件套+前端+菜单/路由,幂等) │ └── migrator/ # 整库迁移(源库内省 → 五方言 DDL → 分批搬运;oracle 构建标签启用) ├── internal/ # 后端核心代码 │ ├── server/ # 启动编排:cache.Init → 依赖接线 → 路由 → 调度器 │ ├── handler/ # 控制器(极薄委托,仅转发 service) │ ├── service/ # 业务逻辑(每模块一文件)+ ModuleSpec 声明式 CRUD 基座 │ ├── repository/ # 数据访问(NewXxxRepo().Ctx(ctx) 唯一入口,自动挂软删/租户过滤) │ ├── model/ # dto(API 契约)/ db(表模型)/ hooks(审计盖章、软删、租户隔离)/ dbtest │ ├── middleware/ # 中间件链:trace→CORS→metrics→response→ratelimit→demo→JWT→tenant→authz→operation_log │ ├── router/ # 路由注册(router.go)+ 反射绑定(bind.go)+ 路由元数据(meta/)+ OpenAPI 输出 │ ├── task/ # 定时任务处理器(init 自注册,依赖单向 task→service) │ ├── consts/ # 业务错误码 / 缓存键 / 上下文键 / 日志类型枚举 │ └── migrate/ # 整库迁移引擎(内省/翻译/DDL 渲染/搬运) ├── utility/ # 基础能力包(无业务依赖) │ ├── config/ logger/ cache/ # 配置加载(APP_ env 覆盖+一致性检查)/ 日志 / 缓存(Redis 失败降级内存) │ ├── jwt/ captcha/ crypto/ # 双令牌 / 图形验证码 / 加解密 │ ├── upload/ excel/ response/# 两段式上传 / Excel 导入导出 / 统一响应信封 │ └── apperr/ validator/ # 业务错误 / 参数校验 │ ip2region/ ua/ # IP 归属地 / 设备识别 ├── templates/ # 代码生成器模板(后端 {{ }} 定界;ui|ui2 前端 [[ ]] 定界) ├── config/config.yaml # 运行时配置(唯一配置文件,APP_ 环境变量可覆盖) ├── resource/ # 静态资源(ip2region.xdb / 验证码字体 / SQL) ├── deploy/ # Docker 化文件 │ ├── Dockerfile # 多阶段构建:静态编译 → alpine 运行(非 root + 时区 + 健康检查) │ ├── docker-compose.yaml # 四服务编排:应用 + MySQL8 + Redis7 + Nginx(MySQL 首启自动建库,服务健康依赖) │ └── nginx.conf # 上传文件直供配置(temp 临时目录封禁) ├── .env.example # compose 变量模板 + 应用 env 覆盖样例(复制为 .env,密钥不入库) ├── .dockerignore # Docker 构建上下文排除清单 ├── ui/ # 前端工程(Vue3 + TypeScript + ElementPlus + Vite;src/ 源码、build/ 构建脚本、types/ 类型声明) ├── document/ # 项目文档(模块结构规约、五方言定稿 SQL、架构设计、迁移日志) ├── upload/ # 上传物理目录(file.uploadDir,bind 挂载至容器 /data/upload,应用 rw / nginx ro) ├── log/ # 运行日志 └── bin/ # 编译产物(make build 生成,不入库)

登录账号admin / 123456。更多启动细节与常见问题见在线文档·快速入门。

🚀 快速开始

环境要求:Go ≥ 1.27、Node.js 22.18.0(pnpm 推荐)、MySQL 8.0、Redis

# 1. 初始化数据库:导入定稿脚本# document/mysql/easygoadmin.gin.elevue.sql → 库 easygoadmin.gin.elevue# (仅本机 make run 需要手工导入;Docker 全栈首启会自动导入,# 仅在 MySQL 数据卷为空时执行一次)# 2. 启动后端(默认 :8000,配置见 config/config.yaml)makerun# Windows 无 make 时:make.bat run,或 go run ./cmd/api# 3. 启动前端(默认 :8001,代理转发至 :8000)cdui&&pnpminstall&&pnpmdev# 或 Docker 一条命令拉起全栈(应用 + MySQL + Redis + Nginx)# 在项目根执行;首启含建库 SQL 导入,健康检查就绪约需 1-3 分钟copy .env.example .env&&dockercompose --env-file .env-fdeploy/docker-compose.yaml up-d--build# 验证就绪(返回 {"status":"up"} 即正常)curlhttp://127.0.0.1:8000/api/health

🔧 模块展示


✨ 特别鸣谢

感谢 Gin、Vue.js、Element Plus、TypeScript、Vite、Pinia 等优秀开源项目。