Yao簡(jiǎn)介

Yao是一款Go語(yǔ)言驅(qū)動(dòng)的低代碼應(yīng)用引擎，目前在Github上已有3.8k Star！使用該框架，你可以通過(guò)JSON完成90%的接口和頁(yè)面開(kāi)發(fā)，用來(lái)開(kāi)發(fā)管理系統(tǒng)正合適！Yao的名字源于漢字爻(yáo)，是構(gòu)成八卦的基本符號(hào)，看樣子作者對(duì)八卦還是挺有研究的。

下面使用使用Yao開(kāi)發(fā)的界面效果圖，暗黑風(fēng)格，還是挺炫酷的！

安裝

使用Docker來(lái)安裝Yao是非常方便的，下面我們就采用此種方式在Linux上安裝它！

• 首先下載Yao的docker鏡像；

docker pull yaoapp/yao:0.9.1-amd64-dev

• 然后使用如下命令運(yùn)行Yao容器；

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

• 由于Yao命令工具被安裝在了Docker容器內(nèi)部，當(dāng)我們使用它時(shí)需要先進(jìn)入容器：

docker exec -it yao /bin/bash

• 比如說(shuō)在容器中使用yao version命令來(lái)查看版本。

使用

接下來(lái)介紹下Yao的使用，我們將以mall項(xiàng)目中的品牌管理功能為例，使用Yao來(lái)開(kāi)發(fā)下試試！

基本使用

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

• 直接進(jìn)入容器的/data/app目錄下，使用如下命令初始化項(xiàng)目；

cd /data/app # 進(jìn)入項(xiàng)目目錄yao init # 運(yùn)行初始化程序

• Yao將自動(dòng)生成如下目錄，使用ll命令查看下項(xiàng)目的目錄結(jié)構(gòu)：

• 接下來(lái)使用yao migrate命令創(chuàng)建數(shù)據(jù)庫(kù)表，項(xiàng)目中默認(rèn)有張測(cè)試用的pet表：

• 然后使用如下命令初始化菜單；

yao run flows.setmenu

• 接下來(lái)使用yao start命令啟動(dòng)服務(wù)，控制臺(tái)輸出內(nèi)容如下；

• 項(xiàng)目啟動(dòng)成功后就能進(jìn)行訪問(wèn)了，默認(rèn)賬號(hào)密碼如下，訪問(wèn)地址：http://192.168.3.105:5099/xiang/login/admin

賬號(hào)：xiang@iqka.com密碼：A123456p

• 登錄成功后我們可以發(fā)現(xiàn)默認(rèn)有個(gè)測(cè)試用的寵物管理的功能；

• 還有一個(gè)用戶管理功能；

• 還有一個(gè)菜單管理功能，這些都是基礎(chǔ)功能，我們之后會(huì)用到。

創(chuàng)建數(shù)據(jù)模型

下面我們將使用Yao創(chuàng)建數(shù)據(jù)模型并實(shí)現(xiàn)簡(jiǎn)單的CRUD操作。

• 我們將通過(guò)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的商品品牌管理功能，來(lái)體驗(yàn)下使用Yao開(kāi)發(fā)應(yīng)用的神奇之處；

• 創(chuàng)建數(shù)據(jù)模型描述文件brand.mod.json，由于容器中的項(xiàng)目目錄已經(jīng)被掛載到了宿主機(jī)上，將該文件放到/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": "萬(wàn)和", "first_letter": "W", "sort": 0, "brand_story": "萬(wàn)和的故事","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命令創(chuàng)建數(shù)據(jù)庫(kù)表；

cd /data/appyao migrate -n brand

• 創(chuàng)建成功后，就可以使用yao命令來(lái)查詢數(shù)據(jù)了，比如查詢所有商品品牌；

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

• 按主鍵查詢商品品牌；

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

• 根據(jù)ID刪除商品品牌；

yao run models.brand.Delete 1

• 新增商品品牌；

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

• 修改商品品牌，這操作是不是有點(diǎn)像在命令行中使用SQL的感覺(jué)？

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

編寫接口

下面我們將使用Yao來(lái)開(kāi)發(fā)后端接口，這里將實(shí)現(xiàn)一個(gè)分頁(yè)查詢和保存接口。

• 首先編寫接口描述文件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" } } ]}

• 測(cè)試下分頁(yè)查詢接口；

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

• 再測(cè)試下保存接口，接口開(kāi)發(fā)確實(shí)簡(jiǎn)單了！

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實(shí)現(xiàn)品牌管理的前端界面，還是非常簡(jiǎn)單的！

• 編寫數(shù)據(jù)表格描述文件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": "請(qǐng)輸入關(guān)鍵詞" } } } }, "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": {} } }}

• 接下來(lái)就可以直接訪問(wèn)界面了，訪問(wèn)地址：http://192.168.3.105:5099/xiang/table/brand

• 如果你想這個(gè)功能在菜單中顯示的話，還需要在菜單設(shè)置中添加它。

總結(jié)

今天體驗(yàn)了一把Yao，確實(shí)是一款很有想法的低代碼功工具。使用者只需要使用JSON就可以創(chuàng)建數(shù)據(jù)庫(kù)、開(kāi)發(fā)后端API和前端界面，極大地提高了開(kāi)發(fā)效率。不過(guò)感覺(jué)Yao也有一些不足之處，比如說(shuō)目前只支持暗色主題，還有就是JSON寫錯(cuò)了基本沒(méi)提示，也沒(méi)有專門的可以提示語(yǔ)法的開(kāi)發(fā)工具！

參考資料

• 項(xiàng)目地址：https://github.com/YaoApp/yao
• 官方文檔：https://yaoapps.com/doc