沉淀了一套可视化搭建方案,最终决定开源了

2024-06-03 10:04

本文主要是介绍沉淀了一套可视化搭建方案,最终决定开源了,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

hello,大家好,我是徐小夕。之前和大家分享了很多可视化零代码前端工程化的最佳实践,最近也在迭代可视化文档知识引擎Nocode/WEP,其中包含了搭建模块,由于最近精力有限,会聚焦于文档引擎部分,所以目前把搭建模块完全开源, 大家如果想学习研究低代码可视化的,可以参考一下这个上项目。

010ee974b38b26881307721e9cd09d1f.gif
6201.gif

往期精彩

  • 零代码+AI的阶段性复盘

  • 文档引擎+AI可视化打造下一代文档编辑器

  • 爆肝1000小时, Dooring零代码搭建平台3.5正式上线

  • 从零打造一款基于Nextjs+antd5.0的中后台管理系统

你将收获

  • 可视化零代码的产品原型设计

  • 可视化搭建项目的技术栈和技术实现

开源地址:https://github.com/MrXujiang/Nocode-Wep

正文

花了接近一周来设计产品原型,这里和大家详细分享一下可视化搭建平台的原型设计思路。

9130bf4170fec58fb7192faed19e43ac.png
image.png

1.可视化编辑器

聊到可视化搭建,必然少不了可视化编辑器。我们最终的目的是将日常页面的开发通过拖拽搭建的模式来设计出来,其中往往也包含很多复杂的业务和交互逻辑,比如:

  • 事件交互(点击,hover等)

  • 动画(不同元素能配置不同的动画效果)

  • 数据逻辑(根据不同的参数获取业务数据,回显到组件)

  • 组件间通信

只有满足以上的能力,我们设计的搭建平台才能更通用,满足更深的用户场景。当前我之前对上述的能力也写了很多技术分享,大家可以参考我往期的内容。

38eae692158b707102901cc79f2f3e0b.png
image.png

我基于对低代码平台的大量实践和研究,最终设计了一套可形成业务闭环的搭建平台产品架构,大家可以在上图看到, 整个编辑器分为4部分:

  • 组件物料区

  • 画布控件区

  • 搭建画布

  • 属性配置区

属性配置区为了满足上述我说的业务交互能力,我设计了4个分类:

  • 基础样式区

  • 动画区

  • 交互区

  • 数据区

下面我会介绍几个重点设计模块。

动画区
e24b7c933c2e83291dc8d07fff71059b.png
image.png

上面是我画的动画配置面板的原型,我们可以选择动画效果动画时长次数延迟时间,通过这些配置我们可以做出比较强大自由的动画效果,比如我们常见的电子相册动画等。

交互配置面板
218e48e25ba1f6399723479099a52cfd.png
image.png

在我的设计里,交互可以支持多种类型,比如基础的样式动画交互,事件交互,同时支持多个事件链路:

09067995892640d34157c9c9877db083.png
image.png

我们可以配置的交互如下:

  • 跳转链接

  • 打开弹窗

  • 发送请求

  • 组件显示隐藏

  • 自定义代码

具体的设计如下:

  1. 打开弹窗

1b5abd04fb8a9ca6bd027822ccc9e146.png
image.png
  1. 发送请求

43466b152e0fc33c667f9f23917e7057.png
image.png

我们可以配置请求的方法和参数,以及请求成功或者失败的自定义交互。

  1. 组件显示隐藏

29e9e7b22aeeaf120c94efee786adc3a.png
image.png
  1. 自定义代码

641c155c53af51c8881c55df8eb5735b.png
image.png

当然这块具体实现可以参考H5-Dooring零代码平台的自定义代码部分,如下:

c11e664bcd3a41ae14db6c8dd5ff6dc9.png
image.png
数据配置面板
a9e30bcfad627483d173bf67404f5add.png
image.png

数据配置是低代码比较复杂的部分,基于我自己对可视化的理解,设计了一套相对来说低成本且能满足数据配置的方案,大家可以参考一下,也可以直接应用到自己的搭建平台中。

技术方案

技术实现起来其实相对复杂,需要调研如下几部分能力:

  • 拖拽搭建方案

  • 组件动态加载方案

  • 数据规范设计(Schema)

  • 页面渲染机制

  • 搭建平台插件化设计

当然不同企业考虑的重心也不太一样,大家可以针对性的研究,我之前在趣谈前端中也分享了很多技术实现方案,大家感兴趣也可以参考一下。

目前我已经把可视化搭建模块开源了,目前完成度70-80%, 大家只需要把流程串起来就可以投入使用,接下来给大家演示一下实现的部分:

782c3db49bfae657361702a7f469b54f.png
image.png

开源地址:https://github.com/MrXujiang/Nocode-Wep

作为技术人,分享价值很重要,欢迎大家 star + 共建。如果你有好的建议,欢迎在留言区分享交流~

1dff5e4a195b2c318485fa044812bb0a.png

往期精彩

  • 零代码+AI的阶段性复盘

  • 文档引擎+AI可视化打造下一代文档编辑器

  • 爆肝1000小时, Dooring零代码搭建平台3.5正式上线

  • 从零打造一款基于Nextjs+antd5.0的中后台管理系统

这篇关于沉淀了一套可视化搭建方案,最终决定开源了的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1026674

相关文章

Java Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言:为什么要自建知识博客一、技术选型:极简主义开发栈二、系统架构设计三、核心代码实现(分步解析

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

基于Python打造一个可视化FTP服务器

《基于Python打造一个可视化FTP服务器》在日常办公和团队协作中,文件共享是一个不可或缺的需求,所以本文将使用Python+Tkinter+pyftpdlib开发一款可视化FTP服务器,有需要的小... 目录1. 概述2. 功能介绍3. 如何使用4. 代码解析5. 运行效果6.相关源码7. 总结与展望1

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题:应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案:提前预热各种资源1. Flowable

详解C++中类的大小决定因数

《详解C++中类的大小决定因数》类的大小受多个因素影响,主要包括成员变量、对齐方式、继承关系、虚函数表等,下面就来介绍一下,具有一定的参考价值,感兴趣的可以了解一下... 目录1. 非静态数据成员示例:2. 数据对齐(Padding)示例:3. 虚函数(vtable 指针)示例:4. 继承普通继承虚继承5.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip