之前寫過一篇關於阿里的低程式碼工具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/xia...
賬號：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/xia...
- 如果你想這個功能在選單中顯示的話，還需要在
選單設定中新增它。
總結
今天體驗了一把Yao，確實是一款很有想法的低程式碼功工具。使用者只需要使用JSON就可以建立資料庫、開發後端API和前端介面，極大地提高了開發效率。不過感覺Yao也有一些不足之處，比如說目前只支援暗色主題，還有就是JSON寫錯了基本沒提示，也沒有專門的可以提示語法的開發工具！