Go語言驅動低程式碼應用引擎工具Yao開發管理系統

2022-06-20 22:02:20

前言

之前寫過一篇關於阿里的低程式碼工具LowCodeEngine 的文章，發現大家還是挺感興趣的。最近又發現了一款很有意思的低程式碼工具Yao，支援使用JSON的形式開發管理系統，不僅可以用來開發後端API，還能用來開發前端介面，簡潔而且高效，推薦給大家！

SpringBoot實戰電商專案mall（50k+star）地址：https://github.com/macrozheng/mall

Yao簡介

Yao是一款Go語言驅動的低程式碼應用引擎，目前在Github上已有3.8k+Star！使用該框架，你可以通過JSON完成90%的介面和頁面開發，用來開發管理系統正合適！Yao的名字源於漢字爻(yáo)，是構成八卦的基本符號，看樣子作者對八卦還是挺有研究的。

下面使用使用Yao開發的介面效果圖，暗黑風格，還是挺炫酷的！

安裝

使用Docker來安裝Yao是非常方便的，下面我們就採用此種方式在Linux上安裝它！

首先下載Yao的Docker映象；

docker pull yaoapp/yao:0.9.1-amd64-dev

然後使用如下命令執行Yao容器；

docker run --name yao 
-p 5099:5099 
-v /mydata/yao:/data/app 
-d yaoapp/yao:0.9.1-amd64-dev

由於Yao命令工具被安裝在了Docker容器內部，當我們使用它時需要先進入容器：

docker exec -it yao /bin/bash

比如說在容器中使用yao version命令來檢視版本。

使用

接下來介紹下Yao的使用，我們將以mall專案中的品牌管理功能為例，使用Yao來開發下試試！

基本使用

首先還是熟悉下Yao的基本使用吧！

直接進入容器的/data/app目錄下，使用如下命令初始化專案；

cd /data/app  # 進入專案目錄
yao init # 執行初始化程式

Yao將自動生成如下目錄，使用ll命令檢視下專案的目錄結構：

接下來使用yao migrate命令建立資料庫表，專案中預設有張測試用的pet表：

然後使用如下命令初始化選單；

yao run flows.setmenu

接下來使用yao start命令啟動服務，控制檯輸出內容如下；

專案啟動成功後就能進行存取了，預設賬號密碼如下，存取地址：http://192.168.3.105:5099/xiang/login/admi

賬號：xiang@iqka.com

密碼：A123456p+

登入成功後我們可以發現預設有個測試用的寵物管理的功能；

還有一個使用者管理功能；

還有一個選單管理功能，這些都是基礎功能，我們之後會用到。

建立資料模型

下面我們將使用Yao建立資料模型並實現簡單的CRUD操作。

我們將通過實現一個簡單的商品品牌管理功能，來體驗下使用Yao開發應用的神奇之處；

建立資料模型描述檔案brand.mod.json，由於容器中的專案目錄已經被掛載到了宿主機上，將該檔案放到/mydata/yao/models目錄下即可：

{
	"name": "Brand",
	"table": { "name": "brand", "comment": "商品品牌表" },
	"columns": [
	  { "label": "ID", "name": "id", "type": "ID"},
	  { "label": "名稱", "name": "name", "type": "string" },
	  { "label": "首字母", "name": "first_letter", "type": "string" },
	  { "label": "排序", "name": "sort", "type": "integer" },
	  { "label": "品牌故事", "name": "brand_story", "type": "string"},
	  { "label": "品牌logo", "name": "logo", "type": "string","length":255}
	],
	"values": [
	  { "name": "萬和", "first_letter": "W", "sort": 0, "brand_story": "萬和的故事","logo":"test"},
	  { "name": "三星", "first_letter": "S", "sort": 100, "brand_story": "三星的故事","logo":"test"},
	  { "name": "小米", "first_letter": "M", "sort": 200, "brand_story": "小米的故事","logo":"test"}
	],
	"option": { "timestamps": true, "soft_deletes": true }
}

使用Yao命令建立資料庫表；

cd /data/app
yao migrate -n brand

建立成功後，就可以使用yao命令來查詢資料了，比如查詢所有商品品牌；

yao run models.brand.Get '::{}'

按主鍵查詢商品品牌；

yao run models.brand.Find 1 '::{}'

根據ID刪除商品品牌；

