CN112035197A - 一种前端页面的配置方法及装置 - Google Patents

Abstract

本发明公开了一种前端页面的配置方法及装置，其中方法为：获取配置文件；所述配置文件中定义了数据字典的配置信息；所述数据字典用于多个前端页面的多个页面组件的配置；在目标前端页面初始化时，加载预先创建的数据字典容器；按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器；所述目标前端页面为所述多个前端页面中首次初始化的前端页面；基于所述数据字典容器，对所述多个前端页面配置。上述方法应用于金融科技(Fintech)时，节约了前端页面配置过程中消耗的内存。

Description

一种前端页面的配置方法及装置

技术领域

本发明涉及金融科技(Fintech)领域中的前端开发领域，尤其涉及一种前端页面的配置方法及装置。

背景技术

随着计算机技术的发展，越来越多的技术应用在金融领域，传统金融业正在逐步向金融科技(Fintech)转变，但由于金融行业的安全性、实时性要求，也对技术提出的更高的要求。目前，金融机构的前端页面的运转一般通过数据字典来支持。

数据字典是多种字段及字段间转换关系的合集，包括对字段的数据结构、数据流、数据存储、处理逻辑、外部实体等进行定义和描述。举例来说，一个网页游戏中游戏段位显示的场景下，在前端页面可能会显示青铜、白银和黄金等段位，网页后台的逻辑代码中自然不会直接定义出白银等游戏段位，而是用字符代替。在前端页面显示时，才通过数据字典进行转换。如数据字典中记录了0代表青铜、1代表白银、2代表黄金。然而，在其他场景下，有可能是其它的字段及字段间的转换关系。目前的方案中，数据字典是挂载在前端页面的页面组件上，当需要使用数据字典时，临时在页面组件中加载。如果在多个页面需要使用同一个数据字典，需要在每个页面初始化时均加载数据字典，这样无疑会消耗较多的内存，因此目前的方案中，前端页面配置过程中会消耗较多的内存，这是一个亟待解决的问题。

发明内容

本发明提供一种前端页面的配置方法及装置，解决了现有技术中前端页面配置过程中会消耗较多的内存的问题。

第一方面，本发明提供一种前端页面的配置方法，包括：获取配置文件；所述配置文件中定义了数据字典的配置信息；所述数据字典用于多个前端页面的多个页面组件的配置；在目标前端页面初始化时，加载数据字典容器；按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器；所述目标前端页面为所述多个前端页面中首次初始化的前端页面；基于所述数据字典容器，对所述多个前端页面配置。

上述方式下，所述配置文件中定义了用于多个前端页面的多个页面组件的配置信息，在所述多个前端页面中首次有前端页面初始化时，便加载预先创建的数据字典容器，并按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器，从而多个页面需要用到的数据字典的数据内容，在所述多个前端页面中首次初始化时，便一同存入至所述数据字典容器，从而不需要所述多个前端页面每次需要初始化时都重新加载所述数据字典，只需要首次存入所述数据字典容器即可，从而节约了内存。

可选的，所述按照所述数据字典容器的预设格式，根据所述多个页面组件的数据字典的配置信息，将所述多个页面组件的数据字典的数据内容，存入所述数据字典容器，包括：根据所述数据字典的配置信息，获取所述数据字典的数据内容；所述数据字典的配置信息用于指示所述数据字典的数据内容中各字段的属性；所述属性包括数值类型以及描述类型；所述数值类型用于标识前端页面的后台交互逻辑；所述描述类型用于标识前端页面的页面组件的显示信息；将所述数据字典的数据内容，按照所述预设格式，存入所述数据字典容器；所述预设格式为：在数据字典的名称目录下的每个数据字典项包括数值类型的数值信息和描述类型的描述信息；所述数据字典容器提供了针对所述预设格式的统一配置函数，所述统一配置函数用于数值信息与描述信息之间的转换。

上述方式下，所述配置文件中定义了所述数据字典中的配置信息，由于所述数据字典的配置信息指示出了所述数据字典的数据内容中何字段为数值信息以及何字段为描述信息；可以根据所述数据字典的配置信息，获取所述数据字典的数据内容，从而可以按照数据字典容器的预设格式，存入所述数据字典容器，这样便可以通过所述数据字典容器提供的统一配置函数，对数值信息与描述信息之间的转换，提升前端页面的配置效率。

可选的，所述数据字典的配置信息还指示出了所述数据字典的配置类型；所述根据所述数据字典的配置信息，获取所述数据字典的数据内容，包括：若所述数据字典的配置类型为静态配置，则将所述数据字典的配置信息中的数据内容，作为所述数据字典的数据内容；若所述数据字典的配置类型为动态配置，则根据所述数据字典的配置信息中的接口地址与后台服务交互，获取所述后台服务的响应数据；将所述响应数据作为所述数据字典的数据内容。

上述方法中，若所述数据字典的配置类型为静态配置，则将所述数据字典的配置信息中的数据内容，作为所述数据字典的数据内容，相应的，动态配置情况下，将所述响应数据作为所述数据字典的数据内容，从而使得无论在静态配置还是动态配置的情况下，都可以获取到所述数据字典的数据内容。

可选的，所述将所述响应数据作为所述数据字典的数据内容，包括：若所述数据字典的配置信息还包括响应数据结构信息，则针对所述响应数据中任一数据项，根据所述响应数据结构信息解析出所述数据项中的数值信息和所述数据项中的描述信息；所述响应数据结构信息指示出了所述响应数据中任一数据项中各数据子项的属性。

上述方法中，所述响应数据结构信息指示出了所述响应数据中任一数据项中各数据子项的属性，从而可以通过定义响应数据结构信息的方式详细描述所述响应数据中的数据项，并解析出所述数据项中的数值信息和所述数据项中的描述信息，能够通过所述响应数据结构信息自动化地完成所述响应数据的解析。

可选的，若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量小于预设阈值，针对所述响应数据的数据内容中任一数据项，将所述数据项中第一数据类型的数据子项作为所述数据项中的数值信息，将所述数据项中第二数据类型的数据子项作为所述数据项中的描述信息；若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量不小于所述预设阈值，则输出配置提示信息；所述配置提示信息用于指示进行所述响应数据结构信息的配置。

上述方式下，若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量小于预设阈值，可以根据数据项的数据类型确定出数据项中的数值信息和描述信息，从而可以在没所述响应数据结构信息时，且所述响应数据的数据项数量小于预设阈值，自动化地确定出数据项中的数值信息和描述信息，并在所述响应数据的数据项数量不小于所述预设阈值，及时输出配置提示信息，提示进行所述响应数据结构信息的配置。

可选的，针对所述多个前端页面中任一前端页面的任一下拉框组件；所述下拉框组件存在创建的文档对象模型DOM父节点和多个DOM子节点；其中，每个DOM子节点和所述下拉框组件的子项对应；所述DOM父节点绑定了点击事件；还包括：若接收到所述下拉框组件的任一子项的DOM子节点的点击命令，则触发所述父节点绑定的所述点击事件，确定所述子项的数值信息；将所述子项的数值信息作为所述统一配置函数的传入参数。

上述方式下，通过所述DOM父节点的点击事件绑定机制，及时将所述子项的数值信息作为所述统一配置函数的传入参数，从而可以通过DOM父节点和多个DOM子节点的点击触发下拉框组件的描述信息显示。

可选的，所述数据字典容器继承了父对象；所述父对象中定义了所述统一配置函数；所述基于所述数据字典容器，对所述多个前端页面配置，包括：通过所述多个前端页面中任一前端页面的过滤器，接收待配置数据；将所述待配置数据，作为所述统一配置函数的传入参数，在所述数据字典容器中遍历，获取所述待配置数据的转换信息。

上述方式下，由于所述数据字典容器继承了父对象，且所述父对象中定义了所述统一配置函数，那么当在所述数据字典容器中遍历时，由于所述数据字典容器中并没有所述统一配置函数内容，从而免去了待配置数据在所述统一配置函数中的遍历，从而更高效地获取所述待配置数据的转换信息。

可选的，所述前端页面的JS框架为vue；所述在目标前端页面初始化时，加载数据字典容器，包括：在所述目标前端页面初始化时，获取混入对象；所述混入对象的数据属性为访问函数；所述访问函数用于访问所述数据字典容器；将所述混入对象的访问结果与所述前端页面的vue组件合并，从而加载所述数据字典容器。

上述方式下，所述前端页面的JS框架为vue时，混入对象为vue提供的一种轻量级数据结构，通过定义所述混入对象的数据属性为访问函数，且所述访问函数用于访问所述数据字典容器，将所述混入对象的访问结果与所述前端页面的vue组件合并，从而提供了一种在vue组件下将所述数据字典容器注入所述前端页面的vue组件的轻量级方法。

第二方面，本发明提供一种前端页面的配置装置，包括：获取模块，用于获取前端页面的配置文件；所述配置文件中定义了数据字典的配置信息；所述数据字典用于多个前端页面的多个页面组件的配置；处理模块，用于在目标前端页面初始化时，加载预先创建的数据字典容器；按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器；所述目标前端页面为所述多个前端页面中首次初始化的前端页面；基于所述数据字典容器，对所述多个前端页面配置。

可选的，所述处理模块具体用于：根据所述数据字典的配置信息，获取所述数据字典的数据内容；所述数据字典的配置信息用于指示所述数据字典的数据内容中各字段的属性；所述属性包括数值类型以及描述类型；所述数值类型用于标识前端页面的后台交互逻辑；所述描述类型用于标识前端页面的页面组件的显示信息；将所述数据字典的数据内容，按照所述预设格式，存入所述数据字典容器；所述预设格式为：在数据字典的名称目录下的每个数据字典项包括数值类型的数值信息和描述类型的描述信息；所述数据字典容器提供了针对所述预设格式的统一配置函数，所述统一配置函数用于数值信息与描述信息之间的转换。

