一种页面生成方法、装置、计算机设备及存储介质

文献发布时间：2023-06-19 12:16:29

技术领域

本发明涉及计算机技术领域，特别涉及一种页面生成方法、装置、计算机设备及存储介质。

背景技术

在数字化转型的浪潮下，越来越多的业务转到了线上运营，其中就包括保险业务。通过线上进行销售的方式，因为其快捷且出单效率高的优势，被多数保险公司以及消费者所认同。然而，由于保险产品存在产品范围广、产品差异大、更新速度快等特点，在上新保险产品，生成对应的保险产品的页面的过程中，保险公司面临以下问题：

1、保险公司每年要在多个渠道上线多款新产品，核心系统对接外部渠道耗时长，上架周期长，开发人力成本高；

2、保险公司数字化转型过程中，传统核心系统烟囱式的系统架构，无法响应大流量，高频的出单节奏以及不断创新的全渠道场景需求；

3、多元化，精准化的用户体验对传统投保流程有更高的要求；

因此，亟需提出一种新的页面生成方法，以解决上述问题。

发明内容

为了解决现有技术的问题，本发明实施例提供了一种页面生成方法、装置、计算机设备以及存储介质，以克服现有技术中存在的产品上线周期长、开发人力成本高以及产品不能满足监管要求等问题。

为解决上述一个或多个技术问题，本发明采用的技术方案是：

第一方面，提供了一种页面生成方法，该方法包括如下步骤：

根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件；

根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据；

根据预设规则对所述实例化的页面数据进行配置，生成所述目标对象的目标页面。

进一步的，所述方法包括页面模板的生成过程，包括：

根据多个预先配置的组件以及预设基础页面生成规则生成多个基础页面；

对所述多个基础页面进行关联处理，生成页面模板。

进一步的，所述根据多个预先配置的组件以及预设基础页面生成规则生成多个基础页面包括：

根据多个预先配置的组件以及所述组件之间的关联关系生成多个中间模块；

根据所述多个中间模块以及所述预设基础页面生成规则生成多个基础页面。

进一步的，所述对所述多个基础页面进行关联处理，生成页面模板包括：

根据所述多个基础页面之间的页面跳转关系对所述多个基础页面进行关联处理，生成页面模板。

进一步的，所述根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据包括：

利用预设解析器对所述至少一个页面模板进行解析，获取需要关联目标数据的至少一个目标组件；

将每一所述目标组件与对应的目标数据进行组装后进行实例化，生成实例化的页面数据。

进一步的，所述根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据前，所述方法还包括：

利用预设接口从预设平台获取所述目标对象的目标数据。

进一步的，所述目标对象包括保险产品，所述根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板包括：

接收待生成页面的保险产品的页面生成请求，从所述页面生成请求中获取所述保险产品的类型信息，所述类型信息用于表征所述保险产品的险种类型；

根据所述类型信息从预设模板库中匹配出至少一个页面模板。

第二方面，提供了一种页面生成装置，所述装置包括：

模板获取模块，用于根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件；

数据生成模块，用于根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据；

页面生成模块，用于根据预设规则对所述实例化的页面数据进行编辑，生成所述目标对象的目标页面。

第三方面，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如下步骤：

根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件；

根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据；

根据预设规则对所述实例化的页面数据进行配置，生成所述目标对象的目标页面。

第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如下步骤：

根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件；

根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据；

根据预设规则对所述实例化的页面数据进行配置，生成所述目标对象的目标页面。

本发明实施例提供的技术方案带来的有益效果是：

本发明实施例提供的页面生成方法、装置、计算机设备及存储介质，通过根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件，根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据，根据预设规则对所述实例化的页面数据进行配置，生成所述目标对象的目标页面，无需针对不同目标对象进行重复开发，只需根据目标数据对页面模板进行配置即可快速配置出全渠道通用的目标对象的目标页面，实现目标对象的快速上架，解决了欠缺研发能力的情况下，目标对象上线周期长、目标对象不能满足监管要求等问题；

