界面生成方法、装置、电子设备及存储介质

技术领域

本发明涉及互联网技术领域，特别是涉及一种界面生成方法、装置、电子设备及存储介质。

背景技术

用户界面(User Interface，简称UI)是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。

用户界面中包含大量的组件，各组件具有各自对应的属性、控制行为等信息。同一类型的界面在不同产品中的区别较大，比如，该同一类型的界面在不同产品中包含的组件不同，组件的属性信息不同，组件的控制行为信息不同，等等。

现有技术中，针对每个产品对应的界面单独开发，单独编写界面对应的代码，通过执行界面对应的代码生成界面。但是，该种方式生成界面的过程复杂，界面无法灵活配置。

发明内容

鉴于上述问题，提出了本发明实施例以便提供克服上述问题或者至少部分地解决上述问题的一种界面生成方法、装置、电子设备及存储介质。

第一方面，本发明实施例公开了一种界面生成方法，包括：从预先生成的数据库中读取待生成的目标界面对应的目标配置信息；所述目标配置信息包括所述目标界面对应的目标模板、所述目标模板包含的目标组件、所述目标组件的属性信息，以及所述目标组件的控制行为信息；加载所述目标模板和所述目标组件；基于所述目标组件的属性信息，加载所述目标组件的属性；基于所述目标组件的控制行为信息，加载所述目标组件的控制行为；在成功加载所述目标模板、所述目标组件、所述目标组件的属性，以及所述目标组件的控制行为后，生成所述目标界面。

可选地，所述数据库通过如下方式生成：生成各产品对应的界面中包含的组件集合；针对每个产品对应的界面，从所述组件集合中选取所述界面中包含的组件，基于选取的组件生成所述界面对应的模板；针对每个模板中包含的每个组件，对所述组件进行属性配置，得到所述组件的属性信息，以及对所述组件进行控制行为配置，得到所述组件的控制行为信息；将所述界面对应的模板、所述模板包含的组件、所述组件的属性信息，以及所述组件的控制行为信息，作为所述界面对应的配置信息存储至所述数据库中。

可选地，所述对所述组件进行控制行为配置，得到所述组件的控制行为信息，包括：从预先存储的事件集合中，选择所述组件对应的事件；配置在触发所述组件对应的事件后需要判断的条件对应的条件表达式，作为所述组件对应的条件表达式；配置在判断所述条件后需要执行的动作，以及所述动作对应的动作参数，将所述动作和所述动作参数组合生成所述组件对应的动作表达式；将所述组件对应的事件、所述组件对应的条件表达式，以及所述组件对应的动作表达式，作为所述组件的控制行为信息。

可选地，所述目标组件的控制行为信息包括：所述目标组件对应的事件、所述目标组件对应的条件表达式，以及所述目标组件对应的动作表达式；所述基于所述目标组件的控制行为信息，加载所述目标组件的控制行为，包括：将所述目标组件对应的事件与第一预设函数绑定；在触发所述目标组件对应的事件后，利用所述第一预设函数内部包含的第二预设函数调用所述目标组件对应的条件表达式，对调用的条件表达式中的条件进行判断；利用所述第二预设函数调用所述目标组件对应的动作表达式，按照调用的动作表达式中的动作参数，执行调用的动作表达式中的动作，完成加载所述目标组件的控制行为。

可选地，所述配置在触发所述组件对应的事件后需要判断的条件对应的条件表达式，包括：获取所述条件对应的组件的属性获取方法和属性信息；基于所述属性获取方法和属性信息生成逻辑判断条件，得到所述条件表达式。

可选地，所述配置在判断所述条件后需要执行的动作，包括：从预先存储的动作集合中，选择在判断所述条件后需要执行的动作；所述动作集合为各产品对应的界面中包含的组件对应的动作集合。

可选地，所述目标界面为目标保费测算界面，所述产品为保险产品，所述界面为保费测算界面。

可选地，所述对所述组件进行属性配置，得到所述组件的属性信息，包括：配置所述组件对应的选择项的数值，将所述选择项的数值作为所述组件的属性信息。

第二方面，本发明实施例公开了一种界面生成方法，包括：从预先生成的数据库中读取待生成的目标保费测算界面对应的目标配置信息；所述目标配置信息包括所述目标保费测算界面对应的目标模板、所述目标模板包含的目标组件、所述目标组件的属性信息，以及所述目标组件的控制行为信息；加载所述目标模板和所述目标组件；基于所述目标组件的属性信息，加载所述目标组件的属性；基于所述目标组件的控制行为信息，加载所述目标组件的控制行为；在成功加载所述目标模板、所述目标组件、所述目标组件的属性，以及所述目标组件的控制行为后，生成所述目标保费测算界面。

可选地，所述数据库通过如下方式生成：生成各保险产品对应的保费测算界面中包含的组件集合；针对每个保险产品对应的保费测算界面，从所述组件集合中选取所述保费测算界面中包含的组件，基于选取的组件生成所述保费测算界面对应的模板；针对每个模板中包含的每个组件，对所述组件进行属性配置，得到所述组件的属性信息，以及对所述组件进行控制行为配置，得到所述组件的控制行为信息；将所述保费测算界面对应的模板、所述模板包含的组件、所述组件的属性信息，以及所述组件的控制行为信息，作为所述保费测算界面对应的配置信息存储至所述数据库中。

第三方面，本发明实施例公开了一种界面生成装置，包括：读取模块，用于从预先生成的数据库中读取待生成的目标界面对应的目标配置信息；所述目标配置信息包括所述目标界面对应的目标模板、所述目标模板包含的目标组件、所述目标组件的属性信息，以及所述目标组件的控制行为信息；第一加载模块，用于加载所述目标模板和所述目标组件；第二加载模块，用于基于所述目标组件的属性信息，加载所述目标组件的属性；第三加载模块，用于基于所述目标组件的控制行为信息，加载所述目标组件的控制行为；生成模块，用于在成功加载所述目标模板、所述目标组件、所述目标组件的属性，以及所述目标组件的控制行为后，生成所述目标界面。

可选地，所述数据库通过如下模块生成：第一生成模块，用于生成各产品对应的界面中包含的组件集合；第二生成模块，用于针对每个产品对应的界面，从所述组件集合中选取所述界面中包含的组件，基于选取的组件生成所述界面对应的模板；配置模块，用于针对每个模板中包含的每个组件，对所述组件进行属性配置，得到所述组件的属性信息，以及对所述组件进行控制行为配置，得到所述组件的控制行为信息；存储模块，用于将所述界面对应的模板、所述模板包含的组件、所述组件的属性信息，以及所述组件的控制行为信息，作为所述界面对应的配置信息存储至所述数据库中。

可选地，所述配置模块包括：事件选择单元，用于从预先存储的事件集合中，选择所述组件对应的事件；条件配置单元，用于配置在触发所述组件对应的事件后需要判断的条件对应的条件表达式，作为所述组件对应的条件表达式；动作配置单元，用于配置在判断所述条件后需要执行的动作，以及所述动作对应的动作参数，将所述动作和所述动作参数组合生成所述组件对应的动作表达式；第一信息获取单元，用于将所述组件对应的事件、所述组件对应的条件表达式，以及所述组件对应的动作表达式，作为所述组件的控制行为信息。

可选地，所述目标组件的控制行为信息包括：所述目标组件对应的事件、所述目标组件对应的条件表达式，以及所述目标组件对应的动作表达式；所述第三加载模块包括：绑定单元，用于将所述目标组件对应的事件与第一预设函数绑定；第一调用单元，用于在触发所述目标组件对应的事件后，利用所述第一预设函数内部包含的第二预设函数调用所述目标组件对应的条件表达式，对调用的条件表达式中的条件进行判断；第二调用单元，用于利用所述第二预设函数调用所述目标组件对应的动作表达式，按照调用的动作表达式中的动作参数，执行调用的动作表达式中的动作，完成加载所述目标组件的控制行为。

可选地，所述条件配置单元，具体用于获取所述条件对应的组件的属性获取方法和属性信息；基于所述属性获取方法和属性信息生成逻辑判断条件，得到所述条件表达式。

可选地，所述动作配置单元，具体用于从预先存储的动作集合中，选择在判断所述条件后需要执行的动作；所述动作集合为各产品对应的界面中包含的组件对应的动作集合。

可选地，所述目标界面为目标保费测算界面，所述产品为保险产品，所述界面为保费测算界面。

第四方面，本发明实施例公开了一种界面生成装置，包括：第二读取模块，用于从预先生成的数据库中读取待生成的目标保费测算界面对应的目标配置信息；所述目标配置信息包括所述目标保费测算界面对应的目标模板、所述目标模板包含的目标组件、所述目标组件的属性信息，以及所述目标组件的控制行为信息；第四加载模块，用于加载所述目标模板和所述目标组件；第五加载模块，用于基于所述目标组件的属性信息，加载所述目标组件的属性；第六加载模块，用于基于所述目标组件的控制行为信息，加载所述目标组件的控制行为；第三生成模块，用于在成功加载所述目标模板、所述目标组件、所述目标组件的属性，以及所述目标组件的控制行为后，生成所述目标保费测算界面。