可选的，所述数据字典的配置信息还指示出了所述数据字典的配置类型；所述处理模块具体用于：若所述数据字典的配置类型为静态配置，则将所述数据字典的配置信息中的数据内容，作为所述数据字典的数据内容；若所述数据字典的配置类型为动态配置，则根据所述数据字典的配置信息中的接口地址与后台服务交互，获取所述后台服务的响应数据；将所述响应数据作为所述数据字典的数据内容。

可选的，所述处理模块具体用于：若所述数据字典的配置信息还包括响应数据结构信息，则针对所述响应数据中任一数据项，根据所述响应数据结构信息解析出所述数据项中的数值信息和所述数据项中的描述信息；所述响应数据结构信息指示出了所述响应数据中任一数据项中各数据子项的属性。

可选的，所述处理模块还用于：若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量小于预设阈值，针对所述响应数据的数据内容中任一数据项，将所述数据项中第一数据类型的数据子项作为所述数据项中的数值信息，将所述数据项中第二数据类型的数据子项作为所述数据项中的描述信息；若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量不小于所述预设阈值，则输出配置提示信息；所述配置提示信息用于指示进行所述响应数据结构信息的配置。

可选的，针对所述多个前端页面中任一前端页面的任一下拉框组件；所述下拉框组件存在创建的文档对象模型DOM父节点和多个DOM子节点；其中，每个DOM子节点和所述下拉框组件的子项对应；所述DOM父节点绑定了点击事件；所述处理模块还用于：若接收到所述下拉框组件的任一子项的DOM子节点的点击命令，则触发所述父节点绑定的所述点击事件，确定所述子项的数值信息；将所述子项的数值信息作为所述统一配置函数的传入参数。

可选的，所述数据字典容器继承了父对象；所述父对象中定义了所述统一配置函数；所述处理模块还用于：通过所述多个前端页面中任一前端页面的过滤器，接收待配置数据；将所述待配置数据，作为所述统一配置函数的传入参数，在所述数据字典容器中遍历，获取所述待配置数据的转换信息。

可选的，所述前端页面的JS框架为vue；所述处理模块具体用于：在所述目标前端页面初始化时，获取混入对象；所述混入对象的数据属性为访问函数；所述访问函数用于访问所述数据字典容器；将所述混入对象的访问结果与所述前端页面的vue组件合并，从而加载所述数据字典容器。

上述第二方面及第二方面各个可选装置的有益效果，可以参考上述第一方面及第一方面各个可选方法的有益效果，这里不再赘述。

第三方面，本发明提供一种计算机设备，包括程序或指令，当所述程序或指令被执行时，用以执行上述第一方面及第一方面各个可选的方法。

第四方面，本发明提供一种存储介质，包括程序或指令，当所述程序或指令被执行时，用以执行上述第一方面及第一方面各个可选的方法。

本发明的这些方面或其他方面在以下实施例的描述中会更加简明易懂。

附图说明

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

图1为本发明实施例提供的一种前端页面的配置方法对应的步骤流程示意图；

图2为本发明实施例提供的一种前端页面的配置方法中静态配置和动态配置的过程示意图；

图3为本发明实施例提供的一种前端页面的配置方法中解析过程的示意图；

图4为本发明实施例提供的一种前端页面的配置方法中下拉框组件中点击事件机制的架构示意图；

图5为本发明实施例提供的一种前端页面的配置装置的结构示意图。

具体实施方式

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

下面首先列出本申请实施例中出现的名词解释。

数据字典：

数据字典(data dictionary)是一个自动或手动存储数据源定义和属性的文档，对数据的数据项、数据结构、数据流、数据存储、处理逻辑、外部实体等进行定义和描述，其目的是对数据流程图中的各个元素做出详细的说明。数据字典对用户来说是一组只读的表，其内容包括数据库中所有模式对象的信息，如表、视图、簇及索引等。

组件：

组件是一种视图+交互逻辑的抽象数据类型，包含html模板、css样式和js逻辑代码片段。

.vue单文件组件：

在Vue项目中，提供一种代码组织方式叫做“.vue单文件组件”。在单文件组件中编写html模板、js逻辑和css样式，他们在一个文件中，天然的内聚。通过webpack的vue-loader加载器在编译时解析单文件组件，转换成可以运行的代码。

XHR：

XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。

