一种基于HTML实现API编排的方法和系统

技术领域

本发明涉及API编排技术领域，尤其是涉及一种基于HTML实现API编排的方法和系统。

背景技术

API(Application-Programming-Interface，应用程序接口)是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。

API编排作为企业信息化中重要的基础设施目前市场上已有多个成熟的商业产品，包括IBM，微软都有相应的产品，开源产品中，知名度比较高的就是MuleSoft，但MuleSoft一些核心连接器比如SAP连接器并未开源，这些产品都实现了在线API编排的功能，都是基于canvas技术实现，该技术可实现以下功能：

1、连接器绘制：基于canvas可以动态渲染连接器，比如连接器主色调根据主题进行调整，连接器名称可以由后台进行配置，渲染时进行动态显示；

2、拖拽编排：通过拖拽形式进行API编排，在编排界面上也可通过鼠标进行拖拽进行调整；

3、属性配置：属性配置通过html实现，一些配置项影响流程图绘制，比如连接器名称，连接器图标等，界面可根据属性进行动态渲染；

4、自动调整：可以对api流程图进行自动调整，自动调整后的流程图在水平和垂直维度上进行自动对齐，优化流程图展示效果；

5、流程图导出：将api流程图进行导出，导出格式可以选择图片或者PDF；

6、接口预跑：在开发阶段对编排的api进行预跑来测试编排的结果，预跑时可以动态展示目前流出所处的节点以及该节点状态；

7、时间线展示：对于调用过的实例通过时间线形式展示每个节点的调用时间以及耗时情况。

虽然canvas有强大的绘图功能，能够灵活的对徒刑进行渲染，但是canvas在小屏幕设备上体验很差，canvas不像html拥有响应式相关样式支持，在小屏幕设备下可以自由变换布局，canvas在小屏幕下只能通过缩放或者小地图模式进行展示，体验很不好。

发明内容

本发明的目的就是为了克服上述现有技术存在canvas在小屏幕设备上体验很差的缺陷而提供一种基于HTML实现API编排的方法和系统。

本发明的目的可以通过以下技术方案来实现：

一种基于HTML实现API编排的方法，所述API编排用于编排流程图，该流程图包括流程图节点和流程图节点间的连接线样式，其特征在于，所述方法包括：采用html元素构建所述流程图节点的渲染逻辑，采用层叠样式表构建所述流程图节点间的连接线样式的显示逻辑，采用flex布局构建所述流程图的响应式布局逻辑，基于所述渲染逻辑、显示逻辑和响应式布局逻辑渲染所述流程图。

进一步地，所述方法还包括：基于构建的所述流程图节点的渲染逻辑，根据节点类型分别调用预先建立的对应的渲染程序进行渲染。

进一步地，所述节点类型包括非业务节点、连接器节点、连接线和异常节点。

进一步地，所述非业务节点包括if节点、开始节点和结束节点。

进一步地，所述方法还包括：

接收API事件，然后根据所述流程图节点的渲染逻辑和节点类型，通过对应的渲染程序渲染流程图节点，根据所述显示逻辑显示流程图节点间的连接线样式，根据所述响应式布局逻辑对流程图进行响应式布局。

进一步地，将所述渲染逻辑、显示逻辑和响应式布局逻辑整体打包为模型数据，通过终端中的Parser解析器解析该模型数据进行调用。

本发明还提供一种基于HTML实现API编排的系统，所述API编排用于编排流程图，该流程图包括流程图节点和流程图节点间的连接线样式，所述系统包括：

流程模型，用于采用html元素构建所述流程图节点的渲染逻辑，采用层叠样式表构建所述流程图节点间的连接线样式的显示逻辑，采用flex布局构建所述流程图的响应式布局逻辑，将所述渲染逻辑、显示逻辑和响应式布局逻辑整体打包为模型数据并存储；

Parser解析器，用于解析所述模型数据；

API事件生成模块，用于生成API事件；

Render模块，预先根据节点类型预先建立有对应的渲染程序，用于接收API事件，根据该API事件调用Parser解析器对模型数据进行解析，获取渲染逻辑、显示逻辑和响应式布局逻辑，根据所述流程图节点的渲染逻辑和节点类型，通过对应的渲染程序渲染流程图节点，根据所述显示逻辑显示流程图节点间的连接线样式，根据所述响应式布局逻辑对流程图进行响应式布局。

进一步地，所述节点类型包括非业务节点、连接器节点、连接线和异常节点。

进一步地，所述非业务节点包括if节点、开始节点和结束节点。

进一步地，采用JSON格式将所述渲染逻辑、显示逻辑和响应式布局逻辑整体打包为模型数据。

与现有技术，如canva的API编排方案相比，本发明具有以下优点：

