一种前端表单状态拦截扩展方法及系统

技术领域

本发明涉及计算机技术领域，具体涉及一种前端表单状态拦截扩展方法及系统。

背景技术

在Web应用中，表单的状态控制是一个重要的方面，而对表单的状态控制主要是从控件层进行控制。控件的状态主要包括是控件是否只读、控件是否可见、输入控件是否必填、控件是否禁用等。根据表单运行的场景，需要动态控制什么时候可以编辑表单数据，什么时候按钮可以展示出来，和一些其他的表单状态控制的场景。通常对于表单的状态控制，是在表单内部实现的。根据场景的不同，动态的改变表单状态。当有新的场景时，需要修改表单的逻辑，对原有代码产生了侵入性。

而传统的表单状态控制时存在以下问题：

一、功能耦合

通常对表单状态进行控制时，表单状态的控制逻辑在表单中，表单逻辑和状态控制耦合在一起。当在新的场景下，需要改变表单状态时，需要修改原有的表单逻辑，对原有代码产生侵入性，使得表单功能变得不稳定。

二、扩展性差

一个web表单通常需要运行在不同的环境下，例如当一个表单需要提交审批，制单状态下可以编辑所有字段；在第一个审批节点时，可以对A字段进行修改；如果添加了新的审批节点，需要控制只能对B字段修改，传统的需要修改原有的表单状态控制逻辑。在传统的表单状态控制下，当有新的场景时，不容易根据不同的场景进行扩展，在新的场景下对表单进行新的状态控制。

基于上述问题，为了把表单自身逻辑和不同场景下的状态控制进行解耦，需要提供一种在表单外对表单状态进行拦截的方法

发明内容

有鉴于此，本发明提出了一种前端表单状态拦截扩展方法及系统，通过实现系列的接口，来解决表单控件状态拦截扩展问题。

基于上述目的，第一方面，本发明提供了一种前端表单状态拦截扩展系统，包括以下组件：

生成器，用于根据表单控件的相关信息，生成对应的控件状态变量，并将表单控件的状态值替换成新的控件状态变量；

监听器，用于注册监听控件状态的初始值的变化。它监听到变化后，通过更新器组件来更新控件状态变量；

更新器，用于根据监听器监听到的初始值的变化，更新控件状态变量的值，实现动态控制表单控件状态；

计算器，用于根据控件状态的初始值的类型，计算出属性的初始值，包括常量、变量和表达式；

拦截器，用于对控件状态进行拦截；拦截器包括初始化方法和拦截方法，根据不同的场景动态改变表单控件状态。

作为本发明的进一步方案，所述生成器中通过定义一个新的注解@ControlStatePropMetadata，用来描述控件状态变量；所述生成器根据控件相关的信息生成对应的控件状态变量；

定义生成器接口时，根据控件信息生成控件状态变量，并把控件上的状态值替换成新的控件状态变量。

作为本发明的进一步方案，所述监听器中，定义监听器接口时，包含注册监听方法，监听控件状态的初始值的变化，监听到变化后，通过更新器更新控件状态变量。

作为本发明的进一步方案，所述更新器中，定义更新器接口时，在监听器中监听到初始值的变化，通过更新器更新控件状态变量的值。

作为本发明的进一步方案，所述计算器中，定义计算器接口时，根据控件状态的初始值的类型，计算出属性的初始值。

作为本发明的进一步方案，所述拦截器中，定义拦截器接口时，init方法负责初始化拦截器，intercept方法负责对状态进行拦截；根据不同的场景，定义不同的拦截器类，拦截器类实现拦截器接口。

作为本发明的进一步方案，定义拦截器接口时，还包括定义拦截器服务，拦截器服务用于初始化各个拦截器和依次执行各个拦截器，根据不同的场景，基于拦截器接口，添加不同的状态拦截器实现。

基于上述目的，第二方面，本发明还提供了一种前端表单状态拦截扩展方法，包括以下步骤：

监听器监听到控件状态初始化值变化；

更新器查找需要更新的控件状态变量；

计算机计算控件状态初始值；

拦截器根据不同场景，修改控件状态；

更新器根据拦截器结果，修改控件状态变量；

界面响应，根据修改后控件状态变量控制界面状态。

