可视化零代码搭建平台产品技术实践（下）-CSDN博客

本文链接：https://blog.csdn.net/KlausLily/article/details/147787231

hi, 大家好, 我是徐小夕.

上周和大家分享了我的《架构师精选》专栏的第四期实战内容——可视化零代码搭建平台产品技术实践，并上线了演示版本供大家体验：

地址：http://nocode.turntip.cn

上一篇内容主要是介绍可视化搭建平台的产品设计架构和功能点设计，这篇文章继续和大家分享一下可视化搭建平台的技术实现。

我会从以下几个部分和大家详细剖析可视化搭建平台的技术实现方案，帮助大家快速掌握从零实现可视化搭建平台的核心要点。

同时加入《架构师精选》专栏的小伙伴，我会在群里和大家分享本文介绍的可视化搭建平台的源码，供大家学习参考。

《架构师精选》专栏前3期的内容如下：

我会花半年时间，在《架构师精选》专栏中和大家分享市面上主流解决的方案的技术实现，以及AI应用的研发实践，同时会在专栏中分享我近8年在中大厂做架构的经验，让更多热爱技术的小伙伴更快更高效的提升。

话不多说，我们进入今天的技术分享。

1. 可视化搭建平台的技术架构设计

从整个低代码平台的完整架构设计上（前端 + 后端 + 运维的角度），可以抽象成如上图所示的系统架构设计模型。

其次可视化搭建平台比较关心的另2个话题是性能和系统安全，这里我也简单和大家分享一下。

性能上我们可以从如下几个方面来提升：

差分更新
- 仅渲染变更部分（Virtual DOM优化）
缓存机制
- 页面快照CDN缓存（边缘节点加速）
Web Worker
- 复杂计算任务卸载（如布局计算）
安全性上，我们可以考虑如下几个方面：
1. 沙箱机制
- 动态组件在iframe内运行
- 使用Shadow DOM隔离样式
XSS防护
- 输入内容DOMPurify过滤
权限校验
- JWT Token + 接口级ACL控制
上面的架构设计，我在以往的工作经验中，已在多个中大型低代码/零代码平台验证，日均支撑10万+页面生成，组件加载性能<300ms，支持横向扩展至百万级组件库。

当然我们这篇文章的核心在可视化编辑器的设计上，所以会重点介绍编辑器设计部分，下面是我基于大量可视化低代码的架构设计经验，抽象出的一个比较容易理解的编辑器架构：

大家可以参考一下，这将对低代码可视化平台的设计非常有帮助。

我之前在设计零代码平台H5-Dooring时，就是采用的我设计的这个架构实现的，所以说它是经过了实践检验的。

2. 可视化搭建平台的技术选型（Vue & React）

目前国内软件公司主要是用的前端技术框架是Vue和React，所以我会和大家分享一下基于这两个框架实现的成熟开源或者半开源的方案，大家可以参考借鉴一下。

从完整低代码平台的角度，在Vue生态下的解决方案有：