本发明实施例提供的页面生成方法、装置、计算机设备及存储介质，通过根据多个预先配置的组件以及所述组件之间的关联关系生成多个中间模块，根据所述多个中间模块以及所述预设基础页面生成规则生成多个基础页面，避免了由于组件颗粒度较细而导致构建页面的难度较大的问题，提高模板页面的生成效率。

附图说明

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

图1是根据一示例性实施例示出的页面生成方法的流程图；

图2是根据一示例性实施例示出的页面模板解析的流程图；

图3是根据一示例性实施例示出的消息通信的交互图；

图4是根据另一示例性实施例示出的页面生成方法的流程图；

图5是根据一示例性实施例示出的页面生成装置的结构示例图；

图6是根据一示例性实施例示出的计算机设备的内部结构示意图。

具体实施方式

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

如背景技术所述，现有技术中在欠缺研发能力的情况下，会导致产品上线周期长、开发人力成本高以及产品不能满足监管要求等问题。

为解决上述问题，本申请实施例中创造性的提出了一种页面生成方法，该方法可适用于不同的应用场景中。例如，在保险产品的场景中，该方法通过轻量的投保可配置系统快速集成到保险公司核心，快速配置出全渠道通用的投保页面。该方法无需针对不同保险产品进行重复开发，仅需要对接保险公司核心获取保险数据，无需额外的开发人力，只需要编辑保险的产品属性即上新一个保险产品，为欠缺数字化能力的传统保险公司提供技术赋能，增加产品迭代能力与用户触达广度。

下面将结合附图和各个实施例，对本申请的方案进行详细介绍。

实施例一

图1是根据一示例性实施例示出的页面生成方法的流程图，参照图1所示，以目标对象保险产品为例，保险产品的投保页面生成的过程如下：

步骤一、对预先配置的组件进行搭配组合，生成多个中间模块；

具体的，组件(component)是组成页面的基本元素，当目标对象为保险产品时，组件是组成保险投保页面的基本元素。本发明实施例中，通过对保险产品以及其对应的页面进行分析整理，预先配置了很多组件，如：轮播图、输入框、日期选择器、地区选择、按钮、弹窗、提示、进度条、保障详情、健康告知、利益演示等等组件，还可以设定组件的初始默认值(default Data)供组件预览使用查看它的表现形式。

具体的，由于组件颗粒度较细，通常一个页面包含几十上百个组件，如果直接通过组件构建出页面，对运营人员创建出页面的难度较大，基于此原因，本发明实施中，提出了中间模块的概念，中间模块由多个组件自由搭配组合形。运营人员通过拖动几个模块即可创建出一个目标对象的页面，如保险产品的投保页面等。

具体的，本发明实施例中，还可以对中间模块的属性进行设置，如：模块标题、模块css样式、是否关联保险产品数据、关联保险产品哪些数据等。可关联的保险产品数据包括但不限于基本信息、保险条款、投保要素、健康告知等。

步骤二、对多个中间模块进行搭配组合，生成多个基础页面；

具体的，多个中间模块自由搭配组合可以形成一个基础页面。本发明实施例中，支持对基础页面的页面标题、中间模块顺序、中间模块最终表现的形态等信息进行设置。其中，中间模块最终表现的形态包括但不限于产品详情的头部介绍是以图片、视频、图片轮播、还是图片与视频结合的方式等。

步骤三、对多个基础页面进行搭配组合，生成多个页面模板；

具体的，将保险产品投保过程中涉及到的多个基础页面组合在一起即可形成保险产品投保页面模板。优选地，可通过页面可视化拖拽的方式创建模板。

作为一种较优的实施方式，本发明实施例中，页面模板可通过以下方式实施生成：

通过react-dnd结合模板工具实现页面的拖拽布局。页面的可视化可以通过将移动端H5应用中编写好的组件通过Rollup打包成对应的bundler，将打包好的bundler以JS-SDK的方式注入到模板工具中，模板工具接收到bundler后可以通过模块查询列表将需要的模块添加到页面中，拥有defaultData的组件通过模块的关联，最后聚合成一个页面结合模板工具接收到的bundler，将配置好的页面JSON数据通过组件的寻址，模块依赖关系与组件初始值的注入呈现页面。