作为本发明的进一步方案，生成器用于生成代码，生成代码时，根据生成器组件的接口，在HTML中生成控件属性变量，替代原始的控件状态值。

作为本发明的进一步方案，监听初始值的变化时，通过监听器组件，初始化各个拦截器，并注册监听控件状态初始值的变化；其中，通过拦截器服务的init接口，完成各个拦截器的初始化；初始化完成后，再对控件状态初始值的变量注册监听；监听到初始变量的变化后，通过更新器进行更新控件状态变量。

作为本发明的进一步方案，获取需要更新的控件状态变量：根据监听到的变量类型，找出需要更新的控件状态变量；其中，监听到form的变化后，遍历控件状态变量，通过变量的注解中defaultValue的值，是否包含变量form，如果包含则标记为需要更新。

作为本发明的进一步方案，计算控件状态的初始值：通过计算器组件中computeOriginalValue接口，计算出变量的初始值。

作为本发明的进一步方案，对状态进行拦截：根据不同的场景，使用不同的拦截器对控件状态进行拦截，动态修改控件状态；其中，拦截器服务一次遍历执行各个拦截器的拦截接口，在各个拦截器动态修改interceptContext.value；根据拦截处理后的interceptContext.value，在更新器中修改控件状态变量的值，界面状态和控件状态变量绑定，界面进行响应，表单控件状态变化。

本发明的又一方面，还提供了一种计算机设备，包括存储器和处理器，该存储器中存储有计算机程序，该计算机程序被处理器执行时执行上述任一项根据本发明的前端表单状态拦截扩展方法。

本发明的再一方面，还提供了一种计算机可读存储介质，存储有计算机程序指令，该计算机程序指令被执行时实现上述任一项根据本发明的前端表单状态拦截扩展方法。

与现有技术相比较而言，本发明提出的一种前端表单状态拦截扩展方法及系统，具有以下有益效果：

1.提高开发效率：本方法及系统通过自动生成控件状态变量，减少了手动编写大量代码的需求。开发人员可以更快速地实现表单控件状态的动态管理，从而提高开发效率。

2.灵活性与可维护性：通过拦截器和监听器的结合，本方法及系统实现了对表单控件状态的高度灵活性。开发人员可以根据具体需求定义不同的拦截器，实现不同场景下的状态控制，而无需修改大量现有代码。这提高了代码的可维护性和可扩展性。

3.减少错误和Bug：由于减少了手动编写大量代码的机会，这一方法减少了潜在的错误和Bug的出现。生成器组件的使用确保了控件状态变量的正确生成，减少了人为错误的风险。

4.动态适应性：本方法及系统可以应用于多种场景，包括流程状态管理、流程节点配置等。通过选择不同的拦截器，系统可以适应不同的应用需求，使其更加通用和具有广泛的适用性。

5.提升用户体验：通过动态管理表单控件的可见性、禁用状态和只读属性，本方法及系统有助于提升用户体验。用户将能够看到仅在特定情况下可见的控件，同时减少了不必要的操作，提供了更流畅和直观的界面。

6.降低开发成本：通过减少手动编写代码的需求，这一方法降低了开发成本。开发团队可以更快速地构建和维护应用程序，从而减少了开发项目的总体成本。

7.支持复杂逻辑：通过引入计算器组件，本方法及系统支持表单状态的复杂逻辑。开发人员可以定义各种表单状态变量的计算规则，以适应多样化的应用需求。

综上所述，本发明的前端表单状态拦截扩展方法及系统为前端开发提供了一种高效、灵活和可维护的方式来管理表单控件状态，从而提升了开发效率、用户体验，降低了开发成本，并减少了错误的风险。

本申请的这些方面或其他方面在以下实施例的描述中会更加简明易懂。应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

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

在图中：

图1为本发明实施例的一种前端表单状态拦截扩展方系统的结构示意图。

图2为本发明实施例的一种前端表单状态拦截扩展系统中拦截器服务、拦截器接口、拦截器实现类的示意图。

图3为本发明实施例的一种前端表单状态拦截扩展方法的流程图。

具体实施方式

下面，结合附图以及具体实施方式，对本申请做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施例。

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明实施例进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

需要说明的是，本发明实施例中所有使用“第一”和“第二”的表述均是为了区分两个相同名称的非相同的实体或者非相同的参量，可见“第一”“第二”仅为了表述的方便，不应理解为对本发明实施例的限定。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备固有的其他步骤或单元。

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