在金融机构(银行机构、保险机构或证券机构)在进行业务(如银行的贷款业务、存款业务等)运转过程中，目前，金融机构的前端页面的运转一般通过数据字典来支持。数据字典是挂载在前端页面的页面组件上，当需要使用数据字典时，临时在页面组件中加载。这样带来的问题是，在多个页面需要使用同一个数据字典时，需要在每个页面初始化时均加载数据字典，这样无疑会消耗较多的内存。这种情况不符合银行等金融机构的需求，无法保证金融机构各项业务的高效运转。为此，如图1所示，本发明提供了一种前端页面的配置方法。

步骤101：获取配置文件；所述配置文件中定义了数据字典的配置信息。

步骤102：在目标前端页面初始化时，加载预先创建的数据字典容器。

步骤103：按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器。

步骤104：基于所述数据字典容器，对所述多个前端页面配置。

需要说明的是，步骤101～步骤104中，所述数据字典用于多个前端页面的多个页面组件的配置，所述目标前端页面为所述多个前端页面中首次初始化的前端页面。数据字典容器为本发明提供的一种新方式，数据字典容器是已提前创建的，从而在使用数据字典中的数据内容时，不必临时从页面组件加载。数据字典的加载时机从前端页面的页面组件初始化中改为应用初始化，加载位置从前端页面组件改为公共的数据字典容器中。这样多个前端页面可以共用同一个数据字典提供数据字典容器。

在步骤101～步骤104的方法下，所述配置文件中定义了用于多个前端页面的多个页面组件的配置信息，在所述多个前端页面中首次有前端页面初始化时，便加载数据字典容器，并按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器，从而多个页面需要用到的数据字典的数据内容，在所述多个前端页面中首次初始化时，便一同存入至所述数据字典容器，从而不需要所述多个前端页面每次需要初始化时都重新加载所述数据字典，只需要首次存入所述数据字典容器即可，从而节约了内存。

步骤103的一种可能的实现方式如下：

步骤(2-1)：根据所述数据字典的配置信息，获取所述数据字典的数据内容。

步骤(2-2)：将所述数据字典的数据内容，按照所述预设格式，存入所述数据字典容器。

步骤(2-1)～步骤(2-2)中，所述数据字典的配置信息用于指示所述数据字典的数据内容中各字段的属性；所述属性包括数值类型以及描述类型；所述数值类型用于标识前端页面的后台交互逻辑；所述描述类型用于标识前端页面的页面组件的显示信息。

所述预设格式为：在数据字典的名称目录下的每个数据字典项包括数值类型的数值信息和描述类型的描述信息；所述数据字典容器提供了针对所述预设格式的统一配置函数，所述统一配置函数用于数值信息与描述信息之间的转换。

举例来说，所述预设格式中，给数据字典项定义名称name，用数据字典的名称name作为索引保存数据字典的数据，通过数据字典名称name可以快速查询到数据字典内容。更具体地，数据字典容器的预设格式为：

$FesMap[name]＝[{text,value},{text,value}]。

其中，$FesMap标识数据字典容器，数据字典数据中的每个子项都是包含text和value属性的对象，value属性表示数值，text属性表示数值的描述。

举例来说：

$FesMap["status"]＝[{value:"0"，text:"成功"},{value:"-1"，text:"失败"}]。

$FesMap容器中的数据项有统一的命名规范，因此可以基于$FesMap构造其它组件。

步骤(2-1)～步骤(2-2)的方法中，当数据加载后存入容器时，数据格式统一为[{text,value},{text,value}]，当数据格式统一时，就能通过统一的方式为数值信息和描述信息做转换。

步骤(2-1)～步骤(2-2)的方法中，所述配置文件中定义了所述数据字典中的配置信息，由于所述数据字典的配置信息指示出了所述数据字典的数据内容中何字段为数值信息以及何字段为描述信息；可以根据所述数据字典的配置信息，获取所述数据字典的数据内容，从而可以按照数据字典容器的预设格式，存入所述数据字典容器，这样便可以通过所述数据字典容器提供的统一配置函数，对数值信息与描述信息之间的转换，提升前端页面的配置效率。

一种可选实施方式中，所述数据字典的配置信息还指示出了所述数据字典的配置类型，步骤(2-1)具体可以为：

一方面，若所述数据字典的配置类型为静态配置，则将所述数据字典的配置信息中的数据内容，作为所述数据字典的数据内容。

举例来说，如果数据字典是固定的静态数据，则直接在前端页面做静态配置即可。具体实现中，可在js中配置map属性，按照预设格式“[[key,value],[key,value]……]”添加数据字典项。

而在前端页面初始化过程中会加载静态数据字典配置。如图2所示，可以从fes.config.js中读取map配置，检查map配置的数据字典项的数据格式是否符合[[key,value],[key,value]]格式，若符合则说明当前配置项属于静态配置。再使用Object.keys方法遍历配置数据，那么则读取子项数据的第一项作为value，子项数据的第二项作为text，然后以数据字典名称为索引，按照[{text,value},{text,value}]规范存入容器$FesMap。

