头图
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;

 账号: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": {}
        }
    }
}

  • 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


macrozheng
1.1k 声望1.3k 粉丝