附图中所示的流程图仅是示例说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解、组合或部分合并，因此实际执行的顺序有可能根据实际情况改变。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

由于传统的表单状态控制时存在以下问题：通常对表单状态进行控制时，表单状态的控制逻辑在表单中，表单逻辑和状态控制耦合在一起。当在新的场景下，需要改变表单状态时，需要修改原有的表单逻辑，对原有代码产生侵入性，使得表单功能变得不稳定；一个web表单通常需要运行在不同的环境下，例如当一个表单需要提交审批，制单状态下可以编辑所有字段；在第一个审批节点时，可以对A字段进行修改；如果添加了新的审批节点，需要控制只能对B字段修改，传统的需要修改原有的表单状态控制逻辑。在传统的表单状态控制下，当有新的场景时，不容易根据不同的场景进行扩展，在新的场景下对表单进行新的状态控制。

为了把表单自身逻辑和不同场景下的状态控制进行解耦，本发明提出了一种前端表单状态拦截扩展方法及系统，通过实现系列的接口，来解决表单控件状态拦截扩展问题。

参见图1所示，本发明的实施例提供了一种前端表单状态拦截扩展系统，，包括以下组件：

生成器，用于根据表单控件的相关信息，生成对应的控件状态变量，并将表单控件的状态值替换成新的控件状态变量；

监听器，用于注册监听控件状态的初始值的变化。它监听到变化后，通过更新器组件来更新控件状态变量；

更新器，用于根据监听器监听到的初始值的变化，更新控件状态变量的值，实现动态控制表单控件状态；

计算器，用于根据控件状态的初始值的类型，计算出属性的初始值，包括常量、变量和表达式；

拦截器，用于对控件状态进行拦截；拦截器包括初始化方法和拦截方法，根据不同的场景动态改变表单控件状态。

在本实施例中，所述生成器中通过定义一个新的注解@ControlStatePropMetadata，用来描述控件状态变量，所述生成器根据控件相关的信息生成对应的控件状态变量。示例性的：

定义生成器接口时，根据控件信息生成控件状态变量，并把控件上的状态值替换成新的控件状态变量。示例性的：

在本实施例中，所述监听器中，定义监听器接口时，包含注册监听方法，监听控件状态的初始值的变化，监听到变化后，通过更新器更新控件状态变量。接口定义如下：

interface IControlStateListener{

registerLintener()

}

在本实施例中，所述更新器中，定义更新器接口时，在监听器中监听到初始值的变化，通过更新器更新控件状态变量的值。示例性的：

在本实施例中，所述计算器中，定义计算器接口时，根据控件状态的初始值的类型，计算出属性的初始值。示例性的：

interface ControlStateCounter{

computeOriginalValue(type，value)；

}

在本实施例中，所述拦截器中，定义拦截器接口时，init方法负责初始化拦截器，intercept方法负责对状态进行拦截。示例性的：

InitContext：初始化上下文

InterceptContext：拦截上下文

根据不同的场景，定义不同的拦截器类，拦截器类实现拦截器接口。拦截器类都实现拦截器接口(IControlStateInterceptor)。定义了一个流程配置拦截器，根据流程节点的配置动态改变表单控件状态

在本实施例中，定义拦截器接口时，还包括定义拦截器服务，拦截器服务用于初始化各个拦截器和依次执行各个拦截器。

根据不同的场景，基于拦截器接口，添加不同的状态拦截器实现。例如：流程状态拦截器、流程节点配置、其他拦截器，参见图2所示。

参见图3所示，本发明的实施例提供了一种前端表单状态拦截扩展方法，该方法包括以下步骤：

监听器监听到控件状态初始化值变化；

更新器查找需要更新的控件状态变量；

计算机计算控件状态初始值；

拦截器根据不同场景，修改控件状态；

更新器根据拦截器结果，修改控件状态变量；

界面响应，根据修改后控件状态变量控制界面状态。

在本实施例中，生成器用于生成代码，生成代码时，根据生成器组件的接口，在HTML中生成控件属性变量，替代原始的控件状态值。

