CN116755665A - 基于数据库表结构的通用页面模板开发方法及系统 - Google Patents

Abstract

本发明公开了一种基于数据库表结构的通用页面模板开发方法及系统，所述方法包括：以查询条件配置中的查询条件字段列表为循环对象，对所述查询条件配置进行循环渲染；预设操作栏，包括预设进行页面数据处理的操作按钮及其响应事件；通过查询条件筛选出业务数据，基于所述业务数据生成查询列表；对所述查询列表配置信息中的字段进行循环加载；遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染所述操作表单的组件信息，并添加对应的表单属性；对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，并将其存储至数据库。通过本公开的处理方案，可以降低开发难度，减少冗余代码生成。

Description

基于数据库表结构的通用页面模板开发方法及系统

技术领域

本发明涉及信息技术领域，特别是涉及一种基于数据库表结构的通用页面模板开发方法及系统。

背景技术

对于目前使用数据库的业务管理系统，其页面大多采用相同或相似的结构。这些系统的基础功能包含数据查询、维护(新增、修改、删除)、批量处理(如导入、导出、批量删除)以及数据状态管理(如审批、启停)；页面布局包含数据检索、数据操作(主要体现为各类操作按钮及其响应事件对应的函数)、数据列表(该部分一般情况下还包含用于分页查询的分页组件)，以及用于详细数据呈现和数据操作的弹窗(内含表单)。

以上各项页面功能项和布局皆由前端框架提供的通用组件拼接(通用组件指页面的各种控件，如文本框、表格、下拉菜单等)、组合而成，各个页面代码结构的区别几乎仅限于业务数据类型和结构的差异。

上述的页面开发方法，虽可以在一定程度上进行页面开发，但是在实际使用时却发现其方法中还存在有若干缺点，因未能达到最佳的使用效果，而其缺点可归纳如下：

1)冗余代码多。在不同的页面中存在大量相同的结构和布局，比如在不同的页面中都存在查询、新增、修改、删除功能，以及它们对应的接口请求方式和数据处理方式也是类似的；

2)开发工作量大。页面包含较多字段，由于这些字段类型、校验方式、展示方式不同，需要开发者投入大量时间编写相关代码，部分开发者在处理此类问题时会通过代码生成器批量生成结构统一的初始文件，再通过二次开发的方式处理，但是这样做会使得工程出现代码冗余问题.

3)测试效率低。在测试过程中需要对每个页面的每个细节多详尽的验证，以确保字段类型、精度的准确性。

4)页面加载慢。由于前端框架的自身的原因，从浏览器中打开系统时需要加载所需的所有页面，这使得打开较多页面的情况下使用系统时页面加载速度会很慢，用户体验极差。

5)页面优化复杂。由于各个页面是独立的(除了页面中使用的少部分公共组件外)，对于不同页面上同一个问题(冗余代码部分)做批量优化时，会涉及到相关的所有页面代码，这样的做法很难保证正确性和统一性。

由此可见，上述现有的页面开发方法在使用上，显然仍存在有不便与缺陷，而亟待加以进一步改进。如何能创设一种新的页面开发方法，成为当前业界急需改进的目标。

发明内容

有鉴于此，本公开实施例提供一种基于数据库表结构的通用页面模板开发方法，至少部分解决现有技术中存在的问题。

第一方面，本公开实施例提供了一种基于数据库表结构的通用页面模板开发方法，所述方法包括以下步骤：

以查询条件配置中的查询条件字段列表为循环对象，对所述查询条件配置进行循环渲染；

预设操作栏，包括预设进行页面数据处理的操作按钮及其响应事件；其中，所述操作按钮包括新增、修改、删除、导入、导出、复核和查询；

通过查询条件筛选出业务数据，基于所述业务数据生成查询列表；

对所述查询列表配置信息中的字段进行循环加载；

遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染所述操作表单的组件信息，并添加对应的表单属性；

对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，并将其存储至数据库。

根据本公开实施例的一种具体实现方式，所述对所述查询条件配置进行循环渲染，包括：

通过element-ui的表单组件和vue提供的v-for属性对所述查询条件配置进行循环渲染；

根据本公开实施例的一种具体实现方式，所述对所述查询列表配置信息中的字段进行循环加载，包括：

通过element-ui的表格组件对所述查询列表进行动态渲染，即使用v-for对查询列表配置信息中的字段进行循环加载。

根据本公开实施例的一种具体实现方式，所述预设操作栏，还包括：

对于每个操作按钮绑定预设的权限信息，通过是否对指定角色赋予对应权限控制其是否加载。

根据本公开实施例的一种具体实现方式，所述对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，包括：

对所述查询条件进行配置，包括：配置用于控制element-ui表单组件中表单字段标签宽度值、每行显示查询条件的个数布局、业务表中存储的数据的展示，以及用于渲染查询条件的数据列表；

对所述查询列表进行配置，包括：基于element-ui前端框架中的表格组件对所述查询列表中的列表序号、选择框、数据行操作类型，以及列表字段进行配置；

对所述操作表单和数据操作进行配置，包括：基于element-ui中的表单组件对配置数据操作和预览时显示所有表单数据中的表单标签宽度、显示密度，以及表单字段列表进行配置。

根据本公开实施例的一种具体实现方式，所述遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性，包括：

基于element-ui的表单控件，通过v-for遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性；其中所述表单属性包括绑定字段和显示名称。

根据本公开实施例的一种具体实现方式，所述方法还包括：通过缓存的方式提高配置信息的获取速率。

第二方面，本公开实施例提供了一种基于数据库表结构的通用页面模板开发系统，所述系统包括：

页面模板开发模块，被配置用于以查询条件配置中的查询条件字段列表为循环对象，对所述查询条件配置进行循环渲染；以及，

预设操作栏，包括预设进行页面数据处理的操作按钮及其响应事件；其中，所述操作按钮包括新增、修改、删除、导入、导出、复核和查询；以及，

通过查询条件筛选出业务数据，基于所述业务数据生成查询列表；以及，

对所述查询列表配置信息中的字段进行循环加载；以及，

遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性；

页面配置模块，被配置用于对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，并将其存储至数据库。

第三方面，本公开实施例还提供了一种电子设备，该电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有能够被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器前述第一方面或第一方面的任一实现方式中的任一项所述的基于数据库表结构的通用页面模板开发方法。

第四方面，本公开实施例还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令当由至少一个处理器执行时使所述至少一个处理器执行前述第一方面或第一方面的任一实现方式中的基于数据库表结构的通用页面模板开发方法。

第五方面，本公开实施例还提供了一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的基于数据库表结构的通用页面模板开发方法。

本公开实施例中的基于数据库表结构的通用页面模板开发方法，预设用于通用页面渲染的页面模板；以及用于渲染页面元素的页面配置。

与现有技术相比，本发明具有以下优点：

1、在代码结构方面，本发明无需额外开发其他页面(指除页面模板以外的其他页面)，不会出现因页面结构相似而产生的冗余代码；

2、在开发流程方面，本发明可以实现在一般通用页面开发过程中，在业务字段(指通过符合业务需求的数据库设计而创建的表或表结构)确定后：

(1)任何人员可通过简单的配置快速的完成数据的可视化，无需专业的技术支撑；

(2)在业务规则发生变更时，可通过调整配置，页面实时生效，无需走变更流程；

(3)具备较高的扩展性，可在内置的通用模板快速构建自定义的模板，一次开发到处使用。很大程度减轻了开发者的工作量，提高了开发效率；

3、在项目测试方面，由于各页面之间较强的统一性，对于可能出现的缺陷有一定的可预测性和系统的解决方案，减轻了测试及缺陷修复的困难度；

4、在页面加载方面，由于各个页面使用了统一的页面模板，系统需要加载的页面内容很少，可以减轻浏览器负担，一定程度上提高页面加载速度；

5、在代码优化方面，对于一些通用的页面优化，只需要修改对应的模板内容即可，解决了通用页面批量修改的涉及文件多、准确性差、开发慢的问题。

附图说明

上述仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，以下结合附图与具体实施方式对本发明作进一步的详细说明。

图1为本公开实施例提供的一种查询条件、操作栏、查询列表部分页面加载结果示意图；

图2为本公开实施例提供的一种操作表单部分页面加载结果示意图；

图3为本公开实施例提供的一种基于数据库表结构的通用页面模板开发方法流程示意图；

图4为本公开实施例提供的一种基于数据库表结构的通用页面模板开发方法流程框图；

图5为本公开实施例提供的一种基于数据库表结构的通用页面模板开发系统结构示意图；以及

图6为本公开实施例提供的电子设备示意图。

具体实施方式

下面结合附图对本公开实施例进行详细描述。

以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其他方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其他结构及/或功能性实施此设备及/或实践此方法。

另外，在以下描述中，提供具体细节是为了便于透彻理解实例。然而，所属领域的技术人员将理解，可在没有这些特定细节的情况下实践所述方面。

本发明实施例提供了一种基于数据库表结构的通用页面模板开发方法，通过“页面配置+统一模板”的方式实现单页面系统开发，对相似页面的共同特征进行提取生成统一的页面模板，再通过页面数据和与模板元素对应的页面配置信息在运行时渲染成动态页面。页面模板的设置降低了页面开发量，减少了代码冗余，页面配置的方式比传统页面开发更省时、便捷、规范，提高了开发及测试的效率和准确性。

本发明与现有技术的区别在于现有技术在构造页面时使用固定控件，比如表单中存在用户名、手机号、地址三个字段时，现有技术需要分别添加他们对应的输入控件，即三个文本框，本发明的要点在于可以通过一种控件(如文本框)控制一类输入控件，即相同场景下本发明通过一个文本框按照配置的字段(用户名、手机号、地址)动态加载，尽可能减少冗余代码开发。

具体实现方案包括页面模板开发、页面配置及其他配置。其中，页面模板开发属于一般开发，页面配置基于模板中的各个组成部分进行配置。

本技术对于页面渲染及配置的依据来源于业务涉及到的数据库表，以下结合图1、图2、表1举例说明基于本技术的开发过程。图1为本公开实施例提供的一种查询条件、操作栏、查询列表部分页面加载结果示意图；其中，①为查询条件部分；②为操作栏部分；③为查询列表部分；查询列表中表格的第一行为表头，第二及以后各行为业务数据。图2为本公开实施例提供的一种操作表单部分页面加载结果示意图。

表1：“假日日历配置表”(T_CALENDAR)

图3为本公开实施例提供的基于数据库表结构的通用页面模板开发方法流程的示意图。

图4为与图3对应的基于数据库表结构的通用页面模板开发方法流程框图。

如图3所示，在步骤S110处，以查询条件配置中的查询条件字段列表为循环对象，对所述查询条件配置进行循环渲染。

在本发明实施例中，所述对所述查询条件配置进行循环渲染，包括：通过element-ui的表单组件和vue提供的v-for属性对所述查询条件配置进行循环渲染。

更具体地，通过element-ui的表单组件和vue提供的v-for属性对查询条件配置进行循环渲染，循环的对象为查询条件配置中的查询条件字段列表，如表2所示为本发明实施例中的查询条件字段列表的模板元素。

表2：查询条件字段列表的模板元素

更具体地，接下来转到步骤S120。

在步骤S120处，预设操作栏，包括预设进行页面数据处理的操作按钮及其响应事件；其中，所述操作按钮包括新增、修改、删除、导入、导出、复核和查询。

在本发明实施例中，所述预设操作栏，还包括：对于每个操作按钮绑定预设的权限信息，通过是否对指定角色赋予对应权限控制其是否加载。

更具体地，操作栏，包括进行页面数据处理的操作按钮及其响应事件，操作按钮包括新增、修改、删除、导入、导出、复核、查询；这部分为模板预设功能，对于每个操作按钮通过绑定相应的权限信息，通过是否对指定角色赋予对应权限控制其是否加载。

接下来转到步骤S130。

在步骤S130处，通过查询条件筛选出业务数据，基于所述业务数据生成查询列表。

接下来转到步骤S140。

在步骤S140处，对所述查询列表配置信息中的字段进行循环加载。

在本发明实施例中，所述对所述查询列表配置信息中的字段进行循环加载，包括：通过element-ui的表格组件对所述查询列表进行动态渲染，即使用v-for对查询列表配置信息中的字段进行循环加载。

更具体地，查询列表用于展示通过查询条件筛选出的业务数据，其通过element-ui的表格组件根据预设的配置进行动态渲染，即使用v-for对查询列表配置信息中的字段进行循环加载，如表3所示为本发明实施例中的查询列表的模板元素。

表3：查询列表的模板元素

接下来转到步骤S150。

在步骤S150处，遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性。

在本发明实施例中，所述遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性，包括：基于element-ui的表单控件，通过v-for遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性；其中所述表单属性包括绑定字段和显示名称。

更具体地，基于element-ui的表单控件，通过v-for遍历配置信息中的操作表单配置的表单字段，按照不同的组件类型、校验规则渲染不同的组件信息，并添加对应的表单属性(绑定字段、显示名称)，如表4所示为本发明实施例中的表单属性模板元素。

表4：表单属性模板元素

接下来转到步骤S160。

在步骤S160处，对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，并将其存储至数据库。

在本发明实施例中，所述方法还包括：通过缓存的方式提高配置信息的获取速率。

更具体地，页面配置是将同一类型页面中的各组成部分(查询条件、查询列表、操作表单、数据操作)通过配置形成页面配置信息，并将其存储至数据库，必要时可通过缓存(可通过redis及其他缓存中间件实现)的方式提高配置信息的获取速率。

页面配置信息主要包含以下内容：

(1)基础配置信息，包括用于唯一确定组件配置的组件名称、用于区分不同的模板信息的模板类型、用于获取数据库中的表结构信息表名，在开发环境中(预生产和生产环境中不应该存在直接获取数据表信息相关的权限)可以通过接口从后台获取表结构信息(包括表字段、字段名称、字段类型、字段长度、是否不为空、是否为主键)，作为查询条件、查询列表、操作表单中需要配置的字段的候选项，对于实现过程中获取业务表详细结构及实现快速配置的依据，即当表字段较多时直接读取表结构比手动配置要节省很多开发时间；以假日日历配置为例，其基础配置如表5所示。

表5：假日日历基础配置

(2)查询条件配置，包括配置用于控制element-ui表单组件中表单字段标签宽度值、每行显示查询条件的个数布局、是否初始化页面时查询数据的状态控制页面业务数据(即业务表中存储的数据，例如假日日历配置表中的数据)的展示，以及用于渲染查询条件的数据列表，此列表可以从数据库表结构信息中同步字段信息，也可自定义查询条件，如表6所示为本申请的实施例。

表6：数据列表元素的配置项

更具体地，假日日历配置表-查询条件包括:日历名称(字段为cal，文本类型，默认标签宽度，占位文本为“请输入标签名称”，支持模糊匹配)、假日日期(字段为date，日期类型，默认标签宽度，占位文本为“请输入假日日期”，默认值为系统日期)、拦截标志(字段为rejectflag，数据字典类型，数据字典类型为rejectFlag，即拦截标志类型，取值包括Y/N，默认标签宽度，占位文本为“请选择”)，在模板加载查询条件表单时，首先读取配置信息并将配置信息存储到页面数据中，然后提取其中的字段，生成页面表单对象，用于请求数据时在接口参数中传值及绑定页面表单的数据值，在配置信息准备数据完毕后，通过v-for遍历以上查询条件，分别渲染成文本框、日期选择器、数据字典，同时设置其占位文本、默认值等属性；渲染结果如图1中①部分内容所示。

(3)查询列表配置，这部分内容基于element-ui前端框架中的表格组件进行配置，内容包括列表序号、选择框、数据行操作类型，以及列表字段；列表字段可通过数据表字段直接加载信息或自定义信息，如表7所示为本申请的实施例。

表7：查询列表配置

更具体地，假日日历配置表-查询列表配置包括:显示选择框、序号，列表包含该表的所有字段，配置项字段名称、字段描述、固定类型、列宽、格式化类型、是否可排序、是否可导出，采用默认配置，除假日日期固定类型采用左固定、格式化类型为日期，币种和拦截标志格式化类型为数据字典，表头使用字段名称，模板中的查询列表使用el-table组件渲染，通过v-for遍历查询列表配置的所有字段，按配置内容加载每一列格式，渲染效果如图1中③部分所示。

(4)操作表单配置，这部分用于配置数据操作(新增、修改)和预览(查看详情)时显示所有表单数据，也是基于element-ui中的表单组件进行配置，配置项包括表单标签宽度、显示密度(通过每个字段占每行数据的比例控制)，以及表单字段列表，此部分内容也可通过数据库表结构信息导入字段，也可自定义设置，如表8所示为本申请的实施例。

即以操作表单为介质对查询列表中存在的数据进行修改或新增新数据，也可以理解为进行数据新增、修改操作的表单。

表8：操作表单配置

更具体地，假日日历配置表-操作表单中需要显示的字段包括该表的所有字段，其配置信息读取方式和渲染方式与查询条件一致，但操作表单对应的表单对象用于绑定操作表单数据及提交表单信息，且操作表单的配置中还包括禁用场景、最大长度、分组配置，比如假日日期为该表的主键字段，其值不允许修改，所以在修改界面渲染操作表单是该字段的控件是禁用的(即控件的disabled属性值为true),日历名称最大长度为50，分组线用来分割不同类型(指业务相关的类型)的字段；操作表单的渲染效果如图2所示。

(5)其他配置，这部分内容主要用于配置业务主键和数据请求接口，业务主键指对应的业务表所设的主键，用于对数据进行修改、删除、复核时进行绑定唯一数据或在新增数据时进行重复数据校验，如假日日历配置表中的cal和date字段。

上述的所有配置信息除了基础配置外都会以JSON的方式进行存储，在配置过程中亦可通过JSON编辑器对其进行修改。

在本发明实施例中，预设用于获取数据或操作数据的函数，用于对接页面中的数据查询和数据操作处理，对应的数据获取接口在配置信息中的其他配置中设置。

本发明提出的基于数据库表结构的通用页面模板开发方法，通过预设用于通用页面渲染的页面模板；以及用于渲染页面元素的页面配置。其中，页面模板为通用页面的各部分公共元素部分内容，包含查询条件、操作栏、查询列表、操作及预览数据表单。操作栏包含可以对页面数据进行处理的各类型按钮；数据表单可以以弹窗或页面的方式呈现。

在实际应用中，页面配置为页面模板进行页面渲染的依据，包含页面模板中各个部分的表单字段的显示状态、数据校验规则(表单配置项)，即与模板对应的查询条件、查询列表、数据表单中所显示的表单字段配置，以及业务数据的获取和更新对应的表名(数据库表)、接口地址、业务主键信息。

与现有技术相比，本发明具有以下优点：

1、在代码结构方面，本发明无需额外开发其他页面(指除页面模板以外的其他页面)，不会出现因页面结构相似而产生的冗余代码；

2、在开发流程方面，本发明可以实现在一般通用页面开发过程中，在业务字段(指通过符合业务需求的数据库设计而创建的表或表结构)确定后：

(1)任何人员可通过简单的配置快速的完成数据的可视化，无需专业的技术支撑；

(2)在业务规则发生变更时，可通过调整配置，页面实时生效，无需走变更流程；

(3)具备较高的扩展性，可在内置的通用模板快速构建自定义的模板，一次开发到处使用。

很大程度减轻了开发者的工作量，提高了开发效率；

3、在项目测试方面，由于各页面之间较强的统一性，对于可能出现的缺陷有一定的可预测性和系统的解决方案，减轻了测试及缺陷修复的困难度；

4、在页面加载方面，由于各个页面使用了统一的页面模板，系统需要加载的页面内容很少，可以减轻浏览器负担，一定程度上提高页面加载速度；

5、在代码优化方面，对于一些通用的页面优化，只需要修改对应的模板内容即可，解决了通用页面批量修改的涉及文件多、准确性差、开发慢的问题。

图5示出了本发明提供的基于数据库表结构的通用页面模板开发系统500，包括页面模板开发模块510和页面配置模块520。

页面模板开发模块510以查询条件配置中的查询条件字段列表为循环对象，对所述查询条件配置进行循环渲染；以及，预设操作栏，包括预设进行页面数据处理的操作按钮及其响应事件；其中，所述操作按钮包括新增、修改、删除、导入、导出、复核和查询；以及，通过查询条件筛选出业务数据，基于所述业务数据生成查询列表；以及，对所述查询列表配置信息中的字段进行循环加载；以及，遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性；

页面配置模块520对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，并将其存储至数据库。

参见图6，本公开实施例还提供了一种电子设备60，该电子设备包括：

至少一个处理器；以及，

与该至少一个处理器通信连接的存储器；其中，

该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述方法实施例中的基于数据库表结构的通用页面模板开发方法。

本公开实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述方法实施例中的基于数据库表结构的通用页面模板开发方法。

本公开实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述方法实施例中的基于数据库表结构的通用页面模板开发方法。