另一方面，若所述数据字典的配置类型为动态配置，则根据所述数据字典的配置信息中的接口地址与后台服务交互，获取所述后台服务的响应数据；将所述响应数据作为所述数据字典的数据内容。

举例来说，如果数据字典的内容在数据库配置或者由后台服务提供，则对于Web前端来说此数据字典是动态的。本发明提供一种加载动态数据的方案。在本方案设计提供的fes.config.js中配置map属性，将接口地址url配置在map属性中。根据所述数据字典的配置信息中的接口地址url与后台服务交互时，获取所述后台服务的响应数据，并将获取到的所述响应数据作为所述数据字典的数据内容。

上述可选实施方式下，若所述数据字典的配置类型为静态配置，则将所述数据字典的配置信息中的数据内容，作为所述数据字典的数据内容，相应的，动态配置情况下，将所述响应数据作为所述数据字典的数据内容，从而使得无论在静态配置还是动态配置的情况下，都可以获取到所述数据字典的数据内容。

更具体地，将所述响应数据作为所述数据字典的数据内容过程可以为：

若所述数据字典的配置信息还包括响应数据结构信息，则针对所述响应数据中任一数据项，根据所述响应数据结构信息解析出所述数据项中的数值信息和所述数据项中的描述信息；所述响应数据结构信息指示出了所述响应数据中任一数据项中各数据子项的属性。

举例来说，按照格式“{url,responseConfig:{}}”添加map配置属性中的数据字典项。url是接口地址，而responseConfig则是响应数据结构信息。例如responseConfig可以设置为{"text":"data.text","value":"data.value"}，则响应数据中的data数组的子项中text为描述，value为值。

在前端页面初始化过程中，在用户登录后，后台服务会给浏览器下发登录凭证cookie，之后每次接口请求浏览器会携带登录凭证，后台服务会校验登录凭证，如果登录凭证存在并且不过期则不阻止接口请求动作。

同时用户登录后触发onLogin事件，在onLogin事件钩子中执行动态配置的方法。首先从fes.config.js中读取map配置，检查数据字典项的数据格式是否符合“{url,responseConfig:{}}”格式，若符合则说明当前配置项属于动态配置。

之后调用本发明提供的fetch函数从远程服务器url中请求数据字典的内容。服务器返回响应数据，然后根据responseConfig配置从响应数据中解析每项数据的value和text，然后以数据字典名称为索引，按照[{text,value},{text,value}]规范存入数据字典容器$FesMap。

上述可选实施方式中，所述响应数据结构信息指示出了所述响应数据中任一数据项中各数据子项的属性，从而可以通过定义响应数据结构信息的方式详细描述所述响应数据中的数据项，并解析出所述数据项中的数值信息和所述数据项中的描述信息，能够通过所述响应数据结构信息自动化地完成所述响应数据的解析。

如果未配置响应数据结构信息responseConfig，则不能直接通过responseConfig解析出响应内容得到value和text。

相应地，若所述数据字典的配置信息不包括所述响应数据结构信息，在所述响应数据的数据项数量小于预设阈值时，可以按照以下方式将所述响应数据作为所述数据字典的数据内容：

针对所述响应数据的数据内容中任一数据项，将所述数据项中第一数据类型的数据子项作为所述数据项中的数值信息，将所述数据项中第二数据类型的数据子项作为所述数据项中的描述信息。

举例来说，如图3所示，根据业务场景，字段是value的概率是纯数字大于纯英文字符大于中文字符，所以根据优先级找到value字段。字段是text的概率是包含中文字符大于纯英文字符大于纯数字，根据优先级找到text字段。

如对于某一个数据项，一个数据子项是英文字符，另一个数据子项是中文字符，则确定英文字符为value，则确定中文字符为text。如果均为纯英文字符，则不能判断。

而在所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量不小于所述预设阈值时，则输出配置提示信息。

其中，所述配置提示信息用于指示进行所述响应数据结构信息的配置。

也就是说，如果出现多个value或者多个text字段，则给于提示，需要用户配置responseConfig。

上述方式下，若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量小于预设阈值，可以根据数据项的数据类型确定出数据项中的数值信息和描述信息，从而可以在没所述响应数据结构信息时，且所述响应数据的数据项数量小于预设阈值，自动化地确定出数据项中的数值信息和描述信息，并在所述响应数据的数据项数量不小于所述预设阈值，及时输出配置提示信息，提示进行所述响应数据结构信息的配置。

一种可选实施方式中，所述前端页面的JS框架为vue，可以按照以下方式执行步骤102：

在所述目标前端页面初始化时，获取混入对象；所述混入对象的数据属性为访问函数；所述访问函数用于访问所述数据字典容器；将所述混入对象的访问结果与所述前端页面的vue组件合并，从而加载所述数据字典容器。

