浅谈低代码平台实现(一)

目前做低代码平台的大厂非常多,涉及实现的技术路线大致分为两类,有通过配置文件生成方向、有云原生低代码打包生成方向,目前这两大阵营涉及的低码产品主要有以下:

低码产品

百度:爱速搭 aisuda.baidu.com 腾讯:微搭 cloud.tencent.com/product/wed... 阿里:宜搭 www.aliwork.com 华为:Astro www.huaweicloud.com/special/ast... 金蝶:苍穹 www.kingdee.com/products/co... 用友:YonBuilder developer.yonyou.com/product/app... 轻流:qingflow.com 得帆:DeCodewww.definesys.com/product_apa... 帆软:简道云www.jiandaoyun.com

2020 年开始参与主导公司低代码平台的设计和实现,目前该平台已经承载表单类应用系统、后端管理类系统、流程业务类页面,成功案例约 100 个,在做整个低代码平台的过程中,也总结了一些实现思路和实现路径,同时也通过该方案完成了论证。

重难点

低代码平台大部分都是通过拖拉拽已有内置组件进行布局,利用组件钩子进行触发相关的业务,完成交互。

所主导的低码平台主要是通过配置文件生成方式,采用 Java+Vue2 进行前后端分离进行平台建设,涉及的主要重难点包括:

  • 组件拖拉拽
  • 组件内无限层级嵌套
  • 组件间联动交互
  • 组件回调钩子
  • 上下文参数传递
  • 无限层级弹窗
  • 自定义组件加载
  • 自定义函数加载
  • 自定义样式加载
  • JS 代码在线执行

以上内容也是大部分低代码平台所涉及的重难点,下面我将结合 Vue 2 作为主要的技术栈,分别浅谈一下上述内容的实现思路,以供参考。

组件拖拉拽

组件从列表面板拖拉拽至低码设计器面板,主要是通过数据驱动,利用 Vue 异步组件和动态组件原理进行渲染

ruby 复制代码
// 拖拉拽三方库 [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
javascript 复制代码
// 注册异步组件
Vue.component('asyncComponentName', function (resolve) {
  require(['./my-async-component'], resolve)
})
csharp 复制代码
// 动态组件
<component v-bind:is="componentName"></component>

组件内无限层级嵌套

要实现组件内的无限嵌套,主要是通过具备嵌套能力的容器组件利用递归循环的方式进行 Vue 动态组件渲染,

xml 复制代码
// 这个动态组件是一个容器组件,可以无限递归循环嵌套
<template v-for=(item,index) in list>
  <component v-bind:is="item.componentName"></component>
</template>

上下文参数传递

上下文参数传递,主要是用于解决页面与页面之间,页面与弹窗之间的参数传递,方便查询条件参数使用。在实现本低码平台时,通过封装方法对应用上下文参数对象存入数据,获取数据、删除数据,其中对象Key为页面唯一ID,同时在页面关闭时,平台会自动删除了该页面传递数据。

csharp 复制代码
  // 设置页面上下文
  setPageContextTransferParams (obj = {}) {
      const { pageId = '' } = obj
      let params = obj?.params || {} 
      // 页面上下文对象
      const contextParams = this.pageContextTransferParams[pageId]
      if (!_.isEmpty(contextParams) && !_.isEmpty(contextParams.params)) {
        // 对象合并
        params = {
          ...contextParams.params,
          ...params
        }
      }
      // 利用 lodash 进行对象属性赋值 
      _.set(obj, 'params', params)
      //  存储上下文参数
      this.pageContextTransferParams[pageId] = obj
    }
kotlin 复制代码
    // 获取页面传递参数
    getPageContextTransferParams (pageId = '') {
      if (this.pageContextTransferParams[pageId]) {
        return this.pageContextTransferParams[pageId]
      } else {
        return { pageId, fromPageId: '', params: {} }
      }
    }
javascript 复制代码
    // 清空页面传递参数
    deletePageContextTransferParams (pageIds = []) {
      pageIds.forEach((id) => {
        delete this.pageContextTransferParams[id]
      })
    },
kotlin 复制代码
// 清空所有页面参数
    deletePagesContextTransferParams () {
      this.pageContextTransferParams = {}
    },

JS代码在线执行

JS代码执行主要是利用Vue组件生命周期钩子调用相应的JS代码进行执行,处理相关的业务逻辑,JS脚本代码是存储的纯文本,因此需要把JS文本转函数用于执行,本平台通过原型对象的方式进行实现,具备同步和异步能力。

javascript 复制代码
// 执行匿名函数
function execAnonymous (paramObject = {}, async = true) {
  const { paramsText, params, execObject } = paramObject
  let jsText = paramObject.jsText
  let ExecFunction = Object.getPrototypeOf(() => {}).constructor
  if (async) {
    ExecFunction = Object.getPrototypeOf(async () => {}).constructor
  }
  let jsCode = null
  try {
   // 构造成执行函数
    jsCode = new ExecFunction(paramsText, jsText)
    if (execObject === null || execObject === undefined) {
      // 函数执行
      return jsCode(...params)
    } else {
      return jsCode.call(execObject, ...params)
    }
  } catch (error) {
    // 捕获异常打印
    throw new Error(error)
  } finally {
    ExecFunction = null
    jsCode = null
  }
}
相关推荐
wakangda24 分钟前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡27 分钟前
lodash常用函数
前端·javascript
emoji11111136 分钟前
前端对页面数据进行缓存
开发语言·前端·javascript
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
迷糊的『迷』1 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
User_undefined1 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
web135085886351 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
麦兜*1 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue
陈大爷(有低保)1 小时前
uniapp小案例---趣味打字坤
前端·javascript·vue.js
博客zhu虎康1 小时前
ElementUI 的 form 表单校验
前端·javascript·elementui