适用于流量审计的通用表格控件实现方法与流程

本发明涉及网页开发领域，特别是涉及一种利用vue语言进行网页表格布局进行渲染的方法。

背景技术：

本发明对背景技术的描述属于与本发明的相关技术，仅仅是用于说明和便于理解本发明的

技术实现要素：
，不应理解为申请人明确认为或推定申请人认为是本发明在首次提出申请的申请日的现有技术。

页面渲染是为了更好的展示页面元素的过程。

表格的渲染通常是用脚本实现，使用html+css3+js传统的方法实现，也有成熟的框架比如jquery等，但是使用这些技术进行表格控件的渲染时会出现一个严重问题，就是当数据量过大的时候，浏览器会加载不出页面元素。因为传统方法是持续渲染，一层一层渲染页面元素展示，造成了浏览器负荷过大，最终浏览器会因为加载过大而崩溃退出。

以js生成表格为例

以上是js实现表格控件的核心方法。渲染成功会出现如下所示表格

如果将数据扩大到10000或者更多的时候，会出现如图7所示的错误页面。

发明内容

本发明提出一种适用于流量审计的通用表格控件实现方法。本发明的目的是提供新新型表格渲染方式，更快速的加载数据和渲染页面，提高用户使用度和满足不同内容的动态生成，达到更好的可复用性。

在打开网页的过程中，浏览器会对页面进行渲染加载数据。所谓的渲染，是指浏览器构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染，借此对页面表格元素进行预处理和增强页面元素的可表现能力，可操作能力。

预处理指的是对需要加载的数据项和操作项的突出显示，数据的统一输出展示。

可表现能力指的用户页面中的数据和操作，html标签作为数据和操作的表现承载，具有动态展示能力，可根据不同用户的的权限或者不同操作项展示不同的内容，比如列表之间的切换，表头信息的展示可动态生成。

可操作能力指的是用户对页面的元素进行操作，包括跳转，归档，已读操作，点击当前列表展示不同的树形结构详细内容。点击不同内容可进行快速筛选。

为解决上述现有技术的缺陷，本发明实施例提供一种适用于流量审计的通用表格控件实现方法。该方法包括：

步骤一：利用vue进行初始化并监听菜单数据，以实现表格渲染；

步骤二：使用vue-model指令对dom进行双向数据绑定；

步骤三：基于js实现树形详情菜单。以便可层级点击查看当前目录下的所有内容。

步骤三，具体可以包括：

3.1)获取所有的菜单数据；

3.2)将实现一层菜单的显示和点开合上的操作函数进行重复自调用；

3.3)将函数的数据渲染到ui控件。

步骤四：选择菜单的某一层，并以tab列表方式展示内容，具体包括：

4.1)将全部菜单数据下载至本地；

4.2)对数据进行拆分，拆分步骤具体包括：

4.2.1)通过点击操作获取了ui控件的标签属性id，将当前所述标签属性id的数据全部存储到函数packet()中；

4.2.2)获取当前数据显示项。

当前数据显示项，例如generic。

4.2.3)从菜单数据获得key值，通过key值循环遍历并判断是否有generic的数据；

4.2.4)将generic的数据填充至tab列表，以展示。

本发明中，一层菜单，是指菜单及其子菜单的集合。

优选地，本发明的步骤一具体包括：

1.1)vue类的初始化步骤，vue从配置文件进入类初始化程序，并定义被监听数据；

1.2)通过监听菜单数据，获取菜单数据的变化；

1.3)如果所述被监听的菜单数据发生变化，则所述另一指定操作函数执行生成vnode；

1.4)通过patch()函数，对比新旧vnode的对象，如果新老vnode基本属性相同时，通过domdiff算法进行增加删除或者修改操作，如果新老vnode基本属性不同时，删除旧的dom，新建新的dom。

优选地，步骤二具体包括：

2.1)数据监听器observer，对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。

2.2)指令解析器compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

2.3)通桥梁watcher连接observer和compile，以订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

2.4)mvvm作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，通过compile来解析编译模板指令，最终利用watcher搭起observer和compile之间的通信桥梁，达到数据变化，从而视图更新。

其中，observer，compile，watcher都是通过复杂的算法实现，上文的数据指的是同一个数据对象。

2.5)利用视图交互变化得到数据model变更的双向绑定。

2.6)将数据推送到视图渲染。

优选地，在步骤4.2.1)中，还包括：修改当前ui控件的标签属性id的css样式，使得当前行高亮显示。

本发明还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述任一方法的步骤。

本发明还提供了计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如上述任一方法的步骤。

本发明提供的一种利用vue语言实现的表格渲染，解决了传统加载数据卡顿现象，优化了数据结构和数据绑定，快速高效的实现了渲染，加载，数据查询等功能，与现有技术相比，本发明的优点如下：

1.表格更好地实现了表格下拉的相关数据展示；

2.对于一些数据的筛选和这个表格的生成，优势在于那个更快得生成了表格控件和表格下拉展示详情的数据筛选；

3.不同数据的不同展示渲染；

4.数据的动态化，可针对不同条件进行筛选；

5.高效的数据渲染和数据处理；

6.简易化的数据绑定处理，针对数据层进行操作，而不是传统的dom层；

7.友好的浏览器环境解析，以及更好的用户体验。

附图说明

为了更清楚地说明本发明的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍：

