CN115328479A - 一种网页页面的生成方法及系统 - Google Patents

Abstract

本申请实施例公开了一种网页页面的生成方法及系统，可应用于云计算领域、移动互联领域或金融领域。基于将DOM元素封装到后台服务器组件库中可以根据业务场景对应加载，并且用于渲染DOM元素生成页面、实现DOM元素的栏位控制的脚本文件生成方式，是基于提供的可视化开发页面进行DOM元素属性的配置所得到的配置参数，和配置好的目标DOM元素属性配置生成的栏位检验信息、事件响应校验信息、目标DOM元素的格式处理标准直接生成，如此不需要开发人员根据每个目标业务场景都撰写脚本文件代码实现页面的栏位控制，提高了生成浏览器页面的效率。

Description

一种网页页面的生成方法及系统

技术领域

本申请涉及Web技术领域，更具体的说，涉及一种网页页面的生成方法及系统。

背景技术

目前，Web浏览器通常为B/S架构(B/S架构:Browser/Server浏览器/服务器架构)，然而，目前采用B/S架构的浏览器中，B端完全依赖于各个浏览器产品自身的渲染、赋值、浏览等功能，针对每种业务场景下的页面都需要前端开发者撰写对应的脚本生成网页页面和实现页面中的栏位控制，要求对前端开发者不仅有CSS、JS等开发技术，由于栏位控制和业务场景挂钩，还需要前端开发者要熟悉相应的业务场景，然后再根据业务场景重新设计脚本实现该业务场景对应的浏览器页面；现有浏览器页面生成方法中，所有的栏位控制依赖前端脚本操作，针对不同场景需要重复设计脚本，存在生成浏览器页面效率低下的问题。

发明内容

本申请的目的是提供一种网页页面的生成方法及系统，不需要开发人员根据每个目标业务场景都撰写对应的脚本文件代码实现页面的栏位控制，提高了生成浏览器页面的效率。

为实现上述目的，第一方面，本申请提供了一种网页页面的生成方法，所述方法包括：

获取生成目标业务场景对应页面的页面生成请求；其中，所述页面生成请求中包括：目标业务场景标识；

根据所述目标业务场景从预设组件库调取目标文档对象模型DOM元素，构成可视化开发页面；所述目标DOM元素包括属性、函数方法、响应事件；其中，所述目标DOM元素配置有对应的元素标识；

将所述目标业务场景标识与所述元素标识的映射关系添加到服务器中预存的业务场景与元素的映射表中；

对所述可视化开发页面中所述目标DOM元素的每个属性的参数进行配置，得到目标属性的值和所述目标属性的值的数据类型；

根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标属性的值，生成栏位校验信息；根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息；

获取服务器的显示格式，根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准；

根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标DOM元素的响应事件、所述目标DOM元素的每个属性的值、所述校验信息、以及所述目标DOM元素的格式处理标准，生成所述目标业务场景对应的脚本文件；

根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面。

可选地，所述目标DOM元素的属性包括：字段类型属性，则所述根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息，包括：

根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息。

可选地，所述目标DOM元素的响应事件包括：按键KeyPress事件、松开键KeyUp事件、失去焦点事件、复制粘贴事件，对应的，所述事件响应校验信息包括：KeyPress事件响应校验信息、KeyUp事件响应校验信息、失去焦点事件响应校验信息、复制粘贴事件响应校验信息，则所述根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息，包括：

若所述目标DOM元素的响应事件为所述KeyPress事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的ASCII码，生成所述KeyPress事件响应校验信息；所述KeyPress事件响应校验信息用于在检测到所述KeyPress事件时，通过所述目标DOM元素中包括的键值进行数据类型格式校验；

若所述目标DOM元素的响应事件为所述KeyUp事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述KeyUp事件响应校验信息；所述KeyUp事件响应校验信息用于在检测到所述KeyUp事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为失去焦点事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述失去焦点事件响应校验信息；所述失去焦点事件响应校验信息用于在检测到所述失去焦点事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为复制粘贴事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述复制粘贴事件响应校验信息；所述复制粘贴事件响应校验信息用于在检测到所述复制粘贴事件时，对剪贴板中的内容值进行数据类型格式校验。

可选地，所述目标DOM元素的属性包括：字段类型属性，所述预设的数据类型格式，包括：

当所述字段类型属性的值为日期，所述日期包括年份、月份和日，其中，年份的值为1900到2100之间的一个整数值，月份的值为1到12之间的一个整数值，日的值在月份为4、6、9、11时为30，在月份为1、3、5、7、8、10、12时为31，在月份为2时根据年份确定是28或者29；

当所述字段类型属性的值为时间，所述时间包括：小时、分钟和秒，则小时的值为1到23之间的一个整数值，分钟的值和秒的值为1到59之间的一个整数值。

可选地，所述目标DOM元素的属性包括：字段类型属性，所述格式处理标准包括：去格式处理标准和目标格式处理标准，则所述根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准，包括：

获取所述字段类型属性的值，和所述字段类型属性的值的数据类型；

根据所述字段类型属性的值和所述字段类型属性的值的数据类型，生成所述去格式处理标准；所述去格式处理标准包括：若所述字段类型属性的值为日期，则将所述字段类型属性的值所对应的格式更新为“日/月/年”的格式；若所述字段类型属性的值为时间，则将所述字段类型属性的值所对应的格式更新为“小时：分钟：秒”的格式；若所述字段类型属性的值为预设值，且所述字段类型属性的值的数据类型为数字，则将所述字段类型属性的值所对应的格式中的逗号去除，其中，所述预设值是指所述字段类型属性中所配置的值为除日期、时间以外的任一值；

根据所述服务器的显示格式和所述所述字段类型属性的值所对应的格式，生成所述目标格式处理标准。

可选地，在所述根据所述目标业务场景从预设组件库调取目标DOM元素，构成可视化开发页面之前，所述方法还包括：

对超文本标记语言HTML上的文档对象模型DOM元素进行封装，将封装后的DOM元素加入所述预设组件库。

可选地，在所述生成所述目标业务场景对应的脚本文件后，所述方法还包括：

为所述述目标业务场景对应的脚本文件配置目标脚本文件标识；

在服务器预存的业务场景与脚本文件的映射表中添加所述目标业务场景标识与所述目标文件标识映射关系。

可选地，所述根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面，包括：

根据所述目标业务场景标识从所述业务场景与元素的映射表中，确定所述目标业务场景标识对应的所述目标DOM元素的元素标识，根据所述元素标识从所述预设组件库中解析加载所述目标DOM元素；

根据所述目标业务场景标识和所述业务场景与脚本文件的映射表，获取所述目标业务场景标识对应的目标脚本文件标识；

根据所述目标脚本文件标识调取所述目标业务场景对应的脚本文件；

根据所述目标业务场景对应的脚本文件对所述目标DOM元素进行渲染，生成目标业务场景对应的页面。

第二方面，本申请提供了一种网页页面的生成系统，所述系统包括：

请求获取模块，用于获取生成目标业务场景对应页面的页面生成请求；其中，所述页面生成请求中包括：目标业务场景标识；

可视化页面配置模块，用于根据所述目标业务场景从预设组件库调取目标文档对象模型DOM元素，构成可视化开发页面；所述目标DOM元素包括属性、函数方法、响应事件；对所述可视化开发页面中所述目标DOM元素的每个属性的参数进行配置，得到目标属性的值和所述目标属性的值的数据类型；其中，所述目标DOM元素配置有对应的元素标识；

存储模块，用于将所述目标业务场景标识与所述元素标识的映射关系添加到服务器中预存的业务场景与元素的映射表中；

栏位校验处理模块，用于根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标属性的值，生成栏位校验信息；

事件响应处理模块，用于根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息；获取服务器的显示格式，根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准；

脚本文件生成模块，用于根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标DOM元素的响应事件、所述目标DOM元素的每个属性的值、所述校验信息、以及所述目标DOM元素的格式处理标准，生成所述目标业务场景对应的脚本文件；

页面解析模块，用于根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面。

可选地，所述目标DOM元素的属性包括：字段类型属性，则所述事件响应处理模块，具体用于：

根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息。

本申请实施例提供了一种网页页面的生成方法，该方法通过将所有的DOM元素封装到预设组件库中，然后在配置页面参数时，根据目标业务场景调取预设组件库中的目标DOM元素，生成可视化开发页面，从而根据目标业务场景能够在可视化开发页面进行目标DOM元素属性的配置，根据配置好的目标DOM元素属性能够快速配置栏位检验信息和事件响应校验信息，以及目标DOM元素的格式处理标准，最后根据配置完成目标DOM元素以及栏位检验信息、事件响应校验信息、目标DOM元素的格式处理标准生成目标业务场景对应的脚本文件，在生成目标业务场景对应的页面时，就能够直接根据目标业务场景获取目标DOM元素和脚本文件，利用脚本文件对目标DOM元素渲染，得到网页页面。本申请实施例中基于将DOM元素封装到后台服务器组件库中可以根据业务场景对应加载，并且用于渲染DOM元素生成页面、实现DOM元素的栏位控制的脚本文件生成方式，是基于提供的可视化开发页面进行DOM元素属性的配置所得到的配置参数，和配置好的目标DOM元素属性配置生成的栏位检验信息、事件响应校验信息、目标DOM元素的格式处理标准直接生成，如此不需要开发人员根据每个目标业务场景都撰写脚本文件代码实现页面的栏位控制，提高了生成浏览器页面的效率。

附图说明

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

图1为本申请实施例提供的一种网页页面的生成方法的流程图；

图2为本申请实施例提供的DOM元素封装的架构示意图；

图3为本申请实施例提供的可视化开发页面示意图；

图4为本申请实施例提供的触发DOM元素失去焦点事件后的校验流程图；

图5为本申请实施例提供的触发DOM元素复制粘贴事件后的校验流程图；

图6为本申请实施例提供的对DOM元素的键值执行去格式的流程图；

图7为本申请实施例提供的对页面栏位进行渲染的框架示意图；

图8为本申请实施例提供的一种网页页面的生成系统的示意图。

具体实施方式

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

现有技术方案中针对每种业务场景下的页面都需要前端开发者撰写对应的脚本生成网页页面和实现页面中的栏位控制，页面中的栏位控制即针对HTML页面的栏位进行长度、类型、事件等的检查，现有的生成网页页面和实现页面中的栏位控制方案，要求对前端开发者不仅有CSS、JS等开发技术，由于栏位控制和业务场景挂钩，还需要前端开发者要熟悉相应的业务场景，然后再根据业务场景重新设计脚本实现该业务场景对应的浏览器页面；现有浏览器页面生成方法中，所有的栏位控制依赖前端脚本操作，针对不同场景需要重复设计脚本，存在生成浏览器页面效率低下的问题。

本发明实施例提供了一种网页页面的生成方法及系统，基于将DOM元素封装到后台服务器组件库中可以根据业务场景对应加载，并且用于渲染DOM元素生成页面、实现DOM元素的栏位控制的脚本文件生成方式，是基于提供的可视化开发页面进行DOM元素属性的配置所得到的配置参数，和配置好的目标DOM元素属性配置生成的栏位检验信息、事件响应校验信息、目标DOM元素的格式处理标准直接生成，如此不需要开发人员根据每个目标业务场景都撰写脚本文件代码实现页面的栏位控制，提高了生成浏览器页面的效率。

需要说明的是，本申请实施例提供的一种网页页面的生成方法及系统，可应用于云计算领域、移动互联领域或金融领域，上述仅为示例，并不对本申请提供的一种网页页面的生成方法及系统的应用领域进行限定。

下面，对本申请中一种网页页面的生成方法作详细介绍：

图1为本申请实施例提供的一种网页页面的生成方法的流程图。如图1所示，本申请实施例中网页页面的生成方法包括：

S100：获取生成目标业务场景对应页面的页面生成请求；其中，所述页面生成请求中包括：目标业务场景标识；

需要说明的是，用户在浏览器触发目标业务场景对应的页面时，会生成目标业务场景对应页面的页面生成请求，其中，用户触发该目标业务场景对应页面的方式可以是点击浏览器中目标业务场景的对应的控件触发，也可以是在输入栏输入目标业务场景相关信息触发，此处不对目标业务场景对应页面的触发方式做具体限定，可根据实际情况确定，均在本申请的保护范围内。

