从前端实现浅谈低代码

Tian13
272 阅读4分钟

是什么

一个以专业技术人员为主要用户群的通用型低代码平台，

它会有一个通用性非常高的底座，和一个相对完善的插件机制。

对比

纯代码的问题

  • 门槛高，根据 GitHub 的统计数据，去年国内只有大约 755 万多开发人员，一个人可能只会写 hello world 就被算进来
  • 跨界难，Java 程序员可能很难玩得转 C/C++，前端程序员很难玩得转 Java/Scala 等后端技术
  • 代码编写只是第一步，之后还有许多问题需要解决。代码所依赖的第三方库的开源合规治理、第三方和己方的代码安全漏洞检测和治理，还有代码性能、代码测试、运行时运维等

低代码优势

  • 无需将业务翻译成指令，从而他们得以用更高的效率实现相同的业务
  • 低技术门槛

如何实现

架构设计

一般分为四个模块：

  • 物理堆（组件库）：一个元数据对象组成的数组遍历而来的
  • 舞台（配置画布）：我们可以将左侧的组件拖动到画布中，当然也支持画布中组件的赋值、删除等操作
  • 编辑面板（配置项）：当我们在画布中选中某个组件时，可以在右侧的属性配置区域罗列出当前组件可支持动态配置的属性，修改了属性后可以在画布中看到对应组件的样式变化
  • 顶栏（全局/页面配置）：我们可进行页面的保存、预览、查看json信息、查看代码等操作

物理堆实现

{
	code: "MyInput",
	name: "输入框",
	desc: "输入框的描述",
	icon: "input",
	props: {
		name: "字段名称",
		label: "label名称",
		labelCol: "",
		wrapperCol: "",
		required: false,
	}
}

JSON 转 HTML（react举例）

// 维护表单控件， 提高form渲染性能
const BaseForm = {
    "Text": (props) => {
        const { label, placeholder, onChange } = props
        return <Cell title={label}>
                    <Input type="text" placeholder={placeholder} onChange={onChange} /> 
               </Cell>
    },
    "Number": (props) => {
        const { label, placeholder, onChange } = props
        return <Cell title={label}>
                    <Input type="number" placeholder={placeholder} onChange={onChange} /> 
               </Cell>
    }
}

//  动态渲染表单
{
    formData.map((item, i) => {
        let FormItem = BaseForm[item.type]
        return <div className={styles.formItem} key={i}>
                  <FormItem {...item} />
              </div>
    })
}

拖拽实现

  • 使用相关插件
  • 列表区域和目标区域分别使用list1数组和list2数组进行遍历渲染。当我们将列表区域的组件3拖动到目标区域时，我们打印list2变量的数据，就会 发现组件3被复制到了list2中
<template>
  <a-row style="padding: 20px">
    <a-col span="10">
      <h3>列表区域</h3>
      <draggable
        class="dragArea list-group"
        :list="list1"
        :sort="false"
        :group="{ name: 'people', pull: 'clone', put: false }"
        >
        <div class="list-group-item" v-for="element in list1" :key="element.name" >
          {{ element.name }}
        </div>
      </draggable>
    </a-col>
    <a-col span="10" offset="4">
      <h3>目标区域</h3>
      <draggable
        class="dragArea list-group"
        :list="list2"
        group="people"
        >
        <div class="list-group-item" v-for="element in list2" :key="element.name" >
          {{ element.name }}
        </div>
      </draggable>
    </a-col>
  </a-row>
</template>

画布区域

  • 只需要将元数据项替换成UI组件进行渲染
<template>
    <div v-for="item in list2" :key="item.id">
        <component
            :data="item"
            :is="item.code"
        />
    </div>
</template>

属性配置区域

  • 针对每一种组件，我们已经提前在元数据中的props属性定义了这个组件能够进行动态控制的参数，我们只需要将这些参数以合适的表单形式展示在右侧的属性配置区域就可以了

操作栏区域

  • 一个页面实际就是用一段带有层级结构的json来进行描述的
  • 保存时实际就是将这段json进行保存操作，我们可以将json存储到数据库中

事件实现

事件分类：

  • 事件分为三个类别：组件方法、系统动作、API调用
  • 系统动作和API调用的定义相对比较简单，我们可以在vue组件的methods中进行方法的定义
  • 而对于组件方法，我们需要将组件暴露的方法定义在各个组件的methods中，并在组件加载时进行方法的监听。
window.vm.$on(`${id}-${methodName}`, params => {
  // TODO
})
  • 在组件销毁时取消监听。
window.vm.$off(`${id}-${methodName}`)
  • 触发：在事件配置的时候只需要调用methods中的componentMethod方法就可以了
componentMethod(id, methodName, params) {
  window.vm.$emit(`${id}-${methodName}`, params);
}

事件配置：

  • 我们将这个事件属性定义为event。属性值为一段js函数字符串

事件执行：

  • 我们定义一个字符串函数解析方法funcStrParse
function funcStrParse(funcStr) {
  return Function("'use strict';return (" + funcStr + ")")();
}
  • 我们只需要调用funcStrParse返回的函数即可
funcStrParse("这是一段函数字符串")(ctx);

应用

标准化程度高的场景，例如门户、广告、营销（给运营使用）、中后台页面搭建后者相对复杂的页面（给开发使用，低代码基础上二次开发）。目前市面上的产品有易企秀、云凤蝶、宜搭

总结

低代码问题

  • 强逻辑场合下的可视化配置方法的问题
  • 需要支持多人协作开发，当业务越来越复杂，多人协作是刚需

对我们的影响

  • 提高效率：以前你可能是公司研发部门下的一颗螺丝钉，负责业务系统某一个功能的开发。切换到低代码开发平台之后，你一个人可以独立负责一个大型项目，开发效率大幅提升。
  • 面对裁员：2前端～1前端

思考

  • 我们在项目中通常都是业务推动开发，能不能在现有的业务里面看到一些更远的东西，这个很重要
avatar
文章
阅读
粉丝