Gin-Vue-Admin Development Platform

Project Positioning

gin-vue-admin is a full-stack management system framework designed with a decoupled frontend and backend architecture. It focuses on providing robust administrative capabilities, including:

• Permission Control: Built-in RBAC (Role-Based Access Control).
• Code Generation: Infrastructure for generating code and managing the backend.
• Extensibility: Support for middleware extensions and a plugin-based structure.
• API Documentation: Integrated Swagger support.
• Standardized Communication: Uses a unified response structure for all API calls.

Technology Stack

Frontend

• Core: Vue 3, Vite, Vue Router
• State Management: Pinia
• UI Components: Element Plus, UnoCSS
• Utilities & Data: Axios, ECharts, VueUse

Backend

• Core: Go, Gin
• ORM & Database: GORM, support for multiple databases
• Security & Auth: Casbin (RBAC), JWT
• Configuration & Logging: Viper, Zap
• Caching & Storage: Redis, support for multiple cloud storage providers

Gin-Vue-Admin is a full-stack development platform based on Vue and Gin. It is designed to accelerate the development of small to medium-sized projects by providing integrated core functionalities:

• Permission Management: Implemented using jwt and casbin.
• User & Role Management: Admin can assign roles, permissions, and menu access to users.
• Dynamic Menus & APIs: Users see different menus and have different API access levels based on their roles.
• File Management: Supports uploading/downloading to QiniuCloud, Alibaba Cloud, and Tencent Cloud, including chunked uploads for large files.
• Code & Form Generation: Includes a Form Generator (using @Variant Form) and a Code Generator for basic CRUD logic.
• Configuration Management: Allows modifying configuration files via the UI (note: this feature is disabled on the online demo site).
• Pagination: Frontend pagination is encapsulated using mixins for easy reuse.

The server directory follows a layered architecture designed for scalability and separation of concerns. Key layers include:

• api: Versioned API endpoints (e.g., api/v1).
• router: Route definitions and mapping.
• service: Core business logic implementation.
• model: Data structures representing database tables, including request (input) and response (output) structs.
• middleware: Custom Gin middleware.
• initialize: System initialization logic for components like Redis, GORM, and Validators. Note that functions in initialize/internal are restricted and should only be called by the initialize layer.
• config: Configuration structures corresponding to config.yaml.
• core: Initialization of core components like zap (logging), viper (configuration), and the server itself.
• global: Global objects accessible throughout the application.
• resource: Static assets, including Excel import/export paths, form generator distributions (page), and code generator templates (template).
• utils: Utility wrappers, such as timer for scheduled tasks and upload for OSS (Object Storage Service) interactions.

├── api
│   └── v1
├── config
├── core
├── docs
├── global
├── initialize
│   └── internal
├── middleware
├── model
│   ├── request
│   └── response
├── packfile
├── resource
│   ├── excel
│   ├── page
│   └── template
├── router
├── service
├── source
└── utils
    ├── timer
    └── upload

The web directory follows a standard Vue/Vite structure with specific organization for the gin-vue-admin ecosystem:

• src/api: API group definitions.
• src/components: Global reusable components.
• src/core: Core GVA component package, including config.js (website configuration), gin-vue-admin.js (welcome file registration), and global.js (unified imports).
• src/permission.js: Route middleware handling permissions.
• src/pinia: State management using Pinia (replaces Vuex), with modules for dictionary, router, and user.
• src/router: Route declarations.
• src/style: Global styles, including element_visiable.scss for overriding element-plus styles.
• src/utils: Utility libraries such as request.js (API requests), asyncRouter.js (dynamic routing), and dictionary.js (dictionary methods).
• src/view: Main view components, including layout (page constraints), dashboard, login, and system modules.
• vite.config.js: Vite configuration file.