CN116643746A - 前端界面呈现方法、装置、存储介质和电子设备 - Google Patents

Abstract

本申请提供了一种前端界面呈现方法、装置、存储介质和电子设备，该方法包括：响应于前端界面的呈现请求，解析针对前端界面配置的配置文件；使用解析后的配置文件生成前端界面；其中，前端界面包括固定呈现部分和参数输入部分；固定呈现部分基于配置文件中的与固定呈现部分相关的信息生成；响应于确定存在对应隐藏规则的组件，根据初始参数值，以及隐藏规则确定是否隐藏组件；响应于确定隐藏组件，将组件在前端界面的参数输入部分进行隐藏处理；将更新后的前端界面呈现。该方法能够在低成本前提下，提高前端界面的实现效率。

Description

前端界面呈现方法、装置、存储介质和电子设备

技术领域

本公开实施例涉及一种前端界面呈现方法、装置、存储介质和电子设备。

背景技术

相关技术中，通过拷贝后进行调整或者像Java编码中常用的抽象出父类来实现公共参数的管理的方法来实现每个前端界面的呈现。

如果系统中存在多个相似的界面，互相之间只有少量参数的细微不同，甚至只是同一个参数显示名称的区别，那么前者代码复用率很低，会出现大量重复代码，并且一段相同的代码出错，就可能需要去所有拷贝中寻找和修改；而后者则提高了代码耦合性，并且对父类的约束也会随着子类的增多越来越强，可维护性就会变得越来越低。

这两种实现方式，都需要前端开发人员参与完成编码，增加开发的工作量，导致前端界面实现成本高且效率低。

发明内容

有鉴于此，本申请提供一种前端界面呈现方法、装置、系统、存储介质和电子设备，能够在低成本前提下，提高前端界面的实现效率。

为解决上述技术问题，本申请的技术方案是这样实现的：

在一个实施例中，提供了一种前端界面呈现方法，所述方法包括：

响应于前端界面的呈现请求，解析针对所述前端界面配置的配置文件；

使用解析后的配置文件生成前端界面；其中，所述前端界面包括固定呈现部分和参数输入部分；所述固定呈现部分基于所述配置文件中的与固定呈现部分相关的信息生成；所述参数输入部分基于所述配置文件中与参数输入部分相关的信息按照参数被描述的内容和顺序依次排列生成；

根据配置文件确定所述参数输入部分对应的组件是否对应隐藏规则；

响应于确定存在对应隐藏规则的所述组件，根据初始参数值，以及所述隐藏规则确定是否隐藏所述组件；

响应于确定隐藏所述组件，将所述组件在所述前端界面的参数输入部分进行隐藏处理；

将更新后的所述前端界面呈现。

其中，所述配置信息还包括：参数与组件的对应关系，以及组件之间的关联关系；所述方法进一步包括：

响应于监听到所述前端界面对应的组件输入的参数值发生变化，根据参数与组件的对应关系，以及组件之间的关联关系确定是否存在与所述组件关联的相关组件；

响应于确定存在与所述组件关联的相关组件，确定与所述组件关联的相关组件是否存在对应的隐藏规则；

响应于所述相关组件存在对应隐藏规则，基于变化后的参数值，以及所述隐藏规则，确定是否隐藏所述相关组件；如果是，隐藏所述相关组件；否则，显示所述相关组件。

其中，所述显示所述相关组件之后，所述方法进一步包括：

基于所述配置文件中针对参数配置的参数有效规则校验所述相关组件对应的参数值的有效性；

响应于校验成功，设置所述相关组件输入状态为有效；并呈现有效状态；

响应于校验失败，设置所述相关组件输入状态为无效，并呈现无效状态。

其中，所述方法进一步包括：

响应于在用户输入结束后提交的确定请求，获取输入参数的参数值；

若存在批量输入，则基于所述配置文件中配置的参数有效规则，校验批量输入的参数值的有效性，基于所述配置文件中配置的对应组件个数校验输入的参数值的个数的一致性；

响应于校验成功，获取所述配置文件中针对校验成功配置的响应信息并执行；

响应于校验失败，将基于校验失败的数据对应的相关组件输出错误提示。

其中，所述响应于校验成功，或不存在批量输入，所述方法进一步包括：

根据组件当前对应的参数值和联合定义的表达式，直接获取或组合计算参数的参数值，以字符串键值对的方式构建数据集合；

使用列表存放所述数据集合，并发送给接收端。

其中，所述配置文件为xml文件；

在所述xml文件中，所述与固定呈现部分相关的信息对应的节点作为根节点；每个参数被描述为一个参数节点，挂在根节点下；其中，每个参数对应一个或一组组件；若一个参数的取值需要使用多个子参数的取值计算获得，则将子参数节点挂在该参数的参数节点下。

其中，所述方法进一步包括：

在所述配置文件中配置的参数输入方式包括下述一种或任意组合：

单输入、组合输入、批量输入；

在所述配置文件中配置分割条，用于将多个参数分组；其中，每个分割条作为一个分割节点，与参数节点同级，挂在根节点下。

在一个实施例中，提供了一种前端界面呈现装置，所述装置包括：

解析单元，被配置为执行响应于前端界面的呈现请求，解析针对所述前端界面配置的配置文件；

生成单元，被配置为执行使用解析后的配置文件生成前端界面；其中，所述前端界面包括固定呈现部分和参数输入部分；所述固定呈现部分基于所述配置文件中的与固定呈现部分相关的信息生成；所述参数输入部分基于所述配置文件中与参数输入部分相关的信息按照参数被描述的内容和顺序依次排列生成；

第一确定单元，被配置为执行根据配置文件确定所述参数输入部分对应的组件是否对应隐藏规则；

第二确定单元，被配置为执行响应于确定存在对应隐藏规则的所述组件，根据初始参数值，以及所述隐藏规则确定是否隐藏所述组件；

处理单元，被配置为执行响应于确定隐藏所述组件，将所述组件在所述前端界面的参数输入部分进行隐藏处理；

呈现单元，被配置为执行将更新后的所述前端界面呈现。

在另一个实施例中，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现前端界面呈现的方法。

在另一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前端界面呈现的方法。

由上面的技术方案可见，上述实施例中在用户请求一个前端界面的呈现时，解析对应的配置文件，按照配置文件的配置的信息的先后顺序生成前端界面，基于配置文件中的隐藏规则针对参数输入部分的组件确定需要隐藏的组件，并执行隐藏处理，然后将更新后前端界面呈现。该方案能够在低成本前提下，提高前端界面的实现效率_。

附图说明

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

图1为单输入布局示意图；

图2为组合输入布局示意图；

图3(a)为批量输入中的一种状态布局示意图；

图3(b)为批量输入中的另一种状态布局示意图；

图4为批量输入数据示意图；

图5为分割条布局示意图；

图6为本申请实施例中前端界面呈现方法流程示意图；

图7为本申请实施例中基于参数输入的前端界面处理流程示意图；

图8为本申请实施例中用户输入结束后提交输入参数的处理流程示意图；

图9为本申请实施例中前端界面呈现装置结构示意图；

图10为本发明实施例提供的电子设备的实体结构示意图。

具体实施方式

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

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述目标的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他步骤或单元。

下面以具体实施例对本发明的技术方案进行详细说明。下面几个具体实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

在前端比较常见的使用场景中，有一种场景是前端提供一个或者多个可输入的组件，允许用户完成输入后，点击提交按钮，将所有输入的参数以约定的消息格式发送给接收端的功能。

在上述场景中，无论前端界面的初始呈现，参数输入，以及参数提交，就会涉及到前端界面的呈现。

若系统中存在多个相似的界面，互相之间只有少量参数的细微不同，甚至只是同一个参数显示名称的区别，如果通过拷贝后进行调整或者像Java编码中常用的抽象出父类来实现公共参数的管理的方法来实现，那么前者代码复用率很低，会出现大量重复代码，并且一段相同的代码出错，就可能需要去所有拷贝中寻找和修改；而后者则提高了代码耦合性，并且对父类的约束也会随着子类的增多越来越强，可维护性就会变得越来越低。并且这两种实现方式，都需要前端开发人员参与完成编码，增加开发的工作量。

因此需要提供一套高代码复用并且对非开发人员较为友好的、包含多组输入组件的前端界面生成的方法，以便在不需要专业的前端开发人员介入的情况下，就可以快速准确地生成或调整所需的前端界面。

基于上述需求，本申请提供一种前端页面呈现方法，不通过硬编码，使用配置文件即可生成所需的包含一个或多个参数输入的前端界面，并且支持这些参数对应的组件之间的联动、约束和组合计算；一些特殊类型的参数支持一次性批量输入多组；还通过设置分割条的方式对多个参数进行分组显示；并在用户输入完成后，将通过有效性和一致性校验的所有参数和取值以固定的数据结构打包发送给接收端。该方案能够在低成本的前提下，高效实现各前端界面的呈现。

本申请实施例中结合附图分别基于三种场景给出前端界面的呈现过程，分别为初始前端界面呈现、用户输入参数后的前端界面呈现，以及用户输入参数结束提交数据后的前端界面呈现。这些情况的所有的前端界面的呈现均是基于配置文件实现的，本申请实施例中实现一组前端界面呈现之前，都需要先配置实现这一组对应前端界面的配置文件。

针对前端界面配置的配置文件，包括：与固定呈现部分相关的信息、与参数输入部分相关的信息；参数与组件的对应关系，以及组件之间的关联关系；针对一些关联组件还设置隐藏规则，用于在相关参数的参数值变化后，确定该组件是隐藏还是不显示。

在具体实现时，配置文件通过xml文件实现：

在xml文件中，与固定呈现部分相关的信息对应的节点作为根节点；每个参数被描述为一个参数节点，挂在根节点下；其中，每个参数对应一个或一组组件；若一个参数的取值需要使用多个子参数的取值计算获得，则将子参数节点挂在该参数的参数节点下。

其中，与固定呈现部分相关的信息，设置为xml根节点。具体包括：前端界面设计相对固定的部分的属性：这部分展示的内容不受具体输入参数影响，比如界面总标题(title)、副标题(subtitle)，当前界面描述(desc)、提交按钮显示名称(submit_label)、页面头尾插入的图片相对路径(head_image/tail_image)等。

数据交互相关属性：数据接收端(receiver，取值可以是数据接收端URL或API等)、数据发送给接收端后的下一步处理(nextStep，如显示提示信息、跳转到另一个页面)等。

以上这些属性可以根据软件界面的具体需求进行调整，甚至在属性较多时，比如需要支持对标题的字体、颜色、大小等进行定制或者下一步处理有多个步骤(显示提示信息后自动跳转到另一个页面等)，可以将它们升级为特有的子节点，直接下挂到根节点下，只要使用对应的解析代码即可。

与参数输入部分相关的信息，前端界面上每一个参数对应一个或一组组件，每个参数在xml文件中描述为一个节点，多个参数作为多个节点并列，挂在根节点下。

一个参数的参数取值如果需要使用多个子参数的取值通过某个公式组合计算获得，则将子参数节点挂在该参数节点下。

在xml中，参数节点标记为param，一个参数在xml文件中展示为一组<param></param>标记。多个参数之间可以使用param节点的特定的属性来进行联动显示控制和计算，这些属性取值符合Spring的表达式(SpEL)语法规则。

参数输入方式包括下述一种或任意组合：

单输入、组合输入、批量输入。

参见图1，图1为单输入布局示意图。图1中一个参数对应一个输入组件。

参见图2，图2为组合输入布局示意图。图2中一个参数对应多个输入子组件，参数取值为所有子组件的组合计算结果。

参见图3，图3(a)为批量输入中的一种状态布局示意图。

图3(b)为批量输入中的另一种状态布局示意图。

批量输入：某些类型的参数可支持批量输入，但当多个参数都处于批量输入状态时，它们批量输入设置的数量(count)参数应该相同，输入完成往接收端发送时，将一次性发送n个键值对的集合，这里的n指一次提交数据后所生成的所有键值对的数量。图3(a)中给出的是单输入状态，与普通的单输入相同，批量输入按钮处于单输入状态。图3(b)中给出的是批量输入状态，使用批量参数控制和计算，生成某个参数的多组数据，提交数据时根据批量输入的数据数量自动组合。

参见图4，图4为批量输入数据示意图。图4中，参数A和参数D是批量输入，获得的输入结果为：

A＝a1，B＝b，C＝c，D＝d1；

A＝a2，B＝b，C＝c，D＝d2；

A＝a3，B＝b，C＝c，D＝d3。

进一步配置分割条，用于将多个参数分组；其中，每个分割条作为一个分割节点，与参数节点同级，挂在根节点下。

参见图5，图5为分割条布局示意图。图5中针对一个前端界面给出3个分割条的示意图。将参数1到参数8分割为三组。

使用分割条将多个参数分组，使得前端显示更清晰友好。

每个参数包含下述之一或任意组合属性：

名称(name)：参数唯一ID，必填，用于作为传输给接收端的键。

标签(label)：参数显示名称，必填，用于展示在界面上，和输入组件位于同一行。

类型(type)：参数类型，必填，决定用什么输入组件提供给用户输入。可分为：

string：字符串。非批量输入时对应普通文本输入框；批量输入时对应一组输入组件，一般用于自动生成序列号等场景，包含以下属性：

prefix：通用字符串前缀，对应文本输入框，可选

start：起始数字，整数，对应整数输入框，必填

step：步长，正整数，对应整数输入框，必填

count：批量生成的数量，正整数，对应整数输入框，必填

suffix：通用字符串后缀，对应文本输入框，可选

批量输入时，自动生成的字符串长度都应该符合由lengthMin和lengthMax属性限制的长度范围，否则前端将提示错误信息。

integer：整数。非批量输入时对应整数输入框；批量输入时对应一组输入组件，包含以下属性：

start：起始数字，整数，对应整数输入框，必填

step：步长，正整数，对应整数输入框，必填

count：批量生成的数量，正整数，对应整数输入框，必填

批量输入时，自动生成的整数都应该符合由min和max属性限制的取值范围，否则前端将提示错误信息。

decimal：小数，非批量输入时对应普通文本输入框，使用正则表达式校验有效性；批量输入时对应一组输入组件，包含以下属性：

start：起始数字，小数，对应普通文本输入框，使用正则表达式校验有效性，必填

step：步长，正数，对应普通文本输入框，使用正则表达式校验有效性，必填

count：批量生成的数量，正整数，对应整数输入框，必填

批量输入时，自动生成的整数都应该符合由min和max属性限制的取值范围，否则前端将提示错误信息。

password：密码，对应密码输入框，输入的文本将使用统一的密码隐藏符号替换展示。

ipv4：IPv4地址，非批量输入时对应IPv4地址输入框；批量输入时对应一组输入组件，包含以下属性：

start：起始IP地址，小数，对应IPv4输入框，必填

step：步长，正整数，对应整数输入框，必填

count：批量生成的数量，正整数，对应整数输入框，必填

批量输入时，自动生成的IPv4地址都应该是有效的，否则前端将提示错误信息。

ipv6：IPv6地址，对应IPv6地址输入框。

ip：IP地址，可以是IPv4或IPv6地址，展示为普通文本输入框，使用正则表达式校验有效性。

enum：枚举，对应下拉框，展示所有枚举选项。枚举取值和显示名称将由子节点定义。枚举的子节点标记为一组<enum></enum>，其子节点为多组<item></item>，每一组item代表一个枚举取值，参数为：

value：取值

display：取值的显示名称

boolean：布尔值，对应复选框，选中时表示true，不选时表示为false。

complex：复合输入组，由两个或以上的组件组合展示，用于一个参数由多个子参数使用指定的表达式(见后文描述的combine参数)计算得出的场景，子参数的定义由子节点提供。对接收端来说，子参数不可见。

combine：type属性取值为complex的复合输入组，子参数取值组合成父参数取值的计算表达式，如A+B*10+C*100。当参数对应的组件未被隐藏时，将使用该表达式计算参数取值；否则将根据用户配置的defaultHideValue取值。

notNull：是否允许为空，必填，取值为true/false。当参数为非空时，参数标签右侧将有星号(*)标记。

default：默认取值，可选。

hideCondition：隐藏条件，由其它一个或多个参数组合而成的表达式，如A＝＝1&&B＝＝2。当前端界面上的参数实时输入的取值使得该表达式计算得出的结果为true时，当前参数被隐藏不显示，为false时又会重新显示出来。

defaultHideValue：当组件被隐藏不显示时，该参数的取值，可选，不配置时赋予空字符串。

supportBatch：type为String、integer、decimal或ipv4时有效，表示是否支持批量输入，取值为true/false，无该参数时默认为false，不支持批量。

lengthMin、lengthMax：type为String时有效，分别表示字符串最小和最大长度，可选。如果lengthMin和lengthMax均配置输入组件右侧显示字符长度约束范围：lengthMin-lengthMax个字符；如果只配置了lengthMin，约束范围显示为：不少于lengthMin个字符；如果只配置了lengthMax，约束范围显示为：不多于lengthMax个字符

min、max：type为integer或decimal是有效，分别表示最大值和最小值，可选。如果min和max均配置，将在输入组件右侧显示为数字取值范围约束：min-max；如果只配置了min，约束范围显示为：>＝min；如果只配置了max，约束范围显示为：<＝max

pattern：type为String时有效，输入的字符串有效性校验使用的正则表达式，配置了lengthMin、lengthMax属性的情况下，字符串有效性校验需要同时满足正则和长度范围；

并且对输入有效性的校验也可以不限于字符串长度、整数或小数的取值范围等方式，在有必要时，可以使用是否匹配某个正则表达式的方式来校验输入的有效性。

以上仅仅是主要使用到的属性，实际使用中可以根据软件需求增加更多属性，如标签字体、标签背景色、组件上下间距、组件外框线等，这里不再一一举例。

分割条的主要参数包含下述属性：

label：分割条上的文字，可选；

labelAlign：文字位置，分为left(居左)、right(居右)、center(居中)，可选，默认居中；

color：文字颜色，可选，默认黑色；

background：分割条的背景颜色，16进制RGB字符串，以#开头，可选，默认#CCCCCC。

上述给出的是一种示例，具体实现时不限于上述给出的属性限制。

下面结合附图，详细给出基于配置文件的前端界面的呈现过程。

参见图6，图6为本申请实施例中前端界面呈现方法流程示意图。具体步骤为：

步骤601，响应于前端界面的呈现请求，解析针对该前端界面配置的配置文件。

这里的前端界面的呈现请求，即请求呈现一个初始前端界面，用于输入参数的前端界面。

本申请实施例中先确定要呈现的前端界面对应的配置文件，然后解析该配置文件，为生成对应前端界面做准备。

步骤602，使用解析后的配置文件生成前端界面；其中，前端界面包括固定呈现部分和参数输入部分；固定呈现部分基于配置文件中的与固定呈现部分相关的信息生成；参数输入部分基于配置文件中与参数输入部分相关的信息按照参数被描述的内容和顺序依次排列生成。

在配置文件中与呈现有关的内容包括的两方面的内容，一方面是固定呈现部分，按照解析后的与固定呈现部分相关的信息生成即可；一方面是参数输入部分，按照解析后的与参数输入部分相关的信息生成即可，且在生成过程中，基于参数在配置文件中被描述的内容和顺序依次生成，并按照配置的顺序进行排列。

在具体实现时，可以配置具体布局为每一个参数占据一行，但不对此进行限制，即布局排版可以根据实际需要进行配置。

配置文件中还包括数据交互相关属性，这一属性解析后不需要马上呈现，在进入数据提交时使用。

通过步骤602实现了前端界面的生成，即所有配置的组件都会生成，还未到界面呈现的步骤，接下来会判断是否存在需要隐藏的组件。

步骤603，根据配置文件确定参数输入部分对应的组件是否对应隐藏规则。

遍历参数输入部分所对应的所有组件，并确定变量到的每个组件是否配置了对应的隐藏规则；如果是，则根据隐藏规则确定是否隐藏该组件；否则，不对该组件进行隐藏。

步骤604，响应于确定存在对应隐藏规则的组件，根据初始参数值，以及隐藏规则确定是否隐藏该组件。

遍历到对应隐藏规则的组件时，根据隐藏规则，以及初始参数确定是否隐藏该组件，这里的初始参数是与该组件关联的相关组件的参数，且在该隐藏规则中涉及到的参数；初始参数在当前场景中还没有用户输入的任何参数，使用的参数值为空，或配置文件中配置的初始参数值，来确定该组件是否需要进行隐藏处理。

步骤605，响应于确定隐藏该组件，将该组件在前端界面的参数输入部分进行隐藏处理。

这里进行隐藏处理，包括：隐藏显示该组件；并确定针对该组件是否设置默认值，如果是，设置组件值为默认值；如果未设置则进行值的设置。

步骤606，将更新后的前端界面呈现。

当所有对应的隐藏规则的组件都处理结束后，即将生成的前端界面进行更新后进行呈现。

至此，完成一个初始的前端界面的呈现。

该实施例中，在用户请求一个前端界面的呈现时，解析对应的配置文件，按照配置文件的配置的信息的先后顺序生成前端界面，并基于配置文件中的隐藏规则针对参数输入部分的组件确定需要隐藏的组件，并执行隐藏处理，然后将更新后前端界面呈现。该方案能够在低成本前提下，提高前端界面的实现效率。

参见图7，图7为本申请实施例中基于参数输入的前端界面处理流程示意图。具体步骤为：

步骤701，响应于监听到前端界面对应的组件输入的参数值发生变化，根据参数与组件的对应关系，以及组件之间的关联关系确定是否存在与组件关联的相关组件。

当前端界面中任意组件输入的参数值变化时，需要先校验有效性，当有效时，在确定是否存在与该组件相关的组件需要判断是否隐藏；

判断有效性，是确定当前输入的参数值是否符合设置的参数有效范围，以及所属格式是否符合设置的参数格式，均满足时，确定输入的参数值是有效的；否则，确定输入的参数值不是有效的。

在确定输入的参数值是有效的之后，确定参数值变化的组件是否对应关联组件。

步骤702，响应于确定存在与组件关联的相关组件，确定与组件关联的相关组件是否存在对应的隐藏规则。

在确定不存在与该组件关联的相关组件时，该次参数值的变化不影响其他组件，不进行额外处理。

步骤703，响应于该相关组件存在对应隐藏规则，基于变化后的参数值，以及隐藏规则，确定是否隐藏该相关组件；如果是，执行步骤704；否则，执行步骤705。

在相关组件不存在对应的隐藏规则时，不进行规则隐藏判断，以及其他组件相关处理。

隐藏规则根据实际需要配置，可以是一个或多个参数组合而成的表达式，也可以是一个不含任何参数永远隐藏的表达式，比如“1＝1”，表示该参数隐藏，但需要在提交时以某个固定值发送给接收端，本申请实施例中对此不进行限制。

步骤704，隐藏该相关组件。结束本流程。

针对需要隐藏的相关组件进行隐藏处理，无论之前该相关组件是隐藏还是显示，在该步骤处理后，该相关组件处于隐藏状态；

组件如果支持批量输入，无论隐藏前处于单输入还是多输入状态，只要隐藏都将是单输入状态。

在具体实现时，可以针对隐藏的组件设置默认值，如果设置了默认值，在隐藏该组件时，设置组件的取值为该默认值；否则，不进行取值的设置。

步骤705，显示该相关组件。

在确定显示相关组件时，还需进一步执行如下操作：

基于配置文件中针对参数配置的参数有效规则校验相关组件对应的参数值的有效性；

响应于校验成功，设置相关组件输入状态为有效；并呈现有效状态；

响应于校验失败，设置相关组件输入状态为无效，并呈现无效状态。