可选地，所述数据库通过如下模块生成：第四生成模块，用于生成各保险产品对应的保费测算界面中包含的组件集合；第五生成模块，用于针对每个保险产品对应的保费测算界面，从所述组件集合中选取所述保费测算界面中包含的组件，基于选取的组件生成所述保费测算界面对应的模板；第二配置模块，用于针对每个模板中包含的每个组件，对所述组件进行属性配置，得到所述组件的属性信息，以及对所述组件进行控制行为配置，得到所述组件的控制行为信息；第二存储模块，用于将所述界面对应的模板、所述模板包含的组件、所述组件的属性信息，以及所述组件的控制行为信息，作为所述保费测算界面对应的配置信息存储至所述数据库中。

第五方面，本发明实施例公开了一种电子设备，包括：一个或多个处理器；和其上存储有指令的一个或多个机器可读介质；当所述指令由所述一个或多个处理器执行时，使得所述处理器执行如上任一项所述界面生成方法。

第六方面，本发明实施例公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上任一项所述的界面生成方法。

本发明实施例中，在生成界面时，从预先生成的数据库中读取待生成的目标界面对应的目标配置信息，目标配置信息包括所述目标界面对应的目标模板、所述目标模板包含的目标组件、所述目标组件的属性信息，以及所述目标组件的控制行为信息；加载所述目标模板和所述目标组件；基于所述目标组件的属性信息，加载所述目标组件的属性；基于所述目标组件的控制行为信息，加载所述目标组件的控制行为；在成功加载所述目标模板、所述目标组件、所述目标组件的属性，以及所述目标组件的控制行为后，生成所述目标界面。由此可知，本发明实施例中，预先生成包括各界面对应的模板、所述模板包含的组件、所述组件的属性信息，以及所述组件的控制行为信息这些配置信息的数据库，相比于针对每个界面单独编写代码的方式，基于数据库中的配置信息生成界面的过程更加简便，能够大幅度降低开发工作量。

附图说明

图1是本发明实施例的一种界面生成方法的步骤流程图。

图2是本发明实施例的一种保险产品一的保费测算界面的示意图。

图3是本发明实施例的一种保险产品二的保费测算界面的示意图。

图4是本发明实施例的一种保险产品三的保费测算界面的示意图。

图5是本发明实施例的一种保费测算界面处理过程的示意图。

图6是本发明实施例的一种模板定义的示意图。

图7是本发明实施例的一种组件属性设置的示意图。

图8是本发明实施例的一种组件属性描述的示意图。

图9是本发明实施例的一种组件控制行为定义的示意图。

图10是本发明实施例的一种界面生成装置的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明实施例中，针对同一类型的界面在不同产品中的区别较大的情况，提出一种预先获取界面的配置信息，将界面的配置信息保存至数据库中。在生成界面时，从数据库中读取界面的配置信息，基于配置信息生成界面，无需再针对每个界面单独编写代码，生成界面的过程更加简便。

下面，通过以下各实施例进行详细说明。

参照图1，示出了本发明实施例的一种界面生成方法的步骤流程图。

如图1所示，界面生成方法可以包括以下步骤：

步骤101，从预先生成的数据库中读取待生成的目标界面对应的目标配置信息。

本发明实施例中的界面可以为在不同产品中共同包含的界面。比如，对于保险产品来说，不同的保险产品中均包含保费测算界面，但是不同保险产品中的保费测算界面具有较大的区别。比如，不同保险产品中的保费测算界面中包含的组件不同，组建的属性不同，组建的控制行为不同，等等。

本发明实施例中，预先对各界面进行分析，提取界面对应的配置信息，并将各界面对应的配置信息存储至数据库中。其中，界面的配置信息至少可以包括：界面对应的模板、模板包含的组件、组件的属性信息，以及组件的控制行为信息。

在生成界面时，从数据库中读取待生成的目标界面对应的目标配置信息。目标配置信息即包括目标界面对应的目标模板、目标模板包含的目标组件、目标组件的属性信息，以及目标组件的控制行为信息。

步骤102，加载所述目标模板和所述目标组件。

步骤103，基于所述目标组件的属性信息，加载所述目标组件的属性。

步骤104，基于所述目标组件的控制行为信息，加载所述目标组件的控制行为。

