用 Golang+react 写了一个开源的低代码开发工具,后端嵌入了 V8 引擎,支持 JS 进行逻辑扩展,前端设计了一套 DSL,基于动态组件进行渲染,专门用来写后台的

2022-02-20 21:21:37 +08:00
 matrixage

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

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

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

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

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

创建数据库

{
  "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": {} }
  }
}
3670 次点击
所在节点    分享创造
23 条回复
matrixage
2022-02-20 21:23:15 +08:00
各位有什么想法都可以提,我们一直都在优化和改进
narmgalaxy
2022-02-20 22:28:59 +08:00
看起来令人兴奋!充满想象力!
anxn
2022-02-20 22:42:05 +08:00
技术选型看着不错 go gin react ,请问下 Yao 支持 postgresql 数据库吗?看到文档有提到 postgresql ,环境变量那块没看到 postgresql 的使用示例
matrixage
2022-02-20 22:45:05 +08:00
@anxn postgresql 支持,相关文档会在未来一个月内放出
FightPig
2022-02-20 22:53:03 +08:00
厉害了,关注一下先
xooass
2022-02-20 23:33:06 +08:00
这是我见过的我最喜欢的后台操作界面,star 了,并且正在测试是否合适我去开发一个海外仓系统,我看已经有一个差不多的演示了
matrixage
2022-02-20 23:53:04 +08:00
@xooass 我们内部也是主要用于 erp ,还有 crm 这类数据管理
lyhiving
2022-02-21 00:06:57 +08:00
我更关注之前的 PHP 生代码生成器会不会开源
matrixage
2022-02-21 00:40:53 +08:00
@lyhiving 大概率不会了 那个只是历史产物 不够规范
weak
2022-02-21 03:23:02 +08:00
6666666
JaguarJack
2022-02-21 08:36:33 +08:00
我关心这个 json 页面。是否可以使用 php
XTTX
2022-02-21 10:37:52 +08:00
UI 做得太棒了!第一感觉是什么成熟的第三方模板
mcfog
2022-02-21 10:39:18 +08:00
还撸了个 orm ,有空学习一下
poppub
2022-02-21 11:07:15 +08:00
看起来好强。持续关注了
lyhiving
2022-02-21 12:57:16 +08:00
@matrixage 不错,你们家这个域名不知道的还以为是卖药的
bzshow1
2022-02-21 14:23:12 +08:00
@matrixage 支持,很强大的平台。 请问 https://yaoapps.com/doc/ 文档用什么工具生成的? 谢谢。
matrixage
2022-02-21 15:58:29 +08:00
@bzshow1 自研的,基于 Nextjs 、Mdxjs 、Git submodules 、Ci ,实现,你如果了解这几个技术,自己就可以搞出来,不过想要做得极简,得花点时间,后续我会在掘金写一篇文章专门介绍这个网站文档是如何设计的。
bzshow1
2022-02-21 16:35:43 +08:00
@matrixage 谢谢!
Ienge
2022-02-21 19:33:11 +08:00
没看到权限管理相关的
matrixage
2022-02-21 20:19:11 +08:00
@Ienge 权限方案分账户来的,ADMIN / USER ,user 的 menu 权限和 api 权限是通过预置数据写入来实现的(因为一些政企项目这方面比较严,不允许随便修改账户权限),我们后续也会支持自定义权限。

你如果有更好的方案,可以提 issure 。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/835260

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX