CN111782213A - 基于dom的动态控制页面生成系统 - Google Patents

Abstract

本发明涉及信息技术领域，具体涉及一种基于DOM的动态控制页面生成系统，包括页面配置文件、解析模块、第一处理模块、第二处理模块和数据绑定模块，其中：页面配置文件，用于存储元素、按钮列表和回调函数；解析模块，用于解析页面配置文件，并获取页面配置文件中的元素、按钮列表和回调函数；第一处理模块，用于获取元素，并根据元素创建表头；第二处理模块，用于根据按钮列表创建按钮，并根据回调函数注册按钮点击事件，生成列表html页面；数据绑定模块，用于采集当前列表数据，并将当前列表数据与列表html页面进行匹配绑定，生成数据列表页；采用本方案能够解决开发效率不高的技术难题。

Description

基于DOM的动态控制页面生成系统

技术领域

本发明涉及信息技术领域，具体涉及一种基于DOM的动态控制页面生成系统。

背景技术

Web的英文全称为“World Wide Web”，即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。Web建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

随着互联网的普及和Web技术的高速发展，Web应用已经成为当今社会生活、学习以及工作的重要组成部分，越来越多的应用领域，如：财务、客户关系、学生信息等管理系统等都推出了自己的Web接入平台；很多企业都采用Web页面的形式来承载自己的服务，而这些页面通常都有着相似的组成、布局、风格等特征，例如现有的客户关系管理系统，去除行业和企业特性，页面的主要功能就是为了展示客户的数据，并提供相应的新增、修改、删除、保存等操作或其组合，所以其页面构成、后台逻辑、数据库表结构等通常高度相似。但是为了满足客户的特性和个性化需求总是要进行大量重复性的开发，存在反复写列表而导致开发效率不高的问题。

发明内容

本发明意在于提供一种基于DOM的动态控制页面生成系统，能够解决开发效率不高的问题。

本发明提供的基础方案为：基于DOM的动态控制页面生成系统，包括页面配置文件、解析模块、第一处理模块、第二处理模块和数据绑定模块，其中，页面配置文件，用于存储元素、按钮列表和回调函数；解析模块，用于解析页面配置文件，并获取页面配置文件中的元素、按钮列表和回调函数；第一处理模块，用于获取元素，并根据元素创建表头；第二处理模块，用于根据按钮列表创建按钮，并根据回调函数注册按钮点击事件，生成列表html页面；数据绑定模块，用于采集当前列表数据，并将当前列表数据与列表html页面进行匹配绑定，生成数据列表页。

本发明的工作原理及优点在于：

列表作为管理系统html页面中最基本的功能之一，主要负责把数据信息通过表格更加直观和简便地向用户展示；由于Web管理系统开发过程中存在相似功能节点，提取并封装重用度较高的模块，生成可调用的模板；后续只需要绑定特定的数据信息，即可完成列表页的搭建。html页面列表页的展示效果类似于Excel，表头指的是表格的列标题即字段名；针对不同的列表页，区别仅在于展示数据不同，所以本方案中，将元素、按钮列表和回调函数事件存储在配置文件中，由第一处理模块根据元素创建html页面的表头，再通过第二处理模块根据按钮列表创建出对应的按钮，由于按钮一般需要执行相应的功能，例如点击按钮后进行数据的筛选操作，需要根据回调函数注册按钮点击事件实现该功能；最后将当前列表数据绑定在列表html页面中，即可生成完整的数据列表页。综上，采用本方案，在搭建列表页时无需再针对页面的样式进行重复性开发，能够提高开发效率。

进一步，页面配置文件还用于存储字段；还包括数据库和第三处理模块，其中：数据库用于存储字段模板；第三处理模块用于根据字段匹配出对应的字段模板，并根据字段和字段模板配置生成字段html；第三处理模块还用于将生成好的字段html加入页面文档流，并注册字段html的事件，生成表单html页面；数据绑定模块还用于获取当前表单数据，并将当前表单数据绑定到表单html页面中，生成数据表单页。

有益效果：表单主要负责信息的采集和部分展示的功能，基本的表单页面不仅需要包含可输入空间，还要包含有用于展示信息的只读类型空间；采用本方案，用户只需根据表单页面的实际需求，预先定义字段，由字段匹配出相应的字段模板，再把获取到的字段及字段模板结合形成代码并加入页面文档流；通过添加字段的事件，检测并限制用户输入规范的数据内容；最后再将当前列表数据与表单html页面进行绑定，形成数据表单页。同样的，由于表单页中的字段一般对应有同样的字段模板，例如姓名字段对应的字段模板为输入框，又如城市字段对应有下拉选择框，在搭建表单页时，可以直接通过用户所需的字段调用字段模板，避免再对字段模板以及后续的事件进行多余设计，从而加快表单页的开发效率。

进一步，数据绑定模块还用于在获取当前列表数据后，对当前列表数据进行二次处理。

有益效果：本方案中，由数据绑定模块对当前列表数据二次处理能够将状态值转换为可读的值。

进一步，数据绑定模块还用于采用分页插件渲染出数据列表页的分页页码、上一页和下一页。

有益效果：分页是项目中比较常见的一项功能，本方案中采用分页插件对当前列表数据进行渲染，实现页面的分页功能，能够节省开发人员的开发成本、加快开发效率；通过细化分隔用户需求信息，提供更小的精华内容块，促进用户浏览页面内容的深入便捷度；同时还可以确保用户所浏览页面重要组成部分的重点化、优先级，并减少用户浏览页面时滚动、点击次数，从而提升用户体验；除此之外，对页面进行分页，还能够缩短用户需求等待期，减少页面加载时间并降低服务器负载。

进一步，所述分页插件采用LayPage。

有益效果：相较于其他分页插件，LayPage针对一些溢出情况做了较好的封装，例如，通常页面上用户可选择每页显示的数据量多少，选定每页显示20条时，当前正在浏览最后一页(第五页)，如果需要切换到每页显示40条，那么LayPage分页插件会自动计算并切换到当前的最后一页(第三页)；无需我们自己再去判断处理，从而提升用户体验。

进一步，数据绑定模块还用于将当前表单数据反序列化到生成好的表单中。

有益效果：众所周知，序列化是将变量转换为可保存或传输的字符串的过程，反序列化就是在适当的时候把这个字符串再转化成原来的变量使用。这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性；在本方案中，由于生成好的表单为未绑定数据的DOM插件集合，通过反序列化，循环Json数据对象，将字段与DOM插件绑定，使DOM插件绑定表单数据，从而将表单数据显示在表单中。

进一步，所述按钮包括新增按钮和删除按钮。

有益效果：在列表页中构建新增按钮和删除按钮样式，并通过函数指令绑定按钮的点击事件，能够实现管理系统内容与系统数据库之间的交互，便于用户执行列表数据的增删查改操作。

进一步，数据绑定模块还包括数据采集子模块、处理子模块和输出子模块，数据采集子模块，用于获取列表页中的文字信息；处理子模块，用于接收并处理文字信息，生成相应的数字信息后存入数据库；处理子模块，还用于将数字信息进行二次转换，生成相应的文字信息；输出子模块，用于接收文字信息，并在列表页面中展示文字信息。

有益效果：能够将列表页中具体的文字信息转换成数字存入数据库中，再将数字进行二次转换，形成相应的文字信息在列表页面中展示；其优势在于：数字与文字相比，不仅在后台中的占用空间较小；还能够便于后续根据数字配置出相应的事件指令。

进一步，所述数据库采用SQL Server数据库。

有益效果：相较于MySQL数据库来说，SQL Server数据库更加稳定，运行速度更快，且在海量数据下该优势更为明显。

进一步，每张数据列表页中展示的数据信息量为20条。

有益效果：根据本方案的页面复杂度和页面响应时间来看，选择20条/页展示数据信息的效果更佳。

说明：页面文档流是指页面排版布局中，页面上的元素会自动从左往右，从上往下的流式排列；

LayPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台；同时，LayPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了Layui系列组件的一贯简洁，极易上手；

DOM也称DOM树，全称为“文档对象模型”(Document Object Model)，是JavaScript操作网页的接口；DOM实际上是以一种对象的层次结构来描述文档模型，DOM定义了每个节点所拥有的各自的属性、数据和操作，还定义了这些对象间的关联和行为，可以把DOM表示为一个以特定节点即对象为根的树状结构；

Json是一种轻量级的数据交换格式，它采用完全独立于编程语言的文本格式来存储和表示数据；Json具备简洁清晰的层次结构，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

附图说明

图1为本发明基于DOM的动态控制页面生成系统实施例一的系统框图。

具体实施方式

下面通过具体实施方式进一步详细的说明：

实施例一

如图1所示，基于DOM的动态控制页面生成系统，包括页面配置文件、解析模块、第一处理模块、第二处理模块、数据绑定模块和输出模块，其中，页面配置文件，用于存储元素、按钮列表和回调函数；解析模块，用于解析页面配置文件，并获取页面配置文件中的元素、按钮列表和回调函数；第一处理模块，用于获取元素，并根据元素创建表头；第二处理模块，用于根据按钮列表创建按钮，并根据回调函数注册按钮点击事件，生成列表html页面；数据绑定模块，用于采集当前列表数据，并将当前列表数据与列表html页面进行匹配绑定，生成数据列表页；输出模块，用于获取并展示数据列表页。

本实施例中，为了构建出列表页面，输入的代码指令中包括DOM和元素，具体的，<tr>、</tr>和<td>、</td>表示DOM，元素被放置在<td>和</td>之间，例如列表页面的表头中包含有ID栏、名称栏、网址栏和备注栏，所以指令用<td>{{item.id}}</td>生成出ID栏，同样的，依次通过<td>{{item.userName}}</td>、<td>{{item.roleName}}</td>、<td>{{item.remarks}}</td>分别生成出列表表头中的名称栏、网址栏以及备注栏；表头搭建完成后，还需要根据按钮列表创建出页面中的按钮，并根据回调函数注册按钮的点击事件，这一点类似于管理系统中的新增按钮样式、删除按钮样式，注册各个按钮的点击事件后，能够实现管理系统内容与系统数据库(数据库采用的是SQL Server数据库)之间的交互，即选择列表中的某项数据后点击新增按钮，即可将该项数据输入数据库；当点击删除按钮样式后，则首先查询并判断数据库是否包含该数据，进而根据查询结果执行数据的删除操作。值得一提的是，本方案中解析模块的工作原理类似与现有的网页中按下F12出现的开发者工具，可查看当前文档的DOM元素和CSS样式信息，该技术为现有技术，在此不再赘述。

而列表作为管理系统html页面中最基本的功能之一，除了可以执行上述的增删查改操作，主要负责把数据信息通过表格更加直观和简便地向用户展示，即根据元素、按钮列表和回调函数分别创建生成表头、按钮和点击事件后，从数据库中调取出匹配的当前列表数据，列表数据绑定在html页面中，生成数据列表页；具体的，数据库中包含：淘宝、http：//www.taobao.com，我要方案网、http：//www.52solution.com，猪八戒、http：//guiyang.zbj.com/it,以及每一个分别自定义输入的文字信息“分类限制，无法发布软件信息服务，淘宝店”、“可以用、电子类居多”和“需要成为会员”，通过数据绑定模块调取后，数据列表页中的名称列依次显示出淘宝，我要方案网和猪八戒，网址列显示出http：//www.taobao.com，http：//www.52solution.com和http：//guiyang.zbj.com/it；备注列对应显示分类限制，无法发布软件信息服务，淘宝店”，“可以用、电子类居多”和“需要成为会员”，ID列中则依次显示出1，2，3。

