CN115639980A - 一种低代码平台可拖拽的前端逻辑编排方法及装置 - Google Patents
一种低代码平台可拖拽的前端逻辑编排方法及装置 Download PDFInfo
- Publication number
- CN115639980A CN115639980A CN202211221468.4A CN202211221468A CN115639980A CN 115639980 A CN115639980 A CN 115639980A CN 202211221468 A CN202211221468 A CN 202211221468A CN 115639980 A CN115639980 A CN 115639980A
- Authority
- CN
- China
- Prior art keywords
- logic
- node
- code
- arrangement
- low
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 90
- 230000008569 process Effects 0.000 claims abstract description 53
- 230000000007 visual effect Effects 0.000 claims abstract description 27
- 238000013461 design Methods 0.000 claims abstract description 14
- 230000008520 organization Effects 0.000 claims abstract description 6
- 238000012545 processing Methods 0.000 claims description 40
- 238000004458 analytical method Methods 0.000 claims description 33
- 238000013515 script Methods 0.000 claims description 16
- 238000012795 verification Methods 0.000 claims description 16
- 238000006243 chemical reaction Methods 0.000 claims description 15
- 230000008676 import Effects 0.000 claims description 15
- 230000006870 function Effects 0.000 claims description 14
- 238000005457 optimization Methods 0.000 claims description 8
- 238000010276 construction Methods 0.000 claims description 7
- 238000005516 engineering process Methods 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 5
- 230000002452 interceptive effect Effects 0.000 claims description 5
- 238000012550 audit Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 14
- 238000010586 diagram Methods 0.000 description 7
- 238000007726 management method Methods 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 230000001419 dependent effect Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 230000007704 transition Effects 0.000 description 2
- 238000009825 accumulation Methods 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 238000013499 data model Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000001556 precipitation Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000011144 upstream manufacturing Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Landscapes
- Devices For Executing Special Programs (AREA)
Abstract
本发明提供了一种低代码平台可拖拽的前端逻辑编排方法及装置，包括业务设计阶段，逻辑编排阶段和低代码应用运行阶段；所述业务设计阶段包括：逻辑拆分；所述逻辑编排阶段包括：逻辑节点配置；对所述逻辑片段的节点进行节点名称和节点类型的建立和配置，将逻辑拆分节点以对象的方式描述出来并配置作为逻辑节点基本信息的存储；逻辑节点关系设置，编排结果导出，逻辑代码编写；所述低代码应用运行阶段是编排结果的应用，低代码平台解析运行。本发明通过对复杂业务进行逻辑拆分，以可视化的方式对逻辑进行了编排和解析，以结构化的存储方式固化业务逻辑调用顺序，从而以一种新的代码组织方式管理了业务逻辑提升了低代码应用开发过程的效率。
Description
技术领域
本发明涉及工业互联网应用领域，具体地，涉及低代码平台可拖拽的前端逻辑编排方法及装置。
背景技术
随着工业互联网和工业信息化的发展，越来越多的企业选择了低代码应用开发平台进行业务应用的开发。而复杂的应用因为有很多的业务逻辑，所以需要编写大量的逻辑代码，那么一个单一页面组态形成的代码内容将非常多。当前普遍的做法就是在页面的每个自定义代码点编辑代码，并且保存在各个功能点中。同时代码的执行也是分散在各个功能点。
这种处理方式有如下问题：逻辑代码将散落在各个功能点，不便于统一管理；虽然很多代码逻辑是可以复用的，但由于每个功能点的散落，所有的代码逻辑都得重复编写，不能很好的复用并且也不便于业务领域代码的积累和沉淀；特别是，二次修改逻辑代码时；不论是新的开发人员还是原开发人员都需要重新逐行理解，不能直观的通过流程类图表看出代码的基本逻辑，工作量巨大。
发明内容
针对现有技术中的缺陷，本发明的目的是提供一种低代码平台的前端拖拽逻辑编排方法及装置。
本发明提供一种低代码平台的前端拖拽逻辑编排方法，包括业务设计阶段，逻辑编排阶段和低代码应用运行阶段；
所述业务设计阶段包括：
逻辑拆分，所述逻辑拆分可将业务逻辑拆分成复用逻辑；
所述逻辑编排阶段包括：
在可视化交互界面中的逻辑节点配置，在逻辑拆分后，生成逻辑片段；对所述逻辑片段的节点进行节点名称和节点类型的建立和配置，将逻辑拆分节点以对象的方式描述出来并配置作为逻辑节点基本信息的存储；
逻辑节点关系设置，通过可视化拖拽技术确定节点之间的流转关系；
编排结果导出，将编排结果导出或存储在低代码平台中；
逻辑代码编写，编写一个包含处理逻辑的函数；
所述低代码应用运行阶段是编排结果的应用，包括：
三方依赖处理，三方依赖处理过程可以解析三方库并按照运行容器的环境要求执行依赖代码；
低代码平台解析运行，低代码容器可以解析编排结果，按照流程执行逻辑代码并返回执行结果；
复杂的业务被逻辑拆分后，逻辑拆分代码与编写好的逻辑代码做节点配置，进行逻辑节点关系设置，导出编排结果并结合三方依赖处理使低代码平台解析运行。
进一步地，所述业务逻辑以表单提交逻辑组织流程；
所述流程可以是建立开始节点，获取表单信息并对表单信息做前端校验，校验通过则完善提交前数据后提交数据，消息提醒并建立结束节点以完成本次流程；
或
所述流程可以是建立开始节点，获取表单信息并对表单信息做前端校验，校验未通过则处理失败信息后发送消息提醒并建立结束节点以完成本次流程。
进一步地，所述逻辑节点配置包含在可视化交互界面中的流程线，开始节点，结束节点，判断逻辑节点与处理逻辑节点；
所述开始节点，是逻辑编排的启示节点，是逻辑调用的起点；
所述结束节点，是逻辑编排的结束节点，是逻辑调用的终点；
所述判断逻辑节点是需要编写代码的处理逻辑，用来实现逻辑的流转；
所述处理逻辑节点是需要编写代码的处理逻辑，有明确的入参和出参；
流程线将连接各节点作为逻辑流转的方向指引。
进一步地，所述逻辑节点信息包括基本信息与高级信息；
所述基本信息为节点唯一标识、节点名称、节点类型与节点附属信息；
所述高级信息为入参、出参、逻辑代码、三方库依赖、判断逻辑出口信息。
进一步地，所逻辑节点关系包括：
当来源节点是第一逻辑的出口时，所述第一逻辑的出口连接第一流程线，所述第一流程线连接目标节点为第一判断的入口以第一判断节点的数据来源；
或
当来源节点是第一判断为是的出口时，所述第一判断为是的出口连接第二流程线，所述第二流程线连接目标节点为是的逻辑入口以第一判断节点的是逻辑出口逻辑；
或
当来源节点是第一判断为否的出口时，所述第一判断为否的出口连接第三流程线，所述第三流程线连接目标节点为否的逻辑入口以使第一判断节点的否逻辑为出口逻辑。
进一步地，所述可视化拖拽方法包括操作界面设计；
所述操作界面设计在可视化操作界面中，通过节点拖拽创建逻辑节点并设置节点间的逻辑流转线；通过在属性设置区设置选中节点的属性并双击节点可打开编辑代码区域进行代码编写；
进一步地，所述可视化拖拽方法包括拖拽；
所述拖拽方法包括：
MOUSEDOWN，鼠标单击元素可获取到元素与开始位置信息；
MOUSEMOVE，鼠标单击并拖动元素可获取拖动时鼠标的位置信息；
MOUSEUP，鼠标停止拖动元素并松开可获取鼠标结束位置信息。
进一步地，所述逻辑代码编写包括判断逻辑节点的代码编写；
所述判断逻辑节点通过import接口引入资源，结构如下：
所述判断逻辑节点的出参必须是false或者true。
进一步地，所述逻辑代码编写包括处理逻辑节点的代码编写；
所述处理逻辑节点的代码编写可任意定义入参和出参，也可无出参和入参；可根据context对象获取低代码平台的上下文对象以进行表单操作。
进一步地，所述逻辑代码编写还包括第三方库的处理；
前端应用开源的第三方库，支持以import的方式引入NPM库，在逻辑编排的运行期自动处理引用，可转化为浏览器可兼容的版本。
进一步地，所述编排结果导出是将编排结果以JSON格式导出至低代码平台。
进一步地，所述编排结果应用包括整体解析，执行力管道构建与执行相关技术点；
所述整体解析根据就传入的编排编号获取编排结果的JSON文件；通过所述JSON文件的结构定义一个对象与所述对象的属性，包括节点数组与关系数组；
所述执行管道构建是在执行管道内置逻辑节点解析规则的过滤器，将编排结果输入执行管道，将所述编排结果内的节点作为输入项输入到对应的节点过滤器直到出现结束节点，逻辑执行过程结束；
执行相关技术点包括：三方依赖解析，上下文对象处理与脚本动态解析；
所述三方依赖解析，将动态根据依赖信息切换成第三方库对应的UMD格式库地址使浏览器可直接解析import模块代码；
所述上下文对象处理，将每个节点的代码入参中增加context参数，以便于编排逻辑使用低代码平台的数据，可结合业务特点使用；
所述脚本动态解析，JavaScript可使用eval或new Function字符串解析成一段JavaScript脚本并基于API对编排节点的代码字符串进行封装以支持入参和出参的解析。
进一步地，所述脚本动态解析包括：
JavaScript代码转化，依托JavaScript API:new Function将字符串转换为可执行的JS代码；
AST语法解析，将逻辑代码根据词法分析和语法分析进行抽象语法树的解析以作为依赖转换和语法优化的输入项；
依赖转换，将语法树内部的import引入三方库转换为本地库引用；
语法优化，转换逻辑代码中的ECMAScript2015版本代码为ECMAScript5版本，并且优化一些执行逻辑，可以在该节点插入埋点代码以支持系统运行审计要求。
所述动态解析流程可通过JavaScript代码转化AST语法解析依赖转换与语法优化四个步骤，逻辑代码将转换为符合低代码运行环境的脚本执行。
一种低代码平台装置，所述装置包括：
业务设计模块，用于将逻辑拆分成复用逻辑；
逻辑编排模块，用于对拆分后的逻辑进行配置并导出结果至低代码平台；
低代码应用运行模块，用于执行逻辑编排的结果。
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序。
本发明通过对复杂业务进行逻辑拆分，以可视化的方式对逻辑进行了编排和解析，以结构化的存储方式固化业务逻辑调用顺序，从而以一种新的代码组织方式管理了业务逻辑；避免了低代码应用自定义代码管理散乱的问题，实现了复杂业务逻辑的可组装、流程可视化的功能，提升了低代码应用开发过程的效率。
附图说明
通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：
图1为本发明实施例提供的整体技术方案流程图；
图2为本发明实施例提供的表单提交逻辑流程图；
图3为本发明实施例提供的节点关系示意图；
图4为本发明实施例提供的可视化操作界面示意图；
图5为本发明实施例编排结果结构示意图；
图6为本发明实施例执行管道示意图；
图7为本发明实施例动态解析流程图。
具体实施方式
下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。
术语解释：
低代码开发平台：通过可视化组态页面的应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽Web组件和数据模型驱动的方式创建网页和移动应用程序。
前端逻辑：指前端应用程序中，处理数据过程的代码和逻辑。低代码平台应用的功能页面大都是以表单、列表，明细为主，其中大部分前端逻辑基本上都围绕在表单的校验、取值、赋值、提交，发送请求到后端，消息提示，数据处理，路由跳转，条件判断等等。
逻辑编排：指的是通过一定的数据结构存储多个逻辑之间调用的先后关系的方式。一般需要处理一个逻辑和其前置逻辑和后置逻辑关系，主要包括它们之间的入参、出参和跳转。
可视化逻辑编排：指通过类业务流程建模BPMN(Business Process ModelingNotation)的方式，组织前端逻辑节点，可以通过拖拽节点，添加节点之间的关系等方式，实现逻辑编排的过程。
JSON：JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(European Computer Manufacturers Association,欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON Schema：指JSON模式，JSON Schema是描述JSON数据格式的一种规范。可以对JSON数据格式进行描述(字段类型、内容长度、是否必须存在、取值示例等)，它是一个描述清晰、人机可读的文档，可以自动测试、验证客户端提交的数据。
本发明主要用于工业互联网应用领域的软件开发，公开了一种低代码开发平台中前端页面逻辑编排的技术。
今年来，工业互联网系统领域中，低代码(Low-Code)、无代码(No-Code)开发平台日趋增多，已经可以通过可视化组态的方式实现复杂页面的开发，但是伴随着业务领域中业务的复杂度的不断提升，前端逻辑如何高效便捷的实现和组织已经成为了低代码系统的发展瓶颈。
本发明通过可视化的方式，结合JSON和JSON Schema的规范，提供了一套前端业务逻辑编排技术，提升了前端逻辑的高效组织，提高了前端逻辑的可复用性，以及提升了前端逻辑间的逻辑清晰性，从而大大提高了平台软件的开发效率。
如图1所示，是本发明整体技术方案的过程流程图，本发明涉及的场景包括业务设计、逻辑编排和低代码应用运行三个阶段；
所述业务设计阶段包括：
逻辑拆分，一般在低代码页面开发阶段，低代码开发指无需编写代码或通过少量编写代码就可以快速开发应用。复杂业务可以根据其流程图按照代码编写的逻辑拆分成可以复用的逻辑。比如表单提交过程：提交前逻辑、前端表单约束校验、后端逻辑请求校验、提交数据、提交后过程处理、提交失败处理。前端逻辑指前端应用程序中，处理数据过程的代码和逻辑。这是一个典型的逻辑拆分过程；
所述逻辑编排阶段包括：
在可视化交互界面中的逻辑节点配置，在逻辑拆分后，生成逻辑片段；对所述逻辑片段的节点进行节点名称和节点类型的建立和配置，将逻辑拆分节点以对象的方式描述出来并配置作为逻辑节点基本信息的存储；
逻辑节点关系设置，在完成了逻辑节点信息配置后，可以结合可视化拖拽的方式，确定节点之间的流转关系，一般表现为节点和节点之间连线。其中判断逻辑的出线可以结合出参进行流转。关系设置后，会形成一个带节点、节点关系以及节点代码的编排结果。通过可视化组态页面的应用程序开发的方法，使具有不同经验水平开发人员可以通过图形化的用户界面，使用拖拽web组件的形式创建移动应用程序，简单便捷的对复杂的程序对象进行配置与设置。
编排结果导出，指的是将编排结果导出或者存储在低代码平台中，便于低代码应用运行阶段获取。低代码平台应用的功能页面大都是以表单、列表、明细为主，其中大部分前端逻辑基本上都围绕在表单的校验、取值、赋值、提交，发送请求到后端，消息提示，数据处理，路由跳转，条件判断等等。
逻辑代码编写，处理类型和判断类型的节点，需要编写一个包含处理逻辑的函数，一般采用JavaScript编写，方法接受入参，并且返回出参。代码作为节点的高级属性存储。
所述低代码应用运行阶段是编排结果的应用，包括：
编排结果导出：指的是将编排结果导出或者存储在低代码平台中，便于低代码应用运行阶段获取。
低代码平台解析运行：在应用开发完成后，应用运行时可以触发编排逻辑的调用，此时低代码容器可以解析编排结果，进行按照流程执行逻辑代码，并且返回执行结果。
三方依赖处理：逻辑节点的代码往往会引入第三方JavaScript代码库，三方依赖处理过程，可以解析这些三方库，并且按照运行容器的环境要求执行这些依赖代码。
复杂的业务被逻辑拆分后，逻辑拆分代码与编写好的逻辑代码做节点配置，进行逻辑节点关系设置，导出编排结果并结合三方依赖处理使低代码平台解析运行。
逻辑编排的详细阐述，以下是一个简单的表单提交逻辑，逻辑编排指通过一定的数据结构存储多个逻辑之间调用的先后关系的方式，如图2所示：
业务逻辑往往以一定的流程进行组织，图2通过四类节点描述了一个表单提交过程，整体包括了获取表单数据、前端校验数据、完善提交前数据(默认值)或处理校验失败信息、提交数据、发送消息提醒等过程。
所述业务逻辑以表单提交的逻辑组织流程；
所述流程可以是建立开始节点，获取表单信息并对表单信息做前端校验，校验通过则完善提交前数据后提交数据，消息提醒并建立结束节点以完成本次流程；
或
所述流程可以是建立开始节点，获取表单信息并对表单信息做前端校验，校验未通过则处理失败信息后发送消息提醒并建立结束节点以完成本次流程。
逻辑节点的类型有：开始节点，结束节点，判断逻辑节点与处理逻辑节点；所述逻辑节点配置包含以上四种节点与流程线；
所述开始节点，是逻辑编排的启示节点，是逻辑调用的起点；
所述结束节点，是逻辑编排的结束节点，是逻辑调用的终点；
所述判断逻辑节点是需要编写代码的处理逻辑，用来实现逻辑的流转；
所述处理逻辑节点是需要编写代码的处理逻辑，有明确的入参和出参；
流程线将连接各节点作为逻辑流转的方向指引。
所述逻辑节点信息包括基本信息与高级信息；所述基本信息为节点唯一标识、节点名称、节点类型与节点附属信息；所述高级信息为入参、出参、逻辑代码、三方库依赖、判断逻辑出口信息。一般需要处理一个逻辑和其前置逻辑和后置逻辑关系，主要包括它们之间的入参、出参和跳转。
如图3所示，所逻辑节点关系包括：
当来源节点是第一逻辑的出口时，所述第一逻辑的出口连接第一流程线，所述第一流程线连接目标节点为第一判断的入口以第一判断节点的数据来源；
当来源节点是第一判断为是的出口时，所述第一判断为是的出口连接第二流程线，所述第二流程线连接目标节点为是的逻辑入口以第一判断节点的是逻辑出口逻辑；
当来源节点是第一判断为否的出口时，所述第一判断为否的出口连接第三流程线，所述第三流程线连接目标节点为否的逻辑入口以使第一判断节点的否逻辑为出口逻辑。
如图4所示，所述可视化拖拽方法包括操作界面设计；
为了便于新增节点和设置节点之间的关系，本技术方案采用了一套可视化的拖拽技术；所述操作界面设计在可视化操作界面中，通过节点拖拽创建逻辑节点并设置节点间的逻辑流转线；通过在属性设置区设置选中节点的属性并双击节点可打开编辑代码区域进行代码编写。可视化逻辑编排是通过业务流程建模BPMN的方式，组织前端逻辑节点，可以通过拖拽节点，添加节点之间的关系等方式，实现逻辑编排的过程。
所述拖拽方法包括：
MOUSEDOWN，鼠标单击元素可获取到元素与开始位置信息；
MOUSEMOVE，鼠标单击并拖动元素可获取拖动时鼠标的位置信息；
MOUSEUP，鼠标停止拖动元素并松开可获取鼠标结束位置信息。
所述逻辑代码编写包括判断逻辑节点的代码编写；
所述判断逻辑节点通过import接口引入资源，判断逻辑节点和处理逻辑节点可以进行逻辑代码的编写，本技术方案支持ECMAScript5以上版本的JavaScript语言，并且可以通过import的方式引入开源NPM仓库的第三方脚本库，另外编辑器采用了开源的组件：Monaco Editor。代码以标准的ECMAScript 6模块化的方式编写，每个节点代码等价于一个JS模块，这样可以避免全局变量的污染，结构如下：
所述判断逻辑节点的出参必须是false或者true。
所述逻辑代码编写包括处理逻辑节点的代码编写；
所述处理逻辑节点的代码编写可任意定义入参和出参，也可无出参和入参；可根据context对象获取低代码平台的上下文对象以进行表单操作。
所述逻辑代码编写还包括第三方库的处理；
在前端体系内部大量引用了开源的第三方包，本发明也结合了ECMAScript模块化特点，支持以import的方式引入任何开源NPM库，在逻辑编排的运行期将自动处理这类引用，转化为浏览器可兼容的版本。
所述编排结果导出是将编排结果以JSON格式导出至低代码平台系统，JSON是一种轻量级的数据交换格式，它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON称为理想和数据交换语言。易于阅读和编写，也易于机器解析和生成，并有效地提升网络传输效率。具体结果描述如图5所示：
一级结构：基本信息；基本信息的二级结构：编号和内容描述；
一级结构：节点；二级结构：节点的类型、编号、名称和数据；三级结构：第三方库的数据和代码；
一级结构：边；二级结构：边的编号、类型、名称、来源与输出；三级结构：节点与节点边的来源以及节点和节点边的输出；
以上为编排结果的三级结构。
JSON Schema：指JSON模式，JSON Schema是描述JSON数据格式的一种规范。可以对JSON数据格式进行描述(字段类型、内容长度、是否必须存在、取值示例等)，它是一个描述清晰、人机可读的文档，可以自动测试、验证客户端提交的数据。
所述编排结果应用包括整体解析，执行力管道构建与执行相关技术点；
所述整体解析根据就传入的编排编号获取编排结果的JSON文件；通过所述JSON文件的结构定义一个对象与所述对象的属性，包括节点数组与关系数组；逻辑编排解析器会根据传入的编排编号，获取到编排结果JSON文件，通过其结构，解析器将定义一个对象，对象的属性按照编排结构定义，主要包括：节点数组、关系数组。
所述执行管道构建是在执行管道内置逻辑节点解析规则的过滤器，将编排结果输入执行管道，将所述编排结果内的节点作为输入项输入到对应的节点过滤器直到出现结束节点，逻辑执行过程结束；
如图6所示，编排结果将作为低代码页面逻辑执行的依赖数据，在低代码运行期将初始化逻辑编排解析器，解析器将根据编排结构构建执行管道(还原执行过程的父子关系的结构)。该执行管道依赖于浏览器JavaScript宿主运行环境(JavaScript V8引擎)，并且内置了逻辑节点解析规则的过滤器。能够按照节点上下游关系和节点类型自动解析出逻辑的执行过程。
执行管道构建过程如下：解析器会将编排结果输入执行管道的“开始节点过滤器”，该过滤器会根据解析规则，判断是否是开始节点，然后在对应的编排结果关系数组中找到“来源”为开始节点的节点，并作为输入项继续重新输入到执行管道，如果下一个节点为逻辑节点，那么“逻辑节点过滤器”将执行该节点逻辑，并且输出解析后的下一个节点，如果下一个节点为判断节点，那么“判断节点过滤器”将执行解析过程，执行判断逻辑，并输入下一个节点。如此往复，递归解析和执行过程，直到“结束节点过滤器”执行，逻辑执行过程结束。
三方依赖解析
逻辑节点中包含了依赖信息，由于浏览器端无法直接解析import的模块名，执行器在执行过程中，将动态根据依赖信息，切换成第三方包对应的UMD格式库地址，而切换过程已经在编排结果导出时由低代码平台完成。
上下文对象处理
为了便于编排逻辑使用低代码平台的数据，每个节点的代码入参都包含了“context”参数，内部包含了大量的低代码对象，可以结合业务特点使用。其中“context.args”是上一个节点的出参。
脚本动态解析
JavaScript规范提供了两种通过字符串解析成一段JavaScript脚本的能力：eval、new Function，本发明使用了new Function，以该API为基础，对编排节点的代码字符串进行封装，以支持入参和出参的解析。
具体解析过程如图7所示：
逻辑节点代码字符串，将经过“动态解析流程”进行4个步骤的解析，以转化为可执行代码的目的。本发明的四个过程说明如下：
JavaScript代码转化：依托JavaScript API:new Function,将字符串转换为可执行的JS代码，这个代码往往包含一些低版本浏览器不可解析的语法和模块化脚本，不能作为最终执行脚本。同时该过程也容错检测了逻辑代码的合法性。
AST语法解析：将逻辑代码根据词法分析和语法分析进行抽象语法树的解析，以作为依赖转换和语法优化的输入项。
依赖转换：将语法树内部的import引入的三方库，转换为本地库引用。
语法优化：转换逻辑代码中的ECMAScript2015版本代码为ECMAScript5版本，并且优化一些执行逻辑，可以在该节点插入埋点代码以支持系统运行审计要求。
最终通过以上四步，逻辑代码将转换为符合低码运行环境的脚本执行。
本发明还有另一种实施方式为，一种低代码平台装置，所述装置包括：
业务设计模块，用于将逻辑拆分成复用逻辑；
逻辑编排模块，用于对拆分后的逻辑进行配置并导出结果至低代码平台；
低代码应用运行模块，用于执行逻辑编排的结果。
本发明还有另一种实施方式为，一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序。
本发明将业务逻辑以节点和边的形式拆分，并且可以通过可视化的方式组织节点之间的关系。将逻辑编排以一种对象的结构存储，并且按照执行管道递归解析其结构的方法。将逻辑节点代码以字符串方式存储，并且动态解析其依赖和赋值上下文对象的方法。
本发明通过对复杂业务进行逻辑拆分，以可视化的方式对逻辑进行了编排和解析，以结构化的存储方式固化业务逻辑调用顺序，从而以一种新的代码组织方式管理了业务逻辑；避免了低代码应用自定义代码管理散乱的问题，实现了复杂业务逻辑的可组装、流程可视化的功能，提升了低代码应用开发过程的效率。
本发明将页面复杂逻辑进行拆分，统一以JSON格式进行存储，便于管理。将逻辑拆分后，可以按照一定粗粒度进行复用，便于低代码平台应用相同场景逻辑复用。逻辑创建过程是可视化的，并且应用了拖拽技术，可以方便组织逻辑流程结构。二次维护应用的过程中，可以直观通过之前的流程化逻辑结构快速理解代码逻辑。
以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。
Claims (15)
1.一种低代码平台可拖拽的前端逻辑编排方法，其特征在于，包括业务设计阶段，逻辑编排阶段和低代码应用运行阶段；
所述业务设计阶段包括：
逻辑拆分，所述逻辑拆分可将业务逻辑拆分成复用逻辑；
所述逻辑编排阶段包括：
在可视化交互界面中的逻辑节点配置，在逻辑拆分后，生成逻辑片段；对所述逻辑片段的节点进行节点名称和节点类型的建立和配置，将逻辑拆分节点以对象的方式描述出来并配置作为逻辑节点基本信息的存储；
逻辑节点关系设置，通过可视化拖拽技术确定节点之间的流转关系；
编排结果导出，将编排结果导出或存储在低代码平台中；
逻辑代码编写，编写一个包含处理逻辑的函数；
所述低代码应用运行阶段是编排结果的应用，包括：
三方依赖处理，三方依赖处理过程可以解析三方库并按照运行容器的环境要求执行依赖代码；
低代码平台解析运行，低代码容器可以解析编排结果，按照流程执行逻辑代码并返回执行结果；
复杂的业务被逻辑拆分后，逻辑拆分代码与编写好的逻辑代码做节点配置，进行逻辑节点关系设置，导出编排结果并结合三方依赖处理使低代码平台解析运行。
2.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述业务逻辑以表单提交逻辑组织流程；
所述流程可以是建立开始节点，获取表单信息并对表单信息做前端校验，校验通过则完善提交前数据后提交数据，消息提醒并建立结束节点以完成本次流程；
或
所述流程可以是建立开始节点，获取表单信息并对表单信息做前端校验，校验未通过则处理失败信息后发送消息提醒并建立结束节点以完成本次流程。
3.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述逻辑节点配置包含在可视化交互界面中的流程线，开始节点，结束节点，判断逻辑节点与处理逻辑节点；
所述开始节点，是逻辑编排的启示节点，是逻辑调用的起点；
所述结束节点，是逻辑编排的结束节点，是逻辑调用的终点；
所述判断逻辑节点是需要编写代码的处理逻辑，用来实现逻辑的流转；
所述处理逻辑节点是需要编写代码的处理逻辑，有明确的入参和出参；
流程线将连接各节点作为逻辑流转的方向指引。
4.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述逻辑节点信息包括基本信息与高级信息；
所述基本信息为节点唯一标识、节点名称、节点类型与节点附属信息；
所述高级信息为入参、出参、逻辑代码、三方库依赖、判断逻辑出口信息。
5.根据权利要求1至3所述的前端逻辑编排方法，其特征在于，所逻辑节点关系包括：
当来源节点是第一逻辑的出口时，所述第一逻辑的出口连接第一流程线，所述第一流程线连接目标节点为第一判断的入口以第一判断节点的数据来源；
或
当来源节点是第一判断为是的出口时，所述第一判断为是的出口连接第二流程线，所述第二流程线连接目标节点为是的逻辑入口以第一判断节点的是逻辑出口逻辑；
或
当来源节点是第一判断为否的出口时，所述第一判断为否的出口连接第三流程线，所述第三流程线连接目标节点为否的逻辑入口以使第一判断节点的否逻辑为出口逻辑。
6.根据权利要求1所述的可拖拽的前端逻辑编排方法，其特征在于，所述可拖拽的方法包括可视化的操作界面设计；
所述操作界面设计在可视化操作界面中，通过节点拖拽创建逻辑节点并设置节点间的逻辑流转线；通过在属性设置区设置选中节点的属性并双击节点可打开编辑代码区域进行代码编写。
7.根据权利要求1所述的可拖拽的前端逻辑编排方法，其特征在于，所述可拖拽方法包括；
MOUSEDOWN，鼠标单击元素可获取到元素与开始位置信息；
MOUSEMOVE，鼠标单击并拖动元素可获取拖动时鼠标的位置信息；
MOUSEUP，鼠标停止拖动元素并松开可获取鼠标结束位置信息。
8.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述逻辑代码编写包括判断逻辑节点的代码编写；
所述判断逻辑节点通过import接口引入资源，结构如下：
所述判断逻辑节点的出参必须是false或者true。
9.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述逻辑代码编写包括处理逻辑节点的代码编写；
所述处理逻辑节点的代码编写可任意定义入参和出参，也可无出参和入参；可根据context对象获取低代码平台的上下文对象以进行表单操作。
10.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述逻辑代码编写还包括第三方库的处理；
前端应用开源的第三方库，支持以import的方式引入NPM库，在逻辑编排的运行期自动处理引用，可转化为浏览器可兼容的版本。
11.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述编排结果导出是将编排结果以JSON格式导出至低代码平台。
12.根据权利要求1所述的前端逻辑编排方法，其特征在于，所述编排结果应用包括整体解析，执行力管道构建与执行相关技术点；
所述整体解析根据就传入的编排编号获取编排结果的JSON文件；通过所述JSON文件的结构定义一个对象与所述对象的属性，包括节点数组与关系数组；
所述执行管道构建是在执行管道内置逻辑节点解析规则的过滤器，将编排结果输入执行管道，将所述编排结果内的节点作为输入项输入到对应的节点过滤器直到出现结束节点，逻辑执行过程结束；
执行相关技术点包括：三方依赖解析，上下文对象处理与脚本动态解析；
所述三方依赖解析，将动态根据依赖信息切换成第三方库对应的UMD格式库地址使浏览器可直接解析import模块代码；
所述上下文对象处理，将每个节点的代码入参中增加context参数，以便于编排逻辑使用低代码平台的数据，可结合业务特点使用；
所述脚本动态解析，JavaScript可使用eval或new Function字符串解析成一段JavaScript脚本并基于API对编排节点的代码字符串进行封装以支持入参和出参的解析。
13.根据权利要求12所述的前端逻辑编排方法，其特征在于，所述脚本动态解析包括：
JavaScript代码转化，依托JavaScript API:new Function将字符串转换为可执行的JS代码；
AST语法解析，将逻辑代码根据词法分析和语法分析进行抽象语法树的解析以作为依赖转换和语法优化的输入项；
依赖转换，将语法树内部的import引入三方库转换为本地库引用；
语法优化，转换逻辑代码中的ECMAScript2015版本代码为ECMAScript5版本，并且优化一些执行逻辑，可以在该节点插入埋点代码以支持系统运行审计要求；
所述动态解析流程可通过JavaScript代码转化AST语法解析依赖转换与语法优化四个步骤，逻辑代码将转换为符合低代码运行环境的脚本执行。
14.一种低代码平台装置，其特征在于，所述装置包括：
业务设计模块，用于将逻辑拆分成复用逻辑；
逻辑编排模块，用于对拆分后的逻辑进行配置并导出结果至低代码平台；
低代码应用运行模块，用于执行逻辑编排的结果。
15.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至13中任意一项所述的方法和步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211221468.4A CN115639980A (zh) | 2022-10-08 | 2022-10-08 | 一种低代码平台可拖拽的前端逻辑编排方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211221468.4A CN115639980A (zh) | 2022-10-08 | 2022-10-08 | 一种低代码平台可拖拽的前端逻辑编排方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115639980A true CN115639980A (zh) | 2023-01-24 |
Family
ID=84942479
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211221468.4A Pending CN115639980A (zh) | 2022-10-08 | 2022-10-08 | 一种低代码平台可拖拽的前端逻辑编排方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115639980A (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115826936A (zh) * | 2023-02-16 | 2023-03-21 | 江苏瑞中数据股份有限公司 | 基于低代码和可视化拖拽的电力业务可拓展开发框架 |
| CN116594611A (zh) * | 2023-07-18 | 2023-08-15 | 浩鲸云计算科技股份有限公司 | 一种基于领域模型语言的零代码通用服务实现方法 |
| CN116661756A (zh) * | 2023-07-24 | 2023-08-29 | 浩鲸云计算科技股份有限公司 | 一种基于低代码dsl的对象解析方法及装置 |
| CN116795378A (zh) * | 2023-08-18 | 2023-09-22 | 宁波数益工联科技有限公司 | 基于代码动态编译的流程编排执行方法及装置 |
| CN117492753A (zh) * | 2023-10-24 | 2024-02-02 | 深圳微米云服信息科技有限公司 | 一种实现数据可视化的前端开发方法及系统 |
| CN117539459A (zh) * | 2023-10-20 | 2024-02-09 | 联奕科技股份有限公司 | 一种api接口配置方法、系统及设备 |
-
2022
- 2022-10-08 CN CN202211221468.4A patent/CN115639980A/zh active Pending
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115826936A (zh) * | 2023-02-16 | 2023-03-21 | 江苏瑞中数据股份有限公司 | 基于低代码和可视化拖拽的电力业务可拓展开发框架 |
| CN115826936B (zh) * | 2023-02-16 | 2023-11-07 | 江苏瑞中数据股份有限公司 | 基于低代码和可视化拖拽的电力业务可拓展开发框架 |
| CN116594611A (zh) * | 2023-07-18 | 2023-08-15 | 浩鲸云计算科技股份有限公司 | 一种基于领域模型语言的零代码通用服务实现方法 |
| CN116594611B (zh) * | 2023-07-18 | 2023-10-27 | 浩鲸云计算科技股份有限公司 | 一种基于领域模型语言的零代码通用服务实现方法 |
| CN116661756A (zh) * | 2023-07-24 | 2023-08-29 | 浩鲸云计算科技股份有限公司 | 一种基于低代码dsl的对象解析方法及装置 |
| CN116661756B (zh) * | 2023-07-24 | 2023-10-27 | 浩鲸云计算科技股份有限公司 | 一种基于低代码dsl的对象解析方法及装置 |
| CN116795378A (zh) * | 2023-08-18 | 2023-09-22 | 宁波数益工联科技有限公司 | 基于代码动态编译的流程编排执行方法及装置 |
| CN116795378B (zh) * | 2023-08-18 | 2023-11-21 | 宁波数益工联科技有限公司 | 基于代码动态编译的流程编排执行方法及装置 |
| CN117539459A (zh) * | 2023-10-20 | 2024-02-09 | 联奕科技股份有限公司 | 一种api接口配置方法、系统及设备 |
| CN117492753A (zh) * | 2023-10-24 | 2024-02-02 | 深圳微米云服信息科技有限公司 | 一种实现数据可视化的前端开发方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11036614B1 (en) | Data control-oriented smart contract static analysis method and system | |
| US11422778B2 (en) | Development environment for real-time dataflow programming language | |
| CN115639980A (zh) | 一种低代码平台可拖拽的前端逻辑编排方法及装置 | |
| Beazley | Automated scientific software scripting with SWIG | |
| JP5354602B2 (ja) | プロデューサグラフ指向のプログラミング及び実行 | |
| US20070044066A1 (en) | Embedded multi-language programming | |
| US7614040B2 (en) | System and method for efficiently analyzing and building interdependent resources in a software project | |
| US20090328016A1 (en) | Generalized expression trees | |
| CN108037913B (zh) | xUML4MC模型到MSVL语言程序的转换方法、计算机可读存储介质 | |
| US20070074185A1 (en) | Identifier expressions | |
| CN113553035A (zh) | 一种通用的前端ui组件库的设计和构建方法 | |
| CN116755669A (zh) | 一种基于dsl语言操作模型的低代码开发方法和工具 | |
| US20080127128A1 (en) | Type Validation for Applications Incorporating A Weakly-Typed Language | |
| Shute | Advanced JavaScript: Speed up web development with the powerful features and benefits of JavaScript | |
| US20070038666A1 (en) | Independent explicit interface implementation | |
| Rahman et al. | A DSL for importing models in a requirements management system | |
| Del Sole | Visual Basic 2012 Unleashed | |
| Kelly et al. | Lambda calculus as a workflow model | |
| Torres | Go Programming Cookbook: Over 85 recipes to build modular, readable, and testable Golang applications across various domains | |
| Romão | Migration from Legacy to Reactive Applications in OutSystems | |
| Cantiello et al. | Software porting support with component-based and language neutral source code analysis | |
| Laarman | Achieving QVTO & ATL Interoperability: An Experience Report on the Realization of a QVTO to ATL Compiler | |
| CA2566025C (en) | Type validation for applications incorporating a weakly-typed language | |
| Brunner et al. | Towards Better Tool Support for Code Comprehension | |
| Albassam | A Hybrid Approach for Recovering Use Case Models of MVC Web Applications |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Country or region after: China Address after: 310053 No. 309 Liuhe Road, Binjiang District, Hangzhou City, Zhejiang Province Applicant after: Zhongkong Technology Co.,Ltd. Address before: 310053 No. 309 Liuhe Road, Binjiang District, Hangzhou City, Zhejiang Province Applicant before: ZHEJIANG SUPCON TECHNOLOGY Co.,Ltd. Country or region before: China |
|
| CB02 | Change of applicant information |