Yao 折腾手记：如何快速创建一套管理系统

有开发经验的小伙伴肯定知道，要独立开发一套管理系统并非易事。从设计数据库，到开发接口，再到编写前端页面，想想就让人头大。如果需求不是很复杂，我们可以借助低代码应用引擎来快速开发。

1. 项目介绍

2. 快速安装

Yao 可以通过脚本或容器来安装，官方推荐后者，所以这里我们使用 Docker 来部署。

# 注意修改挂载的目录
docker run -d --name yao -v <project root>:/data/app -p 5099:5099 yaoapp/yao:0.9.2-amd64-dev

docker exec -it yao bash

yao init

yao migrate

yao run flows.setmenu

yao start

3. 使用说明

接下来，我将介绍 Yao 的用法，其中包含：

1. 基本用法：借助测试数据，了解 Yao 界面上的功能。

2. 新建内容：新建新的内容，包括数据、接口和界面。

3.1 基本用法

3.2 新建内容

Yao 界面上的功能大致如此，接下来我们新建一些内容。这里我打算实现一个简单的图书管理功能。

{
 "name": "Book",
 "table": {
  "name": "book",
  "comment": "Book"
 },
 "columns": [{
   "label": "ID",
   "name": "id",
   "type": "ID",
   "comment": "ID"
  },
  {
   "label": "SN",
   "name": "sn",
   "type": "string",
   "unique": true
  },
  {
   "label": "Name",
   "name": "name",
   "type": "string",
   "index": true
  },
  {
   "label": "Kind",
   "name": "kind",
   "type": "enum",
   "option": ["科幻", "名著"],
   "default": "科幻",
   "index": true
  },
  {
   "label": "Description",
   "name": "desc",
   "type": "string",
   "comment": "Description"
  },
  {
   "label": "Score",
   "name": "score",
   "type": "integer",
   "comment": "Score"
  }
 ],
 "values": [{
   "sn": "100001",
   "name": "水浒传",
   "kind": "名著",
   "desc": "三个女人和一百零五个男人的故事",
   "score": 9
  },
  {
   "sn": "100002",
   "name": "三体",
   "kind": "科幻",
   "desc": "不要回答！不要回答！不要回答！",
   "score": 9
  }
 ],
 "option": {
  "timestamps": true,
  "soft_deletes": true
 }
}

yao migrate -n book

需要注意的是，该命令的结果不会在前台显示，而是写到 logs/application.log 中。

yao run models.book.get '::{}'

Run: models.book.get
args[0]: {}
--------------------------------------
models.book.get Response
--------------------------------------
[
    {
        "created_at": "2022-07-27 05:41:32",
        "deleted_at": null,
        "desc": "三个女人和一百零五个男人的故事",
        "id": 1,
        "kind": "名著",
        "name": "水浒传",
        "score": 9,
        "sn": "100001",
        "updated_at": null
    },
    {
        "created_at": "2022-07-27 05:41:32",
        "deleted_at": null,
        "desc": "不要回答！不要回答！不要回答！",
        "id": 2,
        "kind": "科幻",
        "name": "三体",
        "score": 9,
        "sn": "100002",
        "updated_at": null
    }
]
--------------------------------------
✨DONE✨

{
 "name": "书籍",
 "version": "1.0.0",
 "description": "书籍接口",
 "group": "book",
 "guard": "bearer-jwt",
 "paths": [{
   "path": "/search",
   "method": "GET",
   "guard": "-",
   "process": "models.book.Paginate",
   "in": [":query-param", "$query.page", "$query.pagesize"],
   "out": {
    "status": 200,
    "type": "application/json"
   }
  },
  {
   "path": "/save",
   "method": "POST",
   "guard": "-",
   "process": "models.book.Save",
   "in": [":payload"],
   "out": {
    "status": 200,
    "type": "application/json"
   }
  }
 ]
}

curl -X POST http://127.0.0.1:5099/api/book/save 
   -H 'Content-Type: application/json' 
   -d '{ "sn": "100003", "name": "三国演义", "kind": "名著", "desc": "东汉末年分三国", "score": 9 }'

curl 'http://127.0.0.1:5099/api/book/search?where.name.match=三国演义&page=1&pagesize=1'

{
 "name": "Book",
 "version": "1.0.0",
 "decription": "Book",
 "bind": {
  "model": "book"
 },
 "apis": {},
 "columns": {
  "ID": {
   "label": "ID",
   "view": {
    "type": "label",
    "props": {
     "value": ":id"
    }
   }
  },
  "SN": {
   "label": "SN",
   "view": {
    "type": "label",
    "props": {
     "value": ":sn"
    }
   },
   "edit": {
    "type": "input",
    "props": {
     "value": ":sn"
    }
   }
  },
  "Name": {
   "label": "Name",
   "view": {
    "type": "label",
    "props": {
     "value": ":name"
    }
   },
   "edit": {
    "type": "input",
    "props": {
     "value": ":name"
    }
   }
  },
  "Kind": {
   "label": "Kind",
   "view": {
    "type": "label",
    "props": {
     "value": ":kind"
    }
   },
   "edit": {
    "type": "select",
    "props": {
     "value": ":kind",
     "options": [{
       "label": "科幻",
       "value": "科幻"
      },
      {
       "label": "名著",
       "value": "名著"
      }
     ]
    }
   }
  },
  "Score": {
   "label": "Score",
   "view": {
    "type": "label",
    "props": {
     "value": ":score"
    }
   },
   "edit": {
    "type": "input",
    "props": {
     "value": ":score"
    }
   }
  },
  "Description": {
   "label": "Description",
   "view": {
    "type": "label",
    "props": {
     "value": ":desc"
    }
   },
   "edit": {
    "type": "textArea",
    "props": {
     "value": ":desc",
     "rows": 4
    }
   }
  }
 },
 "filters": {
  "Keywords": {
   "@": "f.Keywords",
   "in": ["where.name.match"]
  }
 },
 "list": {
  "primary": "id",
  "layout": {
   "columns": [{
     "name": "SN",
     "width": 100
    },
    {
     "name": "Name",
     "width": 200
    },
    {
     "name": "Score",
     "width": 300
    },
    {
     "name": "Kind"
    }
   ],
   "filters": [{
    "name": "Keywords"
   }]
  },
  "actions": {
   "create": {
    "type": "button",
    "props": {
     "label": "添加书籍",
     "icon": "fas fa-plus"
    }
   },
   "pagination": {
    "props": {
     "showTotal": true
    }
   }
  },
  "option": {
   "operation": {
    "unfold": true
   }
  }
 },
 "edit": {
  "primary": "id",
  "layout": {
   "fieldset": [{
    "columns": [{
      "name": "SN",
      "width": 6
     },
     {
      "name": "Name",
      "width": 6
     },
     {
      "name": "Kind",
      "width": 6
     },
     {
      "name": "Score",
      "width": 6
     },
     {
      "name": "Description",
      "width": 24
     }
    ]
   }]
  },
  "actions": {
   "cancel": {},
   "save": {
    "type": "button",
    "props": {
     "label": "Save"
    }
   },
   "delete": {
    "type": "button",
    "props": {
     "label": "Delete"
    }
   }
  }
 }
}

4. 写在最后

可以看到，我们用 Yao 添加新内容时，基本都是在和 JSON 打交道，没有涉及到代码。所以对于需求不复杂的系统，使用低代码引擎来开发或许是个不错的选择。

References

[1] Yao: https://github.com/YaoApp/yao

原文始发于微信公众号（阿拉平平）：Yao 折腾手记：如何快速创建一套管理系统