低代码三部曲之实现

原创

低代码布道者

发布于 2022-07-16 16:31:49

3480

发布于 2022-07-16 16:31:49

文章被收录于专栏：架构师聊技术

最近几年在软件开发领域，低代码被吹捧的到了天际，好像你没接触过低代码你都不好意思说自己在软件领域工作，其实，大可不必，这其中很大一部分是资本催生的结果，也有一部分是新技术的出现，让一些玩文字的人创造了一个新名字而已，我应该是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的系统、或者是在已有的系统上做扩展功能需求，像OA、EHR、理赔、物流系统等等。
功能实现：功能实现其实跟页面驱动类似，可以先设计页面再跟模型映射，也可以根据模型映射页面上的控件，这两种方式都可以，最终形成的页面的页面设计结构类似

{
  "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": []
}

推荐优秀的参考项目：这块几乎没有开源的，不过基本都提供了试用，不管看到的是什么样，但针对低代码这块实现方式相差不会太大，就看哪家沉淀的更久，做的更用心。
蓝凌蓝凌智能OA
炎黄盈动 AWS PaaS - 简化企业流程应用的开发、运行和维护
泛微工作流引擎泛微OA系统—丰富应用满足不同组织办公需求
如果您有更好的项目或者产品请留言，我及时更新到推荐到列表

总结

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

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

微搭低代码