举例来说，具体实现方式如下：

把数据字典容器$FesMap自动注入到所有vue组件实例上。首先定义一个混入对象，混入对象的data属性定义为函数，混入对象的data函数执行返回一个结果对象，在结果对象上添加$FesMap。

再使用vue提供的一个工具vue.mixin接收混入对象。当前端页面组件被初始化时，如果存在混入对象，则执行混入对象的data函数得到结果对象。再把结果对象(即所述混入对象的访问结果)合并到$data对象上，如果存在命名冲突则优先保留组件的属性。这样$FesMap就注入到前端页面组件实例上了，在前端页面组件中便可以通过this.$FesMap访问到数据字典容器。

上述方式下，所述前端页面的JS框架为vue时，混入对象为vue提供的一种轻量级数据结构，通过定义所述混入对象的数据属性为访问函数，且所述访问函数用于访问所述数据字典容器，将所述混入对象的访问结果与所述前端页面的vue组件合并，从而提供了一种在vue组件下将所述数据字典容器注入所述前端页面的vue组件的轻量级方法。

一种可选实施方式中，针对多个前端页面中任一前端页面的任一下拉框组件；所述下拉框组件存在创建的文档对象模型DOM父节点和多个DOM子节点；其中，每个DOM子节点和所述下拉框组件的子项对应；所述DOM父节点绑定了点击事件；还可以执行以下步骤：

若接收到所述下拉框组件的任一子项的DOM子节点的点击命令，则触发所述父节点绑定的所述点击事件，确定所述子项的数值信息；将所述子项的数值信息作为所述统一配置函数的传入参数。

如图4所示，具体实现方式可以如下：

给子项添加额外的属性selected表示是否选中，isFocus表示是否聚焦。

本发明在下拉框组件中提供查找输入框，如果用户在下拉框组件中输入内容，则根据输入内容过滤数据字典数据，判断子项中value是否等于或者是否包含输入内容，如果不是则排除此子项。

经过查询过滤后的数据字段数据子项也可能非常多，如果超过100个子项，渲染超过100个子节点DOM，性能也吃紧。那么可以通过分页减少每次渲染的量。当数据量超出100时，执行分页方案。通过当前页码从过滤后的数据中截取出当前100条数据。

然后执行渲染流程：

首选创建一个父节点ul(也称为ul节点)，然后使用v-for＝"(item,index)incurrentOptions"遍历当前子项，构造n个子节点(也可以称为li节点)。n为大于1的整数。

每个子节点设置data-key＝"item.value"用来标识子项的数据。每个节点设置key＝"index"用来标识子项。

在父节点ul上绑定点击事件，当点击li节点来选中它时，点击事件冒泡到父ul节点，通过event.target可以找到选中的li节点。

通过当前li节点的data-key，可以在currentOptions在查询到li节点的完整数据，也就是所述子项的数值信息。

将所述子项的数值信息作为所述统一配置函数的传入参数后，在下拉框组件的展示区域展示选择的子节点的描述信息text。通过此机制不需要给每个li绑定点击事件，减少内存开销。

而在翻页改变子项数据时，由于设置了li节点的key等于index，不会改变。

例如：

<li key＝"0"data-key＝"0-0">0</li><li key＝"1"data-key＝"0-1">1</li>...

在下一页后，key不变，data-key因为等于value会变：

<li key＝"0"data-key＝"1-0">0</li><li key＝"1"data-key＝"1-1">1</li>...

在数据变化重新渲染时，如果判断li节点的key没变，则只更新data-key的值，而不会删除li节点再创建一个新的li节点，从而控制了渲染的DOM子节点数量，提升了下拉框组件的性能。

上述方式下，通过所述DOM父节点的点击事件绑定机制，及时将所述子项的数值信息作为所述统一配置函数的传入参数，从而可以通过DOM父节点和多个DOM子节点的点击触发下拉框组件的描述信息显示。

一种可选实施方式中，所述数据字典容器继承了父对象；所述父对象中定义了所述统一配置函数，步骤104具体可以为：

通过所述多个前端页面中任一前端页面的过滤器，接收待配置数据；将所述待配置数据，作为所述统一配置函数的传入参数，在所述数据字典容器中遍历，获取所述待配置数据的转换信息。

举例来说，首先通过Object.create函数创建数据字典容器$FesMap。$FesMap继承父对象，父对象提供通过名称查询值(getValueByName)、通过值查询名称(getNameByValue)、添加数据字典项(addItem)三个函数。通过继承的方式，可以让$FesMap容器拥有这三个函数，但是在遍历$FesMap时，会忽略这三个函数。$FesMap被遍历时，子项应该只是数据字典数据项。

定义所述前端页面的过滤器，接收待配置数据value和数据字典名称name两个参数，当过滤器执行时调用$FesMap的getNameByValue方法，传入数据字典名称和待配置数据，然后返回待配置数据对应的描述信息。