S101：根据所述目标业务场景从预设组件库调取目标文档对象模型DOM元素，构成可视化开发页面；所述目标DOM元素包括属性、函数方法、响应事件；其中，所述目标DOM元素配置有对应的元素标识；

具体的，该目标DOM元素中属性可以包括字段类型FieldType属性、元素名称Name属性、元素的字符串最长长度属性、元素的最短长度属性等；函数方法可以包括字符串长度获取方法CheckLength、格式化元素显示格式方法FormatNumber、指定字段类型属性的正则表达式GetPatternsByFieldType等；响应事件可以包括按下事件、双击事件、单击事件、失去焦点事件、释放事件、复制粘贴事件等，此处不对本申请实施例中的DOM元素中属性、函数方法、响应事件作具体限定，可以根据实际情况确定，均在本申请保护范围内。

需要说明的是，该预设组件库用于存储封装后的DOM元素，在根据所述目标业务场景从预设组件库调取目标DOM元素，构成可视化开发页面之前，该方法还包括：对超文本标记语言HTML上的文档对象模型DOM元素进行封装，将封装后的DOM元素加入该预设组件库。

具体的，本申请实施例中是基于图形接口的排版引擎MSHTML提供的接口，对所有HTML上的DOM元素进行封装和能力扩展，实现和扩展DOM元素的属性、函数方法、响应事件；其中，MSHTML是微软Windows搭载的网页浏览器—Internet Explorer的排版引擎的名称。

其中，本申请实施例中对DOM元素能力扩展可以是自定义新的DOM元素，并对自定义的DOM元素中的属性、函数方法、响应事件进行配置，也可以是对组件库中封装的任一DOM元素进行响应事件的扩展，实现该DOM元素的函数方法的扩展，以及属性的扩展；例如组件库中封装的第一DOM元素的响应事件为按下keyup事件，可以对该第一DOM元素的响应事件进行扩展，扩展为响应事件包含keyup事件和双击事件等，此处不对扩展的内容做具体限定，可以根据实际需要设定，均在本申请保护范围内。

需要说明的是，在可视化场景中，本申请实施例中的封装的DOM元素，对应网页页面中每个栏位元素，通过对DOM元素中的属性、方法、事件的配置，以及对该DOM元素的校验规则(也即栏位控制规则)的配置，实现网页页面中DOM元素对应的栏位的栏位控制。该栏位控制即利用配置好的DOM元素的属性、方法、事件和针对DOM元素的校验规则，针对HTML页面中的栏位进行长度、类型、事件等的检查。

其中，DOM元素可以包括以下对象元素，还可以包括自定义的对象元素：

文档元素DocumentElement：HTML Document对象模型，微软提供的页面接口，用于访问实际网页；

格式元素FormElement：主要是进行页面的加载，对页面上元素进行初步的检查，将与汇率专题相关的元素与其他元素区分开，一些简单事件的订阅，根据页面元素的标签Tag，初始化各种对象元素，栏位控制中涉及多的就是输入元素InputElement。

输入元素InputElement：主要对页面的输入进行控制，订阅栏位的事件，事件触发不同的栏位校验，将输入值返回到页面上或者存到内存中。

选择元素SelectElement：下拉选择框，目前分为静态菜单和动态菜单。主要用于实现下拉菜单的键盘控制、级联以及回显数据处理。

选择元素的弹出窗口SelectWindow：SelectElement的弹出窗口，与SelectElement一起存在。主要用于显示下拉弹出窗口，搜索下拉选项。

表格元素TableElement：表格元素主要用于多笔数据展示，列表数据修改等场景，元素内部通常会嵌套其他元素，如InputElement、SelectElement等。

按钮元素ButtonElement：用于点击触发按钮元素中包含的放置文本或图像或其他多媒体内容。

图像元素ImageElement：显示平台图片等。

需要说明的是，本申请实施例中基于MSHTML提供的接口，对所有HTML上的DOM元素进行封装和能力扩展，实现和扩展DOM元素的属性、函数方法、事件，是基于如附图2中的架构，通过MSHTML提供的接口，实现DOM元素的封装和能力扩展。

附图2中最外层WebBrowser窗口(WebBrowserWindow)：负责在Windows窗体中显示HTML页面，当页面加载完成时，会根据页面的文本对象模型依次创建平台定义的对象元素，如文档document、格式form、输入input、选择select、按钮button等对象元素。包括元素属性的定义以及事件的托管，WebBrowser是一个.NET控件类；该架构通过WebBrowser控件扩展(WebBrowserEx)实现扩展WebBrowser控件，该WebBrowserEx负责扩展WebBrowser控件，页面缩放、页面加载完成事件订阅、控件的事件委托，如按下keyDown事件委托。

WebBrowserWindow包括：文档对象元素DocumentElement：HTML Document对象模型，微软提供的页面接口，用于访问实际网页，该DocumentElement通过Document属性操作网页的内容，该属性包含一个HtmlDocument对象。

DocumentElement(HtmlElement)包括：格式元素FormElement，该FormElement格式元素：主要是进行页面的加载，对页面上元素进行初步的检查，将与汇率专题相关的元素与其他元素区分开，一些简单事件的订阅，根据页面元素的标签Tag，初始化各种对象元素，栏位控制中涉及多的就是InputElement元素用于进行页面的加载，对页面上元素进行初步的检查，将与汇率专题相关的元素与其他元素区分开，一些简单事件的订阅，根据页面元素的标签Tag，初始化各种对象元素，栏位控制中涉及多的就是InputElement元素。

FormElement可以包括多个对象栏位元素，如InputElement、SelectElementSelectElement元素的弹出窗口SelectWindow、TableElement、ButtonElement、ImageElement。

其中，封装DOM元素到组件库时还可以根据不同的场景需求，封装自定义的栏位对象元素，具体的，对设定自定义的DOM元素的元素名称，以及对自定义的DOM元素进行属性、函数方法、响应事件的配置，生成自定义的栏位对象元素。

本申请实施例中基于MSHTML提供的接口中，根据目标业务场景，以及每个对应栏位的属性、能力，将HTML上的DOM元素的对应信息封装为HTMLElement的接口，得到对应元素的接口后可以使用它里面的方法来获取它里面的各种信息。

S102：将所述目标业务场景标识与所述元素标识的映射关系添加到服务器中预存的业务场景与元素的映射表中；

需要说明的是，基于将目标业务场景标识与目标业务场景调取的目标DOM元素的元素标识的映射关系添加到服务器中预存的业务场景与元素的映射表，从而在加载浏览器网页页面时，可以根据服务器存储的业务场景与元素的映射表，基于目标业务场景标识，得到对应的DOM元素的元素标识，从而根据DOM元素的元素标识从组件库中获取对应的目标DOM元素进行加载。将DOM元素部署到后台，以映射表调取的方式可以提高页面生成的效率，而且将降低技术和业务的耦合，生成页面不需要开发人员都根据业务场景撰写对应的脚本文件，克服了开发人员根据每个业务场景都撰写脚本生成页面：是使用的栏位对应的DOM元素通过在脚本文件中以代码形式添加场景对应的DOM元素、进行DOM元素参数配置和校验规则配置的方式，存在的页面生成效率低下的问题。

S103：对所述可视化开发页面中所述目标DOM元素的每个属性的参数进行配置，得到目标属性的值和所述目标属性的值的数据类型；

如附图3所示的可视化页面进行配置的示意图，在可视化场景中，DOM元素对应一个栏位，开发人员选中可视化页面左侧的DOM元素(栏位)，在可视化页面的右侧会出现对应的DOM元素的属性配置框，开发人员可以在可视化页面右侧的配置框中，对DOM元素的不同属性进行配置，得到每个属性的值。其中，当属性为字段类型属性时，字段类型属性的值可以是时间Time、是否选项YesNo、日期Date，汇率、金额等，对应的，字段类型属性的值就有其对应的数据类型，该数据类型为字段类型属性的值的字符的类型；如Time对应的数据类型为数字(0到9)、YesNo对应的数据类型为是否，Date对应的数据类型为日期(包括数字和符号“-”、符号“.”、符号“/”)，汇率、金额的数据类型为金额(包括数字0、符号“-”、符号“.”、符号“X^3/4”、符号“$”、符号“，”)。

S104：根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标属性的值，生成栏位校验信息；根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息；

具体的，根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标属性的值，生成的栏位校验信息如下表1：

表1

需要说明的是，该栏位校验信息用于对DOM元素中包含的键值(即页面栏位中的键值)进行长度、数据格式类型、键值字符的合法性、显示格式、是否为必填栏目的校验。

本申请实施例中目标DOM元素的属性包括：字段类型属性，则根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息，包括：根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息；

具体的，所述目标DOM元素的属性包括：字段类型属性，所述预设的数据类型格式，包括：当所述字段类型属性的值为日期，所述日期包括年份、月份和日，其中，年份的值为1900到2100之间的一个整数值，月份的值为1到12之间的一个整数值，日的值在月份为4、6、9、11时为30，在月份为1、3、5、7、8、10、12时为31，在月份为2时根据年份确定是28或者29；当所述字段类型属性的值为时间，所述时间包括：小时、分钟和秒，则小时的值为1到23之间的一个整数值，分钟的值和秒的值为1到59之间的一个整数值。

具体的，目标DOM元素的响应事件包括：按键KeyPress事件、松开键KeyUp事件、失去焦点事件、复制粘贴事件，对应的，所述事件响应校验信息包括：KeyPress事件响应校验信息、KeyUp事件响应校验信息、失去焦点事件响应校验信息、复制粘贴事件响应校验信息。

根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息，包括：

若所述目标DOM元素的响应事件为所述KeyPress事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的ASCII码，生成所述KeyPress事件响应校验信息；所述KeyPress事件响应校验信息用于在检测到所述KeyPress事件时，通过所述目标DOM元素中包括的键值进行数据类型格式校验；

若所述目标DOM元素的响应事件为所述KeyUp事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述KeyUp事件响应校验信息；所述KeyUp事件响应校验信息用于在检测到所述KeyUp事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为失去焦点事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述失去焦点事件响应校验信息；所述失去焦点事件响应校验信息用于在检测到所述失去焦点事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为复制粘贴事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述复制粘贴事件响应校验信息；所述复制粘贴事件响应校验信息用于在检测到所述复制粘贴事件时，对剪贴板中的内容值进行数据类型格式校验。

以目标DOM元素的响应事件为所述KeyPress事件为例，生成KeyPress事件响应校验信息如下表2：

表2为生成的KeyPress事件响应校验信息，keypress事件会在敲击按键时触发，可以理解为按下并抬起同一个按键。基于该KeyPress事件响应校验信息，在用户触发KeyPress事件时，页面解析器检测到该KeyPress事件后，对目标DOM元素中包括的键值KeyCode，该键值为用户在目标DOM元素(即栏位)中输入的键值KeyCode，通过ASCII码校验实现该键值的数据类型格式校验，不符合的返回执行失败的提示。

需要说明的是，对于返回执行失败的提示具体是，在浏览器的网页显示执行失败的提示框。

表2

以目标DOM元素的响应事件为KeyUp事件为例，生成KeyUp事件响应校验信息如下表3：

表3为生成的KeyUp事件响应校验信息，KeyUp事件会在按键释放时触发,也就是按下键盘起来后的事件，基于该KeyUp事件响应校验信息，在用户触发KeyUp事件时，该KeyUp事件不屏蔽数字及小数点和ctrl+v，页面解析器检测到该KeyUp事件后，对目标DOM元素中包括的键值KeyCode，该键值为用户在目标DOM元素(即栏位)中输入的键值KeyCode，通过正则表达式校验实现该键值的数据类型格式校验，不符合的返回执行失败的提示。

需要说明的是，对于返回执行失败的提示具体是，在浏览器的网页显示执行失败的提示框。

表3

以目标DOM元素的响应事件为失去焦点事件为例，生成失去焦点事件响应校验信息同上述表3相同，均为对字段类型属性进行验证，失去焦点事件在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的行为，基于该失去焦点事件响应校验信息，在用户触发失去焦点事件时，页面解析器检测到该失去焦点事件后，对目标DOM元素中包括的键值KeyCode，该键值为用户在目标DOM元素(即栏位)中输入的键值KeyCode，通过正则表达式校验实现该键值的数据类型格式校验，不符合的返回执行失败的提示。

需要说明的是，对于返回执行失败的提示具体是，在浏览器的网页显示执行失败的提示框。

需要说明的是，DOM元素中的属性包含onblur属性，该DOM元素是否包含有失去焦点事件这一响应事件，通过DOM元素中的onblur属性确定，在页面解析器检测到该失去焦点事件后，会获取DOM元素中的onblur属性的值并进行判断，首先如果DOM元素属性中包含onblur属性，查找到onblur属性的值，如果onblur属性的值为空，则表示该DOM元素不包含失去焦点事件，即不被失去焦点事件触发；如果值不为空，把DOM元素的元素名和onblur属性的值记录到日志中，然后根据字段类型FieldType属性进行正则表达式校验，不符合的返回事件未执行的提示。具体的，根据字段类型FieldType属性进行正则表达式校验如上述表3。

优选的，如附图4所示，对本申请实施例中在页面解析器检测到该失去焦点事件后，校验该目标DOM元素(即栏位)的键值的全部流程进行详细说明：

当在页面解析器检测到该失去焦点事件，且该DOM元素的onblur属性的值不为空，则该DOM元素包含失去焦点事件，能够对该失去焦点事件进行响应，则对该栏位的键值的合法性进行校验，具体的：

采用正则表达式的方式进行合法性校验；执行OnChangeValidate函数对栏位值的改变进行合法性校验，用正则表达式替换非法字符；然后通过函数方法获取输入的键值实际长度，对输入值(即键值)的长度进行控制，具体的，利用栏位检验规则对输入值的文本长度进行控制，将输入值中超出控件(即该DOM元素)文本最大长度的部分截掉；然后按照栏位的字段类型属性的值对应的数据类型进行校验；优选的，可以如附图4依次按照日期，时间，数字、金额这三类字段类型属性的值对应的数据类型实现校验，也可以按照其他顺序进行校验，本申请实施例以依次按照日期，时间，数字、金额这三类字段类型属性的值对应的数据类型实现校验为例进行介绍：

首先执行日期格式校验，如果该栏位的字段类型属性的值对应的数据类型为日期，则执行该日期格式校验，根据日期格式对键值长度和年日月取值范围进行校验，具体的，执行日期校验CheckDate函数，根据数据格式，验证不通过会弹出提示框，可以是JS语句的提示框。规定年在1900到2100之间，月份必须为1到12，日期是4，6，9，11月为30天，2月根据闰年计算是28或者29天，其余月份31天，同时还进行正则表达式校验保证日期为数字；

其次执行时间格式校验，如果该栏位的字段类型属性的值对应的数据类型为时间，则执行该时间格式校验，根据时间格式对时分秒取值范围进行校验，具体的，执行时间校验CheckTime函数，验证不通过会弹出提示框，可以是JS语句的提示框。小时取值在1到23，分钟和秒在1到59之内，同时还进行正则表达式校验保证时间为数字。

再执行数字和金额类型格式校验，如果该栏位的字段类型属性的值对应的数据类型为数字和金额类型，则执行该金额、数字类型的格式校验，针对一些数字和金额类型的数据，根据数字类型，对正负号和小数位具体的，根据数据格式进行格式化，不正确的弹出提示框，可以是JS语句的提示框，该数字和金额类型的校验方式可以是整数金额根据数据格式补上小数位。

本申请该实施例中以该目标DOM元素所代表的栏位包含失去焦点事件为例，即能够对失去焦点事件进行响应，执行校验过程，实现栏位控制，基于配置好的目标DOM元素的属性、函数方法、响应事件，能够快速生成校验信息，页面生成不需要开发人员每次都撰写脚本，页面生成效率提高，并且生成的页面栏位控制实现了个性化的设置。

以目标DOM元素的响应事件为复制粘贴事件为例，生成复制粘贴事件响应校验信息同上述表3相同，均为对字段类型属性进行验证，基于该复制粘贴事件响应校验信息，在用户触发复制粘贴事件时，页面解析器检测到该复制粘贴事件后，根据FieldType属性对剪贴板中内容进行正则表达式校验，从而实现该剪贴板中内容数据类型格式校验，校验完以后将输入数据存回到系统的剪贴板中。如果FieldType属性不在规定好的类型中，则清空系统剪贴板，即不符合要求的用空格替换掉。

如附图5所示，当该目标DOM元素配置了复制粘贴事件，对本申请实施例中在页面解析器检测到该复制粘贴事件后，校验该栏位的键值的流程进行详细说明：

读取剪贴板中的内容，然后对剪贴板中的内容进行校验，具体的根据字段类型属性的值对应的数据类型，进行正则表达式校验，当校验通过存回剪贴板，如果该剪贴板内容对应的数据类型不属于配置好的字段类型属性的值对应的数据类型时，则清空该剪贴板。

S105：获取服务器的显示格式，根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准；

具体的，所述目标DOM元素的属性包括：字段类型属性，所述格式处理标准包括：去格式处理标准和目标格式处理标准，则所述根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准，包括：获取所述字段类型属性的值，和所述字段类型属性的值的数据类型；根据所述字段类型属性的值和所述字段类型属性的值的数据类型，生成所述去格式处理标准；所述去格式处理标准包括：若所述字段类型属性的值为日期，则将所述字段类型属性的值所对应的格式更新为“日/月/年”的格式；若所述字段类型属性的值为时间，则将所述字段类型属性的值所对应的格式更新为“小时：分钟：秒”的格式；若所述字段类型属性的值为预设值，且所述字段类型属性的值的数据类型为数字，则将所述字段类型属性的值所对应的格式中的逗号去除，其中，所述预设值是指所述字段类型属性中所配置的值为除日期、时间以外的任一值；根据所述服务器的显示格式和所述所述字段类型属性的值所对应的格式，生成所述目标格式处理标准。

需要说明的是，服务器的显示格式在不同的服务器上是不同的，根据实际所使用的服务器而确定，每个服务器的显示格式在服务器被开发时已经被设定完成。

需要说明的是，在生成脚本文件后，去格式处理标准和目标格式处理标准均采用函数方法的形式保存，响应于用户操作，是通过调用并执行对应的函数方法实现的相应校验过程和格式处理过程。

如附图6所示，对本申请实施例中利用去格式处理标准对用户在栏位输入的键值进行处理的流程进行介绍：

执行get()函数获取目标DOM元素中的键值value；

执行GetData()函数获取目标DOM元素字段类型属性的值对应的数据类型；

执行ConvertToFNSData()函数将键值对应的数据类型转换为服务器可以识别的格式，即去掉原键值的格式；具体的，若字段类型FieldType属性的值对应的数据类型为日期，则执行Convert2SysFormat()函数将键值对应的数据类型转换为服务器可以识别的格式，即将所述字段类型属性的值所对应的格式更新为“日/月/年”的格式；若字段类型FieldType属性的值对应的数据类型为数字，则执行GetFNSNumber()函数将键值对应的数据类型转换为服务器可以识别的格式，即将数字中的逗号去除；若字段类型FieldType属性的值对应的数据类型为时间，则执行Convert2SysFormatTime()函数将键值对应的数据类型转换为服务器可以识别的格式，则将所述字段类型属性的值所对应的格式更新为“小时：分钟：秒”的格式。

S106：根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标DOM元素的响应事件、所述目标DOM元素的每个属性的值、所述校验信息、以及所述目标DOM元素的格式处理标准，生成所述目标业务场景对应的脚本文件；

优选的，在所述生成所述目标业务场景对应的脚本文件后，还包括：为所述述目标业务场景对应的脚本文件配置目标脚本文件标识；在服务器预存的业务场景与脚本文件的映射表中添加所述目标业务场景标识与所述目标文件标识映射关系。

需要说明的是，该脚本文件是用于在根据目标业务场景从预设组件库中调取对应的目标DOM元素后，对目标DOM元素进行渲染，以生成网页页面，和对应的校验规则，从而响应用户操作进行栏位控制。

S107：根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面。

所述根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面，包括：根据所述目标业务场景标识从所述业务场景与元素的映射表中，确定所述目标业务场景标识对应的所述目标DOM元素的元素标识，根据所述元素标识从所述预设组件库中解析加载所述目标DOM元素；根据所述目标业务场景标识和所述业务场景与脚本文件的映射表，获取所述目标业务场景标识对应的目标脚本文件标识；根据所述目标脚本文件标识调取所述目标业务场景对应的脚本文件；根据所述目标业务场景对应的脚本文件对所述目标DOM元素进行渲染，生成目标业务场景对应的页面。

需要说明的是，生成目标业务场景对应的页面是由页面解析器完成，基于根据MSHTML提供的接口对所有HTML上的DOM元素进行封装存储在后台，本申请实施例中该页面解析器利用微软提供的IE浏览器编排引擎MSHTML的接口，结合GUI中的Webbrowser控件，实现了定制化的页面解析器，该解析器实现在Webbrowser控件中对HTML中所有DOM的拦截和实例化，将技术和业务的开发解耦合，技术开发在浏览器内部做好公共处理后，业务前端开发便不用关注公共处理逻辑部分，提高了页面生成的效率和个性化设置页面。

如附图7所示，本申请实施例中生成目标业务场景对应的页面的具体方式进行详细说明：

本申请实施例中针对每个业务场景生成相应的脚本后，会将脚本文件存储到服务器中，当确定业务场景则调用对应的脚本文件对调取的Html页面的DOM元素进行渲染，优选的，本申请实施例中还存在相应的JS脚本文件，由于部分执行内容采用JS语言完成，也设置了对应的JS脚本文件，例如部分提示框生成是JS语句的提示框，就对应会生成为JS脚本存储。

在获取该目标业务场景对应页面生成请求后，页面解析器会调取对应的Html页面目标DOM元素，以及对应于目标业务场景的脚本文件，通过HTML元素辅助工具HtmlUtility，获取从脚本文件中获取目标DOM元素的属性值，例如页面控件(SelectElement)的属性值，调取自定义的栏位控制功能进行功能控制，通过FormElement的页面加载功能，加载目标DOM元素生成对应页面，

当通过HtmlUtility将目标DOM元素SelectElement的属性值并渲染到SelectElement上后，SelectElement接管原Select控件所有的属性、事件和方法，实现原页面下拉选择框控件的各种功能，通过SelectElement元素的弹出窗口，弹出下拉框列表窗体，与SelectElement结合呈现下拉菜单，完成对于目标DOM元素的渲染，重复上述步骤对目标业务场景对应的DOM元素都进行渲染，所有DOM元素都渲染完成后，该目标业务场景对应的网页页面生成成功。用户可以该生成的页面进行点击、双击、滑动、移动焦点等操作，页面解析器实时捕捉用户的鼠标动作，触发用户自定义的栏位控制检查功能，结合应用设定的事件进行长度和阈值检查、进行是否可编辑控制、进行栏位联动等。

需要说明的是，用户打开web页面，页面解析器会同步运行，加载栏位控制模块；在web页面渲染前，会加载自定义的事件函数。

本发明实施例提供了一种网页页面的生成方法，基于将DOM元素封装到后台服务器组件库中可以根据业务场景对应加载，并且用于渲染DOM元素生成页面、实现DOM元素的栏位控制的脚本文件生成方式，是基于提供的可视化开发页面进行DOM元素属性的配置所得到的配置参数，和配置好的目标DOM元素属性配置生成的栏位检验信息、事件响应校验信息、目标DOM元素的格式处理标准直接生成，如此不需要开发人员根据每个目标业务场景都撰写脚本文件代码实现页面的栏位控制，提高了生成浏览器页面的效率。

下面对本申请实施例中的一种网页页面的生成系统进行介绍，请参阅图8，基于上述实施例中的一种网页页面的生成方法，本申请实施例通过一种网页页面的生成系统实现该网页页面的生成方法，本申请实施例中网页页面的生成系统，包括：

请求获取模块100，用于获取生成目标业务场景对应页面的页面生成请求；其中，所述页面生成请求中包括：目标业务场景标识；

可视化页面配置模块200，用于根据所述目标业务场景从预设组件库调取目标文档对象模型DOM元素，构成可视化开发页面；所述目标DOM元素包括属性、函数方法、响应事件；对所述可视化开发页面中所述目标DOM元素的每个属性的参数进行配置，得到目标属性的值和所述目标属性的值的数据类型；其中，所述目标DOM元素配置有对应的元素标识；

存储模块300，用于将所述目标业务场景标识与所述元素标识的映射关系添加到服务器中预存的业务场景与元素的映射表中；

栏位校验处理模块400，用于根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标属性的值，生成栏位校验信息；

事件响应处理模块500，用于根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息；获取服务器的显示格式，根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准；

脚本文件生成模块600，用于根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标DOM元素的响应事件、所述目标DOM元素的每个属性的值、所述校验信息、以及所述目标DOM元素的格式处理标准，生成所述目标业务场景对应的脚本文件；

页面解析模块700，用于根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面。

具体的，所述目标DOM元素的属性包括：字段类型属性，则所述事件响应处理模块500，具体用于：根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息。

具体的，所述目标DOM元素的响应事件包括：按键KeyPress事件、松开键KeyUp事件、失去焦点事件、复制粘贴事件，对应的，所述事件响应校验信息包括：KeyPress事件响应校验信息、KeyUp事件响应校验信息、失去焦点事件响应校验信息、复制粘贴事件响应校验信息，则所述事件响应处理模块500，具体用于：

若所述目标DOM元素的响应事件为所述KeyPress事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的ASCII码，生成所述KeyPress事件响应校验信息；所述KeyPress事件响应校验信息用于在检测到所述KeyPress事件时，通过所述目标DOM元素中包括的键值进行数据类型格式校验；

若所述目标DOM元素的响应事件为所述KeyUp事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述KeyUp事件响应校验信息；所述KeyUp事件响应校验信息用于在检测到所述KeyUp事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为失去焦点事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述失去焦点事件响应校验信息；所述失去焦点事件响应校验信息用于在检测到所述失去焦点事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为复制粘贴事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述复制粘贴事件响应校验信息；所述复制粘贴事件响应校验信息用于在检测到所述复制粘贴事件时，对剪贴板中的内容值进行数据类型格式校验。

具体的，所述目标DOM元素的属性包括：字段类型属性，所述预设的数据类型格式，包括：当所述字段类型属性的值为日期，所述日期包括年份、月份和日，其中，年份的值为1900到2100之间的一个整数值，月份的值为1到12之间的一个整数值，日的值在月份为4、6、9、11时为30，在月份为1、3、5、7、8、10、12时为31，在月份为2时根据年份确定是28或者29；当所述字段类型属性的值为时间，所述时间包括：小时、分钟和秒，则小时的值为1到23之间的一个整数值，分钟的值和秒的值为1到59之间的一个整数值。

具体的，所述目标DOM元素的属性包括：字段类型属性，所述格式处理标准包括：去格式处理标准和目标格式处理标准，则事件响应处理模块500，具体用于：

获取所述字段类型属性的值，和所述字段类型属性的值的数据类型；根据所述字段类型属性的值和所述字段类型属性的值的数据类型，生成所述去格式处理标准；所述去格式处理标准包括：若所述字段类型属性的值为日期，则将所述字段类型属性的值所对应的格式更新为“日/月/年”的格式；若所述字段类型属性的值为时间，则将所述字段类型属性的值所对应的格式更新为“小时：分钟：秒”的格式；若所述字段类型属性的值为预设值，且所述字段类型属性的值的数据类型为数字，则将所述字段类型属性的值所对应的格式中的逗号去除，其中，所述预设值是指所述字段类型属性中所配置的值为除日期、时间以外的任一值；根据所述服务器的显示格式和所述所述字段类型属性的值所对应的格式，生成所述目标格式处理标准。

该网页页面的生成系统还包括：DOM元素封装模块，用于：

对超文本标记语言HTML上的文档对象模型DOM元素进行封装，将封装后的DOM元素加入所述预设组件库。

存储模块300，还用于：

为所述述目标业务场景对应的脚本文件配置目标脚本文件标识；在服务器预存的业务场景与脚本文件的映射表中添加所述目标业务场景标识与所述目标文件标识映射关系。

页面解析模块700，具体用于：

根据所述目标业务场景标识从所述业务场景与元素的映射表中，确定所述目标业务场景标识对应的所述目标DOM元素的元素标识，根据所述元素标识从所述预设组件库中解析加载所述目标DOM元素；根据所述目标业务场景标识和所述业务场景与脚本文件的映射表，获取所述目标业务场景标识对应的目标脚本文件标识；根据所述目标脚本文件标识调取所述目标业务场景对应的脚本文件；根据所述目标业务场景对应的脚本文件对所述目标DOM元素进行渲染，生成目标业务场景对应的页面。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种网页页面的生成方法，其特征在于，所述方法包括：

获取生成目标业务场景对应页面的页面生成请求；其中，所述页面生成请求中包括：目标业务场景标识；

根据所述目标业务场景从预设组件库调取目标文档对象模型DOM元素，构成可视化开发页面；所述目标DOM元素包括属性、函数方法、响应事件；其中，所述目标DOM元素配置有对应的元素标识；

将所述目标业务场景标识与所述元素标识的映射关系添加到服务器中预存的业务场景与元素的映射表中；

对所述可视化开发页面中所述目标DOM元素的每个属性的参数进行配置，得到目标属性的值和所述目标属性的值的数据类型；

根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标属性的值，生成栏位校验信息；根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息；

获取服务器的显示格式，根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准；

根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标DOM元素的响应事件、所述目标DOM元素的每个属性的值、所述校验信息、以及所述目标DOM元素的格式处理标准，生成所述目标业务场景对应的脚本文件；

根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面。

2.根据权利要求1所述方法，其特征在于，所述目标DOM元素的属性包括：字段类型属性，则所述根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息，包括：

根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息。

3.根据权利要求2所述方法，其特征在于，所述目标DOM元素的响应事件包括：按键KeyPress事件、松开键KeyUp事件、失去焦点事件、复制粘贴事件，对应的，所述事件响应校验信息包括：KeyPress事件响应校验信息、KeyUp事件响应校验信息、失去焦点事件响应校验信息、复制粘贴事件响应校验信息，则所述根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息，包括：