这里需要说明的是，React-dnd为基于React实现的拖拽工具库。RollUp是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序。JS-SDK是一种以JavaScript编写的基于网页的软件开发包。

步骤四、将选定的一个或多个页面模板与保险商品结合后生成实例化的投保页面数据；

具体的，这里需要说明的是，图1中的保险商品指保险产品的数据定义，包含商品的名称、健康告知、保障条款、投保要素等，其中投保要素即为需要采集的要素，包括但不限于姓名、证件信息、社保、职业等等。

具体的，系统通过解析页面模板json数据，寻找出关联保险商品数据的模块或组件，拉取并解析保险商品对应的数据，与页面模板json数据组装完成后实例化保存至系统数据库中。这里需要说明的是，本发明实施例中，同一页面模板可以与不同商品结合，同一商品也可与不同页面模板结合生成实例化投保页面数据。

步骤五、配置投保页面数据，生成投保页面。

具体的，本发明实施例中，可以对实例化投保页面数据进行二次编辑，支持PC端的配置数据同步预览与移动端的预览。配置内容包括但不限于修改轮播图、修改相关文案信息、修改标题、隐藏模块、主题色切换、css样式定义等。编辑调整的效果会实时可视化的展示在页面中。这里需要说明的是，该步骤中的页面呈现已经和投放到C端(消费者端)的页面基本一致了。

具体实施时，可以预先按照上述步骤一至步骤三的方法预先配置出适用于不同产品的页面模板，在针对某一产品生成目标页面时，可以直接调用预先配置的页面模板，然后根据产品数据对页面模板进行配置，生成最终的目标页面。

为此，本发明实施例中，还提供了一种轻量的页面可配置系统，该系统主要包括投保配置和iframe嵌入H5应用。该系统可对接预设平台(如保险公司核心平台)，从预设平台获取目标对象的目标数据，实现无需替换预设平台，通过共享服务赋能前台，提供快速链接、产品快速上架、支持高并发在线业务的能力，自定义可配置化目标页面的实现方案。

具体的，通过上述系统进行页面生成的过程如下：

第一步、搭建页面的容器：将移动端H5应用(包括组件、关联关系解析器的集合)通过iframe引入的方式集成到投保页面配置中，通过iframe引入的应用HTTP协议要与主应用协议一致，并通过nginx设置不同应用不同域名时的跨域访问。其中，

第二步、接收模板json数据组装页面：将实例化后的页面模板json数据传递到H5应用中，通过主应用发送window.postMessage消息，iframe嵌入的子应用接收消息，接收到页面模板json数据后，通过H5应用中内置实现的json-template-parse处理模板数据，如图2所示。其中，window.postMessage为网页端应用之间通过iframe进行集成时的一种通信方法，json-template-parse为H5应用中自研的解析模板数据的工具方法。

第三步、实现配置界面与H5应用的通信与异常数据的处理：配置页面发送window.postMessage消息，H5应用通过window.addeventlistener监听发送的消息来获取，如图3所示。

第四步、消息数据的局部同步与增量更新：模板数包含了投保配置页面所有的信息，数据量通常较大，页面配置每次都是针对组件局部进行调整，希望每次的调整只更改对应的部分不影响全局，因为每个组件都有对应的ID，通过ID找到组件在模板树状结构中的位置position，每次编辑修改时只传递对应的修改的位置position与堆中模板对象指定的数据，就可以达到局部同步与增量更新。

第五步、根据保存配置好的模板数据生成投保页面：通过API接口获取保存好的模板数据，通过json-template-parse处理模板数据，输出渲染函数呈现页面。

实施例二

对应于上述实施例一，本申请提供了一种页面生成方法，其中，本实施例中，与上述实施例一相同或相似的内容，可以参考上文介绍，后续不再赘述。

如图4所示，该方法包括如下步骤：