在其他实施例中，数据绑定模块还用于在获取当前列表数据后，对当前列表数据进行二次处理；具体的，二次处理是将列表页中具体的文字转换成数字存入后台，再将字符串进行二次转换，形成相应的文字信息在列表页面中展示；能够便于系统后续根据字符串匹配出相应的事件指令，例如，在学生信息管理系统中设置有成绩等级栏，而成绩等级栏需要包含的是优、良、中、差四个等级，则预先定义出：“优”对应的字符数据为“1”、“良”对应的字符数据为“2”、“中”对应的字符数据为“3”、“差”对应的字符数据为“4”，通过采用该方式，使存入后台的成绩等级信息为字符串，不仅占用空间较小；当用户需要对学生成绩等级进行统计筛选时，则只需要针对字符串定义出函数指令。在另一实施例中，数据绑定模块还用于采用LayPage分页插件渲染出数据列表页的分页页码、上一页和下一页，通常管理系统用于展示成千上百条数据信息，能够对页面进行分页处理，由用户选择每张页面展示数据信息量(如：10条/页、20条/页、30条/页、50条/页等，在本实施例中每张数据列表页中展示的数据信息量为20条)，通过这种方式能够缩短页面加载时间降低服务器负载，并提升用户体验。

实施例二

与实施例一相比，不同之处仅在于，页面配置文件还用于存储字段；还包括数据库和第三处理模块，其中：数据库用于存储字段模板；第三处理模块用于根据字段匹配出对应的字段模板，并根据字段和字段模板配置生成字段html；第三处理模块还用于将生成好的字段html加入页面文档流，并注册字段html的事件，生成表单html页面；数据绑定模块还用于获取当前表单数据，并将当前表单数据绑定到表单html页面中，生成数据表单页；输出模块还用于接收并展示数据表单页。