步骤105，在成功加载所述目标模板、所述目标组件、所述目标组件的属性，以及所述目标组件的控制行为后，生成所述目标界面。

基于读取的目标界面对应的目标配置信息，首先，加载目标界面对应的目标模板以及目标模板包含的目标组件，加载后即可对界面进行显示。然后，基于目标组件的属性信息，配置目标组件的属性，后续用户访问目标界面时，即可对组件的属性执行选择等操作。属性信息可以包括组件对应的选择项的数值等。比如，对于保额组件，可以选择具体保额，对于地区组件，可以选择具体地区，等等。然后，基于目标组件的控制行为信息，加载目标组件的控制行为，后续用户访问目标界面时，即可按照组件的控制行为对组件进行相应的控制操作。控制行为信息可以包括组件对应的事件、组件对应的条件表达式、组件对应的动作表达式等。比如，在事件为被保险人出生日期改变时，条件表达式为如果被保险人年龄、地区和行业工种为空时，动作表达式为设置所有保额为0，并隐藏保额选择界面，等等。

本发明实施例中，预先生成包括各界面对应的模板、所述模板包含的组件、所述组件的属性信息，以及所述组件的控制行为信息这些配置信息的数据库，相比于针对每个界面单独编写代码的方式，基于数据库中的配置信息生成界面的过程更加简便，能够大幅度降低开发工作量。

下面，以保险产品对应的保费测算界面为例，对本发明实施例的界面生成方法进行介绍。下文中描述的产品为保险产品，界面为保费测算界面，目标界面为目标保费测算界面。

对于用户在网上自助购买保险，阅读完保险产品介绍后，互联网保险系统提供的一个步骤为“保费测算”，系统提供一个输入年龄、地区、保险金额等基本信息的界面，用户输入一些信息，就可以计算出适合自己的保费。如果用户满意则进入下一步填写信息购买流程。因此，保费测算是销售流程的重要前置环节。

对于不同的保险产品来说，其对应的保费测算界面的差别较大。

图2是本发明实施例的一种保险产品一的保费测算界面的示意图。如图2所示，这个保费测算界面中包含出生日期、所在城市、从事行业、工种、手机、邮箱等组件，城市限定为省会城市。并且其中隐藏了需要联动控制的保额组件等，当在选择了出生日期、所在城市、从事行业、工种之后，如果出生日期、所在城市、从事行业、工种符合条件，再显示保额组件，供用户选择保额的档次。

图3是本发明实施例的一种保险产品二的保费测算界面的示意图。如图3所示，这个保费测算界面中包含出生日期、性别、居住省市、居住地区、保险金额、保险期间、交费期间、年收入等组件，其中联动控制较为简单，多项都是独立选择，如果符合最低保费条件，则能计算出保险费。与产品一不相同的是地区选择为选择省市两步。

图4是本发明实施例的一种保险产品三的保费测算界面的示意图。如图4所示，这个保费测算界面较为复杂，其中包含性别、出生日期、是否需要豁免保费保障、是否希望保费期满返还全部保费、希望保障到多少周岁、希望的交费期间、希望的交费频率、所在地区、职业、如果不幸辞世希望为家人留下多少生活保障、如果遇到意外希望为家人留下多少生活保障、如果因病住院希望每天获得多少医疗补贴、如果罹患重病希望获得多少费用补偿等组件。由于产品三是四个主险的组合，并且其中的意外险不能单独选择，可以与定寿、住院、重疾(三个滚动条)搭配，也可以和保费返还(您是否希望保险期满返还所有保费-下拉框)搭配，之后再显示。

由以上三个保险产品可以看出，每个保险产品需要展示的保费测算界面各不相同，系统实现时如果按照每个产品开发一个界面的方法，导致的问题一是不能灵活配置保费测算页面，二是如果进行统一的规则修改，例如对登录用户进行某一项规则的修改，则需要修改所有产品的界面，工作量非常大，因此对互联网保险产品的快速定制和推出造成了障碍。本发明实施例中采用界面配置的方法，生成界面对应的配置信息，基于配置信息生成界面，能够提升界面生成效率，快速推出产品。本发明实施例依附的载体可以为公有云、私有云、Web系统，等等。

参照图5，示出了本发明实施例的一种保费测算界面处理过程的示意图。

如图5所示，保费测算界面处理过程可以包括保费测算界面配置和保费测算界面应用两个部分。以下分别进行介绍。

第一部分，保费测算界面配置。

