推荐一款管理系统专用 低 代码工具,一天开发一个系统不是梦
Yao簡介
Yao是一款Go語言驅動的低代碼應用引擎,目前在Github上已有3.8k+Star!使用該框架,你可以通過JSON完成90%的接口和頁面開發,用來開發管理系統正合適!Yao的名字源于漢字爻(yáo),是構成八卦的基本符號,看樣子作者對八卦還是挺有研究的。
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
下面使用使用Yao開發的界面效果圖,暗黑風格,還是挺炫酷的!
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
安裝
使用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命令來查看版本。
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
使用
接下來介紹下Yao的使用,我們將以mall項目中的品牌管理功能為例,使用Yao來開發下試試!
基本使用
首先還是熟悉下Yao的基本使用吧!
-
直接進入容器的/data/app目錄下,使用如下命令初始化項目;
cd /data/app # 進入項目目錄 yao init # 運行初始化程序
-
Yao將自動生成如下目錄,使用ll命令查看下項目的目錄結構:
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
接下來使用yao migrate命令創建數據庫表,項目中默認有張測試用的pet表:
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
然后使用如下命令初始化菜單;
yao run flows.setmenu
-
接下來使用yao start命令啟動服務,控制臺輸出內容如下;
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
項目啟動成功后就能進行訪問了,默認賬號密碼如下,訪問地址:http://192.168.3.105:5099/xiang/login/admin
賬號:xiang@iqka.com 密碼:A123456p+
-
登錄成功后我們可以發現默認有個測試用的寵物管理的功能;
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
還有一個用戶管理功能;
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
還有一個菜單管理功能,這些都是基礎功能,我們之后會用到。
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
創建數據模型
下面我們將使用Yao創建數據模型并實現簡單的CRUD操作。
-
我們將通過實現一個簡單的商品品牌管理功能,來體驗下使用Yao開發應用的神奇之處;
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
創建數據模型描述文件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 '::{}'
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
按主鍵查詢商品品牌;
yao run models.brand.Find 1 '::{}'
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
根據ID刪除商品品牌;
yao run models.brand.Delete 1
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
新增商品品牌;
yao run models.brand.Create '::{ "name": "萬和", "first_letter": "W", "sort": 0, "brand_story": "萬和的故事","logo":"http://img.macrozheng.com/mall/images/20200607/5b07ca8aN4e127d2f.jpg"}'
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
修改商品品牌,這操作是不是有點像在命令行中使用SQL的感覺?
yao run models.brand.Save '::{"id":2,"brand_story":"修改品牌故事"}'
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
編寫接口
下面我們將使用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=小米'
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
再測試下保存接口,接口開發確實簡單了!
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"}'
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
編寫界面
下面我們將使用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
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
-
如果你想這個功能在菜單中顯示的話,還需要在菜單設置中添加它。
?
編輯切換為居中
添加圖片注釋,不超過 140 字(可選)
總結
今天體驗了一把Yao,確實是一款很有想法的低代碼功工具。使用者只需要使用JSON就可以創建數據庫、開發后端API和前端界面,極大地提高了開發效率。不過感覺Yao也有一些不足之處,比如說目前只支持暗色主題,還有就是JSON寫錯了基本沒提示,也沒有專門的可以提示語法的開發工具!
參考資料
-
項目地址:https://github.com/YaoApp/yao
-
官方文檔:https://yaoapps.com/doc
?????????????????????資源獲取:
大家點贊、收藏、關注、評論啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取聯系方式👇🏻👇🏻👇🏻
?精彩專欄推薦訂閱:在下方專欄👇🏻👇🏻👇🏻👇🏻
每天學四小時:Java+Spring+JVM+分布式高并發,架構師指日可待
總結
以上是生活随笔為你收集整理的推荐一款管理系统专用 低 代码工具,一天开发一个系统不是梦的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 计算机网络工程主要是做什么,网络工程专业
- 下一篇: MATLAB仿真斜坡信号的校正,控制系统