CN114237594A - 一种表单界面生成方法、装置、系统及可读存储介质 - Google Patents

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

Info

Publication number
CN114237594A
CN114237594A CN202111356205.XA CN202111356205A CN114237594A CN 114237594 A CN114237594 A CN 114237594A CN 202111356205 A CN202111356205 A CN 202111356205A CN 114237594 A CN114237594 A CN 114237594A
Authority
CN
China
Prior art keywords
schema
form interface
apiform
rendering
interface
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
Application number
CN202111356205.XA
Other languages
English (en)
Inventor
何志明
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Vipshop Guangzhou Software Co Ltd
Original Assignee
Vipshop Guangzhou Software Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Vipshop Guangzhou Software Co Ltd filed Critical Vipshop Guangzhou Software Co Ltd
Priority to CN202111356205.XA priority Critical patent/CN114237594A/zh
Publication of CN114237594A publication Critical patent/CN114237594A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Stored Programmes (AREA)

Abstract

本申请一种表单界面生成方法、装置、系统及可读存储介质，方法包括获取页面配置请求信息；解析页面配置请求信息，获取所请求的API和UI schema信息；把所述UI schema信息与API描述文档合并生成ApiForm描述文件；向渲染引擎发送所述ApiForm描述文件；渲染引擎根据ApiForm描述文件进行前端表单界面的渲染，即实现前后端关于表单组件和接口的统一描述，通过中间件可以自行完成前端界面的自动生成，实现快速的表单界面开发；前端开发人员无需独立开发表单界面，解决了前后端接口依赖的问题，有效提高前后端联调效率。

Description

一种表单界面生成方法、装置、系统及可读存储介质
技术领域
本发明属于表单处理技术领域，具体涉及一种表单界面生成方法、装置、系统及可读存储介质。
背景技术
在表单界面的业务开发过程中，往往需要前后端技术人员进行联调，例如在界面设计开发完成后与后端的API进行对接，这种开发模式往往投入资源大，效率低下，且前后端依赖性强，后端接口的变更会直接影响前端界面渲染的逻辑。
目前业内有提出一种基于JSON Schema进行表单构建的方法，该方法虽然解决了每次都要重新配置表单的问题，但是也仅是解决了前端渲染，缺乏整体性，仍然未解决前后端联调时接口依赖的问题。
发明内容
基于此，本发明旨在提出一种表单界面生成方法、装置、系统及可读存储介质，以克服现有技术的缺陷。
第一方面，本发明提供一种表单界面生成方法，该方法在中间件处执行，包括：
获取页面配置请求信息；
解析页面配置请求信息，获取所请求的API和UI schema信息；
把UI schema信息与API描述文档合并生成ApiForm描述文件；
向渲染引擎发送ApiForm描述文件，以供渲染引擎渲染生成表单界面。
进一步地，把UI schema与API描述文档合并包括：
对UI schema逐条分析，根据OpenAPI协议把UI schema信息中的每一schema描述按照相同路径和名称合并至API描述文档。
进一步地，该方法还包括：
调用Swagger框架的ISwaggerProvider接口生成所述API描述文档。
进一步地，获取页面配置请求信息包括：
拦截网页的HTTP请求；
分析URL以识别页面配置请求信息。
第二方面，本发明提供一种表单界面生成方法，该方法在渲染引擎处执行，包括：
获取中间件发送的ApiForm描述文件；
解析ApiForm描述文件生成JSON Schema和表单配置数据；
根据JSON Schema渲染表单界面；
根据表单配置数据进行组件实例化，完成接口请求、交互和事件通知。
进一步地，解析ApiForm描述文件生成JSON Schema和表单配置数据包括：
根据OpenAPI协议把ApiForm描述文件以路径-方法的维度进行拆分；
解析每个拆分段的节点信息；
根据节点信息生成JSON Schema和表单配置数据。
进一步地，根据JSON Schema渲染表单界面包括：
基于schema组件递归形式逐级渲染表单，组件为第一类型时循环每一个子节点依次递归至schema组件，组件为第二类型时根据类型与Widget组件的映射关系选择与组件类型相对应的Widget组件进行渲染。
第三方面，本发明提供一种表单界面生成装置，至少包括：
中间件单元，用于执行第一方面的表单界面生成方法；
渲染单元，用于执行第二方面的表单界面生成方法。
第四方面，本发明提供一种表单界面生成系统，包括存储有计算机可执行指令的存储器和处理器，当计算机可执行指令被处理器执行时使得该系统执行第一方面和第二方面提供的表单界面生成方法。
本发明还提供一种可读存储介质，存储有计算机可执行程序，当该程序被执行时可实现第一方面和第二方面提供的表单界面生成方法。
从以上技术方案可以看出，本发明具有如下优点：
本发明一种表单界面生成方法、装置、系统及可读存储介质，其中的方法通过把UIschema与API描述文档生成ApiForm描述文件，由渲染引擎对ApiForm描述文件解析生成JSON Schema和表单配置数据，进而完成界面渲染。把后端的API描述与前端的表单组件Schema描述融合，生成的ApiForm描述文件包含了前后端的定义和交互方法，通过中间件完成前端界面的自动生成，实现快速的表单界面开发；前端开发人员无需独立开发表单界面，解决了前后端接口依赖的问题，有效提高前后端联调效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1本发明一种实施例提供的表单界面生成装置架构示意图
图2本发明一种实施例提供的表单界面生成方法流程示意图
图3本发明另一实施例提供的表单界面生成方法流程示意图
图4本发明另一实施例提供的表单界面生成方法执行示意图
图5本发明另一实施例中生成的表单界面示意图
图6本发明一种实施例提供的表单界面生成系统结构示意图
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例一
参阅图1，本发明提供一种表单界面生成装置，在本实施例中，还提供了其他组件的示例性说明。整体包括以下几个部分：
表单设计器，通过可视化拖拉方式对表单组件进行排版，将组件Schema与OpenAPI的请求参数或输出参数进行映射绑定，生成UI Schema信息。
API服务框架，为业务实现逻辑接口，可通过例如Swagger框架这样的Service API可输出标准OpenAPI描述文档。
中间件单元，将UI Schema信息与API描述文档合并生成ApiForm描述文件。
渲染单元：解析ApiForm协议文档，并从UI组件库中获取协议中需要的UI组件，并组装成表单界面。
容易理解的是，以上各组件和/单元可以是由软件代码实现，此时上述的各组件和/或单元可存储于设置于例如控制电脑等控制端的存储器中。
本实施例所提供的表单界面生成装置，通过中间件单元把UI Schema信息与API描述文档合并成ApiForm描述文件，该文件为包含前后端定义和交互方法的完整描述文档，渲染单元对ApiForm描述文件解析则可获取JSON Schema，在UI组件库中获取所需的UI组件并渲染生成表单界面，无需前端开发人员重复开发界面，对于后端开发人员来说只需开发接口即可完成联调，能有效提高前后端联调效率。
实施例二
参阅图2，基于实施例一提供的表单界面生成装置，本实施例从中间件侧提供一种表单界面生成方法，包括：
获取页面配置请求信息；
解析页面配置请求信息，获取所请求的API和UI schema信息；
把UI schema信息与API描述文档合并生成ApiForm描述文件；
向渲染引擎发送ApiForm描述文件，以供渲染引擎渲染生成表单界面。
在一些实施例中，中间件通过Filter插件的形式配置集成到网站项目中，该插件在网站中拦截HTTP请求。
中间件通过分析URL格式，识别到请求地址是获取ApiForm描述文件后，开始执行生成逻辑。
中间件首先从配置中心或数据库中获取客户端请求的页面配置信息，并从配置信息中获取到API名称和UI Schema信息。
在一些实施例中，生成API描述文档时，中间件可以调用Swagger框架的ISwaggerProvider接口生成网站的API文档，并过滤出客户端请求的对应API。
逐条分析UI Schema的内容，根据OpenAPI的协议将UI Schema的每一段Schema描述按照相同路径和名称合并到API对应的描述文档节点里面。在一些实施例中，开发人员关注的关键节点包括parameters、requestBody、responses等。
中间件以JSON格式把ApiForm描述文件返回给渲染引擎进行渲染。
实施例三
参阅图3，基于实施例一提供的表单界面生成装置，本实施例从渲染引擎侧提供一种表单界面生成方法，包括：
获取中间件发送的ApiForm描述文件；
解析ApiForm描述文件生成JSON Schema和表单配置数据；
根据JSON Schema渲染表单界面；
根据表单配置数据进行组件实例化，完成接口请求、交互和事件通知。
在一些实施例中，渲染引擎在解析描述文件之前还需要加载表单配置，从全局组件库中下载远程组件。
在一些实施例中，渲染引擎ApiForm描述文件对解析时包括：
根据OpenAPI协议，以“路径-方法”(path.method)的维度进行拆分；
解析每个拆分段“路径-方法”下的节点信息，这些节点包括parameters、requestBody、responses等；
渲染引擎根据这些节点信息生成JSON Schema，根据表单配置数据进行组件实例化，完成接口请求、交互和事件通知。
在一些实施例中，渲染表单界面包括：
通过JSON Schema基于schema组件递归的形式，逐级渲染数据。
判断组件type类型，对于复合类型(object、array等)，循环每一个子节点依次递归到Schema组件进行递归处理；对于简单类型(string、number、boolean、other等)，根据类型与Widget组件的映射关系选择对应的Widget进行渲染。对于配置了ui:widget字段，则根据自定义Widget进行渲染。
实施例四
参阅图4，本发明对涉及中间件和渲染引擎之间的交互所完成的表单界面生成作进一步描述。
当用户在浏览器中打开了一网页链接时，通过HTTP通讯向渲染引擎请求生成表单。
渲染引擎请求获取页面Schema。
中间件通过Filter插件的形式配置集成到网站项目中，该插件在网站中拦截HTTP请求。
中间件分析URL格式，识别到请求地址是获取ApiForm描述文件后，开始执行生成逻辑。
中间件向配置中心请求获取页面配置请求信息。
解析页面配置请求信息，获取所请求的API名称和UI Schema信息。
中间件调用Swagger框架作为API服务，调用其ISwaggerProvider接口生成网站的API文档，并过滤出客户端请求的对应API。
中间件逐条分析UI Schema的内容，根据OpenAPI的协议将UI Schema的每一段Schema描述按照相同路径和名称合并到API对应的描述文档节点。
以JSON格式向渲染引擎发送ApiForm描述文件。
渲染引擎根据ApiForm描述文件生成JSON Schema和表单配置数据。
根据JSON Schema渲染表单界面。
根据表单配置数据进行组件生命周期管理和具体的API调用，包括接口请求、交互和事件通知等。
完成渲染后向浏览器返回生成的表单界面，图5示出了一种渲染完成的表单界面的说明性示例，但并不以此为限定。
本申请实施例提供的表单界面生成方法可以由表单界面生成系统执行，该系统可以是服务器、电脑、云端等，图6示出了该系统硬件结构框图，包括：至少一个处理器1，至少一个通信接口2，至少一个存储器3和至少一个通信总线4；
在本申请实施例中，处理器1、通信接口2、存储器3、通信总线4的数量为至少一个，且处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信；
处理器1可能是一个中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路等；
存储器3可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)等，例如至少一个磁盘存储器；
其中，存储器存储有计算机可执行指令，处理器可调用存储器存储的程序，所述程序用于：实现前述各个实施例提供的表单界面生成流程。
本申请实施例还提供一种存储介质，存储有计算机可执行程序，当该程序被执行时可实现前述各个实施例提供的表单界面生成方法。
以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的技术人员应当理解：其依然可以对前述实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。

Claims (10)

1.一种表单界面生成方法，其特征在于，所述方法在中间件处执行，包括：
获取页面配置请求信息；
解析页面配置请求信息，获取所请求的API和UI schema信息；
把所述UI schema信息与API描述文档合并生成ApiForm描述文件；
向渲染引擎发送所述ApiForm描述文件，以供渲染引擎渲染生成表单界面。
2.根据权利要求1所述的，其特征在于，所述把UI schema与API描述文档合并包括：
对所述UI schema信息逐条分析，根据OpenAPI协议把所述UI schema信息中的每一schema描述按照相同路径和名称合并至所述API描述文档。
3.根据权利要求1所述的，其特征在于，所述方法还包括：
调用Swagger框架的ISwaggerProvider接口生成所述API描述文档。
4.根据权利要求1所述的，其特征在于，所述获取页面配置请求信息包括：
拦截网页的HTTP请求；
分析URL以识别页面配置请求信息。
5.一种表单界面生成方法，其特征在于，所述方法在渲染引擎处执行，包括：
获取中间件发送的ApiForm描述文件；
解析所述ApiForm描述文件生成JSON Schema和表单配置数据；
根据所述JSON Schema渲染表单界面；
根据所述表单配置数据进行组件实例化，完成接口请求、交互和事件通知。
6.根据权利要求5所述的，其特征在于，所述解析ApiForm描述文件生成JSON Schema和表单配置数据包括：
根据OpenAPI协议把ApiForm描述文件以路径-方法的维度进行拆分；
解析每个拆分段的节点信息；
根据所述节点信息生成JSON Schema和表单配置数据。
7.根据权利要求5所述的，其特征在于，所述根据JSON Schema渲染表单界面包括：
通过JSON Schema基于schema组件递归的形式，逐级渲染数据；
组件为第一类型时循环每一个子节点依次递归至schema组件，组件为第二类型时根据类型与Widget组件的映射关系选择与组件类型相对应的Widget组件进行渲染。
8.一种表单界面生成装置，其特征在于，所述装置至少包括：
中间件单元，用于执行如权利要求1-4任一项所述的表单界面生成方法；
渲染单元，用于执行如权利要求5-7任一项所述的表单界面生成方法。
9.一种表单界面生成系统，包括存储有计算机可执行指令的存储器和处理器，其特征在于，当计算机可执行指令被所述处理器执行时使得所述系统执行如权利要求1-7任一项所述的表单界面生成方法。
10.一种可读存储介质，存储有计算机可执行程序，其特征在于，当所述程序被执行时可实现如权利要求1-7任一项所述的表单界面生成方法。
CN202111356205.XA 2021-11-16 2021-11-16 一种表单界面生成方法、装置、系统及可读存储介质 Pending CN114237594A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111356205.XA CN114237594A (zh) 2021-11-16 2021-11-16 一种表单界面生成方法、装置、系统及可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111356205.XA CN114237594A (zh) 2021-11-16 2021-11-16 一种表单界面生成方法、装置、系统及可读存储介质

Publications (1)

Publication Number Publication Date
CN114237594A true CN114237594A (zh) 2022-03-25

Family

ID=80749640

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111356205.XA Pending CN114237594A (zh) 2021-11-16 2021-11-16 一种表单界面生成方法、装置、系统及可读存储介质

Country Status (1)

Country Link
CN (1) CN114237594A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117472372A (zh) * 2023-10-27 2024-01-30 北京真内控科技有限公司 一种响应式表单搭建方法及系统
CN117608568A (zh) * 2023-10-18 2024-02-27 广州致远电子股份有限公司 配置界面生成方法、装置、设备及存储介质

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117608568A (zh) * 2023-10-18 2024-02-27 广州致远电子股份有限公司 配置界面生成方法、装置、设备及存储介质
CN117608568B (zh) * 2023-10-18 2024-04-26 广州致远电子股份有限公司 配置界面生成方法、装置、设备及存储介质
CN117472372A (zh) * 2023-10-27 2024-01-30 北京真内控科技有限公司 一种响应式表单搭建方法及系统
CN117472372B (zh) * 2023-10-27 2024-04-09 北京真内控科技有限公司 一种响应式表单搭建方法及系统

Similar Documents

Publication Publication Date Title
CN107133267B (zh) 查询elasticsearch集群的方法、装置、电子设备和可读存储介质
US20200364033A1 (en) API Specification Generation
US20130046894A1 (en) Model-driven rest consumption framework
US8645490B2 (en) Web site implementation by mapping expression evaluation
CN107766344B (zh) 一种模板渲染的方法、装置及浏览器
CN114237594A (zh) 一种表单界面生成方法、装置、系统及可读存储介质
CN102567400B (zh) 一种实现Web访问的方法和Web服务器
US10831565B2 (en) Fault tolerant adapter system to consume database as a service
US11755744B2 (en) Application programming interface specification inference
CN111026634A (zh) 一种接口自动化测试系统、方法、装置及存储介质
CN110263070A (zh) 事件上报方法及装置
CN110727417A (zh) 一种数据处理方法和装置
CN111913705B (zh) 一种基于差异更新算法的JavaScript模板实现方法
CN113032244A (zh) 接口测试方法、装置、计算机系统和计算机可读存储介质
CN108496157B (zh) 使用扩展接口提供运行时跟踪的系统和方法
CN111414154A (zh) 前端开发的方法、装置、电子设备和存储介质
CN110941655B (zh) 一种数据格式转换方法及装置
GB2411984A (en) Updating forms
CN111373377A (zh) 错误处理
CN113590217B (zh) 基于引擎的函数管理方法、装置、电子设备及存储介质
CN114115897A (zh) 基于nodejs脚本动态生成项目本地可执行文件的方法
CN113238817A (zh) 一种接口透传方法、装置、电子设备和存储介质
US11301498B2 (en) Multi-cloud object store access
CN117435177B (zh) 应用程序接口构建方法、系统、设备及存储介质
CN117786259A (zh) 一种跨平台的页面埋点方法、装置、电子设备及存储介质

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