以前面列举的三个保险产品对应的保费测算界面为例，各类保费测算界面包含的组件、组件的属性、组件的控制行为等是有区别的。总结来说可以包括以下几方面的区别：

(1)显示方式和内容的区别。对于该种区别，可以用“模板”技术实现，比如在HTML(HyperText Markup Language，超文本标记语言)里面嵌入组件对应的标签来解决。使用HTML，能够解决显示多样性的问题。

(2)不同的下拉框，显示内容的区别。例如，地区的下拉框根据产品不同，显示“北京、天津、河北……”，保额下拉框根据产品不同，显示“5万，10万，15万……”或“10万，20万，30万，……”，这些可以分为“地区”和“保额”两种组件。对于该种区别，可以按照保险产品的类型初始化各组件可选择的数值。

(3)控制行为的区别。例如，对于保险产品一的保费测算界面，在选择了出生日期、地区、行业工种之后，如果出生日期、地区、行业工种符合条件，才会出现主险保额组件对应的档次下拉框；在选择了主险保额档次之后，才会出现附加险保额组件对应的档次下拉框，并且附加险档次不超过主险档次。这种控制行为具有较强的个性化，本发明实施例经过仔细分析后找到规律，进行配置。例如，这些控制行为都具有保险特色，如控制附加险档次不超过某档，重新计算保费，隐藏附加险，等等。通过总结常见的控制行为，可以实现“配置化”配置界面对应的控制行为信息，而不是每个界面都通过编程实现。

保费测算界面配置部分可以包括以下过程：

1、抽取组件。

从各产品对应的界面中抽取组件，生成各产品对应的界面中包含的组件集合。

由于界面的交互是在浏览器前端进行，因此对于组件的实现，可以使用“前端”相关技术。比如，针对各产品对应的界面中包含的每个组件，编写该组件对应的HTML自定义标签，生成该组件。采用HTML自定义标签技术，可以使用户点击组件的交互过程在浏览器实现，不与服务器交互，从而提升交互速度。

比如，通过对保费测算界面进行抽象归类，可以从各保险产品对应的保费测算界面中抽取组件。抽取的组件如下表一所示：

表一

以“国家”组件为例，实现如下：

定义标签National，代码如下：

标签包含了选择国家的下拉框、弹出内容的复杂展示。id表示标签的一个实例，type是标签的自定义属性，表示哪种类型的国家显示，显示内容近似，但是功能有区别的国家标签，用于扩展组件时使用。

实现标签。标签内浓缩了复杂的HTML，因此需要能够实现。代码如下：

以上代码实现了国家组件，其他组件采用类似的方法实现。

2、保费测算界面模板定义。

在生成组件集合后，针对每个产品对应的界面，从所述组件集合中选取所述界面中包含的组件，基于选取的组件生成所述界面对应的模板。

在实现中，将所述界面中包含的组件对应的HTML自定义标签，嵌入到该界面对应的模板中。

图6是本发明实施例的一种模板定义的示意图。如图6所示，界面左边的文字编辑区域为提供模板编辑功能，把该保险产品的保费测算界面展示的组件内容以HTML表现，把HTML代码粘贴到编辑区域。在这个区域中，点击右边的组件后，再点击上方的“添加”按钮，即将该组件生成一个矩形框插入到了模板里面，如图6中的“生效日期”、“被保险人出生日期”等。

3、保费测算界面组件属性定义。

在针对每个产品对应的界面生成模板后，基于对应产品的特性，针对每个模板单独进行配置。针对每个模板中包含的每个组件，对所述组件进行属性配置，得到所述组件的属性信息。

在实现中，对组件进行属性配置，得到组件的属性信息的过程，可以包括：配置所述组件对应的选择项的数值，将所述选择项的数值作为所述组件的属性信息。当然，组件的属性信息还可以包括组件是否可见、是否必须、是否只读，等等。

图7是本发明实施例的一种组件属性设置的示意图。图8是本发明实施例的一种组件属性描述的示意图。其中，图7是设计图，图8是实现图。如图7和图8所示，属性定义的目的是将模板里面的组件做初始化，即对组件的属性设置初始值。初始值的主要作用，是提供选择项的数值供选择。例如，保险金额出现10万，20万，30万等选择项，传递到后台的数据依次为100000，200000，300000，等等。

4、保费测算界面组件控制行为定义。

针对每个模板中包含的每个组件，对所述组件进行控制行为配置，得到所述组件的控制行为信息。

图9是本发明实施例的一种组件控制行为定义的示意图。如图9所示，界面左边的列表为已经配置好的规则，用上移、下移、新增、删除四个按钮进行规则的添加及设置执行的顺序。界面右边为控制行为定义的几个部分，以下分别介绍。

(1)规则名称。提供一输入框，用于输入/修改规则名称。

(2)选择事件。

界面中的组件，都存在事件。事件，是指一种“触发-响应”机制，触发事件的情况有组件被点击、组件的值改变等事件。响应指发生事件后，执行什么操作。例如，对于出生日期这个组件发生数值改变事件，则应触发改变最大保额的动作。

本发明实施例中，考虑到保险产品界面的组件事件与普通界面的组件事件的不同，普通界面的组件事件很多，比如包括onChange(数值变化)，onClick(点击)，onMouseOver(鼠标移动)等，而保险产品界面的组件事件都带有业务涵义，事件也是针对组件定制的，例如“被保险人出生日期变化”、“保额发生变化”等。因此，可以预先分析各产品对应的界面中包含的组件对应的各种事件，生成各产品对应的界面中包含的组件对应的事件集合，将事件集合存储到数据库中，供界面配置使用。在针对某个组件选择事件的过程中，从预先存储的事件集合中，选择该组件对应的事件。比如，事件可以包括onRiskChange(保额改变)、onStartDateChange(生效日期改变)、onInsurantBirthdayChange(出生日期改变)，等等。

(3)选择条件。

在触发事件后需要进行条件判断，因此在选择组件对应的事件之后，配置在触发所述组件对应的事件后需要判断的条件对应的条件表达式，作为所述组件对应的条件表达式。

选择条件部分包括一个输入框、选择数值区域、操作符区域。其中，输入框的内容无需直接输入，基于选择数值区域和操作符区域的点击选择，可以组合生成条件。选择条件的设计有两个特点：一是可以灵活输入条件，使用IF(如果)、AND(和)、OR(或)、NOT(非)可以组合任意逻辑；二是将条件的因子与组件的属性信息和组件的属性获取方法结合，使逻辑局限到保费测算的范围内，如果失去了这个范围限制，条件编写就变成了程序编写，复杂度和可用性难以控制。

因此，配置在触发所述组件对应的事件后需要判断的条件对应的条件表达式的过程，可以包括：获取所述条件对应的组件的属性获取方法和属性信息；基于所述属性获取方法和属性信息生成逻辑判断条件，得到所述条件表达式。比如，组件的属性获取方法可以包括getRisk()(获取保额)、getState()(获取状态)，等等。比如，为组件riskSelect1设置条件表达式为“IF(riskSelect1.getRisk()！＝0,true,false)”，含义为如果保额不为0。

(4)执行动作。

在判断条件后需要进行执行对应的动作，因此配置组件对应的条件表达式之后，配置在判断所述条件后需要执行的动作，以及所述动作对应的动作参数，将所述动作和所述动作参数组合生成所述组件对应的动作表达式。

本发明实施例中，可以预先分析各产品对应的界面中包含的组件对应的各种动作，生成各产品对应的界面中包含的组件对应的动作集合，将动作集合存储到数据库中，供界面配置使用。因此，配置在判断所述条件后需要执行的动作的过程，包括：从预先存储的动作集合中，选择在判断所述条件后需要执行的动作。

动作，是指程序对界面的某项操作。动作的本质，是一个JavaScript函数，是一种预先开发设定好、对界面操作进行抽象、在数据库存储好后用于界面配置应用的函数。比如，可以设置保险期间、设置保险责任、设置保额、清空保费、设置出生日期的范围、设置领取年龄、设置行业工种、设置医院代码等多项和保险产品保费测算强关联的动作。从而能够形成各样的保费测算界面，通过事件、条件和动作的结合实现界面的控制。比如，为组件riskSelect1设置动作为“setTextByExpression”，动作参数为“commonLabel1',"(calculator.getDutyRisk('151001')*0.1/10000)+'万元'"”，含义为设置意外残疾保额为意外身故保额的10％。

配置完成后，将组件对应的事件、组件对应的条件表达式，以及组件对应的动作表达式，作为该组件的控制行为信息。比如，为综合意外保险的主险的下拉框组件，定义了一条控制行为信息，事件为“onRiskChange”，条件是“IF(riskSelect1.getRisk()！＝0,true,false)”，动作为“setTextByExpression”，动作参数为“commonLabel1',"(calculator.getDutyRisk('151001')*0.1/10000)+'万元'"”，含义为“当意外身故保额发生改变时，如果保额不为0，设置意外残疾保额为意外身故保额的10％”。

