低代码平台该如何搭建?

低代码平台

目标

通过拖拽各种组件到容器框,在配置栏配置好数据,即可生成可运行的代码或需要的配置。操作大概和下图类似。我公司的业务需求是针对几个常用的页面(大概80%的常规页面),让非开发人员可以进行拖拽生成代码,减轻开发人员负担。

模块和功能拆分

如下图所示,可拆分成:

  • 左边: 组件选择栏
  • 中间: 可视化编辑器
  • 右边: 组件配置栏

需要做的功能:

  • 定义《组件选择栏》的组件数据,这个可参考阿里的组件数据定义
  • 定义低代码数据,这个可参考阿里百度的定义
  • 拖拽逻辑编写,拖拽框架,无论react还是vue,都是dnd
  • 可视化编辑器渲染,正常写页面即可

若是中小型公司,抄(学习)大厂方案是条好路,作者本人琢磨了很多,兜兜转转最后还是回到大厂的方案上。每个公司的需求不一样,大家需要自行适配,适配的核心是组件数据和低代码数据。公司要求灵活度高又有充足的研发时间,那基本上可照抄大厂方案,大厂方案兼容性很高。若不需要灵活度这么高,希望简单好用即可,那可以根据自身情况进行筛减。

低代码框架思路

各个低代码平台思路很多都是相似的,都是通过拖拽组件+配置组件配置栏生成类似AST 抽象语法树的低代码数据,然后通过这个数据生成代码或生成应用。而低代码平台核心难点是处理组件之间的交互,在这点上,各个平台差别很大。这个是要重点思考的。

方案1:百度低代码平台

百度低代码平台是比较简洁的,先以它为例。百度低代码交互方式采用的是一个组件绑定一个数据。一个组件想和另外一个组件交互,直接在自身事件属性中,选中另外一个组件抛出的方法即可。

流程图
百度低代码数据示例:

下面是一组低代码数据,百度低代码平台可通过此数据生成一个带有输入框的页面。使用者=》拖拽组件到编辑框=》配置组件配置栏的属性=》生成低代码数据。

上面步骤是大部分低代码平台都需要的步骤,核心差异点是如何配置交互数据。百度低代码的交互核心是组件中的《name》属性。一个组件绑定着一个数据,像vue的v-modal一样。而name属性,就是这个组件的id,如下面代码所示,其他组件需要调用此组件数据,直接${组件id}即可。

json 复制代码
{
  "type": "page",
  "body": [
      {
        "type": "input-text", // 一个基础输入框组件
        "name": "input1",
        "label": '我是一个输入框',
        "placeholder": "请输入",
      },
      {
      "type": "tpl",//一个展示数据的组件,类似html的<span>标签
      "text": ${input1} // 需要展示的数据,通过${}+其他组件的name,即可拿到其他组件数据
    },
      
  ]
}

想看详细的百度低代码,自己点进去看

操作页面示例
方案优缺点:

优点:交互操作容易,实现也容易。它的低代码数据主要是描述页面的,此数据容易转换成页面,但转换成代码,需要加一些功夫。它的数据和vue很搭。

缺点:复杂页面会比较麻烦。

方案2:阿里低代码平台

阿里低代码交互方式采用的是:把全部数据和交互逻辑汇总到一个JS文件中,然后组件再绑定js文件中的事件或数据,让js文件当中转站。

相对于百度的方式,阿里需要使用者多配置一个当中转站的js文件。

流程图
阿里低代码交互数据示例:

阿里低代码的交互方式更好懂一些,因为它更接近于代码本身。阿里首先配置好一个JS文件,把页面需要用到的数据和方法都汇总在上面。然后在组件配置栏上,将js文件的事件绑定到组件中。

说白了,这种方式就是将组件交互的内容独立隔离到一个js文件中,配置类配置组件属性即可,不用管交互。此方案灵活性极高,只不过需要写很多代码。一般还需要再套一层壳才能使用。

阿里低代码应用-钉钉宜搭

钉钉宜搭就是在上面框架基础上,套多了一层,使用者一开始,配置好自己需要的数据,钉钉宜搭自动生成整个页面的逻辑和内容(js文件+组件配置),这样用户就不用手写代码了。用户只需要再根据自己的需求进行额外的调整即可,添加组件也可以直接使用已配置好的交互数据和方法。

方案优缺点:

优势:操作很简单,即可生成配置多,功能多,前后端都齐全的页面。

劣势:1.页面功能是特定的,像宜搭的这个模板,就是为表单页面而生的。

2.对业务需求了解要非常深。

3.需要开发定制的配套页面。

总结

以上便是市面上有详细资料可以参考的两种低代码方案。

相关推荐
前端_yu小白6 分钟前
leaflet实现点位聚合
前端·javascript
懒羊羊我小弟6 分钟前
Webpack 基础入门
前端·webpack·rust·node.js·es6
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke9 小时前
小程序立体轮播
前端·css·小程序
一 乐9 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟9 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss