一种Web页面的渲染方法、系统及相关装置

技术领域

本申请涉及数据处理领域，特别涉及一种Web页面的渲染方法、系统及相关装置。

背景技术

原有平台系统实现页面的生成是基于jsp或html技术完成，采用此种方式会有诸多缺点，例如系统中的页面字段的展示名称、显示逻辑、校验关系等都是通过硬编码方式写到jsp或html中的，需求上如果要增加、删除、修改字段或校验关系等，就得手动修改源代码。

发明内容

本申请的目的是提供一种Web页面的渲染方法、渲染系统、计算机可读存储介质和电子设备，能够快速实现Web页面渲染。

为解决上述技术问题，本申请提供一种Web页面的渲染方法，具体技术方案如下：

接收渲染请求；

根据所述渲染请求调用Schema编辑器配置表单设计器，生成json对象数据；

根据所述json对象数据包含的Schema配置信息显示对应的Web页面。

可选的，根据所述渲染请求调用Schema编辑器配置表单设计器包括：

根据所述渲染请求确定对应的页面模板；

调用Schema编辑器配置所述页面模板中的表单设计器。

可选的，根据所述渲染请求调用Schema编辑器配置表单设计器，生成json对象数据包括：

确认所述渲染请求中的页面配置信息；

根据所述页面配置信息调用Schema编辑器配置表单设计器；

保存所述表单设计器的内容，得到所述json对象数据。

可选的，根据所述json对象数据包含的Schema配置信息显示对应的Web页面包括：

将Schema配置信息解析为字段，利用字段解析器对每个所述字段进行渲染，得到UI组件；其中，所述UI组件为基于ant design框架的UI组件；

整合所述UI组件，得到所述Web页面。

可选的，根据所述json对象数据包含的Schema配置信息显示对应的Web页面时，还包括：

判断tab页签的数量是否为1；

若是，不展示所述tab页签。

可选的，利用字段解析器对每个所述字段进行渲染，得到UI组件之前，还包括：

修改所述jsonschema编辑组件的源代码，以支持所述ant design框架。

本申请还提供一种Web页面的渲染系统，包括：

请求接收模块，用于接收渲染请求；

表单配置模块，用于根据所述渲染请求调用Schema编辑器配置表单设计器，生成json对象数据；

页面渲染模块，用于根据所述json对象数据包含的Schema配置信息显示对应的Web页面。

可选的，表单配置模块包括：

确认单元，用于确认所述渲染请求中的页面配置信息；

配置单元，用于根据所述页面配置信息调用Schema编辑器配置表单设计器；

存储单元，用于保存所述表单设计器的内容，得到所述json对象数据。

本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的方法的步骤。

本申请还提供一种电子设备，包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时实现如上所述的方法的步骤。

本申请提供一种Web页面的渲染方法，包括：接收渲染请求；根据所述渲染请求调用Schema编辑器配置表单设计器，生成json对象数据；读取所述json对象数据，得到Schema配置信息；根据所述json对象数据包含的Schema配置信息显示对应的Web页面。

本申请基于json对象数据和Schema配置信息渲染得到Web页面，使得Web页面的生成和修改不依赖于硬编码，而可以通过前端可视化的json schema配置来实现，此外由于json schema的修改记录还保留了版本，还能进一步审查页面的修改情况。

本申请还提供一种Web页面的渲染系统、计算机可读存储介质和电子设备，具有上述有益效果，此处不再赘述。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请实施例所提供的一种Web页面的渲染方法的流程图；

图2为本申请实施例所提供表单设计器配置流程示意图；

图3为本申请实施例所提供的一种Web页面的渲染系统结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

请参考图1，图1为本申请实施例所提供的一种Web页面的渲染方法的流程图，该方法包括：

S101：接收渲染请求；

本步骤旨在接收渲染请求，该渲染请求可以源于外界设备或者终端，也可以将动作事件作为触发条件，并视为渲染请求。例如当Web页面包含的表单数据被填入数据后，此时Web页面需要重新刷新，亦可将数据填入过程视为发出渲染请求的过程。

在此对于渲染请求包含的内容不作限定，其可以仅为一个请求数据，而实际渲染所需数据可以在渲染请求后单独以数据包等形式传输，或者由浏览器自动向后台或者前端请求渲染所需数据。渲染请求也可以包含Web页面所需显示的相关数据，包含变更的数据内容、格式和类型等等。

S102：根据所述渲染请求调用Schema编辑器配置表单设计器，生成json对象数据；

本步骤旨在配置表单设计器，以得到json对象数据。无论渲染请求中是否包含数据，本步骤需要与渲染请求建立映射关系，即本步骤得到的json数据与该渲染请求存在映射关系，以便于生成系统日志或者异常时溯源。需要注意的是，本申请并非仅针对表单形式的Web页面，而是将Web页面视为表单，即每个显示区域均可视为表单中的单元格内容。特别的，对于需要填入数据的Web页面，其填入框本身即为单元格。而本申请旨在利用Schema编辑器配置表单设计器，即配置Web页面中各单元格的位置、格式和类型。单元格位置即每个单元格在Web页面的位置所在，而格式指单元格中内容的显示格式，类型指单元格的类型，可以包含选择框、下拉框，以供用户选择填写单元格内容等。

作为本步骤一种优选的执行方式，在执行本步骤时，可以利用页面模板配置表单设计器。即根据渲染请求确定对应的页面模板，再调用Schema编辑器配置页面模板中的表单设计器。本实施例默认页面模板为事先配置的Web页面模板，且页面模板可以根据Web的不同用途和类型存在多种模板，以适应不同Web页面的渲染需求。例如，页面模板可以包括查询模板和维护模板两种，查询模板可以包括查询条件、字段名、查询列表等，而维护模板可以包括字段和按钮等等，即不同的页面模板可以根据其应用需求进行适配，并包含不同的内容。

无论是否采用页面模板，通过表单设计器配置Web页面，无需直接对Web的源代码进行编辑和修改，而是通过前端schema配置来实现，甚至可以通过前端可视化的jsonschema配置来实现。对于Web页面的内容修改、编辑，均摒弃了对硬代码的修改，提高了Web页面的编辑、修改效率。若采用页面模板，即适配表单设计器的页面模板，可以进一步提高Web页面的渲染效率。

进一步的，在本步骤的基础上，在调用Schema编辑器配置表单设计器时，可以配置当前版本，即得到包含Schema配置信息的json对象数据时，利用Schema编辑器配置当前版本信息。在此对于当前版本信息的内容和形式不作具体限定，其版本信息可以包含时间、版本号等信息，用于区分版本。此后可以基于Web页面对应的版本信息确定各版本之间的对于Web页面的修改情况。需要注意的是，配置当前版本信息可以为配置表单设计器时的默认操作，即默认在执行本步骤时需要配置当前版本信息。

S103：根据所述json对象数据包含的Schema配置信息显示对应的Web页面。

由于步骤S102中已经配置表单设计器，即Web页面的所有内容均已配置完毕，本步骤旨在显示对应的Web页面。

优选的，在执行本步骤时，可以将Schema配置信息解析为字段，利用字段解析器对每个字段进行渲染，得到UI组件，再整合各部分UI组件，得到Web页面。。该UI组件为基于antdesign框架的UI组件。将普通的react-jsonschema-form表单渲染组件进行优化，通过修改jsonschema编辑组件的源代码，以支持ant design框架，将其由原生html form表单展示为ant design表单，使得生成的Web页面效果更佳。

本申请实施例基于json对象数据和Schema配置信息渲染得到Web页面，使得Web页面的生成和修改不依赖于硬编码，而可以通过前端可视化的json schema配置来实现，此外由于json schema的修改记录还保留了版本，还能进一步审查页面的修改情况。

基于上述实施例，作为预选的实施例，若渲染请求不仅仅包含请求信息，则执行根据渲染请求调用Schema编辑器配置表单设计器这一步骤时，参见图2，图2为本申请实施例所提供表单设计器配置流程示意图，可以采用如下步骤：

