I wrote an article about Ali's low-code tool LowCodeEngine before, and found that everyone is still very interested. Recently I discovered an interesting low-code tool Yao
, which supports the use of JSON to develop management systems. It can not only be used to develop back-end APIs, but also front-end interfaces. It is concise and efficient. Recommended to everyone!
SpringBoot actual e-commerce project mall (50k+star) address: https://github.com/macrozheng/mall
About Yao
Yao is a Go language-driven low-code application engine, currently available on Github 3.8k+Star
! Using this framework, you can complete 90% of the interface and page development through JSON, which is suitable for developing management systems! Yao's name comes from the Chinese character Yao (yáo), which is the basic symbol that constitutes gossip. It seems that the author has a lot of research on gossip.
The following uses the interface renderings developed by Yao, with a dark style, which is quite cool!
Install
Using Docker to install Yao is very convenient, let's use this method to install it on Linux!
- First download Yao's Docker image;
docker pull yaoapp/yao:0.9.1-amd64-dev
- Then use the following command to run the Yao container;
docker run --name yao \
-p 5099:5099 \
-v /mydata/yao:/data/app \
-d yaoapp/yao:0.9.1-amd64-dev
- Since the Yao command tool is installed inside the Docker container, when we use it, we need to enter the container first:
docker exec -it yao /bin/bash
- For example, use the
yao version
command in the container to view the version.
use
Next, we will introduce the use of Yao. We will take the brand management function in the mall project as an example, and use Yao to develop and try!
basic use
First, familiarize yourself with the basic use of Yao!
- Go directly to the
/data/app
directory of the container, and use the following command to initialize the project;
cd /data/app # 进入项目目录
yao init # 运行初始化程序
- Yao will automatically generate the following directory, use the
ll
command to view the directory structure of the project:
- Next, use the
yao migrate
command to create a database table. By default, there is a pet table for testing in the project:
- Then use the following command to initialize the menu;
yao run flows.setmenu
- Next, use the
yao start
command to start the service, and the console output is as follows;
- After the project is successfully started, you can access it. The default account password is as follows, and the access address is: http://192.168.3.105:5099/xiang/login/admin
账号:xiang@iqka.com
密码:A123456p+
- After successful login, we can find that there is a pet management function for testing by default;
- There is also a user management function;
- There is also a menu management function, these are basic functions, we will use it later.
Create a data model
Below we will use Yao to create a data model and implement simple CRUD operations.
- We will experience the magic of using Yao to develop applications by implementing a simple product brand management function;
- Create a data model description file
brand.mod.json
, since the project directory in the container has been mounted on the host, put the file in the/mydata/yao/models
directory:
{
"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 }
}
- Use the Yao command to create database tables;
cd /data/app
yao migrate -n brand
- After the creation is successful, you can use the yao command to query data, such as querying all product brands;
yao run models.brand.Get '::{}'
- Press the primary key to query the product brand;
yao run models.brand.Find 1 '::{}'
- Delete product brand based on ID;
yao run models.brand.Delete 1
- Add product brand;
yao run models.brand.Create '::{ "name": "万和", "first_letter": "W", "sort": 0, "brand_story": "万和的故事","logo":"http://img.macrozheng.com/mall/images/20200607/5b07ca8aN4e127d2f.jpg"}'
- Modifying the product brand, is this operation a bit like using SQL on the command line?
yao run models.brand.Save '::{"id":2,"brand_story":"修改品牌故事"}'
write interface
Below we will use Yao to develop the backend interface, where a paging query and save interface will be implemented.
- First write the interface description file
brand.http.json
and put it in the/mydata/yao/apis
folder;
{
"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"
}
}
]
}
- Test the paging query interface;
curl 'http://192.168.3.105:5099/api/brand/search?page=1&pagesize=1&where.name.match=小米'
- Then test and save the interface, the interface development is really simple!
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"}'
write interface
Next, we will use Yao to implement the front-end interface of brand management, which is very simple!
- Write the data table description file
brand.tab.json
and put it in the/mydata/yao/tables
folder;
{
"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": {}
}
}
}
- Next, you can directly access the interface, visit the address: http://192.168.3.105:5099/xiang/table/brand
- If you want this feature to be displayed in the menu, you also need to add it in
菜单设置
.
Summarize
I experienced a Yao today, which is indeed a very thoughtful low-code tool. Users only need to use JSON to create databases, develop back-end APIs and front-end interfaces, which greatly improves development efficiency. However, I feel that Yao also has some shortcomings. For example, it only supports dark themes at present, and there is basically no prompt when JSON is written incorrectly, and there is no special development tool that can prompt grammar!
References
- Project address: https://github.com/YaoApp/yao
- Official documentation: https://yaoapps.com/doc
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。