gin vue admin
2024/10/20
English | Simplified Chinese
Online documentation: https://www.gin-vue-admin.com
initialization
From environment to deployment instructional video
Development Teaching (Contributor: LLemonGreen And Fann)
communication community
plug-in market
1. This project has documentation and detailed video tutorials from start-up to development to deployment.
2. This project requires you to have a certain foundation in golang and vue
3. You can complete all operations through our tutorials and documents, so we no longer provide free technical services. If you need services, please provide paid support.
4. If you use this project for commercial purposes, please comply with the Apache2.0 agreement and retain the author's technical support statement. You need to retain the following copyright statement information, as well as the copyright statement information contained in logs and code. The required retained information is of a copywriting nature and will not affect any business content. If you decide to use it commercially [business activities that generate revenue are all commercial uses] or must be eliminated, please purchase authorization.
Gin-vue-admin is a full-stack development platform based on vue and gin that separates the front and back ends. It integrates jwt authentication, dynamic routing, dynamic menu, casbin authentication, form generator, code generator and other functions, and provides many functions. sample files, allowing you to focus more time on business development.
Online preview: http://demo.gin-vue-admin.com
Test username: admin
Test password: 123456
Hi! First of all, thank you for using gin-vue-admin.
Gin-vue-admin is a set of open source frameworks with a front-end and back-end separation architecture prepared for rapid research and development. It is designed to quickly build small and medium-sized projects.
The growth of Gin-vue-admin cannot be separated from everyone's support. If you are willing to contribute code or provide suggestions for gin-vue-admin, please read the following content.
Issues are only used to submit Bugs or Features and design-related content. Other content may be closed directly.
Before submitting an issue, please search to see if the relevant content has been raised.
Please fork a copy to your own project first. Do not create a branch directly under the warehouse.
The commit information should be filled in in the form of [文件名]: 描述信息, such as README.md: fix xxx bug .
If you are fixing a bug, please provide description information in the PR.
Merging the code requires the participation of two maintainers: one person reviews and approves, and the other reviews again, and can be merged after passing the review.
- node版本 > v16.8.3 - golang版本 >= v1.22 - IDE推荐：Goland
Use editing tools such as Goland to open the server directory. Do not open the gin-vue-admin root directory.
# Clone the project git clone https://github.com/flipped-aurora/gin-vue-admin.git# Enter the server folder cd server# Use go mod and install the go dependency package go generate# Run go run.
# Enter the web folder cd web # Install dependencies npm install # Start the web project npm run serve
go install github.com/swaggo/swag/cmd/swag@latest
cd server swag init
After executing the above command, the three files
docs.go,swagger.json, andswagger.yamlin the docs folder will appear in the server directory. After starting the go service, enter http://localhost:8888/swagger in the browser. /index.html to view the swagger documentation
Use VSCode to open the workspace file gin-vue-admin.code-workspace in the root directory. You can see three virtual directories in the sidebar: backend , frontend , root .
You can also see three tasks in running and debugging: Backend , Frontend , Both (Backend & Frontend) . Running Both (Backend & Frontend) can start the front-end and front-end projects at the same time.
There is the go.toolsEnvVars field in the workspace configuration file, which is the go tool environment variable used for VSCode itself. In addition, in systems with multiple go versions, you can specify the running version through gopath and go.goroot .
"go.gopath": null,"go.goroot": null,
Front-end: Use Vue-based Element to build basic pages.
Backend: Use Gin to quickly build a basic restful style API. Gin is a web framework written in go language.
Database: Use MySql > (5.7) version database engine InnoDB, and use gorm to implement basic operations on the database.
Caching: Use Redis to record the jwt token of the current active user and implement multi-point login restrictions.
API documentation: Use Swagger to build automation documentation.
Configuration file: Use fsnotify and viper to implement the configuration file in yaml format.
Logging: Use zap to implement logging.
├── 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
Permission management: Permission management based on jwt and casbin .
File upload and download: implement file upload operations based on七牛云,阿里云, and腾讯云(please develop your own application for the corresponding token or corresponding key on each platform).
Paging encapsulation: The front end uses mixins to encapsulate paging, and the paging method just calls mixins .
User management: System administrator assigns user roles and role permissions.
Role management: Create the main object for permission control, and assign different API permissions and menu permissions to roles.
Menu management: realize user dynamic menu configuration and realize different menus for different roles.
API management: Different users have different permissions on the API interfaces they can call.
Configuration management: Configuration files can be modified at the front desk (this function is not available on the online experience site).
Conditional search: Add conditional search examples.
Restful example: You can refer to the sample API in the user management module.
Front-end file reference: web/src/view/superAdmin/api/api.vue
Background file reference: server/router/sys_api.go
Multipoint login restrictions: You need to change use-multipoint in system to true in config.yaml (you need to configure Redis and Redis parameters in Config yourself. During the testing phase, please report any bugs in time).
Multipart upload: Provides examples of multipart file upload and multipart upload of large files.
Form builder: Form builder with the help of @Variant Form.
Code generator: background basic logic and simple curd code generator.
https://www.yuque.com/flipped-aurora
There are front-end framework teaching videos included. If you think the project is helpful to you, you can add my personal WeChat: shouzi_1994. You are welcome to make valuable requests.
(1) Step-by-step instruction video
https://www.bilibili.com/video/BV1Rg411u7xH/
(2) Introduction to back-end directory structure adjustment and how to use it
https://www.bilibili.com/video/BV1x44y117TT/
(3) golang basic teaching video
bilibili: https://space.bilibili.com/322210472/channel/detail?cid=108884
(4) Basic teaching of gin framework
bilibili: https://space.bilibili.com/322210472/channel/detail?cid=126418&ctype=0
(5) gin-vue-admin version update introduction video
bilibili: https://www.bilibili.com/video/BV1kv4y1g7nT
