一种表单界面生成方法、装置、系统及可读存储介质与流程

1.本发明属于表单处理技术领域，具体涉及一种表单界面生成方法、装置、系统及可读存储介质。


背景技术：

2.在表单界面的业务开发过程中，往往需要前后端技术人员进行联调，例如在界面设计开发完成后与后端的api进行对接，这种开发模式往往投入资源大，效率低下，且前后端依赖性强，后端接口的变更会直接影响前端界面渲染的逻辑。
3.目前业内有提出一种基于json schema进行表单构建的方法，该方法虽然解决了每次都要重新配置表单的问题，但是也仅是解决了前端渲染，缺乏整体性，仍然未解决前后端联调时接口依赖的问题。


技术实现要素：

4.基于此，本发明旨在提出一种表单界面生成方法、装置、系统及可读存储介质，以克服现有技术的缺陷。
5.第一方面，本发明提供一种表单界面生成方法，该方法在中间件处执行，包括：
6.获取页面配置请求信息；
7.解析页面配置请求信息，获取所请求的api和ui schema信息；
8.把ui schema信息与api描述文档合并生成apiform描述文件；
9.向渲染引擎发送apiform描述文件，以供渲染引擎渲染生成表单界面。
10.进一步地，把ui schema与api描述文档合并包括：
11.对ui schema逐条分析，根据openapi协议把ui schema信息中的每一schema描述按照相同路径和名称合并至api描述文档。
12.进一步地，该方法还包括：
13.调用swagger框架的iswaggerprovider接口生成所述api描述文档。
14.进一步地，获取页面配置请求信息包括：
15.拦截网页的http请求；
16.分析url以识别页面配置请求信息。
17.第二方面，本发明提供一种表单界面生成方法，该方法在渲染引擎处执行，包括：
18.获取中间件发送的apiform描述文件；
19.解析apiform描述文件生成json schema和表单配置数据；
20.根据json schema渲染表单界面；
21.根据表单配置数据进行组件实例化，完成接口请求、交互和事件通知。
22.进一步地，解析apiform描述文件生成json schema和表单配置数据包括：
23.根据openapi协议把apiform描述文件以路径-方法的维度进行拆分；
24.解析每个拆分段的节点信息；
25.根据节点信息生成json schema和表单配置数据。
26.进一步地，根据json schema渲染表单界面包括：
27.基于schema组件递归形式逐级渲染表单，组件为第一类型时循环每一个子节点依次递归至schema组件，组件为第二类型时根据类型与widget组件的映射关系选择与组件类型相对应的widget组件进行渲染。
28.第三方面，本发明提供一种表单界面生成装置，至少包括：
29.中间件单元，用于执行第一方面的表单界面生成方法；
30.渲染单元，用于执行第二方面的表单界面生成方法。
31.第四方面，本发明提供一种表单界面生成系统，包括存储有计算机可执行指令的存储器和处理器，当计算机可执行指令被处理器执行时使得该系统执行第一方面和第二方面提供的表单界面生成方法。
32.本发明还提供一种可读存储介质，存储有计算机可执行程序，当该程序被执行时可实现第一方面和第二方面提供的表单界面生成方法。
33.从以上技术方案可以看出，本发明具有如下优点：
34.本发明一种表单界面生成方法、装置、系统及可读存储介质，其中的方法通过把ui schema与api描述文档生成apiform描述文件，由渲染引擎对apiform描述文件解析生成json schema和表单配置数据，进而完成界面渲染。把后端的api描述与前端的表单组件schema描述融合，生成的apiform描述文件包含了前后端的定义和交互方法，通过中间件完成前端界面的自动生成，实现快速的表单界面开发；前端开发人员无需独立开发表单界面，解决了前后端接口依赖的问题，有效提高前后端联调效率。
附图说明
35.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
36.图1本发明一种实施例提供的表单界面生成装置架构示意图
37.图2本发明一种实施例提供的表单界面生成方法流程示意图
38.图3本发明另一实施例提供的表单界面生成方法流程示意图
39.图4本发明另一实施例提供的表单界面生成方法执行示意图
40.图5本发明另一实施例中生成的表单界面示意图
41.图6本发明一种实施例提供的表单界面生成系统结构示意图
具体实施方式
42.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
43.实施例一
44.参阅图1，本发明提供一种表单界面生成装置，在本实施例中，还提供了其他组件的示例性说明。整体包括以下几个部分：
45.表单设计器，通过可视化拖拉方式对表单组件进行排版，将组件schema与openapi的请求参数或输出参数进行映射绑定，生成ui schema信息。
46.api服务框架，为业务实现逻辑接口，可通过例如swagger框架这样的service api可输出标准openapi描述文档。
47.中间件单元，将ui schema信息与api描述文档合并生成apiform描述文件。
48.渲染单元：解析apiform协议文档，并从ui组件库中获取协议中需要的ui组件，并组装成表单界面。
49.容易理解的是，以上各组件和/单元可以是由软件代码实现，此时上述的各组件和/或单元可存储于设置于例如控制电脑等控制端的存储器中。
50.本实施例所提供的表单界面生成装置，通过中间件单元把ui schema信息与api描述文档合并成apiform描述文件，该文件为包含前后端定义和交互方法的完整描述文档，渲染单元对apiform描述文件解析则可获取json schema，在ui组件库中获取所需的ui组件并渲染生成表单界面，无需前端开发人员重复开发界面，对于后端开发人员来说只需开发接口即可完成联调，能有效提高前后端联调效率。
51.实施例二
52.参阅图2，基于实施例一提供的表单界面生成装置，本实施例从中间件侧提供一种表单界面生成方法，包括：
53.获取页面配置请求信息；
54.解析页面配置请求信息，获取所请求的api和ui schema信息；
55.把ui schema信息与api描述文档合并生成apiform描述文件；
56.向渲染引擎发送apiform描述文件，以供渲染引擎渲染生成表单界面。
57.在一些实施例中，中间件通过filter插件的形式配置集成到网站项目中，该插件在网站中拦截http请求。
58.中间件通过分析url格式，识别到请求地址是获取apiform描述文件后，开始执行生成逻辑。
59.中间件首先从配置中心或数据库中获取客户端请求的页面配置信息，并从配置信息中获取到api名称和ui schema信息。
60.在一些实施例中，生成api描述文档时，中间件可以调用swagger框架的iswaggerprovider接口生成网站的api文档，并过滤出客户端请求的对应api。
61.逐条分析ui schema的内容，根据openapi的协议将ui schema的每一段schema描述按照相同路径和名称合并到api对应的描述文档节点里面。在一些实施例中，开发人员关注的关键节点包括parameters、requestbody、responses等。
62.中间件以json格式把apiform描述文件返回给渲染引擎进行渲染。
63.实施例三
64.参阅图3，基于实施例一提供的表单界面生成装置，本实施例从渲染引擎侧提供一种表单界面生成方法，包括：
65.获取中间件发送的apiform描述文件；
66.解析apiform描述文件生成json schema和表单配置数据；
67.根据json schema渲染表单界面；
68.根据表单配置数据进行组件实例化，完成接口请求、交互和事件通知。
69.在一些实施例中，渲染引擎在解析描述文件之前还需要加载表单配置，从全局组件库中下载远程组件。
70.在一些实施例中，渲染引擎apiform描述文件对解析时包括：
71.根据openapi协议，以“路径-方法”(path.method)的维度进行拆分；
72.解析每个拆分段“路径-方法”下的节点信息，这些节点包括parameters、requestbody、responses等；
73.渲染引擎根据这些节点信息生成json schema，根据表单配置数据进行组件实例化，完成接口请求、交互和事件通知。
74.在一些实施例中，渲染表单界面包括：
75.通过json schema基于schema组件递归的形式，逐级渲染数据。
76.判断组件type类型，对于复合类型(object、array等)，循环每一个子节点依次递归到schema组件进行递归处理；对于简单类型(string、number、boolean、other等)，根据类型与widget组件的映射关系选择对应的widget进行渲染。对于配置了ui:widget字段，则根据自定义widget进行渲染。
77.实施例四
78.参阅图4，本发明对涉及中间件和渲染引擎之间的交互所完成的表单界面生成作进一步描述。
79.当用户在浏览器中打开了一网页链接时，通过http通讯向渲染引擎请求生成表单。
80.渲染引擎请求获取页面schema。
81.中间件通过filter插件的形式配置集成到网站项目中，该插件在网站中拦截http请求。
82.中间件分析url格式，识别到请求地址是获取apiform描述文件后，开始执行生成逻辑。
83.中间件向配置中心请求获取页面配置请求信息。
84.解析页面配置请求信息，获取所请求的api名称和ui schema信息。
85.中间件调用swagger框架作为api服务，调用其iswaggerprovider接口生成网站的api文档，并过滤出客户端请求的对应api。
86.中间件逐条分析ui schema的内容，根据openapi的协议将ui schema的每一段schema描述按照相同路径和名称合并到api对应的描述文档节点。
87.以json格式向渲染引擎发送apiform描述文件。
88.渲染引擎根据apiform描述文件生成json schema和表单配置数据。
89.根据json schema渲染表单界面。
90.根据表单配置数据进行组件生命周期管理和具体的api调用，包括接口请求、交互和事件通知等。
91.完成渲染后向浏览器返回生成的表单界面，图5示出了一种渲染完成的表单界面
的说明性示例，但并不以此为限定。
92.本技术实施例提供的表单界面生成方法可以由表单界面生成系统执行，该系统可以是服务器、电脑、云端等，图6示出了该系统硬件结构框图，包括：至少一个处理器1，至少一个通信接口2，至少一个存储器3和至少一个通信总线4；
93.在本技术实施例中，处理器1、通信接口2、存储器3、通信总线4的数量为至少一个，且处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信；
94.处理器1可能是一个中央处理器cpu，或者是特定集成电路asic(application specific integrated circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路等；
95.存储器3可能包含高速ram存储器，也可能还包括非易失性存储器(non-volatile memory)等，例如至少一个磁盘存储器；
96.其中，存储器存储有计算机可执行指令，处理器可调用存储器存储的程序，所述程序用于：实现前述各个实施例提供的表单界面生成流程。
97.本技术实施例还提供一种存储介质，存储有计算机可执行程序，当该程序被执行时可实现前述各个实施例提供的表单界面生成方法。
98.以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的技术人员应当理解：其依然可以对前述实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。