Skip to main content

使用指南

代码生成器说明#

参数界面说明#

image-20201026165650624

界面名称对应生成结构体结构体名称中文说明备注
Struct名称StructName结构体名称server/model 文件夹下的结构体文件中,结构体的名称,首字母必须大写
tableNameTableName指定表名(非必填)数据库中生成的与结构体对应的数据表名。
Struct简称PackageName简称会作为入参对象名和路由group用于结构体作为参数时的名称,以及路由 group 名称。这里一般与Stuct名称对应,但是首字母小写。
Struct中文名称Abbreviation中文描述作为自动api描述作为自动api描述,也是左侧菜单显示时的默认菜单名。
文件名称Description生成文件的默认名称使用 xxx_xxx 形式命名。生成后端代码时,model下的文件名会用这里的命名。
自动创建apiAutoCreateApiToSql自动创建api记录选中,如果不选则不会自动创建api表,需要自己去api管理里面手动增加对应路由。
自动移动文件AutoMoveFile自动移动文件自动移动到项目默认的路径

字段界面说明#

image-20201026165813881

组件内容名称对应生成结构体结构体名称中文说明备注
Field名称FieldName结构体名称struct结构体中的字段名称,首字母大写
Field中文名FieldDesc结构体中文名称对应struct结构体tag中的comment字段值,也是数据列表展示表格的表头名称。
FieldJSONFieldJsongolang struct tag json对应struct结构体tag中的json字段值。在使用struct对象调用某个字段时,使用“对象.json字段值”
数据库字段名ColumnName数据库字段名对应数据库中的字段名称
数据库字段描述Comment数据库备注对应数据库中的列Comment值
Field数据类型FieldType字段对应golang数据类型对应struct结构体中的字段类型
数据库字段类型(2.4.6废弃)DataType字段数据类型对应生成的数据表中的字段类型
数据库字段长度(2.4.6废弃)DataTypeLong字段数据类型长度对应生成的数据表中的字段长度
Field查询条件FieldSearchType搜索类型用于实现该对象数据列表的条件查询
关联字典DictType关联字典标记

1. 生成一步到位代码包#

1.1 自行设计业务基础结构体模型#

  • 点击左侧菜单中的 系统工具 → 代码生成器

  • 填写好 Struct名称 tableName Struct简称 Struct中文名称 文件名称 空格

  • 选择好 自动创建api 自动移动文件 按钮

  • 点击 新增Field 按钮,为数据表、struct结构体创建字段, 具体请看字段界面说明

1.2 从数据库的选择表进行生成结构体#

  • 点击左侧菜单中的系统工具 > 代码生成器 ,代码生成器是用来生成CURD代码的。

  • 点击 点这里从现有数据库创建代码

  • image-20200915160906999

  • 选择 数据库名 以及 表名

  • image-20200915161618174

  • 点击使用此表创建

  • image-20200915161727520

  • 自行编辑好各个Filed的所需的搜索条件, 需要关联的字典, 或者其他自己要修改的地方点击编辑进行修改.

  • image-20200915161917791

1.3 点击生成代码按钮#

注意

完成1.1或1.2步骤操作, 其中一个操作喔!

  • 点击后就可以看到左下角或者下载内容里有一个下载好了的ginvueadmin.zip 文件

  • image-20200915162032096

    解压ginvueadmin.zip 后会看到里面有个 autoCode 文件夹,autoCode 里的 server 文件夹为自动生成的后端代码,web 文件夹为自动生成的前端代码。

image-20200915162153474

注意

PackageName (文件夹自建)--> 代表图片上的sysUsers 新版自动迁移会在autocode下每个功能的enter下自动注册生成的新的代码模块 如果不使用自动迁移功能 还需要自行注册

