2024年前端提效项目盘点之：低代码拖拽生成页面（架构设计篇）

前言

因为之前公司内部业务及提效的需要，做了一系列低代码的项目：分别有vscode插件、figma设计稿转代码插件、脚手架，拖拽生成h5营销页面和问卷等。现在把这一些系列实践的经验自我总结一下，形成一个低代码专栏。每个项目都分为思路架构设计和实践各两篇文章。当前是整个专栏的其中一个项目：拖拽生成h5页面（架构设计篇）

1. 起因

为了满足公司运营及提效需要，搭建了一套供运营人员的使用的低代码平台。

2. 低代码调研

为什么不用现成的方案？因为有定制化组件的需求。

3. 技术选型

经过调研，结合本公司的技术栈，决定了本项目采用vue3去实现，原因在于vue3技术栈的数据通信方案比较灵活，如果使用react,usestate和setstate的用法实在繁琐难用，而vue3的天然的数据双向绑定，在我们后续的物料数据操控中十分便捷和容易维护。

4. 架构设计方案

4.1 整体思路

整体的低代码平台的操作用一句话说就是：操作数据或者操作json schema。 现代前端做的主要的工作其实也就是操作数据。 这里我们用一个图来表达低代码平台实现的基本思路：

我们拖拽生成页面的实现按上图的架构也是分为两步走：

1. 实现页面的编辑器：通过拖拽配置不同的物料组件去生成schema json数据
2. json数据生成真实页面：把拖拽生成的schema json数据去生成真实页面并发布到线上

4.2 页面拖拽编辑器的实现

为了实现这样一个界面，我们应当怎么样去操作物料和设计数据的流动呢？

4.2.1 布局

定义一个编辑器的操作界面