推薦一款管理系統專用低程式碼工具,一天開發一個系統不是夢!

macrozheng發表於2022-05-13
之前寫過一篇關於阿里的低程式碼工具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命令啟動服務,控制檯輸出內容如下;

賬號: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": {}
        }
    }
}

  • 如果你想這個功能在選單中顯示的話,還需要在選單設定中新增它。

總結

今天體驗了一把Yao,確實是一款很有想法的低程式碼功工具。使用者只需要使用JSON就可以建立資料庫、開發後端API和前端介面,極大地提高了開發效率。不過感覺Yao也有一些不足之處,比如說目前只支援暗色主題,還有就是JSON寫錯了基本沒提示,也沒有專門的可以提示語法的開發工具!

參考資料

相關文章