示例路径移动到对应路径 (web/view/sysUsers目录下的sysUsers文件夹需要自己新建)
autoCode/server/sysUsers/service/sysUsers.goserver/service/autocode/sysUsers.go
autoCode/server/sysUsers/router/sysUsers.goserver/router/autocode/sysUsers.go
autoCode/server/sysUsers/request/sysUsers.goserver/model/autocode/request/sysUsers.go
autoCode/server/sysUsers/model/sysUsers.goserver/model/autocode/sysUsers.go
autoCode/server/sysUsers/api/sysUsers.goserver/api/autocode/sysUsers.go
autoCode/web/sysUsers/table/sysUsers.vueweb/src/view/sysUsers/sysUsers.vue
autoCode/web/sysUsers/form/sysUsers.vueweb/src/view/sysUsers/sysUsersForm.vue (文件需要重命名)
autoCode/web/sysUsers/api/sysUsers.jsweb/src/api/sysUsers.js

代码迁移完成后,go代码如果需要做模块化,则需要创建enter.go

enter.go内部将所有的相关功能模块下的结构统一为一个总结构体,然后将可以通过new这个总结构体实现对本模块的所有结构统一实例化使用 我们此处仅以api下的system分类为例(其他模块操作类似 model模块无enter.go)

system下目录结构如下

enter.go

sys_api.go
sys_authority.go
sys_auto_code.go
sys_auto_code_history.go
sys_captcha.go
sys_casbin.go
sys_dictionary.go
sys_dictionary_detail.go
sys_initdb.go
sys_jwt_blacklist.go
sys_menu.go
sys_operation_record.go
sys_system.go
sys_user.go

enter.go 文件中存在如下结构


package system
import "github.com/flipped-aurora/gin-vue-admin/server/service"

// 此处为功能模块的分组 表示我们这边是API模块 我们总结了当前目录下的所有结构体type ApiGroup struct {    DBApi   //这是当前分组下存在的模块 DBApi模块 就来自于 sys_initdb.go 下的 type DBApi struct{} 下方同理    JwtApi    BaseApi    SystemApi    CasbinApi    AutoCodeApi    SystemApiApi    AuthorityApi    DictionaryApi    AuthorityMenuApi    OperationRecordApi    AutoCodeHistoryApi    DictionaryDetailApi}

// 此处是为了统一方便使用Service下的功能 因此统一获取做了拆解 方便api模块下所有的功能都可以通过调用此处的变量获取到对应的Service实例从而调用其方法var (    apiService              = service.ServiceGroupApp.SystemServiceGroup.ApiService     // apiService: 例如此处描述的就是 service包下的ServiceGroup示例下的SystemServiceGroup功能组的ApiService相关功能    jwtService              = service.ServiceGroupApp.SystemServiceGroup.JwtService    menuService             = service.ServiceGroupApp.SystemServiceGroup.MenuService    userService             = service.ServiceGroupApp.SystemServiceGroup.UserService    initDBService           = service.ServiceGroupApp.SystemServiceGroup.InitDBService    casbinService           = service.ServiceGroupApp.SystemServiceGroup.CasbinService    autoCodeService         = service.ServiceGroupApp.SystemServiceGroup.AutoCodeService    baseMenuService         = service.ServiceGroupApp.SystemServiceGroup.BaseMenuService    authorityService        = service.ServiceGroupApp.SystemServiceGroup.AuthorityService    dictionaryService       = service.ServiceGroupApp.SystemServiceGroup.DictionaryService    systemConfigService     = service.ServiceGroupApp.SystemServiceGroup.SystemConfigService    operationRecordService  = service.ServiceGroupApp.SystemServiceGroup.OperationRecordService    autoCodeHistoryService  = service.ServiceGroupApp.SystemServiceGroup.AutoCodeHistoryService    dictionaryDetailService = service.ServiceGroupApp.SystemServiceGroup.DictionaryDetailService)


这里我们介绍完了声明enter的过程 和使用其他包下enter的过程 然后我们找到实例化enter的过程

查看/server/api/v1/enter.go 这个文件


package v1
import (    "github.com/flipped-aurora/gin-vue-admin/server/api/v1/autocode"    "github.com/flipped-aurora/gin-vue-admin/server/api/v1/example"    "github.com/flipped-aurora/gin-vue-admin/server/api/v1/system")
type ApiGroup struct {    SystemApiGroup   system.ApiGroup    ExampleApiGroup  example.ApiGroup    AutoCodeApiGroup autocode.ApiGroup}
// 我们在此处对上方前面做过的所有声明进行了总结并且实例化为App 其他包我们通过调用 v1.ApiGroupApp.xxxx组.xxx功能.xxx方法即可var ApiGroupApp = new(ApiGroup)

