前言
最近研发了低代码产品，有一些技术上的心得。也看了网络上的很多文章，并没有发现把核心技术和坑说透的。博客的目的希望能将我自己对于前后端低代码技术的部分心得分享给大家。文章不对低代码进行入门介绍，也许您需要有一些了解和实操后才能看懂该文章，它会为您解答很多您当前遇到的问题。有任何的建议可以直接留言。如果大家很有需求的话，在有时间和能力的情况下（前端代码基础有点差！！）我会考虑提供精简的代码实现，或者实现一款开源的低代码引擎。
前端篇
要求通过可视化的拖拽编辑，构建整个前端应用页面。核心是设计器的实现。
设计器的实现从页面上讲主要有四个部分：物料区、编辑区、属性编辑区、其他区域。
第一步：我们需要用JSON描述整个应用：路由区、页面区、页面组件树区、变量区、api区等…。以上不是全部。这部分得设计目前并没有最佳的标准，阿里出了一个标准可以参考，但是阿里的渲染引擎是react实现的，在json定义上有很多react的影子。我们的技术栈是vue,我们自由设计了JSON以更符合vue的组件渲染概念。 您不需要也没有能力一开始就能完全定义json的结构，根据您的渲染代码循循渐进的调整json的结构。
第二步：编写渲染JSON到页面的代码。一个页面由组件树组成；一个组件由组件名、属性、事件、子组件组成。使用Vue render函数将json 树渲染成vue组件树。技术关键点：使用eval函数或手写代码的方式将字符串解析成js对象或函数。处理vue stot和scope Slot。
第三步：编辑区编辑效果和拖拽等实现。在编辑区渲染的组件要求有一些编辑效果。钉钉的宜搭的编辑区效果展示是比较不错的。同样我们也能完成相同的效果，想明白后技术上是没有难度的。下面是一个简单的对比，简易demo并没有实现所有细节。
- 钉钉宜搭效果
- 我的简易demo效果
- 实现原理：很多博客和视频都讲解过一种实现就是在组件外包裹一层实现编辑效果的div。但是这种实现方式是不可行的，会产生很多问题。它对原dom产生了侵入，包括布局侵入和样式侵入。在侵入的情况维护编辑区和预览区显示完全一致的会付出相当大的代价和精力。比如ul组件和li组件，将li组件拖入ul组件内部，当li组件外包裹了一层div后是无法正常显示的，但是预览时去除后就可以正常显示。这种实现方式也是无法达到钉钉宜搭的效果的。
- 我推荐的实现方式是：使用绝对定位的方式将实现编辑效果的组件定位到当前的位置。具体实现：在编辑区根dom或直接在body上监听鼠标事件：如监听mousemove实现hover展示效果，为了精准识别组件树中组件的根dom你需要在渲染json时为其添加一个自定义的属性并将值设置为组件id如下图。当e.target具备您添加的标识时获取当前dom的位置和宽高将实现编辑效果的dom移动到相同位置，您还可以通过组件id获取当前组件的详细信息加载不同的编辑效果如文字提示不一样。
- 一旦采用绝对定位的方式实现后，我们需要重新考虑拖拽效果的实现。没有了每个组件最外层的包裹，我们就没有地方为每个组件添加drag事件了。我推荐的方式是：同样通过在编辑区根dom或body上利用鼠标事件来实现拖拽，这种鼠标实现拖拽的方式的浏览器兼容性也是非常好的，你需要使用mourseon、moursemove、moureup这三个事件，这方面的文章很多不做详细描述。
- 带来的好处：不侵入组件dom，编辑效果定制自由化程度非常高，几乎是完美的解决方案。使用这种方式我们可以甚至可以将组件渲染放入一个iframe，然后监听iframe的dom事件，这在技术上也是没有难度的。在ifream中渲染的好处不言而喻，这是非常好的隔离环境防止与物料区和属性区其他页面产生各种冲突。因为应用设计好后它本身应该在一个独立的环境运行，我们应该尽可能的模拟真实的环境。
- 特殊的编辑组件，大多数情况下我们都不需要为组件再写一个编辑组件专门用于在编辑区时展示，但是有些特殊情况下是需要的，举个例子比如有”气泡提示组件”如图，在编辑状态下我们需要预留空间以拖拽组件到其内部。对于这些情况需要专门写一个对应的编辑组件，在编辑情况下渲染的是编辑组件ddd。
第四步：物料区实现。物料区的渲染通过物料定义JSON文件(如图，antd vue a-button为例)渲染。自由设计JSON如需要分组展示就添加分组属性。物料区的组件有两种类型：一种是ui组件，当它拖拽到编辑区时触发“作为子组件添加到父组件”的行为；第二种是属性组件，当它拖拽到编辑区时触发行为是修改指定的组件的属性，它存在的意义是支持将部分属性也可通过拖拽来编辑，如“添加列”为表格组件中的columns属性添加一列。
第五步：交互行为的设计和实现。交互行为通过响应式变量和事件实现。每个组件的属性都可以绑定到一个变量，事件行为->触发变量修改，变量更新->触发ui更新达到交互目的。为此需要添加变量管理区,分为全局变量和页面变量，全局变量供跨页面交互使用。编写事件行为本质就是编写js函数，js函数中实现调用接口、修改变量、调用其他函数的代码。在次之上为了用户方便通常需要固化某些交互行为如：打开弹窗等，这在本质上就是提供通用的js函数，为此你可能需要增加一个公共api函数管理区域，它是很有必要存在的，在此区域提供用户直接可使用的公共api函数，它可以是用户自己编写的，也可以是提前内置的，比如在后面的后端服务设计中设计好一个服务后就可主动添加一个对应api到此区域，这样用户在页面设计需要这个服务就直接使用这个api函数了，不用自己去实现接口调用的代码。
后端接口设计篇
关键词：逻辑可视化、图灵完备的、流程图、语法树
未完待续。。。
结语
最后，给个 star 吧~