这里的有效规则包括参数的有效范围，以及参数格式。

此时校验显示的相关组件的参数值的有效性的原因：该相关组件可能之前显示过，且输入过参数，后有隐藏，且未进行参数取值的设置，即保留了输入的参数取值，这是需要进一步校验该相关组件的参数值有效性。

有效状态和无效状态的呈现，可以通过显示不同颜色来区分，如无效状态设置组件背景为红色，有效状态保持初始显示的颜色等，本申请实施例中对此不进行限制。

至此，完成一次检测到组件的参数值变化的相关处理。

该实施例中给出在监听到组件的参数值变化时，基于配置文件需确定该组件的相关组件是隐藏还是显示，不需要基于每个组件的显示与隐藏分别硬编码进行逻辑判断，能够在低成本前提下，能够在低成本前提下，提高前端界面的实现效率。

下面给出用户输入结束后提交输入参数时的相关处理过程。

参见图8，图8为本申请实施例中用户输入结束后提交输入参数的处理流程示意图。具体步骤为：

步骤801，响应于在用户输入结束后提交的确定请求，获取输入参数的参数值。

在该确定请求提交后，获取用户针对该次请求输入的所有参数的参数值。

步骤802，若存在批量输入，则基于配置文件中配置的参数有效规则，校验批量输入的参数值的有效性，基于配置文件中配置的对应组件个数校验输入的参数值的个数的一致性。

本申请实施例中针对单一参数的参数值的有效性在参数输入的时候，已进行有效性的校验；在提交确定请求后，首先需要判断是否存在批量输入的参数，如果存在，则对批量输入参数进行一致性和有效性的校验。

其中，参数有效规则包括：参数有效范围，以及参数格式。

步骤803，响应于校验成功，获取配置文件中针对校验成功配置的响应信息并执行。结束本流程。

如果校验通过，获取配置的响应信息并执行，配置的响应信息根据配置文件中的数据交互相关属性对应的信息确定；这里的响应信息可以为：显示发送成功的提示、跳转到另一个页面等。

步骤804，响应于校验失败，定位校验失败的数据对应的相关组件，并输出错误提示。

如果有任何一个组件输入的参数值是无效的，则说明校验失败；在校验失败后，定位校验失败的数据对应的相关组件，并输出错误提示，具体可以为：

定位到第一个输入无效的组件，同时输入组件背景色以红白交替闪烁几秒，以帮助用户快速找到需要重新输入的参数；如果有一个以上的输入组件处于批量输入状态，并且count值不一致，则弹出批量输入数量不一致的提示，并且将页面焦点定位到第一个处于批量输入的组件，同时所有批量输入的组件背景色以红白交替闪烁几秒。这里给出的是一种具体实现方式，并不对此实现方式进行限制。

本申请实施例中在校验成功，或不存在批量输入时，该方法进一步包括：

根据组件当前对应的参数值和联合定义的表达式，直接获取或组合计算参数的参数值，以字符串键值对的方式构建数据集合；

使用列表存放数据集合，并发送给接收端。

具体实现为：则根据组件当前取值和combine定义的表达式等，直接获取或组合计算参数的取值，以字符串键值对(key-value pair)的方式构建一个(所有组件为单输入状态)或多个(有至少一个组件为批量输入状态)数据集合(Java中为Map类型)，其中无论取值(value)是什么类型的数据，都将统一被转换为字符串形式。为保证接收端收到的数据格式固定，无论是否有批量输入组件，都将使用列表(Java中为List类型)存放所有构建的Map数据集合，并一次性发送给接收端。

数据接收端在配置文件中指定，可以是前端的其它界面的接口API调用，也可以是服务器端某个远程访问接口，只需要根据该固定的数据结构构成数据发送给接收端，就可以保证前端界面无论如何配置变化，接收端都可以解析和使用这些数据。

至此，完成一次在检测到组件的参数值变化的相关处理。

该实施例中在用户完成参数输入时，发出确定请求；此时确定提交的参数中若存在批量组件，则基于配置文件校验批量输入参数的有效性和一致性；在校验不成功时，定位错误组件并提示用户；在校验成功或没有批量输入的时候，直接执行配置文件中的响应信息，并以键值对的方式存储数据，并一次性发送给接收端。该方案能够提高处理效率，并保证前端界面无论如何配置变化，接收端都可以解析和使用这些数据。

本申请实施例中针对每个阶段的前端界面的呈现，以及相关处理，均基于配置文件实现，这样在对前端界面相关实现需要修改的时候，不需要程序员进行代码的修改，只需要对配置文件中的对应内容进行修改即可。这样的实现方案能够降低人工成本，且提高处理的效率。

上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。

基于同样的发明构思，本申请实施例中还提供一种前端界面呈现装置。

参见图9，图9为本申请实施例中前端界面呈现装置结构示意图。该装置包括：

解析单元901，被配置为执行响应于前端界面的呈现请求，解析针对所述前端界面配置的配置文件；

生成单元902，被配置为执行使用解析后的配置文件生成前端界面；其中，所述前端界面包括固定呈现部分和参数输入部分；所述固定呈现部分基于所述配置文件中的与固定呈现部分相关的信息生成；所述参数输入部分基于所述配置文件中与参数输入部分相关的信息按照参数被描述的内容和顺序依次排列生成；

第一确定单元903，被配置为执行根据配置文件确定所述参数输入部分对应的组件是否对应隐藏规则；

第二确定单元904，被配置为执行响应于确定存在对应隐藏规则的所述组件，根据初始参数值，以及所述隐藏规则确定是否隐藏所述组件；

处理单元905，被配置为执行响应于确定隐藏所述组件，将所述组件在所述前端界面的参数输入部分进行隐藏处理；

呈现单元906，被配置为执行将更新后的所述前端界面呈现。

在另一个实施例中，所述配置信息还包括：参数与组件的对应关系，以及组件之间的关联关系；

第一确定单元903，被配置为执行响应于监听到所述前端界面对应的组件输入的参数值发生变化，根据参数与组件的对应关系，以及组件之间的关联关系确定是否存在与所述组件关联的相关组件；

第二确定单元904，被配置为执行响应于确定存在与所述组件关联的相关组件，确定与所述组件关联的相关组件是否存在对应的隐藏规则；响应于所述相关组件存在对应隐藏规则，基于变化后的参数值，以及所述隐藏规则，确定是否隐藏所述相关组件；如果是，隐藏所述相关组件；否则，显示所述相关组件。

在另一个实施例中，

处理单元905，被配置为执行显示所述相关组件之后，基于所述配置文件中针对参数配置的参数有效规则校验所述相关组件对应的参数值的有效性；响应于校验成功，设置所述相关组件输入状态为有效；并呈现有效状态；响应于校验失败，设置所述相关组件输入状态为无效，并呈现无效状态。

在另一个实施例中，

处理单元905，被配置为执行响应于在用户输入结束后提交的确定请求，获取输入参数的参数值；若存在批量输入，则基于所述配置文件中配置的参数有效规则，校验批量输入的参数值的有效性，基于所述配置文件中配置的对应组件个数校验输入的参数值的个数的一致性；响应于校验成功，获取所述配置文件中针对校验成功配置的响应信息并执行；响应于校验失败，将基于校验失败的数据对应的相关组件输出错误提示。

在另一个实施例中，

处理单元905，被配置为执行响应于校验成功，或不存在批量输入，根据组件当前对应的参数值和联合定义的表达式，直接获取或组合计算参数的参数值，以字符串键值对的方式构建数据集合；使用列表存放所述数据集合，并发送给接收端。

在另一个实施例中，所述配置文件为xml文件；

在所述xml文件中，所述与固定呈现部分相关的信息对应的节点作为根节点；每个参数被描述为一个参数节点，挂在根节点下；其中，每个参数对应一个或一组组件；若一个参数的取值需要使用多个子参数的取值计算获得，则将子参数节点挂在该参数的参数节点下。

在另一个实施例中，

在所述配置文件中配置的参数输入方式包括下述一种或任意组合：

单输入、组合输入、批量输入；

在所述配置文件中配置分割条，用于将多个参数分组；其中，每个分割条作为一个分割节点，与参数节点同级，挂在根节点下。

在另一个实施例中，还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现前端界面呈现的方法。

在另一个实施例中，还提供一种计算机可读存储介质，其上存储有计算机指令，指令被处理器执行时可实现前端界面呈现的方法。

图10为本发明实施例提供的电子设备的实体结构示意图。如图10所示，该电子设备可以包括：处理器(Processor)1010、通信接口(Communications Interface)1020、存储器(Memory)1030和通信总线1040，其中，处理器1010，通信接口1020，存储器1030通过通信总线1040完成相互间的通信。处理器1010可以调用存储器1030中的逻辑指令，以执行如下方法：

响应于前端界面的呈现请求，解析针对前端界面配置的配置文件；

使用解析后的配置文件生成前端界面；其中，前端界面包括固定呈现部分和参数输入部分；固定呈现部分基于配置文件中的与固定呈现部分相关的信息生成；参数输入部分基于配置文件中与参数输入部分相关的信息按照参数被描述的内容和顺序依次排列生成；

根据配置文件确定参数输入部分对应的组件是否对应隐藏规则；

响应于确定存在对应隐藏规则的组件，根据初始参数值，以及隐藏规则确定是否隐藏组件；

响应于确定隐藏组件，将组件在前端界面的参数输入部分进行隐藏处理；

将更新后的前端界面呈现。

此外，上述的存储器1030中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