在本实施例中，监听初始值的变化时，通过监听器组件，初始化各个拦截器，并注册监听控件状态初始值的变化；其中，通过拦截器服务的init接口，完成各个拦截器的初始化；初始化完成后，再对控件状态初始值的变量注册监听；监听到初始变量的变化后，通过更新器进行更新控件状态变量。

在本实施例中，获取需要更新的控件状态变量：根据监听到的变量类型，找出需要更新的控件状态变量；其中，监听到form的变化后，遍历控件状态变量，通过变量的注解中defaultValue的值，是否包含变量form，如果包含则标记为需要更新。

在本实施例中，计算控件状态的初始值：通过计算器组件中computeOriginalValue接口，计算出变量的初始值。

在本实施例中，对状态进行拦截：根据不同的场景，使用不同的拦截器对控件状态进行拦截，动态修改控件状态；其中，拦截器服务一次遍历执行各个拦截器的拦截接口，在各个拦截器动态修改interceptContext.value；根据拦截处理后的interceptContext.value，在更新器中修改控件状态变量的值，界面状态和控件状态变量绑定，界面进行响应，表单控件状态变化。

本发明的一种前端表单状态拦截扩展方法的流程中，生成代码时，本发明拿一个按钮举例，本发明在html中写了以下的按钮组件，v-if表示是否可见，为常量false，disabled表示按钮是否禁用，绑定了变量form.btnState。

生成器中本发明定义了两个接口，通过generatorVariables接口在ts中生成控件属性变量，通过changeVariables接口在html中把可见和禁用状态值改为控件属性变量。注解@ControlStatePropMeta中defaultValue存储了初始值，用于后续的监听和解析计算。生成后的代码如下：

其中，监听初始值的变化时，首先本发明通过拦截器服务的init接口，完成各个拦截器的初始化。初始化完成后，再对控件状态初始值的变量注册监听。第一步中本发明用到了form变量，还可能会用到了其他的变量，件监听器中监听这些变量的变化。监听到初始变量的变化后，通过更新器进行更新控件状态变量。

获取需要更新的控件状态变量时，根据监听到的变量类型，找出需要更新的控件状态变量。本发明监听到form的变化后，遍历控件状态变量，通过变量的注解中defaultValue的值，是否包含变量form，如果包含则标记为需要更新。

计算控件状态的初始值时，通过计算器中computeOriginalValue接口,计算出变量的初始值。

对状态进行拦截时，根据不同的场景，本发明定义了不同的拦截器。拦截器服务可以一次遍历执行各个拦截器的拦截接口，在各个拦截器动态修改interceptContext.value。根据拦截处理后的interceptContext.value，在更新器中修改控件状态变量的值，界面状态和控件状态变量绑定，界面进行响应，表单控件状态变化。

需要注意的是，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

应该理解的是，上述虽然是按照某一顺序描述的，但是这些步骤并不是必然按照上述顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，本实施例的一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

本发明实施例的第三个方面，还提供了一种计算机设备，包括存储器和处理器，该存储器中存储有计算机程序，该计算机程序被该处理器执行时实现上述任意一项实施例的方法。

在该计算机设备中包括一个处理器以及一个存储器，并还可以包括：输入系统和输出系统。处理器、存储器、输入系统和输出系统可以通过总线或者其他方式连接，输入系统可接收输入的数字或字符信息，以及产生与前端表单状态拦截扩展的迁移有关的信号输入。输出系统可包括显示屏等显示设备。

存储器作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本申请实施例中的前端表单状态拦截扩展方法对应的程序指令/模块。存储器可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储前端表单状态拦截扩展方法的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至本地模块。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

处理器在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器通常用于控制计算机设备的总体操作。本实施例中，处理器用于运行存储器中存储的程序代码或者处理数据。本实施例计算机设备的多个计算机设备的处理器通过运行存储在存储器中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例的前端表单状态拦截扩展方法的步骤。

应当理解，在相互不冲突的情况下，以上针对根据本发明的前端表单状态拦截扩展方法阐述的所有实施方式、特征和优势同样地适用于根据本发明的前端表单状态拦截扩展和存储介质。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现的功能，但是这种实现决定不应被解释为导致脱离本发明实施例公开的范围。

所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本发明实施例公开的范围(包括权利要求)被限于这些例子；在本发明实施例的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，并存在如上的本发明实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。因此，凡在本发明实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。