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

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

相关文章

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

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

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

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

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

IDEA中Git版本回退的两种实现方案

《IDEA中Git版本回退的两种实现方案》作为开发者,代码版本回退是日常高频操作,IntelliJIDEA集成了强大的Git工具链,但面对reset和revert两种核心回退方案,许多开发者仍存在选择... 目录一、版本回退前置知识二、Reset方案:整体改写历史1、IDEA图形化操作(推荐)1.1、查看提

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数,你可以定义好线程数规则,生成线程数去跑代码说明:1.虚拟线程池:使用 Executors.newVir

MySQL中闪回功能的方案讨论及实现

《MySQL中闪回功能的方案讨论及实现》Oracle有一个闪回(flashback)功能,能够用户恢复误操作的数据,这篇文章主要来和大家讨论一下MySQL中支持闪回功能的方案,有需要的可以了解下... 目录1、 闪回的目标2、 无米无炊一3、 无米无炊二4、 演示5、小结oracle有一个闪回(flashb

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图