qq_47876165的博客

Low-code低代码开发平台低代码开发平台（LCDP）是无需编码（0代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法（参考可视编程语言），使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。主要技术栈是Vue3+Typescript，使用了scene-UI组件库中的15个基础组件、3个场景组件。主要实现了：1）组件的可视化以及可编辑化2）改变全局属性：撤销、重做、导入、导出、预览、清空、复制、剪切、粘贴等等3）改

目录预期的结果组件区预览编辑区预览预览区预览​属性区预览总体预览预期的结果组件区预览编辑区预览预览区预览属性区预览总体预览到这里，我们的低代码平台就已经实现的差不多，可能有一些遗漏的地方，但是我们通过测试，暂时还没有发现相应的问题。...

目录大体介绍具体思路代码实现大体介绍撤销：当移动或者引入组件发生错误的时候能够实现回溯的效果。重做：当撤销的操作发生错误的时候能过实现撤销“撤销”的效果在这一篇文章中我们就是打算实现这个功能，我打算用一个容器来存储所有已经进行的操作，我们通过对这个栈的压栈等操作来实现撤销和重做的功能。具体思路这一部分可能比较难以理解，就是我每次进行一次操作，就给这个操作进行一次命名，并将这一次操作压入栈中，并且给这个栈添加一个指针，在没有进行撤销和重做操作的时候，指针一直指向栈低的元

大体介绍在进行组件移动的同时，可能会出现组件移动出错或者是更改组件的zIndex层的问题，只靠预览区已经没有办法进行实现了，所以我们引入了编辑区，这样的话，我们就可以实现重做、撤销、导入、导出、清空、删除等一系列的功能。具体思路我起初打算是在编辑区添加一系列的按钮来实现对组件的所有控制操作，添加的功能按钮主要包括撤销：当移动或者引入组件发生错误的时候能够实现回溯的效果。重做：当撤销的操作发生错误的时候能过实现撤销“撤销”的效果导出：最终引入的组件包括它的位置、样式等通过json数据的

目录大体介绍具体思路修改useBlockDragger.js函数修改主函数对useBlockDragger.js函数的引用预期结果大体介绍在上一篇文章中，我们实现了预览区组件的拖拽渲染的功能，在一篇文章中，我们将实现在组件拖拽的过程中形成辅助线的功能。（让组件更容易上下左右对齐的功能）。具体思路我们想要实现的辅助线，就是在一个组件靠近另一个组件的水平或竖直的顶、中、底的时候可以触发，形成一组水平或者是竖直的辅助线。我们在上一篇博客中所写的useBlockDragger

大体介绍在上一篇文章中，我们实现了预览区中组件获取焦点的功能。那么这一篇文章我们将着重介绍一下在预览区中利用拖拽将获取焦点的组件进行移动，从而达到渲染的功能。具体思路我们可以写一个js函数，接收focusData（获取焦点组件的属性），传入之后，我们可以写两个鼠标监听事件，在鼠标点击（mousedown）事件发生后触发两个鼠标监听事件，一个是鼠标移动事件（mousemove），另外一个是是鼠标松开事件（drop）。在鼠标移动事件中，我们可以通过获取鼠标移动的坐标，给传来的focusData的部分

大体介绍在上一篇文章中，我们实现了预览区中的组件的展示功能，接下来我们打算实现组件的获取焦点的功能，为之后预览区组件的拖拽功能做伏笔。

大体介绍在上一篇文章中，我们实现了组件区的拖拽功能。所以，在这篇文章中，我们要实现在组件区将组件拖拽到预览区，鼠标松开之后，组件可以在预览区进行相应的渲染，即可以让组件在预览区可以展现出来。创建一个组件来实现画布中组件的渲染新建一个editor-block.jsx 文件：// 画布中组件的渲染import {computed, defineComponent, inject, onMounted, onUpdated, ref} from "vue";export default d

大体介绍我们要实现在组件区点击选中一个想要的组件，并拖动到预览区来进行渲染，松开鼠标就可以完成组件的位置的确定和渲染。设置计算属性，实现与data.json中数据的双向绑定在editor.jsx文件中// 设置计算属性，以便于实现数据的双向绑定 const data = computed({ get() { return props.modelValue }, set(n

目录大致介绍创建组件区和预览区的对应关系将registerConfig的内容传出，让子组件都可以拿到在组件区将拿到的config进行渲染给组件区渲染的内容添加样式运行后的结果：大致介绍要实现在组件区拿到想要的组件，放到预览区进行展示。可以利用一个组件的映射关系，通过key来实现组件区和预览区的对应关系。在通过渲染函数进行渲染即可。创建组件区和预览区的对应关系因为我们项目的组件库还没有搭建完成，所以现在还不能利用，所以，我们现在先引入element-plus作为我们

在引入editor组件之后，我们就可以在editor.jsx中进行页面的渲染。划分主要的区域eidtor.jsxsetup(props) { return() => { <div class="editor-left">组件区</div> <div class="editor-top">编辑区</div> <div class="editor-right">属性区</

目录为什么要搭建低代码平台？低代码平台的组成和预期结果项目初始化搭建创建data.json文件创建搭建主界面的大体样式创建一个editor.jsx用来渲染主页面在 App.vue 中引入 data.json在 App.vue 中引入 Editor组件editor.jsx接收传过来的参数我们项目实训的题目是 “开发组件库并实现低代码平台的搭建”，我们小组主要有三个人组成，我负责的部分主要是代码平台的搭建模块。为什么要搭建低代码平台？低代码开发平台（LCDP）