具体实现方式中，在vue组件的模板中，使用方法如下：

{{data|map($FesMap[name])}}

vue组件中，使用所述前端页面的过滤器可以很方便地，把数值信息转换成描述信息，如果数据字典在多个前端页面组件使用，只需要在前端页面组件中使用所述前端页面的过滤器就好，而数据字典容器只需要在加载前配置一次即可。

上述方式下，由于所述数据字典容器继承了父对象，且所述父对象中定义了所述统一配置函数，那么当在所述数据字典容器中遍历时，由于所述数据字典容器中并没有所述统一配置函数内容，从而免去了待配置数据在所述统一配置函数中的遍历，从而更高效地获取所述待配置数据的转换信息。

如图5所示，本发明提供一种前端页面的配置装置，包括：获取模块501，用于获取前端页面的配置文件；所述配置文件中定义了数据字典的配置信息；所述数据字典用于多个前端页面的多个页面组件的配置；处理模块502，用于在目标前端页面初始化时，加载预先创建的数据字典容器；按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器；所述目标前端页面为所述多个前端页面中首次初始化的前端页面；基于所述数据字典容器，对所述多个前端页面配置。

可选的，所述处理模块502具体用于：根据所述数据字典的配置信息，获取所述数据字典的数据内容；所述数据字典的配置信息用于指示所述数据字典的数据内容中各字段的属性；所述属性包括数值类型以及描述类型；所述数值类型用于标识前端页面的后台交互逻辑；所述描述类型用于标识前端页面的页面组件的显示信息；将所述数据字典的数据内容，按照所述预设格式，存入所述数据字典容器；所述预设格式为：在数据字典的名称目录下的每个数据字典项包括数值类型的数值信息和描述类型的描述信息；所述数据字典容器提供了针对所述预设格式的统一配置函数，所述统一配置函数用于数值信息与描述信息之间的转换。

可选的，所述数据字典的配置信息还指示出了所述数据字典的配置类型；所述处理模块502具体用于：若所述数据字典的配置类型为静态配置，则将所述数据字典的配置信息中的数据内容，作为所述数据字典的数据内容；若所述数据字典的配置类型为动态配置，则根据所述数据字典的配置信息中的接口地址与后台服务交互，获取所述后台服务的响应数据；将所述响应数据作为所述数据字典的数据内容。

可选的，所述处理模块502具体用于：若所述数据字典的配置信息还包括响应数据结构信息，则针对所述响应数据中任一数据项，根据所述响应数据结构信息解析出所述数据项中的数值信息和所述数据项中的描述信息；所述响应数据结构信息指示出了所述响应数据中任一数据项中各数据子项的属性。

可选的，所述处理模块502还用于：若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量小于预设阈值，针对所述响应数据的数据内容中任一数据项，将所述数据项中第一数据类型的数据子项作为所述数据项中的数值信息，将所述数据项中第二数据类型的数据子项作为所述数据项中的描述信息；若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量不小于所述预设阈值，则输出配置提示信息；所述配置提示信息用于指示进行所述响应数据结构信息的配置。

可选的，针对所述多个前端页面中任一前端页面的任一下拉框组件；所述下拉框组件存在创建的文档对象模型DOM父节点和多个DOM子节点；其中，每个DOM子节点和所述下拉框组件的子项对应；所述DOM父节点绑定了点击事件；所述处理模块502还用于：若接收到所述下拉框组件的任一子项的DOM子节点的点击命令，则触发所述父节点绑定的所述点击事件，确定所述子项的数值信息；将所述子项的数值信息作为所述统一配置函数的传入参数。

可选的，所述数据字典容器继承了父对象；所述父对象中定义了所述统一配置函数；所述处理模块502还用于：通过所述多个前端页面中任一前端页面的过滤器，接收待配置数据；将所述待配置数据，作为所述统一配置函数的传入参数，在所述数据字典容器中遍历，获取所述待配置数据的转换信息。

可选的，所述前端页面的JS框架为vue；所述处理模块502具体用于：在所述目标前端页面初始化时，获取混入对象；所述混入对象的数据属性为访问函数；所述访问函数用于访问所述数据字典容器；将所述混入对象的访问结果与所述前端页面的vue组件合并，从而加载所述数据字典容器。

基于同一发明构思，本发明实施例还提供了一种计算机设备，包括程序或指令，当所述程序或指令被执行时，如本发明实施例提供的前端页面的配置方法及任一可选方法被执行。

基于同一发明构思，本发明实施例还提供了一种计算机可读存储介质，包括程序或指令，当所述程序或指令被执行时，如本发明实施例提供的前端页面的配置方法及任一可选方法被执行。

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

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

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

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

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

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (11)

1.一种前端页面的配置方法，其特征在于，包括：