S1：根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件。

具体的，目标对象包括但不限于保险产品，待生成页面包括但不限于保险产品的投保页面。组件为组成页面的基本元素，包括但不限于轮播图、输入框、日期选择器、地区选择、按钮、弹窗、提示、进度条、保障详情、健康告知、利益演示等。

S2：根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据。

具体的，选定好目标对象需要的页面模板后，将选定的页面模板与目标对象的目标数据结合后，生成实例化的页面数据。这里需要说明的是，本发明实施例中，同一页面模板可以与不同的目标对象的目标数据结合生成实例化投保页面数据，同一目标对象的目标数据也可与不同页面模板结合生成实例化投保页面数据，这里不做限制，用户可以根据实际需求进行设置。

S3：根据预设规则对所述实例化的页面数据进行配置，生成所述目标对象的目标页面。

具体的，预设规则可以是根据不同渠道场景的需求以及保监会对于保险公司数字化转型的监管新规定，根据时事、政策的变化对页面相关内容进行修改，也可以是根据用户实际需求对页面相关内容进行修改。修改内容包括但不限于修改轮播图、修改相关文案信息、修改标题、隐藏模块、主题色切换、css样式定义等。

作为一种较优的实施方式，本发明实施例中，所述方法包括页面模板的生成过程，包括：

根据多个预先配置的组件以及预设基础页面生成规则生成多个基础页面；

对所述多个基础页面进行关联处理，生成页面模板。

具体的，预设基础页面生成规则可以是用户自定义的页面生成规则，也可以是针对某类产品的页面生成需求而制定的页面生成规则，这里不做限制。

作为一种较优的实施方式，本发明实施例中，所述根据多个预先配置的组件以及预设基础页面生成规则生成多个基础页面包括：

根据多个预先配置的组件以及所述组件之间的关联关系生成多个中间模块；

根据所述多个中间模块以及所述预设基础页面生成规则生成多个基础页面。

具体的，由于组件颗粒度较细，通常一个页面包含几十上百个组件，如果直接通过组件构建出页面对运营人员创建出页面的难度较大。为解决这一问题，本发明实施例中，设置先将多个组件搭配组合生成多个中间模块，在将多个中间模块搭配组合生成多个基础页面。

作为一种较优的实施方式，本发明实施例中，所述对所述多个基础页面进行关联处理，生成页面模板包括：

根据所述多个基础页面之间的页面跳转关系对所述多个基础页面进行关联处理，生成页面模板。

作为一种较优的实施方式，本发明实施例中，所述根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据包括：

利用预设解析器对所述至少一个页面模板进行解析，获取需要关联目标数据的至少一个目标组件；

将每一所述目标组件与对应的目标数据进行组装后进行实例化，生成实例化的页面数据。

作为一种较优的实施方式，本发明实施例中，所述根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据前，所述方法还包括：

利用预设接口从预设平台获取所述目标对象的目标数据。

具体的，本发明实施例中，设置系统可以直接对接预设平台，直接通过预设接口从预设平台获取所述目标对象的目标数据，预设平台包括但不限于保险公司平台。这样设置，预设平台可以无需替换核心，只需要通过预设接口向预设平台请求目标数据即可。

作为一种较优的实施方式，本发明实施例中，所述目标对象包括保险产品，所述根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板包括：

接收待生成页面的保险产品的页面生成请求，从所述页面生成请求中获取所述保险产品的类型信息，所述类型信息用于表征所述保险产品的险种类型；

根据所述类型信息从预设模板库中匹配出至少一个页面模板。

实施例三

对应于上述实施例一和实施例二，本申请还提供了一种页面生成装置，其中，本实施例中，与上述实施例一或实施例二相同或相似的内容，可以参考上文介绍，后续不再赘述。如图5所示，该装置包括：

模板获取模块，用于根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件；

数据生成模块，用于根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据；

页面生成模块，用于根据预设规则对所述实例化的页面数据进行编辑，生成所述目标对象的目标页面。

作为一种较优的实施方式，本发明实施例中，所述装置还包括：

