likes
comments
collection
share

gin-vue-admin学习

作者站长头像
站长
· 阅读数 11

gin-vue-admin

gin-vue-admin官网:gin-vue-admin | GVA 文档站

git地址:flipped-aurora/gin-vue-admin

GIN-VUE-ADMIN是一个基于vue和gin开发的全栈前后端分离的开发基础平台,拥有jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能。

  • 前端:用基于vue3Element-Plus构建基础页面。

  • 后端:用Gin快速搭建基础restful风格API,Gin是一个go语言编写的Web框架。

  • 数据库:采用MySql>5.7版本,数据库引擎 innoDB ,使用gorm实现对数据库的基本操作,已添加对sqlite数据库的支持。

  • 缓存:使用Redis实现记录当前活跃用户的jwt令牌并实现多点登录限制。

  • API文档:使用Swagger构建自动化文档。

  • 配置文件:使用fsnotifyviper实现yaml格式的配置文件。

  • 日志:使用zap实现日志记录。

gin

gin是一个golang的web服务框架,他有较快的速度,且能够快速的搭建服务,有路由分组的功能,且可以使用中间件对路由进行处理。

如果是写过前后端分离的前端或者后端的话,学习理解gin是很快的,起码我是可以看文档就够了。gin文档官网:Gin Web Framework (gin-gonic.com)

另外restful 风格的API也能够方便使用。

gorm

orm本身是一种在数据库基础上的上层库,它封装了数据库驱动,sql语句等。gorm则就是golang常用的orm,nest也有使用typeorm。 gorm文档官网:GORM

gorm有如下的特性:

  • 全功能 ORM
  • 关联 (拥有一个,拥有多个,属于,多对多,多态,单表继承)
  • Create,Save,Update,Delete,Find 中钩子方法
  • 支持 Preload、Joins 的预加载
  • 事务,嵌套事务,Save Point,Rollback To to Saved Point
  • Context、预编译模式、DryRun 模式
  • 批量插入,FindInBatches,Find/Create with Map,使用 SQL 表达式、Context Valuer 进行 CRUD
  • SQL 构建器,Upsert,锁,Optimizer/Index/Comment Hint,命名参数,子查询
  • 复合主键,索引,约束
  • 自动迁移
  • 自定义 Logger
  • 灵活的可扩展插件 API:Database Resolver(多数据库,读写分离)、Prometheus…
  • 每个特性都经过了测试的重重考验
  • 开发者友好

viper

Viper是适用于Go应用程序(包括Twelve-Factor App)的完整配置解决方案。它被设计用于在应用程序中工作,并且可以处理所有类型的配置需求和格式。它支持以下特性:

  • 设置默认值
  • JSONTOMLYAMLHCLenvfileJava properties格式的配置文件读取配置信息
  • 实时监控和重新读取配置文件(可选)
  • 从环境变量中读取
  • 从远程配置系统(etcd或Consul)读取并监控配置变化
  • 从命令行参数读取配置
  • 从buffer读取配置
  • 显式配置值

代码分析

先看整个项目的目录结构

    ├── 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

web前端部分没太多可分析的,就是vue3-admin那一套,这里主要是学习go后端部分,也就是server目录。

入口文件main.go

func main() {
   global.GVA_VP = core.Viper() // 初始化Viper
   initialize.OtherInit()
   global.GVA_LOG = core.Zap() // 初始化zap日志库
   zap.ReplaceGlobals(global.GVA_LOG)
   global.GVA_DB = initialize.Gorm() // gorm连接数据库
   initialize.Timer()
   initialize.DBList()
   if global.GVA_DB != nil {
      initialize.RegisterTables(global.GVA_DB) // 初始化表
      // 程序结束前关闭数据库链接
      db, _ := global.GVA_DB.DB()
      defer db.Close()
   }
   core.RunWindowsServer()
}

viper和zap,以及gorm是先初始化的,并将对象保存到全局对象里面。然后先找到gin启动web服务的地方。进入RunWindowsServer()函数看看:

func RunWindowsServer() {
   if global.GVA_CONFIG.System.UseMultipoint || global.GVA_CONFIG.System.UseRedis {
      // 初始化redis服务
      initialize.Redis()
   }

   // 从db加载jwt数据
   if global.GVA_DB != nil {
      system.LoadAll()
   }

   Router := initialize.Routers() 
   Router.Static("/form-generator", "./resource/page")

   address := fmt.Sprintf(":%d", global.GVA_CONFIG.System.Addr)
   s := initServer(address, Router)
   // 保证文本顺序输出
   // In order to ensure that the text order output can be deleted
   time.Sleep(10 * time.Microsecond)
   global.GVA_LOG.Info("server run success on ", zap.String("address", address))

   fmt.Printf(`
   欢迎使用 gin-vue-admin
   当前版本:v2.5.4b
    加群方式:微信号:shouzi_1994 QQ群:622360840
   插件市场:https://plugin.gin-vue-admin.com
   GVA讨论社区:https://support.qq.com/products/371961
   默认自动化文档地址:http://127.0.0.1%s/swagger/index.html
   默认前端文件运行地址:http://127.0.0.1:8080
   如果项目让您获得了收益,希望您能请团队喝杯可乐:https://www.gin-vue-admin.com/coffee/index.html
`, address)
   global.GVA_LOG.Error(s.ListenAndServe().Error())
}

看可以看到Router := initialize.Routers() 这里初始化了路由,进去看看:

Router := gin.Default()
systemRouter := router.RouterGroupApp.System
exampleRouter := router.RouterGroupApp.Example

Router.StaticFS(global.GVA_CONFIG.Local.Path, http.Dir(global.GVA_CONFIG.Local.StorePath)) // 为用户头像和文件提供静态地址core/server.go 将启动模式 更变为 Router.RunTLS("端口","你的cre/pem文件","你的key文件")

Router.GET("/swagger/*any", ginSwagger.WrapHandler(swaggerFiles.Handler))
global.GVA_LOG.Info("register swagger handler")
// 方便统一添加路由组前缀 多服务器上线使用

PublicGroup := Router.Group("")
{
   // 健康监测
   PublicGroup.GET("/health", func(c *gin.Context) {
      c.JSON(200, "ok")
   })
}
{
   systemRouter.InitBaseRouter(PublicGroup) // 注册基础功能路由 不做鉴权
   systemRouter.InitInitRouter(PublicGroup) // 自动初始化相关
}
PrivateGroup := Router.Group("")
PrivateGroup.Use(middleware.JWTAuth()).Use(middleware.CasbinHandler())
{
   systemRouter.InitApiRouter(PrivateGroup)                 // 注册功能api路由
   //  省略多个......初始化路由

   exampleRouter.InitExcelRouter(PrivateGroup)                 // 表格导入导出
   exampleRouter.InitCustomerRouter(PrivateGroup)              // 客户路由
   exampleRouter.InitFileUploadAndDownloadRouter(PrivateGroup) // 文件上传下载功能路由
}

InstallPlugin(Router) // 安装插件

global.GVA_LOG.Info("router register success")
return Router

在这里创建了Router,并且初始化了各类路由,以及安装了jwt鉴权插件,最后将router返回。

再回到RunWindowsServer,拿到返回的Router之后,执行了

s := initServer(address, Router)

,进入initserver之后,可以看到:

func initServer(address string, router *gin.Engine) server {
   return &http.Server{
      Addr:           address,
      Handler:        router,
      ReadTimeout:    20 * time.Second,
      WriteTimeout:   20 * time.Second,
      MaxHeaderBytes: 1 << 20,
   }
}

这里把web服务启动了起来。到这里gin服务启动完成了。

关于自动化代码的服务就不细说了,在api里面找到auto_code一步一步往下找就能明白了。

总结

本次文章学习了解了一下gin-vue-admin的启动流程。能够更好的理解使用项目。

结语

本次的文章到这里就结束啦!♥♥♥读者大大们认为写的不错的话点个赞再走哦 ♥♥♥

每天一个知识点,每天都在进步!♥♥