手动添加自动化生成代码的方式也介绍完了,此模式方便大家模块化使用,看起来比较长,但是其便于对单一分类统一管理,创建同意方法等,同样也便于项目后期拓展维护。在后续迭代中不再痛苦。

1.4 预览代码#

注意

此功能需要在 v2.3.9 之后的版本才会有喔, 不包含v2.3.9!

image-20210224151109195

  • 效果预览
  • image-20210224151320620

1.5 自动移动文件#

  • 操作指引

  • image-20210224152346906

  • image-20210224152545924

  • 芜湖,起飞!!!!!! 这样不用手动去解压文件和移动文件, 太舒服了!

  • image-20210224152815684

2. 注册路由和数据库表#

2.1 注册路由 (目前版本已可自动添加)#

server/initialize/router.go

package initialize
import (    _ "gin-vue-admin/docs"    "gin-vue-admin/global"    "gin-vue-admin/middleware"    "gin-vue-admin/router"    "github.com/gin-gonic/gin"    "github.com/swaggo/gin-swagger"    "github.com/swaggo/gin-swagger/swaggerFiles"    "net/http")
// 初始化总路由
func Routers() *gin.Engine {    Router := gin.Default()
    // 如果想要不使用nginx代理前端网页,可以修改 web/.env.production 下的    // VUE_APP_BASE_API = /    // VUE_APP_BASE_PATH = http://localhost    // 然后执行打包命令 npm run build。在打开下面4行注释    // Router.LoadHTMLGlob("./dist/*.html") // npm打包成dist的路径    // Router.Static("/favicon.ico", "./dist/favicon.ico")    // Router.Static("/static", "./dist/assets")   // dist里面的静态资源    // Router.StaticFile("/", "./dist/index.html") // 前端网页入口页面
    Router.StaticFS(global.GVA_CONFIG.Local.Path, http.Dir(global.GVA_CONFIG.Local.Path)) // 为用户头像和文件提供静态地址    // Router.Use(middleware.LoadTls())  // 打开就能玩https了    global.GVA_LOG.Info("use middleware logger")    // 跨域,如需跨域可以打开下面的注释    // Router.Use(middleware.Cors()) // 直接放行全部跨域请求    //Router.Use(middleware.CorsByRules()) // 按照配置的规则放行跨域请求    global.GVA_LOG.Info("use middleware cors")    Router.GET("/swagger/*any", ginSwagger.WrapHandler(swaggerFiles.Handler))    global.GVA_LOG.Info("register swagger handler")    // 方便统一添加路由组前缀 多服务器上线使用
    // 获取路由组实例    systemRouter := router.RouterGroupApp.System    exampleRouter := router.RouterGroupApp.Example    autocodeRouter := router.RouterGroupApp.Autocode    // 来自router的enter.go    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路由        systemRouter.InitJwtRouter(PrivateGroup)                 // jwt相关路由        systemRouter.InitUserRouter(PrivateGroup)                // 注册用户路由        systemRouter.InitMenuRouter(PrivateGroup)                // 注册menu路由        systemRouter.InitSystemRouter(PrivateGroup)              // system相关路由        systemRouter.InitCasbinRouter(PrivateGroup)              // 权限相关路由        systemRouter.InitAutoCodeRouter(PrivateGroup)            // 创建自动化代码        systemRouter.InitAuthorityRouter(PrivateGroup)           // 注册角色路由        systemRouter.InitSysDictionaryRouter(PrivateGroup)       // 字典管理        systemRouter.InitAutoCodeHistoryRouter(PrivateGroup)     // 自动化代码历史        systemRouter.InitSysOperationRecordRouter(PrivateGroup)  // 操作记录        systemRouter.InitSysDictionaryDetailRouter(PrivateGroup) // 字典详情管理
        exampleRouter.InitExcelRouter(PrivateGroup)                 // 表格导入导出        exampleRouter.InitCustomerRouter(PrivateGroup)              // 客户路由        exampleRouter.InitFileUploadAndDownloadRouter(PrivateGroup) // 文件上传下载功能路由
        // Code generated by github.com/flipped-aurora/gin-vue-admin/server Begin; DO NOT EDIT.        autocodeRouter.InitSysAutoCodeExampleRouter(PrivateGroup)        // Code generated by github.com/flipped-aurora/gin-vue-admin/server End; DO NOT EDIT.    }
    InstallPlugin(PublicGroup, PrivateGroup) // 安装插件
    global.GVA_LOG.Info("router register success")    return Router}