图1示出了本发明一种适用于流量审计的通用表格控件实现方法的流程图；

图2示出了图1所示方法中利用vue语言实现表格渲染的方法的具体步骤流程图；

图3示出了图1所示方法中使用vue-model双向绑定数据的具体步骤流程图；

图4示出了图1所示方法中基于js的可层级点击查看当前目录下的所有内容的树形详情菜单实现的步骤流程图；

图5示出了图1所示方法中，用户点击当前行，系统当前行高亮显示，展开详情内容，以tab列表方式展示的步骤流程图；

图6示出了图5步骤中，每点击一层显示当前的对应详细内容的图示；

图7示意出现有技术中出错页面的示意图。

具体实施方式

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

在下述介绍中，术语“第一”、“第二”仅用于描述的目的，而不能理解为暗示其相对重要性。

下述介绍提供了本发明的多个实施例，不同实施例之间可以替换或者合并组合，因此本发明也可认为包含所记载的相同和/或不同实施例的所有可能组合。因而，如果一个实施例包含特征a、b、c，另一个实施例包含特征b、d，那么本发明也应视为包括含有a、b、c、d的一个或多个所有其他可能的组合的实施例，尽管该实施例可能并未在以下内容中有明确的文字记载。

本发明涉及一种适用于流量审计的通用表格控件实现方法，包括以下步骤：步骤一：利用vue进行初始化并监听菜单数据，以实现表格渲染；步骤二：使用vue-model指令对dom进行双向数据绑定；步骤三：基于javascript实现树形详情菜单；步骤四：选择菜单的某一层，并以tab列表方式展示内容。本发明的目的是提供新新型表格渲染方式，更快速的加载数据和渲染页面，提高用户使用度和满足不同内容的动态生成，达到更好的可复用性。

参照图1，本实施例给出一种报警智能分析和展示的方法的示意图。

一种适用于流量审计的通用表格控件实现方法，包括以下步骤：

步骤一：利用vue进行初始化并监听菜单数据，以实现表格渲染；

步骤二：使用vue-model指令对dom进行双向数据绑定；

步骤三：基于js实现树形详情菜单(可层级点击查看当前目录下的所有内容)，具体包括：

3.1)获取所有的菜单数据；

3.2)将实现一层菜单的显示和点开合上的操作函数进行重复自调用；

3.3)将函数的数据渲染到ui控件；

步骤四：选择菜单的某一层，并以tab列表方式展示内容，具体包括：

4.1)将全部菜单数据下载至本地；

4.2)对数据进行拆分，拆分步骤具体包括：

4.2.1)通过点击操作获取了ui控件的标签属性id，将当前所述标签属性id的数据全部存储到函数packet()中；

4.2.2)获取当前数据显示项(例如generic)；

4.2.3)从菜单数据获得key值，通过key值循环遍历并判断是否有generic的数据；

4.2.4)将generic的数据填充至tab列表，以展示。

5.如权利要求1所述一种适用于流量审计的通用表格控件实现方法，其特征在于，步骤一具体包括：

1.5)实现vue的初始化，并定义被监听数据；

1.6)通过监听菜单数据，获取菜单数据的变化；

1.7)如果所述被监听的菜单数据发生变化，则所述另一指定操作函数执行生成vnode；

1.8)通过patch()函数，对比新旧vnode的对象，如果新老vnode基本属性相同时，通过domdiff算法进行增加删除或者修改操作，如果新老vnode基本属性不同时，删除旧的dom，新建新的dom。

6.如权利要求1所述一种适用于流量审计的通用表格控件实现方法，其特征在于，步骤二具体包括：

2.1)数据监听器observer，对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。

2.2)指令解析器compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

2.3)通桥梁watcher连接observer和compile，以订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

2.4)mvvm作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，通过compile来解析编译模板指令，最终利用watcher搭起observer和compile之间的通信桥梁，达到数据变化，从而视图更新。

其中observer，compile，watcher都是通过复杂的算法实现，上文的数据指的是同一个数据对象。

2.5)利用视图交互变化得到数据model变更的双向绑定。

2.6)将数据推送到视图渲染。

优选地，在步骤4.2.1)中，还包括：修改当前ui控件的标签属性id的css样式，使得当前行高亮显示。

本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述用于授权管理控制请求的方法的步骤。其中，计算机可读存储介质可以包括但不限于任何类型的盘，包括软盘、光盘、dvd、cd-rom、微型驱动器以及磁光盘、rom、ram、eprom、eeprom、dram、vram、闪速存储器设备、磁卡或光卡、纳米系统(包括分子存储器ic)，或适合于存储指令和/或数据的任何类型的媒介或设备。

本发明还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，处理器执行程序时实现用于授权管理控制请求的方法的步骤。在本发明实施例中，处理器为计算机系统的控制中心，可以是实体机的处理器，也可以是虚拟机的处理器。

以上介绍仅为本发明的优选实施例而已，并非对本发明作任何实质和形式上的限制。虽然本发明已以较佳实施例揭示如上，然而并非用以限定本发明，对于本领域的技术人员来说，在不脱离本发明技术方案范围内，可以利用上述揭示的技术内容作出各种更改和变化的等效实施例。但凡未脱离本发明的精神和原则，依据本发明的技术实质对以上实施例所作的任何简单修改、等同替换、改进等，均应包含在本发明的保护范围之内。