模板生成模块，用于根据多个预先配置的组件以及预设基础页面生成规则生成多个基础页面；对所述多个基础页面进行关联处理，生成页面模板。

作为一种较优的实施方式，本发明实施例中，所述模板生成模块还用于：

根据多个预先配置的组件以及所述组件之间的关联关系生成多个中间模块；

根据所述多个中间模块以及所述预设基础页面生成规则生成多个基础页面。

作为一种较优的实施方式，本发明实施例中，所述模板生成模块还用于：

根据所述多个基础页面之间的页面跳转关系对所述多个基础页面进行关联处理，生成页面模板。

作为一种较优的实施方式，本发明实施例中，所述数据生成模块用于：

利用预设解析器对所述至少一个页面模板进行解析，获取需要关联目标数据的至少一个目标组件；

将每一所述目标组件与对应的目标数据进行组装后进行实例化，生成实例化的页面数据。

作为一种较优的实施方式，本发明实施例中，所述装置包括：

数据获取模块，用于利用预设接口从预设平台获取所述目标对象的目标数据。

作为一种较优的实施方式，本发明实施例中，所述模板获取模块用于：

接收待生成页面的保险产品的页面生成请求，从所述页面生成请求中获取所述保险产品的类型信息，所述类型信息用于表征所述保险产品的险种类型；

根据所述类型信息从预设模板库中匹配出至少一个页面模板。

实施例四

对应于上述实施例一至实施例三，本申请还提供了一种计算机设备，其中，本实施例中，与上述实施例一至实施例三相同或相似的内容，可以参考上文介绍，后续不再赘述。如图6所示，该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种执行计划的优化方法。

本领域技术人员可以理解，图6中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

作为一种较优的实施方式，本发明实施例中，计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：

根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件；

根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据；

根据预设规则对所述实例化的页面数据进行配置，生成所述目标对象的目标页面。

作为一种较优的实施方式，本发明实施例中，处理器执行计算机程序时还实现以下步骤：

根据多个预先配置的组件以及预设基础页面生成规则生成多个基础页面；

对所述多个基础页面进行关联处理，生成页面模板。

作为一种较优的实施方式，本发明实施例中，处理器执行计算机程序时还实现以下步骤：

根据多个预先配置的组件以及所述组件之间的关联关系生成多个中间模块；

根据所述多个中间模块以及所述预设基础页面生成规则生成多个基础页面。

作为一种较优的实施方式，本发明实施例中，处理器执行计算机程序时还实现以下步骤：

根据所述多个基础页面之间的页面跳转关系对所述多个基础页面进行关联处理，生成页面模板。

作为一种较优的实施方式，本发明实施例中，处理器执行计算机程序时还实现以下步骤：

利用预设解析器对所述至少一个页面模板进行解析，获取需要关联目标数据的至少一个目标组件；

将每一所述目标组件与对应的目标数据进行组装后进行实例化，生成实例化的页面数据。

作为一种较优的实施方式，本发明实施例中，处理器执行计算机程序时还实现以下步骤：

利用预设接口从预设平台获取所述目标对象的目标数据。

作为一种较优的实施方式，本发明实施例中，处理器执行计算机程序时还实现以下步骤：

接收待生成页面的保险产品的页面生成请求，从所述页面生成请求中获取所述保险产品的类型信息，所述类型信息用于表征所述保险产品的险种类型；

根据所述类型信息从预设模板库中匹配出至少一个页面模板。

实施例五

对应于上述实施例一至实施例四，还提供了一种计算机可读存储介质，其中，本实施例中，与上述实施例一至实施例四相同或相似的内容，可以参考上文介绍，后续不再赘述。该计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时，实现如下步骤：

根据待生成页面的目标对象的页面生成请求从预设模板库中匹配出至少一个页面模板，所述页面模板包括至少一个组件；

根据所述至少一个页面模板以及所述目标对象的目标数据生成实例化的页面数据；

根据预设规则对所述实例化的页面数据进行配置，生成所述目标对象的目标页面。