Gin-vue-admin：Star 21.8k，全栈前后端分离平台，拥有AI辅助基础开发，支持TS和JS混用，中小企业项目首选

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

gin-vue-admin是一个基于Vue3和Gin的全栈前后端分离的开发基础平台。它集成了JWT鉴权、权限管理、动态路由、显隐可控组件、分页封装、多点登录拦截、资源权限、上传下载、代码生成器、表单生成器和可配置的导入导出等开发必备功能。该项目支持TS和JS混用，旨在帮助开发者快速搭建中小型项目。

项目 star 数

功能特色

权限管理：基于JWT和casbin实现的权限管理。
文件上传下载：支持七牛云、阿里云、腾讯云的文件上传操作。
分页封装：前端使用mixins封装分页。
用户管理：系统管理员可分配用户角色和角色权限。
角色管理：创建权限控制的主要对象，可分配不同API权限和菜单权限。
菜单管理：实现用户动态菜单配置。
API管理：不同用户可调用的API接口权限不同。
配置管理：配置文件可前台修改。
条件搜索：提供条件搜索示例。
RESTful示例：用户管理模块中的示例API。
多点登录限制：需配置Redis实现。
分片上传：提供文件分片上传和大文件分片上传功能示例。
表单生成器：借助@Variant Form实现。
代码生成器：生成后台基础逻辑及简单CRUD。

应用场景

gin-vue-admin适用于需要快速搭建前后端分离的中小型项目。例如，企业内部管理系统、个人博客系统、小型电商平台等。

使用方法

环境准备

node版本 > v16.8.3
golang版本 >= v1.22
推荐使用Goland作为开发IDE

克隆项目

git clone https://github.com/flipped-aurora/gin-vue-admin.git

后端项目

进入server目录，使用go mod安装依赖：

cd server
go generate
go run .

前端项目

进入web目录，安装依赖并启动项目：

cd web
npm install
npm run serve

API文档

使用Swagger构建自动化文档，执行以下命令后，访问http://localhost:8888/swagger/index.html查看：

cd server
swag init

VSCode工作区

使用 VSCode打开根目录下的 gin-vue-admin.code-workspace 文件，在边栏可以看到三个虚拟目录：backend、frontend、root。运行和调试中也可以看到三个task：Backend、Frontend、Both (Backend & Frontend)。运行Both (Backend & Frontend)可以同时启动前后端项目。

在线预览

网址：demo.gin-vue-admin.com
测试账号：admin
测试密码：123456

项目架构

项目采用前后端分离的架构，后端使用Gin搭建RESTful API，前端使用Vue和Element构建界面。

后端目录结构

server
 ├── api             (API层)
 ├── config          (配置包)
 ├── core            (核心文件)
 ├── docs            (Swagger文档目录)
 ├── global          (全局对象)
 ├── initialize      (初始化)
 ├── middleware      (中间件层)
 ├── model           (模型层)
 ├── packfile        (静态文件打包)
 ├── resource        (静态资源文件夹)
 ├── router          (路由层)
 ├── service         (服务层)
 ├── source          (源码层)
 └── utils           (工具包)

前端目录结构

web
 ├── babel.config.js
 ├── Dockerfile
 ├── favicon.ico
 ├── index.html       (主页面)
 ├── limit.js         (助手代码)
 ├── package.json     (包管理器代码)
 ├── src              (源代码)
 │   ├── api          (API组)
 │   ├── App.vue      (主页面)
 │   ├── assets       (静态资源)
 │   ├── components   (全局组件)
 │   ├── core         (GVA组件包)
 │   ├── directive    (指令)
 │   ├── main.js      (主文件)
 │   ├── permission.js (路由中间件)
 │   ├── pinia        (状态管理器)
 │   ├── router       (路由声明文件)
 │   ├── style        (全局样式)
 │   ├── utils        (工具库)
 │   └── view         (视图代码)
 └── vite.config.js   (Vite配置文件)

项目效果

结语

gin-vue-admin是一个功能丰富、文档齐全的全栈开发平台，适合需要快速搭建项目的开发者使用。通过本文的介绍，相信您已经对该项目有了更深入的了解。

项目地址

https://github.com/flipped-aurora/gin-vue-admin