2.2 注册数据库表 (目前版本已可自动添加)#

server/initialize/gorm.go

将你的model结构配置进入 db.AutoMigrate()内部即可

package initialize
import (    "os"
    "github.com/flipped-aurora/gin-vue-admin/server/global"    "github.com/flipped-aurora/gin-vue-admin/server/model/autocode"    "github.com/flipped-aurora/gin-vue-admin/server/model/example"    "github.com/flipped-aurora/gin-vue-admin/server/model/system"
    "go.uber.org/zap"    "gorm.io/gorm")
// Gorm 初始化数据库并产生数据库全局变量// Author SliverHornfunc Gorm() *gorm.DB {    switch global.GVA_CONFIG.System.DbType {    case "mysql":        return GormMysql()    case "pgsql":        return GormPgSql()    default:        return GormMysql()    }}
// RegisterTables 注册数据库表专用// Author SliverHornfunc RegisterTables(db *gorm.DB) {    err := db.AutoMigrate(        // 系统模块表        system.SysApi{},        system.SysUser{},        system.SysBaseMenu{},        system.JwtBlacklist{},        system.SysAuthority{},        system.SysDictionary{},        system.SysOperationRecord{},        system.SysAutoCodeHistory{},        system.SysDictionaryDetail{},        system.SysBaseMenuParameter{},
        // 示例模块表        example.ExaFile{},        example.ExaCustomer{},        example.ExaFileChunk{},        example.ExaFileUploadAndDownload{},
        // 自动化模块表        // Code generated by github.com/flipped-aurora/gin-vue-admin/server Begin; DO NOT EDIT.        autocode.AutoCodeExample{},        // Code generated by github.com/flipped-aurora/gin-vue-admin/server End; DO NOT EDIT.    )    if err != nil {        global.GVA_LOG.Error("register table failed", zap.Error(err))        os.Exit(0)    }    global.GVA_LOG.Info("register table success")}

3.配置目录菜单#

image-20210224143727296

进入系统 超级管理员 → 菜单管理 菜单,点击 新增根菜单 按钮,配置菜单信息。

  • 路由name:对应进入列表显示页面时的访问路径
  • 路由path:选中后边的“添加参数”后才可以输入,对应进入列表显示页面时访问路径后的参数,具体使用方式看视频
  • 是否隐藏:是否在系统左侧目录菜单显示时,隐藏掉该目录菜单
  • 父节点Id:该目录菜单的父级目录菜单。这里是自动填充的数据,不需要自己操作
  • 文件路径:对应前端项目中 /view/ PackageName (自建)/StructName.vue 文件
  • 展示名称:该目录菜单显示在系统左侧目录菜单中的名称
  • 图标:该目录菜单显示在系统左侧目录菜单中的图标
  • 排序标记:用于调整该目录菜单在系统左侧目录菜单中显示的上下位置
  • keepAlive:是否使用keepAlive缓存

以上配置好后,点击 确定 按钮,完成菜单配置。

4.配置后端接口#

如果在第一步的自动创建api打钩了即可跳过此步

如果是自己写的业务代码,这里需要配置好后端接口。进入系统 超级管理员 → api管理 菜单,点击 新增api 按钮,配置接口信息。

注意

如果不知道怎么写,可以看看 代码