yao run models.brand.Delete 1

新增商品品牌；

yao run models.brand.Create '::{ "name": "萬和", "first_letter": "W", "sort": 0, "brand_story": "萬和的故事","logo":"http://img.macrozheng.com/mall/images/20200607/5b07ca8aN4e127d2f.jpg"}'

修改商品品牌，這操作是不是有點像在命令列中使用SQL的感覺？

yao run models.brand.Save '::{"id":2,"brand_story":"修改品牌故事"}'

編寫介面

下面我們將使用Yao來開發後端介面，這裡將實現一個分頁查詢和儲存介面。

首先編寫介面描述檔案brand.http.json，放入/mydata/yao/apis資料夾下；

{
  "name": "Brand",
  "version": "1.0.0",
  "description": "商品品牌管理介面",
  "guard": "bearer-jwt",
  "group": "brand",
  "paths": [
    {
      "path": "/search",
      "method": "GET",
      "guard": "-",
      "process": "models.brand.Paginate",
      "in": [":query-param", "$query.page", "$query.pagesize"],
      "out": {
        "status": 200,
        "type": "application/json"
      }
    },
    {
      "path": "/save",
      "method": "POST",
      "guard": "-",
      "process": "models.brand.Save",
      "in": [":payload"],
      "out": {
        "status": 200,
        "type": "application/json"
      }
    }
  ]
}

測試下分頁查詢介面；

curl 'http://192.168.3.105:5099/api/brand/search?page=1&pagesize=1&where.name.match=小米'

再測試下儲存介面，介面開發確實簡單了！

curl -X POST http://192.168.3.105:5099/api/brand/save
   -H 'Content-Type: application/json'
   -d '{ "name": "新品牌", "first_letter": "X", "sort": 200, "brand_story": "新品牌的故事","logo":"test"}'

編寫介面

下面我們將使用Yao實現品牌管理的前端介面，還是非常簡單的！

編寫資料表格描述檔案brand.tab.json，放入/mydata/yao/tables資料夾下；

{
	"name": "Brand",
	"version": "1.0.0",
	"decription": "Brand admin",
	"bind": {
		"model": "brand"
	},
	"apis": {},
	"columns": {
		"ID": {
			"label": "ID",
			"view": {
				"type": "label",
				"props": {
					"value": ":id"
				}
			}
		},
		"Name": {
			"label": "Name",
			"view": {
				"type": "label",
				"props": {
					"value": ":name"
				}
			},
			"edit": {
				"type": "input",
				"props": {
					"value": ":name"
				}
			}
		},
		"FirstLetter": {
			"label": "FirstLetter",
			"view": {
				"type": "label",
				"props": {
					"value": ":first_letter"
				}
			},
			"edit": {
				"type": "input",
				"props": {
					"value": ":first_letter"
				}
			}
		},
		"Sort": {
			"label": "Sort",
			"view": {
				"type": "label",
				"props": {
					"value": ":sort"
				}
			},
			"edit": {
				"type": "input",
				"props": {
					"value": ":sort"
				}
			}
		}
	},
	"filters": {
		"Keywords": {
			"label": "輸入搜尋",
			"bind": "where.name.match",
			"input": {
				"type": "input",
				"props": {
					"placeholder": "請輸入關鍵詞"
				}
			}
		}
	},
	"list": {
		"primary": "id",
		"layout": {
			"columns": [
				{
					"name": "ID",
					"width": 80
				},
				{
					"name": "Name",
					"width": 100
				},
				{
					"name": "FirstLetter",
					"width": 200
				},
				{
					"name": "Sort"
				}
			],
			"filters": [
				{
					"name": "Keywords"
				}
			]
		},
		"actions": {
			"pagination": {
				"props": {
					"showTotal": true
				}
			}
		},
		"option": {
			"operation": {
				"unfold": true
			}
		}
	},
	"edit": {
		"primary": "id",
		"layout": {
			"fieldset": [
				{
					"columns": [
						{
							"name": "Name",
							"width": 8
						},
						{
							"name": "FirstLetter",
							"width": 8
						},
						{
							"name": "Sort",
							"width": 8
						}
					]
				}
			]
		},
		"actions": {
			"cancel": {},
			"save": {},
			"delete": {}
		}
	}
}

接下來就可以直接存取介面了，存取地址：http://192.168.3.105:5099/xiang/table/brand