一种可视化无代码或轻代码云开发方法及系统与流程

1.本技术涉及软件管理技术和软件管理系统领域，具体而言，涉及一种可视化无代码或轻代码云开发方法及系统。


背景技术：

2.在做中小企业软件服务过程中，发现无法用标准化软件解决大部分的需求，应对中小企业客户需求，软件公司的研发投入往往高于客户的预算，软件公司的开发速度也无法应对开发需求的变化，导致软件公司很难盈利，中小企业很难找到合适的数字化解决方案，需要有一个开发成本低，开发速度快，而且能轻松应对复杂需求迭代的系统解决这些问题。
3.目前，大部分的无代码/轻代码平台能实现一些简单的应用，比如企业内部流程化管理，较难实现一些复杂应用，且大多不能生成可供二次开发的原生代码，大多没有实现跨端，操作上比较难上手。


技术实现要素：

4.本技术的目的在于提供一种可视化无代码或轻代码云开发方法，其能够根据需求开发出各类应用，出错率极低，不会出现代码级的错误。
5.本技术的另一目的在于提供一种可视化无代码或轻代码云开发系统，其能够运行一种可视化无代码或轻代码云开发方法。
6.本技术的实施例是这样实现的：
7.第一方面，本技术实施例提供一种可视化无代码或轻代码云开发方法，其包括将数据、ui界面、后台运算、接口抽象成节点，每个节点有自身的属性，每个节点按其功能接受不同的子节点，每个节点设置运行的终端环境，从而完成节点的开发；通过设置数据表字段的对应的关系建立数据存储表，开发者通过可视化数据表关系树图选择相关的数据表，系统通过分析数据表每个字段的关系，以及开发者选择的相关数据表，需要的数据字段，生成满足各类开发需求的后端源码，实现对数据处理；当节点之间数据传递时碰到数据结构基本一样、数据字段名称不一致和/或数据结构较为复杂的情况，设置数据映射关系，自动对接所有数据节点；在任意位置勾画出ui组件显示的位置、大小、然后通过拖拽调整位置、大小，支持插槽的组件，在组件内部插槽绘制子组件，通过拖拽操作设置ui组件之间的上下级、相对位置，从而完成可视化开发；系统以树形结构方式保存所有设置，通过针对各类源码开发的解析生成器和云端存储的节点源码，生成可运行、可二次开发的前后端源码以及数据库，系统根据业务场景运行环境需要增加不同语言源码解析生成器，从而满足应用跨端需求。
8.在本技术的一些实施例中，上述将数据、ui界面、后台运算、接口抽象成节点，每个节点有自身的属性，每个节点按其功能接受不同的子节点，每个节点设置运行的终端环境，从而完成节点的开发包括：各个节点通过数据驱动，所有节点的关系通过树形结构显示，系
统将各个节点的关系在系统画布绘制ui界面，通过逻辑树设置ui界面之间，以及与数据处理、后台运算的关系，根据实际应用场景开发各类应用。
9.在本技术的一些实施例中，上述通过设置数据表字段的对应的关系建立数据存储表，开发者通过可视化数据表关系树图选择相关的数据表，系统通过分析数据表每个字段的关系，以及开发者选择的相关数据表，需要的数据字段，生成满足各类开发需求的后端源码，实现对数据处理包括：版本迭代的过程中，更新数据表字段后，系统生成升级数据库的sql语句，进行线上版本升级；系统通过自动化测试能检测出所有受影响的节点，当所有问题修复后，则通过检测。
10.在本技术的一些实施例中，上述当节点之间数据传递时碰到数据结构基本一样、数据字段名称不一致和/或数据结构较为复杂的情况，设置数据映射关系，自动对接所有数据节点包括：当数据的数据源是一致的，则将所有调用该数据的节点设置映射关系，当数据源发生变化时，所有映射节点自动同步更新。
11.在本技术的一些实施例中，上述在任意位置勾画出ui组件显示的位置、大小、然后通过拖拽调整位置、大小，支持插槽的组件，在组件内部插槽绘制子组件，通过拖拽操作设置ui组件之间的上下级、相对位置，从而完成可视化开发包括：系统通过算法横竖交替切割成区块再对区块做横竖切割，直到无法切割为止，若有重叠组件，将重叠组件视为一个完整区域进行分割，然后根据组件相对于切割线的位置，将所有区块以及组件转换成可供各个平台运行的前端代码。
12.在本技术的一些实施例中，上述系统以树形结构方式保存所有设置，通过针对各类源码开发的解析生成器和云端存储的节点源码，生成可运行、可二次开发的前后端源码以及数据库，系统根据业务场景运行环境需要增加不同语言源码解析生成器，从而满足应用跨端需求包括：数据处理、ui界面、后台运算封装成节点后存储在云端，每个节点都有版本管理发布到应用，节点升级后各个系统根据实际需要做对应的同步升级。
13.在本技术的一些实施例中，上述还包括：系统通过分析所有节点设置，一键检测出系统存在的问题，某些节点版本更新后，设置需要调整问题，开发人员点击问题定位到问题的节点，根据指引解决问题。
14.第二方面，本技术实施例提供一种可视化无代码或轻代码云开发系统，其包括节点开发模块，用于将数据、ui界面、后台运算、接口抽象成节点，每个节点有自身的属性，每个节点按其功能接受不同的子节点，每个节点设置运行的终端环境，从而完成节点的开发；
15.数据处理模块，用于通过设置数据表字段的对应的关系建立数据存储表，开发者通过可视化数据表关系树图选择相关的数据表，系统通过分析数据表每个字段的关系，以及开发者选择的相关数据表，需要的数据字段，生成满足各类开发需求的后端源码，实现对数据处理；
16.数据映射模块，用于当节点之间数据传递时碰到数据结构基本一样、数据字段名称不一致和/或数据结构较为复杂的情况，设置数据映射关系，自动对接所有数据节点；
17.可视化开发模块，用于在任意位置勾画出ui组件显示的位置、大小、然后通过拖拽调整位置、大小，支持插槽的组件，在组件内部插槽绘制子组件，通过拖拽操作设置ui组件之间的上下级、相对位置，从而完成可视化开发；
18.源码编译模块，用于系统以树形结构方式保存所有设置，通过针对各类源码开发
的解析生成器和云端存储的节点源码，生成可运行、可二次开发的前后端源码以及数据库，系统根据业务场景运行环境需要增加不同语言源码解析生成器，从而满足应用跨端需求；
19.权限控制模块，用于当任意节点需要权限时，系统会生成树结构的权限数据，通过编译源码引擎生成配置文件，并生成可供应用调用的相关源码，支持应用实现角色管理，每个角色设置不同的权限节点，对用户设置不同角色。
20.在本技术的一些实施例中，上述包括：用于存储计算机指令的至少一个存储器；与上述存储器通讯的至少一个处理器，其中当上述至少一个处理器执行上述计算机指令时，上述至少一个处理器使上述系统执行：节点开发模块、数据处理模块、数据映射模块、可视化开发模块及源码编译模块。
21.第三方面，本技术实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如一种可视化无代码或轻代码云开发方法中任一项的方法。
22.相对于现有技术，本技术的实施例至少具有如下优点或有益效果：
23.可极大提高开发效率，对参与系统的开发人员只要掌握了基本的操作原理，即可根据需求开发出各类应用，出错率极低，不会出现代码级的错误，面对复杂应用场景时，更能体现出系统的优势，对开发人员专业性的要求不高，经过短期培训即可参与开发。
附图说明
24.为了更清楚地说明本技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
25.图1为本技术实施例提供的一种可视化无代码或轻代码云开发方法步骤示意图；
26.图2为本技术实施例提供的一种可视化无代码或轻代码云开发方法详细步骤示意图；
27.图3为本技术实施例提供的一种可视化无代码或轻代码云开发系统模块示意图；
28.图4为本技术实施例提供的一种电子设备；
29.图5为本技术实施例提供的复制跨页面示意图；
30.图6为本技术实施例提供的相关表示意图；
31.图7为本技术实施例提供的分割示意图；
32.图标：10-节点开发模块；20-数据处理模块；30-数据映射模块；40-可视化开发模块；50-源码编译模块；60-权限控制模块；101-存储器；102-处理器；103-通信接口。
具体实施方式
33.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本技术实施例的组件可以以各种不同的配置来布置和设计。
34.因此，以下对在附图中提供的本技术的实施例的详细描述并非旨在限制要求保护
的本技术的范围，而是仅仅表示本技术的选定实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
35.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
36.需要说明的是，术语“包括”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
37.下面结合附图，对本技术的一些实施方式作详细说明。在不冲突的情况下，下述的各个实施例及实施例中的各个特征可以相互组合。
38.实施例1
39.请参阅图1，图1为本技术实施例提供的一种可视化无代码或轻代码云开发方法步骤示意图，其如下所示：
40.1.节点开发；
41.将数据，ui界面，后台运算，接口等抽象成节点，每个节点有自身的属性，每个节点按其功能接受不同的子节点，每个节点可设置运行的终端环境，比如微信小程序，ios，安卓等。
42.例如：函数的属性有需要的参数，返回结果。前端展示组件的属性有尺寸，位置信息，组件需要的参数(颜色、只读等)，可供外部调用的方法(提交、显示等)，组件事件回调(点击、关闭等)，组件插槽。插槽节点支持添加子组件等。
43.各个节点通过数据驱动，所有节点的关系通过树形结构显示，系统将各个节点的关系，在系统画布绘制ui界面，通过逻辑树设置ui界面之间，以及与数据处理，后台运算的关系，根据实际应用场景，开发各类应用。
44.2.数据处理；
45.通过设置数据表字段的一对一，一对多的关系，建立数据存储表，开发者通过可视化数据表关系树图选择相关的数据表，系统通过分析数据表每个字段的关系，以及开发者选择的相关数据表，需要的数据字段，生成满足各类开发需求的后端源码，实现对相关数据做增加、删除、修改、查询处理。版本迭代的过程中，更新数据表字段后，系统可生成升级数据库的sql语句，可进行线上版本升级。数据表更新后会影响一些节点的设置，系统通过自动化测试能检测出所有受影响的节点，所有问题修复后，才能通过检测。
46.3.数据映射；
47.节点之间数据传递时经常碰到数据结构基本一样，数据字段名称不一致，尤其多维数组，数据结构较为复杂的情况，传统开发需要很多编码去实现，并且容易出错，本系统通过设置数据映射关系，系统能自动对接所有数据节点。比如数据的字段a对应属性的b字段，当数据向属性传递数据时,属性就能读取数据对应的值，数据映射也支持多维数组，理论上可以对接的数据，结构是大致相同的。
48.有些数据的数据源是一致的，可以将所有调用该数据的节点设置映射关系，例如
列表组件在设置list属性后，遍历的对象item的数据实际为数据源数组的对象。例如数组:[{a:1}],当列表组件l ist属性绑定数组时，列表组件循环遍历的属性item，的数据应为{a:1}，这是为了便于数据源发生变化时，所有映射节点会自动同步更新。
[0049]
4.可视化开发；
[0050]
可以在任意位置勾画出ui组件显示的位置、大小、然后通过拖拽调整位置、大小，支持插槽的组件，可以在组件内部插槽绘制子组件，通过简单的拖拽操作设置ui组件之间的上下级、相对位置，无须设置复杂的css位置样式。
[0051]
系统通过算法横竖交替切割成区块，再对区块做横竖切割，直到无法切割为止，如果有重叠组件，将重叠组件视为一个完整区域进行分割，然后根据组件相对于切割线的位置，将所有区块以及组件转换成可供各个平台运行的前端代码。
[0052]
5.自动化测试；
[0053]
系统已避免传统开发可能会产生的大部分错误，在设置的过程中也会产生一些设置上的问题，系统通过分析所有节点设置，可以一键检测出系统存在的问题，比如数据不匹配，某些节点版本更新后，设置需要调整等问题，开发人员点击问题即可定位到问题的节点，根据指引解决问题。
[0054]
6.源码编译；
[0055]
系统以树形结构方式保存所有设置，系统通过针对各类源码开发的解析生成器和云端存储的节点源码，生成可运行、可二次开发的前后端源码，以及数据库，前后端源码包含vue、php、java、微信小程序、html、css、javascript等，系统根据业务场景运行环境需要增加不同语言源码解析生成器，从而满足应用跨端需求，实现ios、安卓、h5、pc端、微信/百度/支付宝/抖音等小程序一次开发，在全部终端同步发布应用。
[0056]
数据处理，ui界面，后台运算封装成节点后存储在云端，每个节点都有版本管理发布到应用，节点升级后各个系统可根据实际需要做对应的同步升级。
[0057]
7.开放平台；
[0058]
平台开放给相关节点的专业技术开发人员，通过本系统，提高开发使用率，降低开发成本，提升节点的专业度及覆盖面。
[0059]
实施例2
[0060]
请参阅图2、图5、图6及图7，图2为本技术实施例提供的一种可视化无代码或轻代码云开发方法详细步骤示意图，其如下所示：
[0061]
s200，将数据、ui界面、后台运算、接口抽象成节点，每个节点有自身的属性，每个节点按其功能接受不同的子节点，每个节点设置运行的终端环境，从而完成节点的开发；
[0062]
s210，通过设置数据表字段的对应的关系建立数据存储表，开发者通过可视化数据表关系树图选择相关的数据表，系统通过分析数据表每个字段的关系，以及开发者选择的相关数据表，需要的数据字段，生成满足各类开发需求的后端源码，实现对数据处理；
[0063]
s220，当节点之间数据传递时碰到数据结构基本一样、数据字段名称不一致和/或数据结构较为复杂的情况，设置数据映射关系，自动对接所有数据节点；
[0064]
s230，在任意位置勾画出ui组件显示的位置、大小、然后通过拖拽调整位置、大小，支持插槽的组件，在组件内部插槽绘制子组件，通过拖拽操作设置ui组件之间的上下级、相对位置，从而完成可视化开发；
[0065]
s240，系统以树形结构方式保存所有设置，通过针对各类源码开发的解析生成器和云端存储的节点源码，生成可运行、可二次开发的前后端源码以及数据库，系统根据业务场景运行环境需要增加不同语言源码解析生成器，从而满足应用跨端需求。
[0066]
在一些实施方式中，节点开发的优势是传统开发需要阅读大量的代码来理清代码逻辑，而且极易出错，很多代码级错误需要资深程序员或者测试人员分析很久才能发现，可以参照图5.
[0067]
本系统是通过分析开发人员的设置意图再去生成源码实现功能，不但系统能分析出很多潜在问题，开发人员也可以一目了然的知道项目流程，便于迅速解决问题。
[0068]
传统开发中如果要复制代码，往往前后端代码是分开的，如果前后端代码的数据对不上，会增加很多工作量，而本系统的节点开发可以通过简单的复制粘贴把前后端功能全部搬运过来，不会出错。
[0069]
可以参照图6，大量的开发工作都在做数据处理，本系统可以实现数据处理无代码开发，不需要写sql，只需要设置字段跟其他表字段的一对一、一对多关系即可，在实际调用数据时只需要选择相关表，需要进行的数据操作类型，包含添加、修改、删除、查询单个、查询列表等，例如下图，商品id一对多关联商品规格:商品id，一对多关联商品库存价格:商品id，一对一商品详情:商品id，如果需要查询单个商品的，系统会根据字段关系生成源码查询出需要的数据。
[0070]
通过分析出数据关系，可以实现其他的数据处理，保存，删除，查询列表等。
[0071]
大量的前端开发工作在于编写positon,width,height,top,left,margin,padding等代码，工作效率低下，传统开发先要由前端人员进行切图后，即把图片变成大量前端代码，html+css后才能运行。本系统通过横竖切割算法，可零代码实现所有的前端布局需求，毫秒级实现一个前端人员可能需要几天才能完成的大量开发维护工作。
[0072]
可以参照图7，具体实现方法是，先检索所有插槽，对插槽进行竖向扫描，如果有缝隙就进行分割，如果无法分割就切换到横向分割，直到无法分割为止。例如图7：竖向分割时ac为一个区块，bd为一个区块，红色代表分割线，分割线的位置在ab距离，cd距离最小的距离中间，如果cd为最小距离，那么分割线就位于cd的中间，然后再对ac区域做横向分割，bd区域做横向分割，然后生成代码，如果ac本身是重叠的就把ac视为一个组件进行分割。如果a中有子插槽，再对a的插槽做同样处理。
[0073]
实施例3
[0074]
请参阅图3，图3为本技术实施例提供的一种可视化无代码或轻代码云开发系统模块示意图，其如下所示：
[0075]
节点开发模块10，用于将数据、ui界面、后台运算、接口抽象成节点，每个节点有自身的属性，每个节点按其功能接受不同的子节点，每个节点设置运行的终端环境，从而完成节点的开发；
[0076]
数据处理模块20，用于通过设置数据表字段的对应的关系建立数据存储表，开发者通过可视化数据表关系树图选择相关的数据表，系统通过分析数据表每个字段的关系，以及开发者选择的相关数据表，需要的数据字段，生成满足各类开发需求的后端源码，实现对数据处理；
[0077]
数据映射模块30，用于当节点之间数据传递时碰到数据结构基本一样、数据字段
名称不一致和/或数据结构较为复杂的情况，设置数据映射关系，自动对接所有数据节点；
[0078]
可视化开发模块40，用于在任意位置勾画出ui组件显示的位置、大小、然后通过拖拽调整位置、大小，支持插槽的组件，在组件内部插槽绘制子组件，通过拖拽操作设置ui组件之间的上下级、相对位置，从而完成可视化开发；
[0079]
源码编译模块50，用于系统以树形结构方式保存所有设置，通过针对各类源码开发的解析生成器和云端存储的节点源码，生成可运行、可二次开发的前后端源码以及数据库，系统根据业务场景运行环境需要增加不同语言源码解析生成器，从而满足应用跨端需求；
[0080]
权限控制模块60，用于当任意节点需要权限时，系统会生成树结构的权限数据，通过编译源码引擎生成配置文件，并生成可供应用调用的相关源码，支持应用实现角色管理，每个角色设置不同的权限节点，对用户设置不同角色。
[0081]
如图4所示，本技术实施例提供一种电子设备，其包括存储器101，用于存储一个或多个程序；处理器102。当一个或多个程序被处理器102执行时，实现如上述第一方面中任一项的方法。
[0082]
还包括通信接口103，该存储器101、处理器102和通信接口103相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器101可用于存储软件程序及模块，处理器102通过执行存储在存储器101内的软件程序及模块，从而执行各种功能应用以及数据处理。该通信接口103可用于与其他节点设备进行信令或数据的通信。
[0083]
其中，存储器101可以是但不限于，随机存取存储器101(random access memory，ram)，只读存储器101(read only memory，rom)，可编程只读存储器101(programmable read-only memory，prom)，可擦除只读存储器101(erasable programmable read-only memory，eprom)，电可擦除只读存储器101(electric erasable programmable read-only memory，eeprom)等。
[0084]
处理器102可以是一种集成电路芯片，具有信号处理能力。该处理器102可以是通用处理器102，包括中央处理器102(central processing unit，cpu)、网络处理器102(network processor，np)等；还可以是数字信号处理器102(digital signal processing，dsp)、专用集成电路(appl ication specific integrated circuit，asic)、现场可编程门阵列(field－programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
[0085]
在本技术所提供的实施例中，应该理解到，所揭露的方法及系统，也可以通过其它的方式实现。以上所描述的方法及系统实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本技术的多个实施例的方法及系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的
专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
[0086]
另外，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
[0087]
另一方面，本技术实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器102执行时实现如上述第一方面中任一项的方法。所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器101(rom，read-only memory)、随机存取存储器101(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
[0088]
综上所述，本技术实施例提供的一种可视化无代码或轻代码云开发方法及系统，可极大提高开发效率，对参与系统的开发人员只要掌握了基本的操作原理，即可根据需求开发出各类应用，出错率极低，不会出现代码级的错误，面对复杂应用场景时，更能体现出系统的优势，对开发人员专业性的要求不高，经过短期培训即可参与开发。
[0089]
以上仅为本技术的优选实施例而已，并不用于限制本技术，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。
[0090]
对于本领域技术人员而言，显然本技术不限于上述示范性实施例的细节，而且在不背离本技术的精神或基本特征的情况下，能够以其它的具体形式实现本技术。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本技术的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本技术内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。