我的“低代码编程”之旅

发表时间：2022-03-24来源：网络

有人觉得它只是一个页面编排器，所以我先给它加上引号，后面慢慢讲
我现在是按代码行数对组件进行分类的，5K以上有效代码行数的都称为大组件

一、前言

工作以来写过的大组件基本都跟图形化、可视化有关系。比如：

processon上的在线流程图（AS写的）

一开始就是仿Visio的，要比下面这个流程图的功能还复杂一点，比如：对齐线、线条的无限折点、线条自动规避算法，树状结构数据【导出—修改—再导入】涉及到的新增节点的位置检测等等。

后面还延伸了物理模型图、时序图这些东东。

甘特图

除了右侧的甘特图，也按Element UI的样式重新写了个表格，主要是解决行拖拽、行编辑、单元格编辑、虚拟滚动加载等问题。

页面编排器

总共写了3种：

解决【报表页面】的编排器，用的jq+bootstrap。初衷是想统一部门的图表组件，可以拖拽生成表格和图表。主要是解决图表配置的问题，后来发现里面的配置项太多，而且Echarts官方就有个配置页面，就放弃了。写了6K+代码，所幸只花了3周的时间，算是做了个概念验证。解决【表单+表格】页面的效率问题，用的Vue。初衷是拖拽【表单+表格】后直接生成Vue代码。单页面生成单个Vue文件，多页面生成Vue工程。后来觉得实用性不是特别大，在公司也没有应用场景，就搁置了。解决【后台管理类系统】的开发效率问题，用的Vue，也是现在做的东西，后面主要内容就是讲它。

二、概述

如何提高效率是高级开发永恒的话题。最近一直都在做“后台管理类”系统，页面都高度类似，基本上是表单+表格。如果一个标准(增删改查)的页面需要开发2天，那怎样让它的开发时间缩短了？首先我们可以通过一些工程化的手段，比如：脚手架、组件库、UI规范，来提升效率。假设能把它缩短到1天，那之后怎么办了，怎么更进一步，缩短到2小时，甚至是10分钟？

其实最理想的答案是不需要前端参与开发，所以就有了低代码编程和无代码编程这些概念。

所有的页面都不需要前端程序员肯定是不行的，那【表单+表格】这种布局单一、交互简单的页面了，是不是非常具有可行性？

答案是肯定的。所以针对“后台管理类”系统，我给自己定了以下目标：

简单的页面，通过拖拽生成，然后通过平台进行托管，系统中通过iframe联通。较复杂的页面，可以让产品通过拖拽生成“原型页面”可以通过产品的“原型页面”，反向生成Vue代码，用于开发复制粘贴。如果能生成80%的代码，也是很棒的。

此外，它还可以成为一个强大的前端学习系统。‘所见即所得’，不断的试错和反馈，对于新人的指导意义是非常强的。

不过做到后面有点偏了，因为发现了它更有意思的地方。

三、现状

它就长上面那样，结尾放了视频！还有很多要完善的地方，不过有内味了~~

主要达成了以下"成就"：

灵活的布局。使用的标准文档流，可拖拽调整位置，可以嵌入样式。分为Container和Node两种类型，支持无限层级嵌套，支持全局容器（弹出框、抽屉）组件之间的交互可以通过嵌入代码的形式，也可以通过拓扑图的形式组件扩展的问题已经想明白了，只是还没时间实施。反向生成Vue代码已经有了，就用的模板字符串。

后面就是拖拽出一个简单的标准页面，看是否能实现【增删改查】功能，然后不断查漏补缺，是一个不断修正和完善的过程。

不过最近在忙流程图的事情，从网上download了一个库，不过发现扩展性不太好，跟Vue也不搭，还是得自己写一个。