低代码三部曲之实现(低代码原理)

最近几年在软件开发领域,低代码被吹捧的到了天际,好像你没接触过低代码你都不好意思说自己在软件领域工作,其实,大可不必,这其中很大一部分是资本催生的结果,也有一部分是新技术的出现,让一些玩文字的人创造了一个新名字而已,我应该是10几年前就在这方面开发,所以很早就想总结下低代码,春节期间没有回老家,正好梳理下,一共有三篇文章,分别是起因、实现、未来,这篇文章是第二篇,总结下低代码的落地、实现。

  • 目前低代码实现方式主要有两种方式,包括目前市面上能看到的低代码产品或者平台也不例外,可以主要分为页面驱动模型驱动这这两种方式,各有利弊,下面我们主要围绕这两种实现方式来阐述

低代码实现流程

低代码三部曲之实现(低代码原理)

页面驱动

  • 功能说明:页面驱动就是指使用者直接设计页面、表单、规则,不考虑数据模型,用户根据提供的UI控件实现布局、表单、页面、单据设计,页面显示就是把设计的时候还原呈现,最后直接供最终使用者使用。
  • 使用场景:目前市场上常见的表单设计器、流程设计器、规则设计器基本都属于页面驱动,这类设计基本不用考虑数据模型,用户设计成什么样就是什么样,用户上手非常快,也容易上手,所以目前展示类、快速原型、示意图、To C类多以这类方式实现,
  • 功能实现:页面驱动由于只考虑呈现效果,所以实现上也简单,且主要对前端有要求,实现过程可以使用如下示意图表示

{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "style": "", "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "活动名称", "rules": [], "required": true }, "prop": "name" }, "__controlConfig__": { "props": {}, "attrs": {}, "userDefineProps": {} }, "tagName": "el-input", "__layout__": "colFormItem", "id": 1593757474090, "model": "name", "name": "单行文框", "tagIcon": "input", "controlPanel": "el-input", "uuid": "el-input-0", "sortNum": 0 }], "formApiValid": []}

  • 推荐优秀的参考项目:
  • form-create-designer

gitee:form-create-designer: 可视化vue表单设计器组件

github:https://github.com/xaboy/form-create-designer

  • k-form-design

gitee:k-form-design: 基于vue Ant-Design 的表单设计器,快速开发

github:https://github.com/Kchengz/k-form-design

  • vue-form-design

gitee:vue-form-design: 基于 Vue3 的可视化表单设计器;使用基于 Vue 3.0 的桌面端组件库 Elemnet-Plus ,使用广泛,扩展方便;通过可视化的操作,快速完成表单页面的创建;提供功能强大的各种组件,可适用在各种复杂的场景中;丰富的API接口,方便快速的生成表单,验证和获取表单数据;利于二次开发

github:https://github.com/337547038/vue-form-design

  • 如果您有更好的项目或者产品请留言,我及时更新到推荐到列表

低代码三部曲之实现(低代码原理)

模型驱动

  • 功能说明:模型驱动是指先把要表示的对象模型及模型关系规划并设计好,然后根据模型去设计页面、表单、单据等等,页面上能呈现的数据来源于提前设计好的数据模型,页面显示的时候跟页面驱动是一样的,都是根据表单设计器设计去还原页面,供使用者使用。
  • 使用场景:目前这类开发方式主要用在系统性的平台或者业务系统中,尤其是to B的系统、或者是在已有的系统上做扩展功能需求,像OAEHR、理赔、物流系统等等。
  • 功能实现:功能实现其实跟页面驱动类似,可以先设计页面再跟模型映射,也可以根据模型映射页面上的控件,这两种方式都可以,最终形成的页面的页面设计结构类似

{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "学历", "rules": [] }, "prop": "random50" }, "__controlConfig__": { "props": {}, "attrs": {}, "userDefineProps": { "optionType": "static", "optionCollection": [{ "label": "高中", "value": "1" }, { "label": "专科", "value": "2" }] } }, "tagName": "LElSelect", "__layout__": "colFormItem", "id": 1594263810269, "model": "random50", "name": "选择框", "tagIcon": "select", "serviceName": "LElSelect", "controlPanel": "LElSelect", "uuid": "LElSelect-3", "document": "https://element.eleme.cn/#/zh-CN/component/select", "sortNum": 0 }], "formApiValid": []}

总结

低代码实现方式主流程就是设计页面、流程、规则等等,然后再还原,供最终使用者使用,真正落地使用到的技术都相差不大,基本的开发方式也就是文章中提到的页面驱动或者是模型驱动,但在具体开发过程中还是需要考虑很多问题的,比如:数据怎么保存、权限怎么设计、如何跟具体的业务系统结合、数据如何再加工等等,这块如果展开来写太多了,计划后面录成视频分享出来。

这篇文章先写到这里,下一篇文章介绍低代码的未来趋势。

喜欢的朋友记得给个关注~

相关新闻

联系我们
联系我们
公众号
公众号
在线咨询
分享本页
返回顶部