S201：确认渲染请求中的页面配置信息；

S202：根据页面配置信息调用Schema编辑器配置表单设计器；

S203：保存表单设计器的内容，得到json对象数据。

本实施例中，先确定渲染请求中的页面配置信息，在基于页面配置信息调用Schema编辑器配置表单设计器。该页面配置信息可以为与上文实施例中页面模板中相似或相同的内容，即Web页面中各单元格的位置、格式和类型等信息。而此时可以针对渲染请求中的页面配置信息配置表单设计器，也可以根据页面配置信息对上一实施例中描述的页面模板进行调整和修改。表单设计器的内容即包含Schema配置信息，通常以json格式数据输出，即得到json对象数据。

本实施例针对上一实施例中渲染请求中若包含实际页面配置信息时的具体实施过程进行描述，在本实施例的基础上，渲染请求中还可以包含与Web生成相关的其他信息，也应在本申请的保护范围内。

基于上述实施例，作为预选的实施例，在执行步骤根据json对象数据包含的Schema配置信息显示对应的Web页面时，还可以针对tab页签的数量进行判断，以确定生成的Web页面中包含的tab页签。

具体的，可以判断tab页签的数量是否为1，若为1，则不展示tab页签。

由于生成的Web页面可能包含多块表格内容，在配置表单设计器时，通常将每块表格内容设为一个tab页签，即一个Web页面可能包含多个tab页签，而若Web页面仅包含一个tab页签，则此时可以在Web页面上显示当前tab页签。但若Web页面包含多个tab页签，通常需要在Web页面显示包含的若干tab页签。

通过对tab页签的数量进行判断，可以避免在tab页签数量仅为1时展示其页签，降低Web页面渲染负载，增强Web页面的渲染美化效果。

下面对本申请实施例提供的一种Web页面的渲染系统进行介绍，下文描述的渲染系统与上文描述的一种Web页面的渲染方法可相互对应参照。

参见图3，图3为本申请实施例所提供的一种Web页面的渲染系统结构示意图，本申请还提供一种Web页面的渲染系统，包括：

请求接收模块100，用于接收渲染请求；

表单配置模块200，用于根据所述渲染请求调用Schema编辑器配置表单设计器，生成json对象数据；

页面渲染模块300，用于根据所述json对象数据包含的Schema配置信息显示对应的Web页面。

基于上述实施例，作为优选的实施例，表单配置模块200包括：

确认单元，用于确认所述渲染请求中的页面配置信息；

配置单元，用于根据所述页面配置信息调用Schema编辑器配置表单设计器；

存储单元，用于保存所述表单设计器的内容，得到所述json对象数据。

基于上述实施例，作为优选的实施例，表单配置模块200包括：

模板配置单元，用于根据所述渲染请求确定对应的页面模板；

模板应用单元，用于调用Schema编辑器配置所述页面模板中的表单设计器。

基于上述实施例，作为优选的实施例，页面渲染模块300包括：

UI配置单元，用于将Schema配置信息解析为字段，利用字段解析器对每个所述字段进行渲染，得到UI组件；整合所述UI组件，得到所述Web页面；其中，所述UI组件为基于antdesign框架的UI组件。

基于上述实施例，作为优选的实施例，还包括：

页签判断模块，用于判断tab页签的数量是否为1；若是，不展示所述tab页签。

基于上述实施例，作为优选的实施例，还包括：

组件配置模块，用于修改所述jsonschema编辑组件的源代码，以支持所述antdesign框架。

本申请还提供了一种计算机可读存储介质，其上存有计算机程序，该计算机程序被执行时可以实现上述实施例所提供的步骤。该存储介质可以包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

本申请还提供了一种电子设备，可以包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时，可以实现上述实施例所提供的步骤。当然所述电子设备还可以包括各种网络接口，电源等组件。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例提供的系统而言，由于其与实施例提供的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。