用 Golang+react 写了一个开源的低代码开发工具,后端嵌入了 V8 引擎,支持 JS 进行逻辑扩展,前端设计了一套 DSL,基于动态组件进行渲染,专门用来写后台的
发布于 4 个月前 作者 MatrixAge 17982 次浏览 来自 分享

几年前我们基于 Php 开发了一个代码生成器,供内部开发使用,后来慢慢发展,使用 Golang 进行了重构,重构之后不仅仅是用来生成 Api ,创建数据库,写 Sql ,还有描述后台界面,都支持了,还整了一个 V8 引擎进去,用来处理一些复杂的数据逻辑,现在我们内部的项目都是基于这个低代码工具来的。

经过半年的整理,还有筹划之后,我们决定把它开源了,因为我们发现,用了 Yao 这个低代码工具,写后台的效率爆炸,按照工时来看效率起码提升了 10 倍。

下面简单介绍一下用法,感兴趣的兄弟可以去点个 star ,支持一下,祝你今年好运爆棚!

引擎: https://github.com/YaoApp/yao

界面: https://github.com/YaoApp/xgen

img

创建数据库

{
  "name": "宠物",
  "table": { "name": "pet", "comment": "宠物表" },
  "columns": [
    { "label": "ID", "name": "id", "type": "ID", "comment": "ID" },
    { "label": "编号", "name": "sn", "type": "string", "unique": true },
    { "label": "名称", "name": "name", "type": "string", "index": true },
    {
      "label": "类型",
      "name": "kind",
      "type": "enum",
      "option": ["猫", "狗"],
      "default": "猫",
      "index": true
    },
    { "label": "介绍", "name": "desc", "type": "string", "comment": "详细介绍" }
  ],
  "values": [
    { "sn": "100001", "name": "Cookie", "kind": "猫", "desc": "一只猫" },
    { "sn": "100002", "name": "Beibei", "kind": "狗", "desc": "一只狗" }
  ],
  "option": { "timestamps": true, "soft_deletes": true }
}

编写接口

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

描述后台界面

{
  "name": "宠物",
  "version": "1.0.0",
  "decription": "宠物管理表格",
  "bind": { "model": "pet" },
  "apis": {},
  "columns": {
    "ID": {
      "label": "ID",
      "view": { "type": "label", "props": { "value": ":id" } }
    },
    "编号": {
      "label": "编号",
      "view": { "type": "label", "props": { "value": ":sn" } },
      "edit": { "type": "input", "props": { "value": ":sn" } }
    },
    "名称": {
      "label": "名称",
      "view": { "type": "label", "props": { "value": ":name" } },
      "edit": { "type": "input", "props": { "value": ":name" } }
    },
    "类型": {
      "label": "类型",
      "view": { "type": "label", "props": { "value": ":kind" } },
      "edit": {
        "type": "select",
        "props": {
          "value": ":kind",
          "options": [
            { "label": "猫", "value": "猫" },
            { "label": "狗", "value": "狗" }
          ]
        }
      }
    },
    "介绍": {
      "label": "介绍",
      "view": { "type": "label", "props": { "value": ":desc" } },
      "edit": { "type": "textArea", "props": { "value": ":desc", "rows": 4 } }
    }
  },
  "filters": {
    "关键词": {
      "label": "关键词",
      "bind": "where.name.match",
      "input": { "type": "input", "props": { "placeholder": "请输入关键词" } }
    }
  },
  "list": {
    "primary": "id",
    "layout": {
      "columns": [
        { "name": "ID", "width": 80 },
        { "name": "编号", "width": 100 },
        { "name": "名称", "width": 200 },
        { "name": "类型" }
      ],
      "filters": [{ "name": "关键词" }]
    },
    "actions": { "pagination": { "props": { "showTotal": true } } },
    "option": {}
  },
  "edit": {
    "primary": "id",
    "layout": {
      "fieldset": [
        {
          "columns": [
            { "name": "编号", "width": 8 },
            { "name": "名称", "width": 8 },
            { "name": "类型", "width": 8 },
            { "name": "介绍", "width": 24 }
          ]
        }
      ]
    },
    "actions": { "cancel": {}, "save": {}, "delete": {} }
  }
}
4 回复

各位有什么想法都可以提,我们一直都在优化和改进

看起来有点意思,不过以配置的形式来描述结构,终究限制较多

@fish 搞了个Sql的DSL+支持JS的Process,灵活性方面还可以。

回到顶部