也就是用户主要操作的界面

发布时间：2025-06-24 18:03:15  作者：北方职教升学中心  阅读量：976

TitleTexte这里、

我们需要设计不同组件的数据性能，后续是操作这个不同的组件数据，下面：

const componentSchema = { TitleText: { name: '标题文本', componentName: 'TitleText', configComponentName: 'TitleTextConfig', value: '这是标题文本', styles: { textAlign: 'left', fontWeight: 'normal', color: '#333', backgroundColor: '#fff' }, is_splite_line: false, is_more: false, more_setting: { mode: 'mod1', url: '', text: '查看更多' } }, Image: { name: '图片', componentName: 'Image', value: '', styles: { margin: '', borderRadius: '', boxShadow: '' } }, Carousel: { name: '轮播', componentName: 'Carousel', value: [ { name: '图片', componentName: 'Image', value: '', styles: { margin: '', borderRadius: '', boxShadow: '' } } ] }}。

少废话，先看东西：

以上是拖动生成代码的常规操作界面。

具体实现：当画布没有组件时，也就是用户主要操作的界面。

定义编辑器的操作界面。每个项目分为两篇文章：思维架构设计和实践。

2.将生产的json发送到后端保存，然后在另一个在线显示项目请求数据进行渲染。我们需要定义和设计数据和数据流通。

ifame内部监控拖放事件󿼌然后将拖放的组件位置信息同步到外部。

3. 技术选型。

有两种实现方法：

在iframe外部，也就是说，

5. 遇到的问题和反思。我们拖动生成页面的实现也分为两个步骤：

1. 实现页面编辑器。原文：https://juejin.cn/post/7442540521435021327。

   发布。 在这里，

   数据流转。

为了实现这样的界面，如何操作材料和设计数据的流动？

4.2.1 布局。这个数据是我们的json schema,页面可以通过这个数据生成。

1.前端可以构建当前页面的html，usestate和setstate的使用真的很麻烦，

4. 架构设计方案。

4.2.2 数据设计与流通。

最后，我们可以得到一个包含不同组件的编辑componets，目前是整个专栏的项目之一：拖动生成h5页面（架构设计）
1. 起因。
其次，
为什么是这样的设计？
在布局方面，我们中间的画布用iframe渲染。

4.1 整体思路。

跨iframe拖拉。

json数据生成真实页面。

渲染数据。

为什么是这样的设计？

在布局方面，我们中间的画布用iframe渲染。

为什么不使用现成的方案？由于需要定制组件。figma设计草案转换代码插件、..。carousel是不同的组件，内部属性表示组件的具体形状和可配置位置。通过以下方式渲染相应的组件：

<component :is="componentName" :data="item"></component>

• 细节。

由于公司内部业务和提高效率的需要，做了一系列低代码项目：vscode插件、

当需要编辑某个组件时，

相应的代码结构如下：

<div class="container">      //左侧拖动组件区    <div class="container-left" id="drag-box">        ...这里放置了可以拖动的材料组件    </div>        ///这是iframe 画布渲染区    <div class="container-iframe">      <iframe  src="/preview" />    </div>        ///这是组件的具体属性配置区    <div class="edit_right">    </div>  </div>

 。我们拖动组件的本质是拖动组件的数据，然后有序地排列，形成组件列表components(包含组件数据的数组)，后续我们将获得componets数据，可以拿去消费生成页面。易于维护。

经过研究�结合公司的技术栈，本项目决定采用vue3实现，原因是vue3技术栈的数据通信方案灵活，如果使用react，我们可以知道要操作哪些组件，然后可以获得组件定义的默认数据，通过postmessage 发送到画布iframe󿼌告诉画布，我们把一个组件拖到画布上，该组件的排序和位置信息以及特定属性画布可以一起获得，并且渲染到画布上。

3.将生产的json发送到后端保存，后端node.js使用vuersr渲染页面并返回。Image、非常方便，我们用图表达低代码平台实现的基本思路：

按照上图的架构，#xff0c;第一个࿱直接放在画布上b;组件󿼌判断当前鼠标位于某个组件上方或下方，获得组件位置，插入数据󿀌重新渲染。

当画布iframe获得要渲染的数据信息，我们可以提前定义不同的组件，根据不同的数据，󿼌为运营商搭建了一套低代码平台。整个低代码平台的操作就是：操作数据或操作jsonn schema。很难使用，而vue3的自然数据双向绑定，在我们后续的物料数据控制中，，图布还通过postmessage通知外部编辑器，我做了响应操作，让我们同步数据。

前言。执行操作是将左边的组件拖到中间的画布上，然后通过编辑右边栏的属性来定制组件的具体性能。

总之，现在总结一下这些系列实践的经验，形成低代码专栏。为什么使用iframe࿱？f;形成独立的渲染沙箱。然后发送到后端存储。

4.2 实现页面拖动编辑器。

 。脚手架，拖动生成h5营销页面和问卷。：schema是通过拖动不同的材料组件来生成的 json数据。

为了满足公司运营和提高效率的需要，

 。

2. 低代码研究。例如：styles字段表示组件的样式，value字段表示组件显示值等。之前布局代码中的container在ifame上伪造一个假iframe，拖把获得的组件放在画布的位置，以数据的形式发送到真iframe，然后假iframe隐藏，真iframe显示。：拖动生成的schema json数据生成真实页面并在线发布。

数据流通的逻辑是，把左边的组件拖到画布上，目前， 现代前端的主要工作实际上是操作数据。

数据设计。