V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
matrixage
V2EX  ›  分享创造

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

  •  
  •   matrixage ·
    matrixage · 229 天前 · 2796 次点击
    这是一个创建于 229 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    你如果有更好的方案,可以提 issure 。
    xueyangkk
        21
    xueyangkk  
       220 天前
    很不错 支持下
    shuperjolly
        22
    shuperjolly  
       171 天前
    前端页面没有?只有后端设计?
    shuperjolly
        23
    shuperjolly  
       168 天前
    问下数据库是怎么存储的? sqlite ?
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1000 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 23:02 · PVG 07:02 · LAX 16:02 · JFK 19:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.