下面参考图6，其示出了适于用来实现本公开实施例的电子设备60的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图6示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图6所示，电子设备60可以包括处理装置(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有电子设备60操作所需的各种程序和数据。处理装置601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

通常，以下装置可以连接至I/O接口605：包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加速度计、陀螺仪等的输入装置606；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备60与其他设备进行无线或有线通信以交换数据。虽然图中示出了具有各种装置的电子设备60，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从ROM 602被安装。在该计算机程序被处理装置601执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取至少两个网际协议地址；向节点评价设备发送包括所述至少两个网际协议地址的节点评价请求，其中，所述节点评价设备从所述至少两个网际协议地址中，选取网际协议地址并返回；接收所述节点评价设备返回的网际协议地址；其中，所获取的网际协议地址指示内容分发网络中的边缘节点。

或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：接收包括至少两个网际协议地址的节点评价请求；从所述至少两个网际协议地址中，选取网际协议地址；返回选取出的网际协议地址；其中，接收到的网际协议地址指示内容分发网络中的边缘节点。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

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

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。

应当理解，本公开的各部分可以用硬件、软件、固件或它们的组合来实现。

以上所述，仅为本公开的具体实施方式，但本公开的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种基于数据库表结构的通用页面模板开发方法，其特征在于，所述方法包括以下步骤：

以查询条件配置中的查询条件字段列表为循环对象，对所述查询条件配置进行循环渲染；

预设操作栏，包括预设进行页面数据处理的操作按钮及其响应事件；其中，所述操作按钮包括新增、修改、删除、导入、导出、复核和查询；

通过查询条件筛选出业务数据，基于所述业务数据生成查询列表；

对所述查询列表配置信息中的字段进行循环加载；

遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染所述操作表单的组件信息，并添加对应的表单属性；

对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，并将其存储至数据库。

2.根据权利要求1所述的基于数据库表结构的通用页面模板开发方法，其特征在于，所述对所述查询条件配置进行循环渲染，包括：

通过element-ui的表单组件和vue提供的v-for属性对所述查询条件配置进行循环渲染。

3.根据权利要求1所述的基于数据库表结构的通用页面模板开发方法，其特征在于，所述对所述查询列表配置信息中的字段进行循环加载，包括：

通过element-ui的表格组件对所述查询列表进行动态渲染，即使用v-for对查询列表配置信息中的字段进行循环加载。

4.根据权利要求1所述的基于数据库表结构的通用页面模板开发方法，其特征在于，所述预设操作栏，还包括：

对于每个操作按钮绑定预设的权限信息，通过是否对指定角色赋予对应权限控制其是否加载。

5.根据权利要求1所述的基于数据库表结构的通用页面模板开发方法，其特征在于，所述对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，包括：

对所述查询条件进行配置，包括：配置用于控制element-ui表单组件中表单字段标签宽度值、每行显示查询条件的个数布局、业务表中存储的数据的展示，以及用于渲染查询条件的数据列表；

对所述查询列表进行配置，包括：基于element-ui前端框架中的表格组件对所述查询列表中的列表序号、选择框、数据行操作类型，以及列表字段进行配置；

对所述操作表单和数据操作进行配置，包括：基于element-ui中的表单组件对配置数据操作和预览时显示所有表单数据中的表单标签宽度、显示密度，以及表单字段列表进行配置。

6.根据权利要求1所述的基于数据库表结构的通用页面模板开发方法，其特征在于，所述遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性，包括：

基于element-ui的表单控件，通过v-for遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性；其中所述表单属性包括绑定字段和显示名称。

7.根据权利要求1-6中任意一项所述的基于数据库表结构的通用页面模板开发方法，其特征在于，所述方法还包括：通过缓存的方式提高配置信息的获取速率。

8.一种基于数据库表结构的通用页面模板开发系统，其特征在于，所述系统包括：

页面模板开发模块，被配置用于以查询条件配置中的查询条件字段列表为循环对象，对所述查询条件配置进行循环渲染；以及，

预设操作栏，包括预设进行页面数据处理的操作按钮及其响应事件；其中，所述操作按钮包括新增、修改、删除、导入、导出、复核和查询；以及，

通过查询条件筛选出业务数据，基于所述业务数据生成查询列表；以及，

对所述查询列表配置信息中的字段进行循环加载；以及，

遍历配置信息中的操作表单配置的表单字段，按照组件类型和校验规则渲染组件信息，并添加对应的表单属性；

页面配置模块，被配置用于对所述查询条件、所述查询列表、所述操作表单和数据操作进行配置，形成页面配置信息，并将其存储至数据库。

9.一种电子设备，其特征在于，该电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有能够被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器执行如权利要求1至7中的任一项所述的基于数据库表结构的通用页面模板开发方法。

10.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令当由至少一个处理器执行时使所述至少一个处理器执行如权利要求1至7中的任一项所述的基于数据库表结构的通用页面模板开发方法。