flipped-aurora/gin-vue-admin

[English](./README-en.md) | 简体中文 ## 支持 claw 生态 [🦞GvaClaw](https://plugin.gin-vue-admin.com/details/159) ## ✨ 一分钟生成前后端基础代码

⭐️ 高度适配 AI 编辑器的 MCP 📄 创建基础模板 🤖 AI 生成结构 ⏰ 生成代码 🏷️ 分配权限 🎉 基础 CRUD 生成完成

# 项目文档 [在线文档](https://www.gin-vue-admin.com) : https://www.gin-vue-admin.com [初始化](https://www.gin-vue-admin.com/guide/start-quickly/initialization.html) [从环境到部署教学视频](https://www.bilibili.com/video/BV1Rg411u7xH) [开发教学](https://www.gin-vue-admin.com/guide/start-quickly/env.html) (贡献者: LLemonGreen And Fann) [交流社区](https://support.qq.com/products/371961) [插件市场](https://plugin.gin-vue-admin.com/) [软件著作权证书](https://www.gin-vue-admin.com/copyright.pdf) # 重要提示 1. 本项目从起步到开发到部署均有文档和详细视频教程。 2. 本项目需要您有一定的 Golang 和 Vue 基础。 3. 您完全可以通过我们的教程和文档完成一切操作，因此我们不再提供免费的技术服务，如需服务请进行[付费支持](https://www.gin-vue-admin.com/coffee/payment.html)。 4. 如果您将此项目用于商业用途，请遵守 Apache 2.0 协议并保留作者技术支持声明。您需保留如下版权声明信息，以及日志和代码中所包含的版权声明信息。所需保留信息均为文案性质，不会影响任何业务内容，如决定商用【产生收益的商业行为均在商用行列】或者必须剔除请[购买授权](https://plugin.gin-vue-admin.com/license)。 \ ## 1. 基本介绍 ### 1.1 项目介绍 [在线预览](http://demo.gin-vue-admin.com): http://demo.gin-vue-admin.com 测试用户名：admin 测试密码：123456 ### 1.2 贡献指南 Hi! 首先感谢你使用 gin-vue-admin。 Gin-vue-admin 是一套为快速研发准备的一整套前后端分离架构式的开源框架，旨在快速搭建中小型项目。 Gin-vue-admin 的成长离不开大家的支持，如果你愿意为 gin-vue-admin 贡献代码或提供建议，请阅读以下内容。 #### 1.2.1 Issue 规范 - issue 仅用于提交 Bug 或 Feature 以及设计相关的内容，其它内容可能会被直接关闭。 - 在提交 issue 之前，请搜索相关内容是否已被提出。 #### 1.2.2 Pull Request 规范 - 请先 fork 一份到自己的项目下，不要直接在仓库下建分支。 - commit 信息要以`[文件名]: 描述信息` 的形式填写，例如 `README.md: fix xxx bug`。 - 如果是修复 bug，请在 PR 中给出描述信息。 - 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。 ## 2. 使用说明 ``` - node版本 > v18.16.0 - golang版本 >= v1.22 - IDE推荐：Goland ``` ### 2.1 server 项目 使用 `Goland` 等编辑工具，打开 server 目录，不可以打开 gin-vue-admin 根目录。 ``` # 克隆项目 git clone https://github.com/flipped-aurora/gin-vue-admin.git # 进入server文件夹 cd server # 使用 go mod 并安装go依赖包 go generate # 运行 go run . ``` ### 2.2 web 项目 ``` # 进入web文件夹 cd web # 安装依赖 npm install # 启动web项目 npm run serve ``` ### 2.3 swagger 自动化 API 文档 #### 2.3.1 安装 swagger ``` go install github.com/swaggo/swag/cmd/swag@latest ``` #### 2.3.2 生成 API 文档 ``` cd server swag init ``` ### 2.4 VSCode 工作区 #### 2.4.1 开发 使用 `VSCode` 打开根目录下的工作区文件 `gin-vue-admin.code-workspace`，在边栏可以看到三个虚拟目录：`backend`、`frontend`、`root`。 #### 2.4.2 运行/调试 在运行和调试中也可以看到三个 task：`Backend`、`Frontend`、`Both (Backend & Frontend)`。运行 `Both (Backend & Frontend)` 可以同时启动前后端项目。 #### 2.4.3 settings 在工作区配置文件中有 `go.toolsEnvVars` 字段，是用于 `VSCode` 自身的 go 工具环境变量。此外在多 go 版本的系统中，可以通过 `gopath`、`go.goroot` 指定运行版本。 ``` "go.gopath": null, "go.goroot": null, ``` ## 3. 技术选型 - 前端：用基于 [Vue](https://vuejs.org) 的 [Element](https://github.com/ElemeFE/element) 构建基础页面。 - 后端：用 [Gin](https://gin-gonic.com/) 快速搭建基础 RESTful 风格 API，[Gin](https://gin-gonic.com/) 是一个 go 语言编写的 Web 框架。 - 数据库：采用 `MySql` > (5.7) 版本 数据库引擎 InnoDB，使用 [gorm](http://gorm.cn) 实现对数据库的基本操作。 - 缓存：使用 `Redis` 实现记录当前活跃用户的 `jwt` 令牌并实现多点登录限制。 - API 文档：使用 `Swagger` 构建自动化文档。 - 配置文件：使用 [fsnotify](https://github.com/fsnotify/fsnotify) 和 [viper](https://github.com/spf13/viper) 实现 `yaml` 格式的配置文件。 - 日志：使用 [zap](https://github.com/uber-go/zap) 实现日志记录。 ## 4. 项目架构 ### 4.1 系统架构图  ### 4.2 前端详细设计图 （提供者:baobeisuper）  ### 4.3 目录结构 ``` ├── server ├── api (api层) │ └── v1 (v1版本接口) ├── config (配置包) ├── core (核心文件) ├── docs (swagger文档目录) ├── global (全局对象) ├── initialize (初始化) │ └── internal (初始化内部函数) ├── middleware (中间件层) ├── model (模型层) │ ├── request (入参结构体) │ └── response (出参结构体) ├── packfile (静态文件打包) ├── resource (静态资源文件夹) │ ├── excel (excel导入导出默认路径) │ ├── page (表单生成器) │ └── template (模板) ├── router (路由层) ├── service (service层) ├── source (source层) └── utils (工具包) ├── timer (定时器接口封装) └── upload (oss接口封装) web ├── babel.config.js ├── Dockerfile ├── favicon.ico ├── index.html -- 主页面 ├── limit.js -- 助手代码 ├── package.json -- 包管理器代码 ├── src -- 源代码 │ ├── api -- api 组 │ ├── App.vue -- 主页面 │ ├── assets -- 静态资源 │ ├── components -- 全局组件 │ ├── core -- gva 组件包 │ │ ├── config.js -- gva网站配置文件 │ │ ├── gin-vue-admin.js -- 注册欢迎文件 │ │ └── global.js -- 统一导入文件 │ ├── directive -- v-auth 注册文件 │ ├── main.js -- 主文件 │ ├── permission.js -- 路由中间件 │ ├── pinia -- pinia 状态管理器，取代vuex │ │ ├── index.js -- 入口文件 │ │ └── modules -- modules │ │ ├── dictionary.js │ │ ├── router.js │ │ └── user.js │ ├── router -- 路由声明文件 │ │ └── index.js │ ├── style -- 全局样式 │ │ ├── base.scss │ │ ├── basics.scss │ │ ├── element_visiable.scss -- 此处可以全局覆盖 element-plus 样式 │ │ ├── iconfont.css -- 顶部几个icon的样式文件 │ │ ├── main.scss │ │ ├── mobile.scss │ │ └── newLogin.scss │ ├── utils -- 方法包库 │ │ ├── asyncRouter.js -- 动态路由相关 │ │ ├── btnAuth.js -- 动态权限按钮相关 │ │ ├── bus.js -- 全局mitt声明文件 │ │ ├── date.js -- 日期相关 │ │ ├── dictionary.js -- 获取字典方法 │ │ ├── downloadImg.js -- 下载图片方法 │ │ ├── format.js -- 格式整理相关 │ │ ├── image.js -- 图片相关方法 │ │ ├── page.js -- 设置页面标题 │ │ ├── request.js -- 请求 │ │ └── stringFun.js -- 字符串文件 | ├── view -- 主要view代码 | | ├── about -- 关于我们 | | ├── dashboard -- 面板 | | ├── error -- 错误 | | ├── example --上传案例 | | ├── iconList -- icon列表 | | ├── init -- 初始化数据 | | | ├── index -- 新版本 | | | ├── init -- 旧版本 | | ├── layout -- layout约束页面 | | | ├── aside | | | ├── bottomInfo -- bottomInfo | | | ├── screenfull -- 全屏设置 | | | ├── setting -- 系统设置 | | | └── index.vue -- base 约束 | | ├── login --登录 | | ├── person --个人中心 | | ├── superAdmin -- 超级管理员操作 | | ├── system -- 系统检测页面 | | ├── systemTools -- 系统配置相关页面 | | └── routerHolder.vue -- page 入口页面 ├── vite.config.js -- vite 配置文件 └── yarn.lock ``` ## 5. 主要功能 - 权限管理：基于 `jwt` 和 `casbin` 实现的权限管理。 - 文件上传下载：实现基于 `七牛云`, `阿里云`, `腾讯云` 的文件上传操作(请开发自己去各个平台的申请对应 `token` 或者对应 `key`)。 - 分页封装：前端使用 `mixins` 封装分页，分页方法调用 `mixins` 即可。 - 用户管理：系统管理员分配用户角色和角色权限。 - 角色管理：创建权限控制的主要对象，可以给角色分配不同 API 权限和菜单权限。 - 菜单管理：实现用户动态菜单配置，实现不同角色不同菜单。 - API 管理：不同用户可调用的 API 接口的权限不同。 - 配置管理：配置文件可前台修改(在线体验站点不开放此功能)。 - 条件搜索：增加条件搜索示例。 - RESTful 示例：可以参考用户管理模块中的示例 API。 - 前端文件参考: [web/src/view/superAdmin/api/api.vue](https://github.com/flipped-aurora/gin-vue-admin/blob/master/web/src/view/superAdmin/api/api.vue) - 后台文件参考: [server/router/sys_api.go](https://github.com/flipped-aurora/gin-vue-admin/blob/master/server/router/sys_api.go) - 多点登录限制：需要在 `config.yaml` 中把 `system` 中的 `use-multipoint` 修改为 true (需要自行配置 Redis 和 Config 中的 Redis 参数，测试阶段，有 bug 请及时反馈)。 - 分片上传：提供分片上传和大文件分片上传功能示例。 - 表单生成器：表单生成器借助 [@Variant Form](https://github.com/vform666/variant-form) 。 - 代码生成器：后台基础逻辑以及简单 CRUD 的代码生成器。 ## 6. 知识库 ## 6.1 团队博客 ## 6.2 教学视频 （1）手把手教学视频 （2）后端目录结构调整介绍以及使用方法 （3）golang 基础教学视频 （4）gin 框架基础教学 （5）gin-vue-admin 版本更新介绍视频 ## 7. 联系方式 ### 7.1 技术群 ### QQ 交流群：971857775 ### 微信交流群 | 微信 | | :---: | | 防止广告进群，添加微信，输入以下代码执行结果（请勿转码为 string） ``` str := "5Yqg5YWlR1ZB5Lqk5rWB576k" decodeBytes, err := base64.StdEncoding.DecodeString(str) fmt.Println(decodeBytes, err) ``` ### [关于我们](https://www.gin-vue-admin.com/about/join.html) ## 9. 捐赠 如果你觉得这个项目对你有帮助，你可以请作者喝饮料 :tropical_drink: [点我](https://www.gin-vue-admin.com/coffee/index.html) ## 10. 注意事项 请严格遵守 Apache 2.0 协议并保留作品声明，去除版权信息请务必[获取授权](https://plugin.gin-vue-admin.com/license) 未授权去除版权信息将依法追究法律责任

标签：AI辅助编程, CMS安全, Element Plus, Gin, Gorm, Go语言, JavaScript, JWT鉴权, MCP服务, RBAC, Skills管理, Syscall, TypeScript, Vite, Vue3, Web开发, 代码生成器, 企业级开发, 企业级解决方案, 低代码, 前端组件, 动态路由, 后台管理系统, 后端开发, 增删改查, 安全插件, 快速开发框架, 搜索引擎查询, 数据可视化, 日志审计, 权限管理, 模型越狱, 程序破解, 脚手架, 表单生成器, 资源权限