(1)采用html进行编排流程图绘制，支持响应式，在小屏幕中也可以体验很好，适应不同屏幕大小设备，相比于canva的API编排方案，由于在如今移动互联网时代，人们的办公已经从PC转移到了手机，移动办公已经成为一种趋势，本发明方法适配移动终端，适用范围更广泛；

(2)采用html进行编排流程图绘制，对浏览器兼容更好，IE9才支持canvas，如果使用html理论上可以支持所有浏览器；

(3)在编码上，html相比canvas更为直观，样式调整更为方便，大部分样式可以由CSS实现；

(4)由于API编排中的流程图存在多种节点类型，不同节点类型对应的渲染要求也不一样，如形状大小的不同、异常节点的突出渲染等，针对节点类型分别调用对应的渲染程序进行渲染，实现个性化、丰富地渲染，满足API编排需求。

附图说明

图1为本发明实施例中提供的一种基于HTML实现API编排的系统的数据处理流程图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

实施例1

本实施例提供一种基于HTML实现API编排的方法，API编排用于编排流程图，该流程图包括流程图节点和流程图节点间的连接线样式，方法包括：采用html元素构建流程图节点的渲染逻辑，采用层叠样式表css构建流程图节点间的连接线样式的显示逻辑，采用flex布局构建流程图的响应式布局逻辑，基于渲染逻辑、显示逻辑和响应式布局逻辑渲染流程图。

该方法具有以下特点：

1)使用html元素进行渲染，通过css(层叠样式表)对样式进行定制，并且能够实时动态进行展示；

2)css样式可以实现直线，曲线，贝塞尔曲线等连接线样式，实现节点之间的连接；

3)flex布局可以实现响应式布局，保证在不同屏幕设备中显示效果达到最佳；

4)可将渲染逻辑、显示逻辑和响应式布局逻辑打包保存，前端读取该打包文件对API编排的流程图进行渲染显示，实现将模型和视图分离，便于终端显示；

5)借助css动画效果，在流程预跑中可以以动画形式展示流程流转效果。

作为一种优选的实施方式，方法还包括：基于构建的流程图节点的渲染逻辑，根据节点类型分别调用预先建立的对应的渲染程序进行渲染。

采用html元素构建的流程图节点的渲染逻辑，实现通过浏览器进行API编排渲染，但由于API编排中的流程图存在多种节点类型，不同节点类型对应的渲染要求也不一样，如形状大小的不同、异常节点的突出渲染等，针对节点类型分别调用对应的渲染程序进行渲染，实现个性化、丰富地渲染，满足API编排需求。

本实施例中，节点类型包括非业务节点、连接器节点、连接线和异常节点。具体地，非业务节点包括if节点、开始节点和结束节点。

本实施例中，方法具体为：

接收API事件，然后根据流程图节点的渲染逻辑和节点类型，通过对应的渲染程序渲染流程图节点，根据显示逻辑显示流程图节点间的连接线样式，根据响应式布局逻辑对流程图进行响应式布局。

将渲染逻辑、显示逻辑和响应式布局逻辑整体打包为模型数据，通过终端中的Parser解析器解析该模型数据进行调用。

如图1所示，本实施例还提供一种基于HTML实现API编排的系统，API编排用于编排流程图，该流程图包括流程图节点和流程图节点间的连接线样式，系统包括：

流程模型，用于采用html元素构建流程图节点的渲染逻辑，采用层叠样式表构建流程图节点间的连接线样式的显示逻辑，采用flex布局构建流程图的响应式布局逻辑，将渲染逻辑、显示逻辑和响应式布局逻辑整体打包为模型数据并存储；

Parser解析器，用于解析模型数据；

API事件生成模块Event，用于生成API事件，即负责接收值改变事件，根据事件调用Render进行重新渲染；

Render模块，预先根据节点类型预先建立有对应的渲染程序，用于接收API事件，根据该API事件调用Parser解析器对模型数据进行解析，获取渲染逻辑、显示逻辑和响应式布局逻辑，根据流程图节点的渲染逻辑和节点类型，通过对应的渲染程序渲染流程图节点，根据显示逻辑显示流程图节点间的连接线样式，根据响应式布局逻辑对流程图进行响应式布局。

本实施例中，采用JSON格式将渲染逻辑、显示逻辑和响应式布局逻辑整体打包为模型数据，前端读取json进行绘制。

根据节点类型建立的渲染程序包括：

1、BlockRender(负责非业务节点渲染，比如if节点，开始节点，结束节点等)；

2、ConnectorRender(负责连接器节点渲染)；

3、LineRender(负责连接线的渲染)；

4、ExceptionRender(负责异常节点的渲染)。

以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思做出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。