GVA 简单使用

Question

大致了解项目结构

    ├─server  	     （后端文件夹）
    │  ├─api            （API）
    │  ├─config         （配置包）
    │  ├─core  	        （內核）
    │  ├─db             （数据库脚本）
    │  ├─docs  	        （swagger 文档目录）
    │  ├─global         （全局对象）
    │  ├─initialiaze    （初始化）
    │  ├─middleware     （中间件）
    │  ├─model          （结构体层）
    │  ├─resource       （资源）
    │  ├─router         （路由）
    │  ├─service         (服务)
    │  └─utils	        （公共功能）
    └─web            （前端文件）
        ├─public        （发布模板）
        └─src           （源码包）
            ├─api       （向后台发送 ajax 的封装层）
            ├─assets	（静态文件）
            ├─components（组件）
            ├─router	（前端路由）
            ├─store     （vuex 状态管理仓）
            ├─style     （通用样式文件）
            ├─utils     （前端工具库）
            └─view      （前端页面）

---

Step1：数据库初始化

1. 在本地安装 mysql 数据库
2. 将 server → db → qmplus.sql 导入
3. 在本地安装 redis

Tips：是否安装 resdis 取决于是否限制多点登陆，若限制多点登陆，需要将配置文件中 use-multipoint 设置为 true

Step2：启动项目

GVA 项目分为后端项目和前端项目两个。从 GitHub 上下载到的文件压缩包解压缩后，里边的 server 文件夹即后端项目文件夹，web 文件夹即前端项目文件夹。

后端项目

• 用 GoLand 打开 server 文件夹
• 按需修改 config.yaml 中的七牛云、mysql、redis 等参数
• 进入 GoLand 的 File → settings → Go → Go Modules，将 Environment 项的值设置为 GOPROXY=https://goproxy.cn/
• 打开终端，位于目录 server/
• 终端输入 go list 拉取依赖
• 终端输入 go get -u github.com/swaggo/swag/cmd/swag 安装 swagger
• 终端输入 swag init 生成 swagger 自动化 API 文档
• 终端输入 go run main.go 运行项目（或者用 IDE 右上 Edit Config...配置一下 go build）

前端项目

前端是 Vue 项目，用 vscode 或者你喜欢的 IDE 比如 WebStorm 打开 web 文件夹，执行 npm install （或者 cnpm 或者使用代理）下载相关包，然后执行 npm run serve 启动项目

Step3：生成一步到位代码包

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

点击左侧菜单中的 系统工具 → 代码生成器 用来生成相关代码。

• Struct 名称：即后台代码中 model 文件夹下的结构体文件中，结构体的名称，首字母大写。
• tableName：数据库中生成的与结构体对应的数据表名。
• Struct 简称：用于结构体作为参数时的名称，以及路由 group 名称。这里一般与 Stuct 名称 对应，但是首字母小写。
• Struct 中文名称：作为自动 api 描述，也是左侧菜单显示时的默认菜单名。
• 文件名称：使用 xxx_xxx 形式命名。生成后端代码时，model 下的文件名会用这里的命名。
• 自动创建 api：选中，如果不选则不会自动创建 api 表，需要自己去 api 管理里面手动增加对应路由。

如上参数填写完成后，就填写好了自动创建代码所需要的基本信息。然后点击 新增 Field 按钮，为数据表、struct 结构体创建字段。

• Field 名称：struct 结构体中的字段名称，首字母大写
• Field 中文名：对应 struct 结构体 tag 中的 comment 字段值，也是数据列表展示表格的表头名称。
• FieldJSON：对应 struct 结构体 tag 中的 json 字段值。在使用 struct 对象调用某个字段时，使用“对象.json 字段值”
• 数据库字段名：对应数据库中的字段名称
• 数据库字段描述：对应数据库中的列 Comment 值
• Field 数据类型：对应 struct 结构体中的字段类型
• 数据库字段类型：对应生成的数据表中的字段类型
• 数据库字段长度：对应生成的数据表中的字段长度
• Field 查询条件：用于实现该对象数据列表的条件查询
• 关联字典：需要提前在 超级管理员 → 字典管理 中新增，具体使用场景需理解什么是字典