//@author: [piexlmax](https://github.com/piexlmax)//@author: [SliverHorn](https://github.com/SliverHorn)//@function: CreateApi//@description: 自动创建api数据,//@param: a *model.AutoCodeStruct//@return: error
func AutoCreateApi(a *model.AutoCodeStruct) (err error) {    var apiList = []model.SysApi{        {            Path:        "/" + a.Abbreviation + "/" + "create" + a.StructName,            Description: "新增" + a.Description,            ApiGroup:    a.Abbreviation,            Method:      "POST",        },        {            Path:        "/" + a.Abbreviation + "/" + "delete" + a.StructName,            Description: "删除" + a.Description,            ApiGroup:    a.Abbreviation,            Method:      "DELETE",        },        {            Path:        "/" + a.Abbreviation + "/" + "delete" + a.StructName + "ByIds",            Description: "批量删除" + a.Description,            ApiGroup:    a.Abbreviation,            Method:      "DELETE",        },        {            Path:        "/" + a.Abbreviation + "/" + "update" + a.StructName,            Description: "更新" + a.Description,            ApiGroup:    a.Abbreviation,            Method:      "PUT",        },        {            Path:        "/" + a.Abbreviation + "/" + "find" + a.StructName,            Description: "根据ID获取" + a.Description,            ApiGroup:    a.Abbreviation,            Method:      "GET",        },        {            Path:        "/" + a.Abbreviation + "/" + "get" + a.StructName + "List",            Description: "获取" + a.Description + "列表",            ApiGroup:    a.Abbreviation,            Method:      "GET",        },    }    err = global.GVA_DB.Transaction(func(tx *gorm.DB) error {        for _, v := range apiList {            var api model.SysApi            if errors.Is(tx.Where("path = ? AND method = ?", v.Path, v.Method).First(&api).Error, gorm.ErrRecordNotFound) {                if err := tx.Create(&v).Error; err != nil { // 遇到错误时回滚事务                    return err                }            }        }        return nil    })    return err}
  • 路径:就是接口路径,比如前端项目中 src → api → PackageName .js 每个方法里的 url
  • 请求:根据接口实际选择即可
  • api分组:对应 struct 简称
  • api简介:对api的简要说明

以上配置好后,点击 确定 按钮,完成接口配置。

5.配置角色权限#

  • 进入系统 超级管理员角色管理 菜单,找到需要设置权限的角色,点击对应的 设置权限 按钮,配置角色相关权限。

  • image-20210224144035326

  • 角色菜单:勾选该角色可以访问的目录菜单

  • image-20210224144517336

  • 角色api:勾选该角色可以访问的接口

  • image-20210224144708399

6:完善新增表单弹窗/页面#

注意

v2.3.5 版本后,不再需要手动创建表单, 如果你要自己定义表单,可以看看!

以上6个步骤完成后,我们可以在系统中看到我们所创建的结构体数据列表页面。目前,这个页面已经是可以实现 删除查询 功能了,新增修改 功能仍然需要我们自己完善一下弹窗表单。

进入系统 系统工具 → 表单生成器 菜单,根据自己的实际需求,将左侧组件拖拽至中间画布区域,并在右侧设置组件属性。

  • 组件类型:默认是左侧选中的组件类型,这里还可以再进行调整
  • 字段名:对应 Step3 中的 FieldJSON 字段
  • 标题:即组件label
  • 占位提示:。。。就是占位提示

把所有组件上边几个基本的组件属性填好以后,点击画布上方的 复制代码 按钮,会出现一个弹窗,让我们选择 生成类型 是 页面 还是 弹窗。我用的时候选的页面,具体内容应该是没差的,这里选择哪个应该不影响我们目前的需求。然后点击 确定 按钮,就成功复制到了我们的表单代码。

接下来,

  • 随便找个记事本或者地方,把代码复制到里边。
  • 在复制出来的代码中,取出 <el-form>……</el-form> 部分代码,覆盖掉前端项目中 src → view → PackageName(自建) → StructName.vue 中 此处请使用表单生成器生成form填充 表单默认绑定 formData 如手动修改过请自行修改key 这句话。
  • 在复制出来的代码中,把 js 部分data方法里返回的对象复制到前端项目中,上边提及的 .vue 文件的 js 部分 data 方法的 return 对象里

Finish#

至此,一个单表基本业务结构体的数据列表显示,单表数据增加、删除、查找、更新功能全部搞定。