具体的，表单页主要负责信息采集和部分展示的功能，基本的表单页面不仅需要包含可输入空间，还有用于展示信息的只读类型空间。本方案中，为了便于用户直接采用管理系统对数据信息进行修改，点击列表页中具体的数据信息后，即可弹出列表页；例如：用户对列表页中名称为“淘宝”的数据信息进行修改，弹出的列表页中包含元素，即名称、网址和备注，每个元素均对应有供用户输入信息的输入框；为了检测并规范用户输入的数据内容，注册字段html事件；如预先定义指令，控制“网址”输入框的规范数据内容需要包含HTTP协议和子域(http：//www.)，当用户习惯性输入的网址内容为taobao.com，即提示“请在网址信息中添加http：//www.”；其他实施例中，还可以针对不同的字段匹配出字段模板，如页面中展示的复选框、单选框以及下拉框，该部分为现有技术，在此不再赘述。

在另一实施例中，数据绑定模块还用于将当前表单数据反序列化到生成好的列表中；由于生成好的表单为未绑定数据的DOM插件集合，通过反序列化，循环json数据对象，将字段与DOM插件绑定，使DOM插件绑定表单数据，从而将表单数据显示在表单中；同样的，以名称为“淘宝”的表单页为例说明，如用户进入该页面进行数据修改更新，即通过反序列化，名称、网址和备注输入框中自动读取列表页中对应的信息，即表单页中的“名称”输入框中的信息为“淘宝”，“网址”输入框中的信息为“http：//www.taobao.com”，“备注”输入框中的信息为“分类限制，无法发布软件信息服务，淘宝店”；所以，当用户只需要修改“备注”中的内容时，不必再重复性输入“名称”和“网址”输入框的内容。

实施例三

与实施例一相比，不同之处仅在于，还包括：页面渲染引擎，用于预先设定事件所对应的list按钮和form页面；采集模块，还用于获取用户键入的表基础信息，表基础信息包括表名信息以及资源名信息；分析模块，用于根据表名信息从页面渲染引擎中匹配出相应的list按钮和form页面；生成模块，用于根据list按钮、form页面在页面上生成按钮样式以及按钮对应按钮回调函数；监听单元，用于接收并处理按钮回调函数，当接收到按钮回调函数时，则调取页面渲染引擎中预存的第二表单页，并进行可视化展示；第二采集模块，用于获取用户在第二表单页中键入的数据库属性信息和Dom属性信息，其中：数据库属性信息包含字段名称、数据类型以及数据长度；Dom属性信息包含显示名称、关联元素；具体的，本实施例中关联元素包括普通输入框、密码输入框、下拉框、多选下拉框、开关和文本域，监听单元还用于当接收到关联元素触发时，调取页面渲染引擎中调取元素配置函数，并在第二表单页中进行可视化展示；生成模块，还用于接收并根据字段名称、数据类型以及数据长度新建数据库；创建模块，用于接收并根据显示名称创建列表页的表头信息；配置模块，还用于接收并根据显示名称和关联元素生成第三表单页；监听单元，用于接收并处理列表页的按钮回调函数，当接收到按钮回调函数时，则调取页面渲染引擎中的第三表单页，并进行可视化展示；采集模块，还用于获取用户在第三表单页中键入的编辑信息；输出模块，用于接收编辑信息，将显示名称与对应的编辑信息进行绑定，并在列表页中进行可视化展示。

由于后台管理系统页面中，常会有许多设置项，而设置项最常见的形式为表格式；如：后台管理系统中需要新增一个用户访问权限界面，用来展示不同用户的名称、编号、权限、账号和密码，为了搭建这一页面，现有技术通常采用需要html代码结合css样式，不仅专业性较高，而且较为麻烦，大多数为繁琐且重复性较高的操作；基于这个问题，本方案在后台管理系统中通过页面渲染引擎使用户能够脱离代码，采用页面样式可视化的效果，用户可以根据实际需求一步一步地搭建出自己想要的页面；

用户在输入信息和选择关联元素时，实际上是对页面渲染引擎中已有的配置文件进行进一步的修改和调整，逐步往页面里添加一些元素，这些元素以可视化的方式转化为配置，在点击生成按钮后，把它们转化成为Json的字符串配置保存到服务器上，再加载这个页面的时候，再服务器上把这个配置调下来，进行加载展示。

实施例四

与实施例一相比，不同之处仅在于，还包括页面指令诊断模块，页面指令诊断模块包括：指令触发采集子模块，用于获取按钮点击事件的时间信息，处理子模块，还用于计算连续两次按钮点击事件的触发时间差值，若差值小于预设的第一时间阈值，则判断按钮点击为误操作，屏蔽第二次按钮事件并根据第一次按钮点击事件触发页面跳转；处理子模块，还用于获取按钮点击事件的触发次数，若次数大于预设的次数阈值，并计算预设时段内每个按钮点击事件的间隔时间信息，判断子模块，还用于判断间隔时间信息是否大于预设的第二时间阈值，并判断按钮点击事件的触发次数大于预设的次数阈值；若间隔时间信息大于第二时间阈值，且按钮点击事件的触发次数大于预设的次数阈值，则判断用户无法接受服务器发送的页面跳转信息，并将用户发送的按钮点击事件暂存入服务器的数据库中存储，同时，在用户页面中显示“系统繁忙”；处理子模块，用于根据第一次按钮点击事件生成页面信息，将页面信息发送至用户端；并监听用户端是否显示页面信息，若用户端显示页面信息，则说明用户端电脑恢复正常，可以接收服务器上传的页面信息；则再次采集按钮点击事件，生成当前事件信息，如果判断服务器数据库中包含有与当前时间信息相同的按钮点击事件，则将当前事件信息生成的跳转页面转发至用户端。

采用本方案，通过采集用户端触发按钮点击事件的次数，以及每个按钮点击事件触发的时间信息，判断是否为用户误操作情况，如果连续两次触发按钮的时间小于0.1秒，直接由系统判定可能是用户点击速度过快的误操作，并屏蔽第二次按钮点击事件，能够使系统判定更加智能和人性化，提升用户体验；除此之外，本方案中如果用户在页面中的按钮点击事件超过三次，且每个按钮的触控间隔事件大于0.2秒，默认服务器系统稳定，说明用户端故障造成卡顿，无法下载由服务器发送的页面跳转信息；并提示用户系统繁忙；并且，再由服务器向用户发送第一点击事件生成的页面，并监听用户端，如果用户端显示该页面，说明用户端恢复正常；即可再次对用户端发送的按钮指令进行采集，经过与数据库的匹配，找到用户端故障期间提交的按钮指令，并生成处理后的页面发送到用户端；相较于现有技术来说，本方案能够通过采集按钮触发次数和时间，判断出用户端卡顿，并将发起的按钮事件预存到服务器数据库，便于后续快速生成用户需要的跳转页面。

以上所述的仅是本发明的实施例，方案中公知的具体结构及特性等常识在此未作过多描述，所属领域普通技术人员知晓申请日或者优先权日之前发明所属技术领域所有的普通技术知识，能够获知该领域中所有的现有技术，并且具有应用该日期之前常规实验手段的能力，所属领域普通技术人员可以在本申请给出的启示下，结合自身能力完善并实施本方案，一些典型的公知结构或者公知方法不应当成为所属领域普通技术人员实施本申请的障碍。应当指出，对于本领域的技术人员来说，在不脱离本发明结构的前提下，还可以作出若干变形和改进，这些也应该视为本发明的保护范围，这些都不会影响本发明实施的效果和专利的实用性。本申请要求的保护范围应当以其权利要求的内容为准，说明书中的具体实施方式等记载可以用于解释权利要求的内容。

Claims (10)

1.基于DOM的动态控制页面生成系统，其特征在于，包括页面配置文件、解析模块、第一处理模块、第二处理模块和数据绑定模块，其中：页面配置文件，用于存储元素、按钮列表和回调函数；解析模块，用于解析页面配置文件，并获取页面配置文件中的元素、按钮列表和回调函数；第一处理模块，用于获取元素，并根据元素创建表头；第二处理模块，用于根据按钮列表创建按钮，并根据回调函数注册按钮点击事件，生成列表html页面；数据绑定模块，用于采集当前列表数据，并将当前列表数据与列表html页面进行匹配绑定，生成数据列表页。

2.根据权利要求1所述的基于DOM的动态控制页面生成系统，其特征在于：页面配置文件还用于存储字段；还包括数据库和第三处理模块，其中：数据库用于存储字段模板；第三处理模块用于根据字段匹配出对应的字段模板，并根据字段和字段模板配置生成字段html；第三处理模块还用于将生成好的字段html加入页面文档流，并注册字段html的事件，生成表单html页面；数据绑定模块还用于获取当前表单数据，并将当前表单数据绑定到表单html页面中，生成数据表单页。

3.根据权利要求1所述的基于DOM的动态控制页面生成系统，其特征在于：数据绑定模块还用于在获取当前列表数据后，对当前列表数据进行二次处理。

4.根据权利要求3所述的基于DOM的动态控制页面生成系统，其特征在于：数据绑定模块还用于采用分页插件渲染出数据列表页的分页页码、上一页和下一页。

5.根据权利要求4所述的基于DOM的动态控制页面生成系统，其特征在于：所述分页插件采用LayPage。

6.根据权利要求2所述的基于DOM的动态控制页面生成系统，其特征在于：数据绑定模块还用于将当前表单数据反序列化到生成好的列表中。

7.根据权利要求1所述的基于DOM的动态控制页面生成系统，其特征在于：所述按钮包括新增按钮和删除按钮。

8.根据权利要求3所述的基于DOM的动态控制页面生成系统，其特征在于：数据绑定模块还包括数据采集子模块、处理子模块和输出子模块，数据采集子模块，用于获取列表页中的文字信息；处理子模块，用于接收并处理文字信息，生成相应的数字信息后存入数据库；处理子模块，还用于将数字信息进行二次转换，生成相应的文字信息；输出子模块，用于接收文字信息，并在列表页面中展示文字信息。

9.根据权利要求2所述的基于DOM的动态控制页面生成系统，其特征在于：所述数据库采用SQL Server数据库。

10.根据权利要求5所述的基于DOM的动态控制页面生成系统，其特征在于：每张数据列表页中展示的数据信息量为20条。

Images