若所述目标DOM元素的响应事件为所述KeyPress事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的ASCII码，生成所述KeyPress事件响应校验信息；所述KeyPress事件响应校验信息用于在检测到所述KeyPress事件时，通过所述目标DOM元素中包括的键值进行数据类型格式校验；

若所述目标DOM元素的响应事件为所述KeyUp事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述KeyUp事件响应校验信息；所述KeyUp事件响应校验信息用于在检测到所述KeyUp事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为失去焦点事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述失去焦点事件响应校验信息；所述失去焦点事件响应校验信息用于在检测到所述失去焦点事件时，通过所述目标DOM元素中包括的键值进行进行数据类型格式校验；

若所述目标DOM元素的响应事件为复制粘贴事件，则根据所述字段类型属性的值、所述字段类型属性的值的数据类型、所述预设的数据类型格式、以及所述字段类型属性的值的数据类型所对应的正则表达式，生成所述复制粘贴事件响应校验信息；所述复制粘贴事件响应校验信息用于在检测到所述复制粘贴事件时，对剪贴板中的内容值进行数据类型格式校验。

4.根据权利要求1所述方法，其特征在于，所述目标DOM元素的属性包括：字段类型属性，所述预设的数据类型格式，包括：

当所述字段类型属性的值为日期，所述日期包括年份、月份和日，其中，年份的值为1900到2100之间的一个整数值，月份的值为1到12之间的一个整数值，日的值在月份为4、6、9、11时为30，在月份为1、3、5、7、8、10、12时为31，在月份为2时根据年份确定是28或者29；

当所述字段类型属性的值为时间，所述时间包括：小时、分钟和秒，则小时的值为1到23之间的一个整数值，分钟的值和秒的值为1到59之间的一个整数值。

5.根据权利要求1所述方法，其特征在于，所述目标DOM元素的属性包括：字段类型属性，所述格式处理标准包括：去格式处理标准和目标格式处理标准，则所述根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准，包括：

获取所述字段类型属性的值，和所述字段类型属性的值的数据类型；

根据所述字段类型属性的值和所述字段类型属性的值的数据类型，生成所述去格式处理标准；所述去格式处理标准包括：若所述字段类型属性的值为日期，则将所述字段类型属性的值所对应的格式更新为“日/月/年”的格式；若所述字段类型属性的值为时间，则将所述字段类型属性的值所对应的格式更新为“小时：分钟：秒”的格式；若所述字段类型属性的值为预设值，且所述字段类型属性的值的数据类型为数字，则将所述字段类型属性的值所对应的格式中的逗号去除，其中，所述预设值是指所述字段类型属性中所配置的值为除日期、时间以外的任一值；

根据所述服务器的显示格式和所述所述字段类型属性的值所对应的格式，生成所述目标格式处理标准。

6.根据权利要求1所述方法，其特征在于，在所述根据所述目标业务场景从预设组件库调取目标DOM元素，构成可视化开发页面之前，所述方法还包括：

对超文本标记语言HTML上的文档对象模型DOM元素进行封装，将封装后的DOM元素加入所述预设组件库。

7.根据权利要求1所述方法，其特征在于，在所述生成所述目标业务场景对应的脚本文件后，所述方法还包括：

为所述述目标业务场景对应的脚本文件配置目标脚本文件标识；

在服务器预存的业务场景与脚本文件的映射表中添加所述目标业务场景标识与所述目标文件标识映射关系。

8.根据权利要求7所述方法，其特征在于，所述根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面，包括：

根据所述目标业务场景标识从所述业务场景与元素的映射表中，确定所述目标业务场景标识对应的所述目标DOM元素的元素标识，根据所述元素标识从所述预设组件库中解析加载所述目标DOM元素；

根据所述目标业务场景标识和所述业务场景与脚本文件的映射表，获取所述目标业务场景标识对应的目标脚本文件标识；

根据所述目标脚本文件标识调取所述目标业务场景对应的脚本文件；

根据所述目标业务场景对应的脚本文件对所述目标DOM元素进行渲染，生成目标业务场景对应的页面。

9.一种网页页面的生成系统，其特征在于，所述系统包括：

请求获取模块，用于获取生成目标业务场景对应页面的页面生成请求；其中，所述页面生成请求中包括：目标业务场景标识；

可视化页面配置模块，用于根据所述目标业务场景从预设组件库调取目标文档对象模型DOM元素，构成可视化开发页面；所述目标DOM元素包括属性、函数方法、响应事件；对所述可视化开发页面中所述目标DOM元素的每个属性的参数进行配置，得到目标属性的值和所述目标属性的值的数据类型；其中，所述目标DOM元素配置有对应的元素标识；

存储模块，用于将所述目标业务场景标识与所述元素标识的映射关系添加到服务器中预存的业务场景与元素的映射表中；

栏位校验处理模块，用于根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标属性的值，生成栏位校验信息；

事件响应处理模块，用于根据所述目标DOM元素的响应事件、所述目标属性的值、所述目标属性的值的数据类型、以及预设的数据类型格式，生成事件响应校验信息；获取服务器的显示格式，根据所述目标属性的值、所述目标属性的值的数据类型和所述服务器的显示格式，生成所述目标DOM元素的格式处理标准；

脚本文件生成模块，用于根据所述目标DOM元素的属性、所述目标DOM元素的函数方法、所述目标DOM元素的响应事件、所述目标DOM元素的每个属性的值、所述校验信息、以及所述目标DOM元素的格式处理标准，生成所述目标业务场景对应的脚本文件；

页面解析模块，用于根据所述业务场景与元素的映射表从所述预设组件库中解析加载所述目标DOM元素，并调取所述目标业务场景对应的脚本文件，生成所述目标业务场景对应的页面。

10.根据权利要求9所述系统，其特征在于，所述目标DOM元素的属性包括：字段类型属性，则所述事件响应处理模块，具体用于：

根据所述目标DOM元素的响应事件、所述字段类型属性的值、所述字段类型属性的值的数据类型、以及所述预设的数据类型格式，生成事件响应校验信息。

Images