比如，对于图2所示的保险产品一对应的保费测算界面，界面中包括多种控制行为。比如，如果出生日期、城市、行业、工种均选择，并且符合核保要求，则在“工种”下面将增加选择主险档次；如果选择了主险档次，则在选择主险档次下面还将增加选择附加险档次，并且附加险档次不能超过主险档次。对保险产品一对应的保费测算界面进行配置后，得到如下表格对应的控制行为信息。其中，表二为事件、条件及控制行为信息的描述，表三为动作，这些动作多数是独立于产品的，多个产品界面公用的，事件、条件和动作结合，实现了复杂的界面控制。

表二

表三

本发明实施例在对界面进行配置后，将界面对应的模板、模板包含的组件、组件的属性信息，以及组件的控制行为信息，作为界面对应的配置信息存储至所述数据库中，使复杂的界面变得可见、可改、易配，降低界面的开发和维护难度。

第二部分，保费测算界面应用。

1、用户开始投保。

2、系统获取产品编号，读取界面配置信息。

在保费测算界面配置部分配置的界面配置信息存储在数据库中，可以以产品编号为索引，查询出该产品的界面对应的配置信息。用户开始投保之后，系统提供一个“空白”页面，带有产品编号参数。后台程序根据产品编号，从数据库中读取目标界面对应的目标配置信息。

3、系统根据模板初始化界面。

系统将目标配置信息中包含的目标界面对应的目标模板输出到界面上。模板即为HTML片段，空白页面具备了基本的显示信息。

4、系统根据模板中的组件属性信息显示界面。

系统装载目标模板包含的目标组件，并基于目标组件的属性信息，配置目标组件的属性。例如，居住地区组件应按照产品可以购买的地区配置，配置好后，系统将符合条件的地区加载到这个组件属性里，用户访问保费测算界面的时候，能够选择已经配置的地区。

5、系统加载组件控制行为。

系统基于目标组件的控制行为信息，加载目标组件的控制行为。前面三项配置内容的加载，都是内容，即和显示相关。而控制行为，实际上是几段代码的组合，属于动态编写代码。在这里使用了JavaScript的一个内置函数eval(表达式)，这个函数的作用就是执行表达式。这个表达式，长度不受限制，复杂度也不受限制，只要符合JavaScript的语法，就可以被执行。在保费测算界面配置部分配置的控制行为信息，最后形成的就是表达式。系统利用eval函数加载了配置的表达式，就实现了界面控制功能。

在实现中，基于目标组件的控制行为信息，加载目标组件的控制行为的过程，包括：将所述目标组件对应的事件与第一预设函数绑定，绑定后用户执行点击组件的操作就可以响应该事件；在触发所述目标组件对应的事件后，利用所述第一预设函数内部包含的第二预设函数调用所述目标组件对应的条件表达式，对调用的条件表达式中的条件进行判断；利用所述第二预设函数调用所述目标组件对应的动作表达式，按照调用的动作表达式中的动作参数，执行调用的动作表达式中的动作，完成加载所述目标组件的控制行为。其中，第一预设函数可以为func函数，第二预设函数可以为eval函数。

以一个组件为例：综合意外保险的主险是下拉框选择，定义了一条控制行为，事件为“onRiskChange”，条件是“IF(riskSelect1.getRisk()！＝0,true,false)”，动作为“setTextByExpression”，动作参数为“commonLabel1',"(calculator.getDutyRisk('151001')*0.1/10000)+'万元'"”，含义为“当意外身故保额发生改变时，如果保额不为0，设置意外残疾保额为意外身故保额的10％”。

实现以上行为，利用了JavaScript的动态绑定特性及动态编译特性：

6、界面显示完成。

在成功加载目标模板、目标组件、目标组件的属性，以及目标组件的控制行为后，界面加载完毕，不但能够正常显示界面，而且点击界面的各种组件后即可实现界面的控制和保费计算。

7、用户点击界面，改变组件信息(如年龄、保额等)。

8、界面控制行为生效。

9、点击“测算”按钮。

10、调用后台保费计算模块。

11、返回保费显示界面。

12、完成保费测算。

不同产品的保费测算界面，尽管界面样式差别较大，但调用后台保费计算模块的参数基本是一致的，通过调用统一的后台计算接口，得到保费计算的结果。

