之前写过一篇对于阿里的低代码工具 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 写错了根本没提醒,也没有专门的能够提醒语法的开发工具!
参考资料
- 我的项目地址:https://github.com/YaoApp/yao
- 官网文档:https://yaoapps.com/doc