本申请附图中的流程图和框图，示出了按照本申请公开的各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或者代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应该注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同附图中所标准的顺序发生。例如，两个连接地表示的方框实际上可以基本并行地执行，它们有时也可以按照相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或者流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本申请公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本申请中。特别地，在不脱离本申请精神和教导的情况下，本申请的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，所有这些组合和/或结合均落入本申请公开的范围。

本文中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思路，并不用于限制本申请。对于本领域的技术人员来说，可以依据本发明的思路、精神和原则，在具体实施方式及应用范围上进行改变，其所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (10)

1.一种前端界面呈现方法，其特征在于，所述方法包括：

响应于前端界面的呈现请求，解析针对所述前端界面配置的配置文件；

使用解析后的配置文件生成前端界面；其中，所述前端界面包括固定呈现部分和参数输入部分；所述固定呈现部分基于所述配置文件中的与固定呈现部分相关的信息生成；所述参数输入部分基于所述配置文件中与参数输入部分相关的信息按照参数被描述的内容和顺序依次排列生成；

根据配置文件确定所述参数输入部分对应的组件是否对应隐藏规则；

响应于确定存在对应隐藏规则的所述组件，根据初始参数值，以及所述隐藏规则确定是否隐藏所述组件；

响应于确定隐藏所述组件，将所述组件在所述前端界面的参数输入部分进行隐藏处理；

将更新后的所述前端界面呈现。

2.根据权利要求1所述的方法，其特征在于，所述配置信息还包括：参数与组件的对应关系，以及组件之间的关联关系；所述方法进一步包括：

响应于监听到所述前端界面对应的组件输入的参数值发生变化，根据参数与组件的对应关系，以及组件之间的关联关系确定是否存在与所述组件关联的相关组件；

响应于确定存在与所述组件关联的相关组件，确定与所述组件关联的相关组件是否存在对应的隐藏规则；

响应于所述相关组件存在对应隐藏规则，基于变化后的参数值，以及所述隐藏规则，确定是否隐藏所述相关组件；如果是，隐藏所述相关组件；否则，显示所述相关组件。

3.根据权利要求2所述的方法，其特征在于，所述显示所述相关组件之后，所述方法进一步包括：

基于所述配置文件中针对参数配置的参数有效规则校验所述相关组件对应的参数值的有效性；

响应于校验成功，设置所述相关组件输入状态为有效；并呈现有效状态；

响应于校验失败，设置所述相关组件输入状态为无效，并呈现无效状态。

4.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：

响应于在用户输入结束后提交的确定请求，获取输入参数的参数值；

若存在批量输入，则基于所述配置文件中配置的参数有效规则，校验批量输入的参数值的有效性，基于所述配置文件中配置的对应组件个数校验输入的参数值的个数的一致性；

响应于校验成功，获取所述配置文件中针对校验成功配置的响应信息并执行；

响应于校验失败，将基于校验失败的数据对应的相关组件输出错误提示。

5.根据权利要求4所述的方法，其特征在于，所述响应于校验成功，或不存在批量输入，所述方法进一步包括：

根据组件当前对应的参数值和联合定义的表达式，直接获取或组合计算参数的参数值，以字符串键值对的方式构建数据集合；

使用列表存放所述数据集合，并发送给接收端。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述配置文件为xml文件；

在所述xml文件中，所述与固定呈现部分相关的信息对应的节点作为根节点；每个参数被描述为一个参数节点，挂在根节点下；其中，每个参数对应一个或一组组件；若一个参数的取值需要使用多个子参数的取值计算获得，则将子参数节点挂在该参数的参数节点下。

7.根据权利要求6所述的方法，其特征在于，所述方法进一步包括：

在所述配置文件中配置的参数输入方式包括下述一种或任意组合：

单输入、组合输入、批量输入；

在所述配置文件中配置分割条，用于将多个参数分组；其中，每个分割条作为一个分割节点，与参数节点同级，挂在根节点下。

8.一种前端界面呈现装置，其特征在于，所述装置包括：

解析单元，被配置为执行响应于前端界面的呈现请求，解析针对所述前端界面配置的配置文件；

生成单元，被配置为执行使用解析后的配置文件生成前端界面；其中，所述前端界面包括固定呈现部分和参数输入部分；所述固定呈现部分基于所述配置文件中的与固定呈现部分相关的信息生成；所述参数输入部分基于所述配置文件中与参数输入部分相关的信息按照参数被描述的内容和顺序依次排列生成；

第一确定单元，被配置为执行根据配置文件确定所述参数输入部分对应的组件是否对应隐藏规则；

第二确定单元，被配置为执行响应于确定存在对应隐藏规则的所述组件，根据初始参数值，以及所述隐藏规则确定是否隐藏所述组件；

处理单元，被配置为执行响应于确定隐藏所述组件，将所述组件在所述前端界面的参数输入部分进行隐藏处理；

呈现单元，被配置为执行将更新后的所述前端界面呈现。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-7任一项所述的方法。