本发明实施例中，基于保险产品自由进行保费测算界面配置，实现了可视化配置，将隐藏的代码里面的规则变为可见，对系统的可维护性、持续扩展提供了平台。通过前后端技术相结合，将界面、前端、控制规则等进行了有机结合，如果使用前后端分离技术来实现保费测算界面，界面都要单独编写成，规则编写到前端，从整体看还是编码模式，不是配置模式。如果使用规则引擎技术，需要在后台实现规则配置和解析，无法在保费测算这个前端界面实现。因此，本发明实施例能够大幅度减轻开发工作量，提升新产品上线速度，使用配置方式，有利于克服不同风格的页面技术带来的浏览器差别，提升用户体验，提升系统的稳定性。

参照图10，示出了本发明实施例的一种界面生成装置的结构框图。

如图10所示，界面生成装置可以包括：

读取模块1001，用于从预先生成的数据库中读取待生成的目标界面对应的目标配置信息；所述目标配置信息包括所述目标界面对应的目标模板、所述目标模板包含的目标组件、所述目标组件的属性信息，以及所述目标组件的控制行为信息；

第一加载模块1002，用于加载所述目标模板和所述目标组件；

第二加载模块1003，用于基于所述目标组件的属性信息，加载所述目标组件的属性；

第三加载模块1004，用于基于所述目标组件的控制行为信息，加载所述目标组件的控制行为；

生成模块1005，用于在成功加载所述目标模板、所述目标组件、所述目标组件的属性，以及所述目标组件的控制行为后，生成所述目标界面。

可选地，所述数据库通过如下模块生成：第一生成模块，用于生成各产品对应的界面中包含的组件集合；第二生成模块，用于针对每个产品对应的界面，从所述组件集合中选取所述界面中包含的组件，基于选取的组件生成所述界面对应的模板；配置模块，用于针对每个模板中包含的每个组件，对所述组件进行属性配置，得到所述组件的属性信息，以及对所述组件进行控制行为配置，得到所述组件的控制行为信息；存储模块，用于将所述界面对应的模板、所述模板包含的组件、所述组件的属性信息，以及所述组件的控制行为信息，作为所述界面对应的配置信息存储至所述数据库中。

可选地，所述配置模块包括：事件选择单元，用于从预先存储的事件集合中，选择所述组件对应的事件；条件配置单元，用于配置在触发所述组件对应的事件后需要判断的条件对应的条件表达式，作为所述组件对应的条件表达式；动作配置单元，用于配置在判断所述条件后需要执行的动作，以及所述动作对应的动作参数，将所述动作和所述动作参数组合生成所述组件对应的动作表达式；第一信息获取单元，用于将所述组件对应的事件、所述组件对应的条件表达式，以及所述组件对应的动作表达式，作为所述组件的控制行为信息。

可选地，所述目标组件的控制行为信息包括：所述目标组件对应的事件、所述目标组件对应的条件表达式，以及所述目标组件对应的动作表达式；所述第三加载模块1004包括：绑定单元，用于将所述目标组件对应的事件与第一预设函数绑定；第一调用单元，用于在触发所述目标组件对应的事件后，利用所述第一预设函数内部包含的第二预设函数调用所述目标组件对应的条件表达式，对调用的条件表达式中的条件进行判断；第二调用单元，用于利用所述第二预设函数调用所述目标组件对应的动作表达式，按照调用的动作表达式中的动作参数，执行调用的动作表达式中的动作，完成加载所述目标组件的控制行为。

可选地，所述条件配置单元，具体用于获取所述条件对应的组件的属性获取方法和属性信息；基于所述属性获取方法和属性信息生成逻辑判断条件，得到所述条件表达式。

可选地，所述动作配置单元，具体用于从预先存储的动作集合中，选择在判断所述条件后需要执行的动作；所述动作集合为各产品对应的界面中包含的组件对应的动作集合。

可选地，所述配置模块包括：第二信息获取单元，用于配置所述组件对应的选择项的数值，将所述选择项的数值作为所述组件的属性信息。

本发明实施例中，相比于针对每个界面单独编写代码的方式，基于数据库中的配置信息生成界面的过程更加简便，能够大幅度降低开发工作量，并且可以通过修改配置信息灵活配置界面，不同界面之间的修改互不影响。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

在本发明的实施例中，还提供了一种电子设备。该电子设备可以包括一个或多个处理器，以及其上存储有指令的一个或多个机器可读介质，指令例如应用程序。当所述指令由所述一个或多个处理器执行时，使得所述处理器执行上述的界面生成方法。

在本发明的实施例中，还提供了一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序可由电子设备的处理器执行，以完成上述的界面生成方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

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

以上对本发明所提供的一种界面生成方法、装置、电子设备及存储介质，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。