| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 低代码平台表单引擎技术方案选型 -> 正文阅读 |
|
[JavaScript知识库]低代码平台表单引擎技术方案选型 |
可视化表单建模是低代码/零代码平台的核心功能,业内对该功能有多种叫法:电子表单、表单可视化、表单驱动、表单引擎等,该组件主要由表单设计器、表单解析引擎、表单存储引擎三个部分构成,而表单解析引擎取决于表单存储引擎的技术方案,本文重点介绍表单设计器和表单存储引擎的技术方案选型。 一、表单设计器1、FormMakingFormMaking基于 Vue 的可视化表单设计器,赋能企业实现低代码开发模式;帮助开发者从传统枯燥的表单代码中解放出来,更多关注业务,快速提高效率,节省研发成本。 FormMaking使用基于 Vue 2.0 的桌面端组件库 Elemnet ,使用广泛,扩展方便。 http://form.making.link/ 2、Variant FormVForm是一款基于Vue 2/Vue 3的低代码表单,支持Element UI、iView两种UI库,定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。 VForm 3是一款基于Vue 3.x的低代码表单,支持Element PlusUI库,定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。VForm 3全称为Variant Form 3,寓意为灵活的、动态的、多样化的Vue 3.x低代码表单。VForm 3由表单设计器VFormDesigner和表单渲染器VFormRender两部分构成,VFormDesigner通过拖拽组件方式生成JSON格式的表单对象,VFormRender负责将表单JSON渲染为Vue组件。 https://www.vform666.com/ 3、k-form-design基于vue2和ant-design-vue实现的表单设计器,样式使用less作为开发语言,主要功能是能通过简单操作来生成配置表单,生成可保存的JSON数据,并能将JSON还原成表单,使表单开发更简单更快速。 4、form-createform-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架(ElementUI、Iview/View-design、Ant-design-vue),并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 二、表单存储引擎低代码平台需要支持用户存储自定义数据,因为每个应用所需的表、字段、以及关系都是不一样的。自定义数据存储是后端低代码最重要的功能,使用什么方案将直接影响这个产品的适用范围,目前我们已知有4种方案,每种都有自己的优缺点。 方案 1:直接使用关系型数据库这个方案的原理是将数据模型的可视化操作转成数据库 DDL,比如添加了一个字段,系统会自动生成表结构变更语句: ALTER TABLE 'blog' ADD 'title' varchar(255) NULL; 这个方案的优点是:
该方案的缺点是:
尽管这个方案有缺点,这些缺点通过一些机制或管理手段可以规避,重要的是该方案的优点很突出,因此国内大部分低代码平台选择了这个方案,因为能支持企业级复杂应用需求、继承现有数据资产是非常重要的。 方案 2:使用文档型数据库文档型数据库不需要预先定义表结构,因此它很适合用来存储用户自定义数据,这个方案实现起来比较简单,以 MongoDB 为例,可以这样做:
这个方案的优点是实现简单,用户体验可以做得更好,是目前大部分零代码平台的选择,使用这个方案的产品也很好识别,只要看一下它的私有部署文档,如果有要求装 MongoDB 就肯定是。明道云低代码平台就是基于MongoDB的实现方案。 这个方案有显著缺点:
它的最大特点是界面编辑和数据存储是统一的,当你拖入文本框到页面后就会自动创建对应的字段,不需要先创建数据模型再创建界面,因此用起来更简单。
方案 3:使用关系型数据库行转列这是很多可扩展平台里使用的技术,比较典型的是 WordPress,它的扩展性很强,装个扩展就能变成电商网站。而整个 WordPress 只有?12?个表,它是怎么做到的?方法是靠各种 meta 表,比如用于扩展文章的?wp_postmeta?表结构如下: CREATE TABLE wp_postmeta ( ? meta_id bigint(20) unsigned NOT NULL auto_increment, ? post_id bigint(20) unsigned NOT NULL default '0', ? meta_key varchar(255) default NULL, ? meta_value longtext, ? PRIMARY KEY? (meta_id), ? KEY post_id (post_id), ? KEY meta_key (meta_key) ) DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; 其中的关键就是?meta_key?和?meta_value?这两个字段,相当于将数据库当 KV 存储用了,因此可以任意扩展字段名及值。 这个方案的优点是实现简单,但缺点也很明显:
这个方案主要用于成熟项目的扩展,比如在 CRM 产品中允许用户扩展字段,但因为性能较低,并不适合通用低代码平台。 方案 4:使用关系数据库宽表早期数据库不支持 JSON 字段的时候,有些开发者会预留几个列来给用户扩展自定义属性,比如在表里加上 ext1、ext2、ext3 字段,让用户可以存 3 个定制数据,基于这个原理我们可以进一步扩展,通过预留大量列来实现应用自定义存储。 这个方案最早出现在?http://force.com,具体细节可以阅读它技术文档:https://developer.salesforce.com/wiki/multi_tenant_architecture。 实现它有两个关键点:元数据、预留列,这里简单说明一下原理,首先系统预先创建一个 500 列的表,比如就叫 data:
也可以创建更多,但注意有的数据库对列的数量有限制,比如 MySQL 最多是?4096?列。 上面的 data 表里主要有 4 类字段:
在这个 table_fields 表里:
要完全实现这个方案还有很多细节问题得解决,由于篇幅原因这里不详细介绍,感兴趣可以阅读前面提到的?http://force.com?技术白皮书,这里列举其中几个问题:
这个方案比前面几个方案的优点是:
但它也有许多缺点:
我认为这个方案适合某些业务领域SaaS 类产品,可适用的业务领域不多,不具备通用性,我不看好这个方案在国内的发展。Salesforce 的成功不单单是技术,跟当时的所处的IT环境、行业选择、产品定位、商务推广等多个方面都有关系。 参考: |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/24 6:22:09- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |