GfEasyAdmin: GfEasyAdmin的前端，提供接口。超强CRUD，一分钟干完的事，就不干一天！快速crud开发框架，甚至于一行代码不用敲；自动根据数据库表结构自动生成crud代码；低代码开发框架；至少减少百分90%工作量；可快速把现有系统转成GfEasy版本；后端使用GoFrame开发;后台前端使用 cool-admin-vue；后台使用自适应布局，手机、PC完美使用。

# GfEasyAdmin [vue3 - ts - vite]
## 这是前端项目

## GfEasy So Easy

### 快速crud开发框架，甚至于一行代码不用敲

### 自动根据数据库表结构自动生成crud代码

### 低代码开发框架

### 至少减少百分90%工作量

### 可快速把现有系统转成GfEasy版本

### 后端使用GoFrame开发;后台前端使用 cool-admin-vue

### 后台使用自适应布局，手机、PC完美使用

</p>
</div>

![img.png](screenshot/screenshot2/img.png)

![GfEasy-移动.png](screenshot/GfEasy-移动.png)

# 地址
## 后端：

https://github.com/jasonLaw1015/GfEasy

或者

https://gitee.com/jasonlaw1015/GfEasy

## 后台前端：

https://github.com/jasonLaw1015/GfEasyAdmin

或者

https://gitee.com/jasonlaw1015/GfEasyAdmin

# 一、快速开始

### Go环境安装，请参考

https://goframe.org/pages/viewpage.action?pageId=1114397

### 后台server：

请使用GoLand编辑器

### 下载代码&安装依赖

```shell
#克隆仓库
git clone https://gitee.com/jasonlaw1015/GfEasy.git
#或者
git clone https://github.com/jasonLaw1015/GfEasy.git
```

打开mysql=》创建gf-easy库=》
运行db/gf-easy.sql；创建表结构和初始化数据

**配置mysql、Redis**

打开文件 /config/config.toml

按照你本地环境配置好
![img.png](screenshot/screenshot2/img121.png)

```shell
#格式化代码
gofmt ./
```

```shell
#安装更新相关依赖
go mod tidy
```

```shell
# 运行或者你点击GoLang IDE编辑器;
# 运行安装过程完成后，运行以下命令启动服务。您可以在浏览器中预览网站 [http://localhost:8000](http://localhost:8000)
go run main.go
```

![img_8.png](screenshot/img_8.png)

### 安装gf开发工具

https://goframe.org/pages/viewpage.action?pageId=1115782

#### 交叉编译

运行已下命令，生成linux环境可执行文件

```shell
gf build main.go -n my-app -v 1.0 -a amd64 -s linux -p ./
```

会得到个my-app可执行文件

#### 也可以配置gfcli.build

在cofig.toml上配置

```toml
[gfcli]
    [gfcli.build]
        name     = "GenCode-GfEasy"
        arch     = "all"
        system   = "all"
        mod      = "none"
        cgo      = 0
        pack     = "template"
        version  = "v1.0.0"
        output   = "./bin"
        extra    = ""
```

再运行

```shell
gf build
```

会生成所有平台的可执行文件,到./bin

![img100.png](screenshot/img100.png)

**注：**
一般选择amd64。你可以运行go env 查看到你本机是哪个，自己选择那个

darwin=>mac

linux=>linux

windows=>windows

------
## 后台前端Vue

**必须安装：**

操作系统上安装了 Node.js（> = 12.1.0）、@vue/cli。

我用的是node 是14.17.6

---

```shell
npm install -g @vue/cli
npm install -g yarn
```

解决 `node-sass` 网络慢的方法：

```shell
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
```

然后下载仓库

```shell
#克隆仓库
git clone https://gitee.com/jasonlaw1015/GfEasyAdmin.git
#或者
git clone https://github.com/jasonLaw1015/GfEasyAdmin.git
```

安装依赖

```shell
#GfEasyAdmin目录下,运行下面命令安装依赖
yarn
#或者
npm i
```

安装过程完成后，运行以下命令启动服务。您可以在浏览器中预览网站 [http://localhost:8000](http://localhost:8000)

```shell
yarn dev
```

```shell
yarn dev
#或者
npm run dev
```

格式化代码
请在vscode安装eslint、vetur插件

```shell
yarn lint:eslint
```

打包构建

```shell
#会在dist目录生成，此目录就是生产环境所运行的
yarn build
```

访问

[http://localhost:8000](http://localhost:8000)

![img_2.png](screenshot/screenshot2/img_2.png)

账号密码：admin/123456

![img.png](screenshot/screenshot2/img.png)

![img_4.png](screenshot/screenshot2/img_4.png)

## 代码生成操作【重要】
### 前提条件，下载代码生成核心部件。

**地址:**

https://www.yuque.com/docs/share/3e714752-0de1-43e2-96e4-461f4e74fc93?# 《代码生成模块》

下载适合自己系统的版本，然后点击运行即可【这步是生成代码的前提条件，必须运行】

运行结果：
出现以下截图即正确

![genCodeLog.png](screenshot/genCodeLog.png)

#### 知识讲解：

##### GOOS : 目标平台

mac 对应 darwin
linux 对应 linux
windows 对应 windows

##### GOARCH ：目标平台的体系架构【386，amd64,arm】, 目前市面上的个人电脑一般都是amd64架构的
386 也称 x86 对应 32位操作系统
amd64 也称 x64 对应 64位操作系统
arm 这种架构一般用于嵌入式开发。 比如 Android ， IOS ， Win mobile , TIZEN 等

### 界面操作
进入系统-》/核心工具/代码生成工具

![img_5.png](screenshot/screenshot2/img_5.png)

然后按步骤123，配置相关参数
步骤1：配置所需要环境参数
-----
**注意：**
下图的生成代码目录的是mac端的，
windows端要写成\，反斜杠。

如：D:\develop\go\src\gitee.com\jasonLaw1015\GfEasyAdmin\

-------
![img.png](screenshot/screenshot2/代码生成配置1.png)

步骤2：检测下步骤1的数据是否可行

![img_16.png](screenshot/img_16.png)

步骤3：开始生成代码

![img_17.png](screenshot/img_17.png)

确认后：

将在GfEasy生成以下文件

```shell
app/controller/Admin/DemoGo.go
app/controller/Api/DemoGo.go
app/model/DemoGoModel/DemoGo.go
app/service/DemoGoService/DemoGo.go
router/adminRouter.go
router/apiRouter.go
```

![img_7.png](screenshot/screenshot2/img_7.png)

将在GfEasyAdmin生成，（前端生成代码都会在GfEasyAdmin/src/cool/modules/genCode下）

```shell
GfEasyAdmin/src/cool/modules/genCode/dict/demoGo.ts
GfEasyAdmin/src/cool/modules/genCode/service/demoGo.ts
GfEasyAdmin/src/cool/modules/genCode/views/demoGo.vue
```

![img_8.png](screenshot/screenshot2/img_8.png)
并自动生成权限和菜单加入前端路由，下图

![img_9.png](screenshot/screenshot2/img_9.png)

**注意：**

生成的代码会在自动格式化代码。如果不行，那自己yarn lint:eslint、 gofmt；
go不会热更新，请自己手动run一下

# 二、基础知识

## 举例

比如，建一个demo_go表；

![img_10.png](screenshot/screenshot2/img_10.png)

```bigquery
CREATE TABLE `demo_go` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `createTime` datetime(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) COMMENT '创建时间',
  `updateTime` datetime(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6) COMMENT '更新时间',
  `title` varchar(255) NOT NULL COMMENT '标题',
  `subTitle` varchar(255) DEFAULT NULL COMMENT '副标题##IsSearchParams',
  `pic` varchar(255) NOT NULL COMMENT '商品主图',
  `types` tinyint(4) NOT NULL COMMENT '类型#1:上架,2:下架',
  `status` tinyint(4) NOT NULL DEFAULT '1' COMMENT '状态#1:启用,2:禁用',
  `tupian` varchar(300) DEFAULT NULL COMMENT '图片##IsPicColumn',
  `other` tinyint(4) DEFAULT NULL COMMENT '其他状态#1:已激活,2:未激活#IsDictColumn,IsSearchParams',
  `sort` int(11) NOT NULL DEFAULT '0' COMMENT '排序',
  PRIMARY KEY (`id`),
  KEY `IDX_d8d0d86a0adf1001ce12aaac41` (`createTime`),
  KEY `IDX_9fe44721d1e517fa24383db56b` (`updateTime`),
  FULLTEXT KEY `IDX_91f50fa9907d5ac2c864f175bb` (`title`,`subTitle`) /*!50100 WITH PARSER `ngram` */ 
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COMMENT='示例go';
```

代码生成器会自动判断字段类型，生成对应的go类型，生成对应的结构体，如下
![img.png](screenshot/img1.png)

### go端：

| mysql 字段类型 | go类型      |
| ---------------- | ------------- |
| varchar        | string      |
| int            | int         |
| DATETIME       | *gtime.Time |
| ...            | ...         |

### vue端：

会判断字段，然后确认其使用哪个前端组件来处理该字段。

如：el-input、el-input-number、el-radio-group、cl-upload-space-preview

## 2.1、定义表字段规则：

### 默认规则：

1.设计数据字段，主键字段名必须是id;

2.创建时间和更新时间的字段名，可以自定义。但最好使用createTime.updateTime;

3.默认查询条件字段是：
types  status  name title state

其中name title 用关键字模糊查询

4.图片字段是：
pic pics picture img image images

5.字典字段是：
types status

**注意：**
字典字段，必须在comment处写上对应字典键值对，而且必须在第一个#号后面。字段comment处理通过#处理的

**如：`types` tinyint(4) NOT NULL COMMENT '类型#1:上架,2:下架',**

`1:上架,2:下架` 会转化成 下图

![img_1.png](screenshot/img_1.png)

在后台UI显示如下图：

![img_2.png](screenshot/img_2.png)

6.排序字段： sort orderNum

7.外键名要写全且是小驼峰。如base_a、base_b，a表和b表关联的话。b表中外键字段名必须为baseAId。否则前端ui的select组件不生效

### 指定规则：

**有些数据库设计，有时我不想使用上述提供的字段名。为提高灵活性，特意提供了指定标识，
只要在comment里加入对应标识，系统就会自动帮你处理成你想要的字段。**

**这些标识要写在第二个#号后面。如：其他状态#1:已激活,2:未激活#IsDictColumn,IsSearchParams**

| 标识                        | 描述                                                                                                       | 具体                               |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------ |
| IsSearchParams              | 主要是list接口的条件使用                                                                                   | ![img_3.png](screenshot/img_3.png) |
| IsKeyWordParams             | 主要是page接口的条件使用,用于模糊查询                                                                      | ![img_4.png](screenshot/img_4.png) |
| IsDictColumn,IsSearchParams | IsDictColumn往往是要跟IsSearchParams一起使用。如：`其他状态#1:已激活,2:未激活#IsDictColumn,IsSearchParams` | ![img_5.png](screenshot/img_5.png) |
| IsNumberColumn              | 该字段是数值类型，前端部分会使用el-input-number来处里该字段                                                | ![img_6.png](screenshot/img_6.png) |
| IsPicColumn                 | 该字段是图片类型，前端部分会使用cl-upload-space-preview来处里该字段                                        | ![img_7.png](screenshot/img_7.png)|

**特别提醒：尽量不要用type来做字段名，否则生成的go代码有可能会出问题。因为type是go语法的关键字。目前我是用types代替。其他go关键字也是如此**

## 2.2、定时任务的使用：

新增定时任务逻辑
在app/task文件夹下，新增方法即可

![img_11.png](screenshot/screenshot2/img_11.png)

然后在后台=》任务管理/任务列表

![img_22.png](screenshot/img_22.png)

在service就可以看到刚刚写的GoodsTask。

只要在package Task下写方法都可以在这里选择使用

# 三、采用技术的相关使用文档

**GoFrame:**  https://goframe.org/pages/viewpage.action?pageId=1114203

**cool-admin-vue:** https://www.cool-js.com/front/vue3-vite.html

**ElementPlus:** https://element-plus.org/#/zh-CN/component/radio

## 前端具体使用方法，可以去cool-admin-vue查看
使用文档：https://www.cool-js.com/front/vue3-vite.html
## 感谢
感谢cool-admin-vue开源
地址：https://github.com/cool-team-official/cool-admin-vue/tree/vue3-ts-vite

SRX/GfEasyAdmin

简介

发行版

贡献者

近期动态

SRX/GfEasyAdmin .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

SRX/GfEasyAdmin