Skip to content

Latest commit

 

History

History
179 lines (128 loc) · 10.2 KB

GVA-EASYGO.md

File metadata and controls

179 lines (128 loc) · 10.2 KB
Raw

GVA-EASYGO（GVA简单使用）

可以先看一遍视频

大致了解项目结构

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

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