创建好所有的 field 后，点击右下角 生成代码包 按钮，会生成并下载一个文件压缩包。解压后会看到里面有个 autoCode 文件夹，autoCode 里的 te 文件夹为自动生成的后端代码，fe 文件夹为自动生成的前端代码。

• te 文件夹 → 后端代码：
  • api 下的 .go 文件放到后端项目中的 api → v1 下。
  • model 下的 .go 文件放到后端项目中的 model 下。
  • request 下的 .go 文件放到后端项目中的 model → request 下。
  • router 下的 .go 文件放到后端项目中的 router 下。
  • service 下的 .go 文件放到后端项目中的 service 下。
• fe 文件夹 → 前端代码：
  • api 下的 .js 文件放到前端项目中的 src>api 下。
  • table 下的 .vue 文件放到前端项目中的 src → view → struct 简称文件夹（自建）下。

Step4：注册路由和数据库表

这两个操作都是在后端 server 项目中。

注册路由

进入 initialize → router.go 文件，在 global.GVA_LOG.Info("router register success") 这行代码前插入一行 router.InitStruct 名称 Router(ApiGroup) 。其中 InitStruct 名称 Router 需要与 router 文件夹下对应 struct 结构体（上边 step 中创建出来的 struct 结构体）的 .go 文件中的方法名保持一致。

注册数据库表

进入 initialize → db_table.go 文件，给 db.AutoMigrate 方法添加 model.struct 名称{}

Step5：配置目录菜单

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

• 路由 name：对应进入列表显示页面时的访问路径
• 路由 path：选中后边的“添加参数”后才可以输入，对应进入列表显示页面时访问路径后的参数
• 是否隐藏：是否在系统左侧目录菜单显示时，隐藏掉该目录菜单
• 父节点 Id：该目录菜单的父级目录菜单。这里是自动填充的数据，不需要自己操作
• 文件路径：对应前端项目中 /view/struct 简称文件夹（自建）/struct 简称.vue 文件
• 展示名称：该目录菜单显示在系统左侧目录菜单中的名称
• 图标：该目录菜单显示在系统左侧目录菜单中的图标
• 排序标记：用于调整该目录菜单在系统左侧目录菜单中显示的上下位置
• keepAlive：是否使用 keepAlive 缓存，如有需要，自行百度查一下使用场景

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

Step6：配置后端接口

如果是自动生成的代码，这里接口会自动配置好。

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

• 路径：就是接口路径，比如前端项目中 src → api → struct 简称.js 每个方法里的 url
• 请求：根据接口实际选择即可
• api 分组：对应 struct 简称
• api 简介：对 api 的简要说明

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

Step7：配置角色权限

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

• 角色菜单：勾选该角色可以访问的目录菜单
• 角色 api：勾选该角色可以访问的接口

Step8：完善新增表单弹窗/页面

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

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

• 组件类型：默认是左侧选中的组件类型，这里还可以再进行调整
• 字段名：对应 Step3 中的 FieldJSON 字段
• 标题：即组件 label
• 占位提示：就是占位提示
• ……：剩下的按需自行试用

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

接下来，

• 随便找个记事本或者地方，把代码复制到里边。
• 在复制出来的代码中，取出 <el-form>……</el-form> 部分代码，覆盖掉前端项目中 src → view → struct 简称文件夹（自建） → struct 简称.vue 中 此处请使用表单生成器生成 form 填充 表单默认绑定 formData 如手动修改过请自行修改 key 这句话。
• 在复制出来的代码中，把 js 部分 data 方法里返回的对象复制到前端项目中，上边提及的 .vue 文件的 js 部分 data 方法的 return 对象里。（这里表述有点乱。。但是前端一看代码就明白了。。。）

Finish

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