获取配置文件；所述配置文件中定义了数据字典的配置信息；所述数据字典用于多个前端页面的多个页面组件的配置；

在目标前端页面初始化时，加载预先创建的数据字典容器；

按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器；所述目标前端页面为所述多个前端页面中首次初始化的前端页面；

基于所述数据字典容器，对所述多个前端页面配置。

2.如权利要求1所述的方法，其特征在于，所述按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器，包括：

根据所述数据字典的配置信息，获取所述数据字典的数据内容；所述数据字典的配置信息用于指示所述数据字典的数据内容中各字段的属性；所述属性包括数值类型以及描述类型；所述数值类型用于标识前端页面的后台交互逻辑；所述描述类型用于标识前端页面的页面组件的显示信息；

将所述数据字典的数据内容，按照所述预设格式，存入所述数据字典容器；所述预设格式为：在数据字典的名称目录下的每个数据字典项包括数值类型的数值信息和描述类型的描述信息；所述数据字典容器提供了针对所述预设格式的统一配置函数，所述统一配置函数用于数值信息与描述信息之间的转换。

3.如权利要求2所述的方法，其特征在于，所述数据字典的配置信息还指示出了所述数据字典的配置类型；所述根据所述数据字典的配置信息，获取所述数据字典的数据内容，包括：

若所述数据字典的配置类型为静态配置，则将所述数据字典的配置信息中的数据内容，作为所述数据字典的数据内容；

若所述数据字典的配置类型为动态配置，则根据所述数据字典的配置信息中的接口地址与后台服务交互，获取所述后台服务的响应数据；将所述响应数据作为所述数据字典的数据内容。

4.如权利要求3所述的方法，其特征在于，所述将所述响应数据作为所述数据字典的数据内容，包括：

若所述数据字典的配置信息还包括响应数据结构信息，则针对所述响应数据中任一数据项，根据所述响应数据结构信息解析出所述数据项中的数值信息和所述数据项中的描述信息；所述响应数据结构信息指示出了所述响应数据中任一数据项中各数据子项的属性。

5.如权利要求4所述的方法，其特征在于，所述方法还包括：

若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量小于预设阈值，针对所述响应数据的数据内容中任一数据项，将所述数据项中第一数据类型的数据子项作为所述数据项中的数值信息，将所述数据项中第二数据类型的数据子项作为所述数据项中的描述信息；

若所述数据字典的配置信息不包括所述响应数据结构信息，且所述响应数据的数据项数量不小于所述预设阈值，则输出配置提示信息；所述配置提示信息用于指示进行所述响应数据结构信息的配置。

6.如权利要求2至5任一项所述的方法，其特征在于，针对所述多个前端页面中任一前端页面的任一下拉框组件；所述下拉框组件存在创建的文档对象模型DOM父节点和多个DOM子节点；其中，每个DOM子节点和所述下拉框组件的子项对应；所述DOM父节点绑定了点击事件；还包括：

若接收到所述下拉框组件的任一子项的DOM子节点的点击命令，则触发所述父节点绑定的所述点击事件，确定所述子项的数值信息；

将所述子项的数值信息作为所述统一配置函数的传入参数。

7.如权利要求2至5任一项所述的方法，其特征在于，所述数据字典容器继承了父对象；所述父对象中定义了所述统一配置函数；所述基于所述数据字典容器，对所述多个前端页面配置，包括：

通过所述多个前端页面中任一前端页面的过滤器，接收待配置数据；

将所述待配置数据，作为所述统一配置函数的传入参数，在所述数据字典容器中遍历，获取所述待配置数据的转换信息。

8.如权利要求1至5任一项所述的方法，其特征在于，所述前端页面的JS框架为vue；所述在目标前端页面初始化时，加载数据字典容器，包括：

在所述目标前端页面初始化时，获取混入对象；所述混入对象的数据属性为访问函数；所述访问函数用于访问所述数据字典容器；

将所述混入对象的访问结果与所述前端页面的vue组件合并，从而加载所述数据字典容器。

9.一种前端页面的配置装置，其特征在于，包括：

获取模块，用于获取前端页面的配置文件；所述配置文件中定义了数据字典的配置信息；所述数据字典用于多个前端页面的多个页面组件的配置；

处理模块，用于在目标前端页面初始化时，加载预先创建的数据字典容器；按照所述数据字典容器的预设格式，根据所述数据字典的配置信息，将所述数据字典的数据内容，存入所述数据字典容器；所述目标前端页面为所述多个前端页面中首次初始化的前端页面；基于所述数据字典容器，对所述多个前端页面配置。

10.一种计算机设备，其特征在于，包括程序或指令，当所述程序或指令被执行时，如权利要求1至7中任意一项所述的方法被执行。

11.一种计算机可读存储介质，其特征在于，包括程序或指令，当所述程序或指令被执行时，如权利要求1至7中任意一项所述的方法被执行。

Images