CN113760825A - 可视化用户操作回溯方法、装置、计算机设备及存储介质 - Google Patents
可视化用户操作回溯方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN113760825A CN113760825A CN202111087182.7A CN202111087182A CN113760825A CN 113760825 A CN113760825 A CN 113760825A CN 202111087182 A CN202111087182 A CN 202111087182A CN 113760825 A CN113760825 A CN 113760825A
- Authority
- CN
- China
- Prior art keywords
- snapshot
- page
- backtracking
- user
- information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 230000000007 visual effect Effects 0.000 title claims abstract description 34
- 238000012795 verification Methods 0.000 claims description 13
- 230000008859 change Effects 0.000 claims description 7
- 230000006870 function Effects 0.000 claims description 7
- 238000012544 monitoring process Methods 0.000 claims description 7
- 238000013515 script Methods 0.000 claims description 7
- 238000012800 visualization Methods 0.000 claims description 5
- 238000012163 sequencing technique Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 description 11
- 238000012545 processing Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 5
- 238000006243 chemical reaction Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 238000001514 detection method Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000036541 health Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000000717 retained effect Effects 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/11—File system administration, e.g. details of archiving or snapshots
- G06F16/128—Details of file system snapshots on the file-level, e.g. snapshot creation, administration, deletion
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本申请实施例属于计算机技术领域，应用于智慧医疗领域中，涉及一种可视化用户操作回溯方法、装置、计算机设备及存储介质，包括基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照；序列化所述页面快照，获得序列化信息，并将所述序列化信息保存至数据库中；在接收到回溯请求时，从所述数据库中获取所述序列化信息，对所述序列化信息进行反序列化操作，获得目标快照，并基于所述目标快照生成回溯视频，将所述回溯视频展示在前端页面中。其中，页面快照可存储于区块链中。本申请实现对用户操作的快速可视化回溯。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及可视化用户操作回溯方法、装置、计算机设备及存储介质。
背景技术
目前，各平台都有可视化的用户操作回溯方式，主要是通过应用程序(APP)进行录屏和截屏等方式生成视频用于回溯记录。
但是，在使用应用程序对用户操作进行录屏和截屏的过程中，常常需要计算机将条款文案等PDF类型的文件单独转换为SVG格式的图片才能进行录屏和截屏操作，使得工作量繁琐，计算机的可视化回溯速度难以提升。
发明内容
本申请实施例的目的在于提出一种可视化用户操作回溯方法、装置、计算机设备及存储介质，实现对用户操作的快速可视化回溯。
为了解决上述技术问题，本申请实施例提供一种可视化用户操作回溯方法，采用了如下所述的技术方案：
一种可视化用户操作回溯方法，包括下述步骤：
基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照；
序列化所述页面快照，获得序列化信息，并将所述序列化信息保存至数据库中；
在接收到回溯请求时，从所述数据库中获取所述序列化信息，对所述序列化信息进行反序列化操作，获得目标快照，并基于所述目标快照生成回溯视频，将所述回溯视频展示在前端页面中。
进一步的，所述基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照的步骤包括：
加载用户页面的DOM元素，并对所述DOM元素进行快照抓取操作，获得第一页面快照；
实时监控所述DOM元素，在检测到所述DOM元素发生改变时，对改变后的所述DOM元素进行快照抓取操作，获得第二页面快照，并将所述第一页面快照和所述第二页面快照作为所述页面快照。
进一步的，所述在检测到所述DOM元素发生改变时，对改变后的所述DOM元素进行快照抓取操作，获得第二页面快照的步骤包括：
在检测到所述DOM元素发生改变时，将改变后的DOM元素作为目标DOM元素，将所述目标DOM元素中与所述DOM元素不同的数据作为差异数据；
对所述差异数据进行快照抓取操作，获得所述第二页面快照；
所述对所述序列化信息进行反序列化操作，获得目标快照的步骤包括：
对所述序列化信息进行反序列化操作，获得初始快照；
基于所述页面快照生成的时间顺序，对所述初始快照进行排序，获得初始快照序列，并将所述初始快照序列的第一个所述初始快照作为待替换快照；
确定与所述初始快照序列的第二个所述初始快照相对应的目标差异数据，并根据所述目标差异数据对所述待替换快照进行替换操作，得到与所述初始快照序列的第二个所述初始快照相对应的已替换快照；
从所述初始快照序列的第三个所述初始快照开始依次对相邻的上一个所述初始快照相对应的已替换快照执行所述替换操作，得到所有已替换快照，并将第一个所述初始快照和所有已替换快照作为所述目标快照。
进一步的，所述在接收到回溯请求时，从所述数据库中获取所述序列化信息的步骤包括：
在接收到回溯请求时，基于所述回溯请求进行权限校验和时间点校验，若效验通过，则从所述数据库中获取所述序列化信息。
进一步的，所述序列化所述页面快照，获得序列化信息的步骤包括：
去除所述页面快照的原始脚本模板，获得快照元素；
序列化所述快照元素，获得所述序列化信息。
进一步的，所述序列化所述快照元素，获得所述序列化信息的步骤包括：
通过预设的序列化函数对所述快照元素进行序列化操作，获得所述序列化信息。
进一步的，所述基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照的步骤包括：
检测所述用户页面是否为目标区域页面，在所述用户页面为目标区域页面时，基于用户页面的状态对所述用户页面进行快照抓取操作，获得所述页面快照。
为了解决上述技术问题，本申请实施例还提供一种可视化用户操作回溯装置，采用了如下所述的技术方案：
一种可视化用户操作回溯装置，包括：
抓取模块，用于基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照；
保存模块，用于序列化所述页面快照，获得序列化信息，并将所述序列化信息保存至数据库中；
生成模块，用于在接收到回溯请求时，从所述数据库中获取所述序列化信息，对所述序列化信息进行反序列化操作，获得目标快照，并基于所述目标快照生成回溯视频，将所述回溯视频展示在前端页面中。
为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：
一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现上述的可视化用户操作回溯方法的步骤。
为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：
一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现上述的可视化用户操作回溯方法的步骤。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请基于用户页面的状态对用户页面进行快照抓取操作，实现对用户页面的有效抓取，避免产生过多的无效页面快照，减少页面快照整体的体积的同时，避免用户操作信息缺失，提升计算机的处理效率。本申请通过序列化页面快照，便于信息的保存和查找。同时由于通过快照进行信息保存，则无需进行录屏和截屏的方式生成视频，进而更加无需将PDF等类型的文件进行转换操作。在接收到溯回请求时，基于保存的序列化信息生成回溯视频，从而对用户操作的快速可视化回溯。
附图说明
为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请可以应用于其中的示例性系统架构图；
图2是根据本申请的可视化用户操作回溯方法的一个实施例的流程图；
图3是根据本申请的可视化用户操作回溯装置的一个实施例的结构示意图；
图4是根据本申请的计算机设备的一个实施例的结构示意图。
附图标记：200、计算机设备；201、存储器；202、处理器；203、网络接口；300、可视化用户操作回溯装置；301、抓取模块；302、保存模块；303、生成模块。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是，本申请实施例所提供的可视化用户操作回溯方法一般由服务器/终端设备执行，相应地，可视化用户操作回溯装置一般设置于服务器/终端设备中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
继续参考图2，示出了根据本申请的可视化用户操作回溯方法的一个实施例的流程图。所述的可视化用户操作回溯方法，包括以下步骤：
S1：基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照。
在本实施例中，快照就是把当时的数据信息做一个留存，如果以后发生变化就可以拿出当时的留存作为凭证。DOM树是在浏览器在加载网页文档过程中渲染页面前，根据文档生成描述文档结构的树状结构。用户页面的状态可以通过DOM树的形式描述，记录页面的过程实际上是记录DOM树在各个时间点上的快照。通过对用户页面进行快照抓取操作，实现直接将图片和PDF等静态资源采用html源码的方式进行保存，无需将PDF等文件转换为SVG图片。在后续目标图片生成过程中，直接渲染抓取的快照即可生成目标图片。用户页面(即前端web用户页面)是指使用超文本标记语言(Hyper Text Markup Language，HTML)、层叠样式表(Cascading Style Sheets，CSS)和JavaScript技术生成的可访问、可浏览以及可进行简单交互的页面。完整的保存用户页面的某一时刻的情况用以查看就被称为页面快照的抓取。目前，常用的快照抓取操作是定时快照，即定时对页面制作快照，回放时根据时间依次重建快照。但方案有几个弊端：定时快照的间隔难以把握，间隔过短则会长生大量无变化的无用快照，过长则会导致中间的部分操作丢失；同时生成的快照体积过大，对后续性能会有影响。而本申请基于用户页面的状态对用户页面进行快照抓取操作，实现对用户页面的有效抓取，避免产生过多的无效页面快照，减少页面快照整体的体积的同时，避免用户操作信息缺失，提升计算机的处理效率。
具体的，所述基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照的步骤包括：
加载用户页面的DOM元素，并对所述DOM元素进行快照抓取操作，获得第一页面快照；
实时监控所述DOM元素，在检测到所述DOM元素发生改变时，对改变后的所述DOM元素进行快照抓取操作，获得第二页面快照，并将所述第一页面快照和所述第二页面快照作为所述页面快照。
在本实施例中，DOM(文档对象模型,Document Object Model)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。而DOM元素是指页面中的所有标签，这些标签在DOM中使用element表示。用户页面的状态即指DOM元素的变化情况。在检测到DOM元素变化时，对比变化后的DOM元素和变化前的DOM元素之间的不同，记录差异项；对该变化后的DOM元素进行快照抓取操作，即获得第二页面快照。
此外，所述基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照的步骤包括：
检测所述用户页面是否为目标区域页面，在所述用户页面为目标区域页面时，基于用户页面的状态对所述用户页面进行快照抓取操作，获得所述页面快照。
在本实施例中，目标区域页面指属于交易区的用户页面。对交易区内的用户页面进行快照抓取操作，以用于记录交易区内发生的所有事件，对交易区内发生的事件进行跟踪回溯。交易区指的产品健康告知页、用户信息录入页。
S2：序列化所述页面快照，获得序列化信息，并将所述序列化信息保存至数据库中。
在本实施例中，完成前端的快照记录后，序列化页面快照并上传至后端服务(即数据库中)进行保存，用于在需要时快速调取。
具体的，所述序列化所述页面快照，获得序列化信息的步骤包括：
去除所述页面快照的原始脚本模板，获得快照元素；
序列化所述快照元素，获得所述序列化信息。
在本实施例中，去除所有原始脚本模板(即JS脚本)，只保留展示的快照元素，控制上传的快照体积。在后续回溯过程中，需要将这些快照元素与原始脚本模板重新组合，获得用于生成回溯视频的目标快照。
其中，所述序列化所述快照元素，获得所述序列化信息的步骤包括：
通过预设的序列化函数对所述快照元素进行序列化操作，获得所述序列化信息。
在本实施例中，序列化函数为string serialize(mixed$value)。通过序列化函数对快照元素进行序列化操作，即可获得序列化信息。
S3：在接收到回溯请求时，从所述数据库中获取所述序列化信息，对所述序列化信息进行反序列化操作，获得目标快照，并基于所述目标快照生成回溯视频，将所述回溯视频展示在前端页面中。
在本实施例中，反序列化操作通过反序列化函数：mixed unserialize(string$str)实现。同时在上述对用户页面进行快照抓取操作的同时，还记录用户页面对应的CSS样式内容，以用于提升后续操作的速度。在基于所述目标快照生成回溯视频的过程中，调取预先记录的CSS样式内容，通过所述CSS样式渲染对应的目标快照，获得目标图片；基于时间顺序将目标图片作为视频帧进行合成操作，获得回溯视频，并将该回溯视频展示在前端页面中，实现对用户操作的快速回溯。
具体的，所述在检测到所述DOM元素发生改变时，对改变后的所述DOM元素进行快照抓取操作，获得第二页面快照的步骤包括：
在检测到所述DOM元素发生改变时，将改变后的DOM元素作为目标DOM元素，将所述目标DOM元素中与所述DOM元素不同的数据作为差异数据；
对所述差异数据进行快照抓取操作，获得所述第二页面快照；
所述对所述序列化信息进行反序列化操作，获得目标快照的步骤包括：
对所述序列化信息进行反序列化操作，获得初始快照；
基于所述页面快照生成的时间顺序，对所述初始快照进行排序，获得初始快照序列，并将所述初始快照序列的第一个所述初始快照作为待替换快照；
确定与所述初始快照序列的第二个所述初始快照相对应的目标差异数据，并根据所述目标差异数据对所述待替换快照进行替换操作，得到与所述初始快照序列的第二个所述初始快照相对应的已替换快照；
从所述初始快照序列的第三个所述初始快照开始依次对相邻的上一个所述初始快照相对应的已替换快照执行所述替换操作，得到所有已替换快照，并将第一个所述初始快照和所有已替换快照作为所述目标快照。
在本实施例中，在第一次加载页面的时候加载完成DOM元素。因大部分的用户操作产生的视图变更是局部的一个变化，所以在视图变更时，计算机能够检测到DOM元素发生改变。通过将目标DOM元素中与DOM元素不同的数据作为差异数据，进而只对差异数据进行快照抓取即可。有效减小计算机的数据存储负担。在回溯的时候，对初始快照进行反序列化操作并排序。此时，获得的初始快照序列中，第一个初始快照即为完整的页面中的DOM元素，可以直接作为其中一个目标快照。其他的初始快照即为之前抓取到的差异数据，作为目标差异数据。根据该目标差异数据逐个替换上一个初始快照相对应的，拥有完整的DOM元素的已替换快照，即可实现最终获得目标快照。
此外，所述在接收到回溯请求时，从所述数据库中获取所述序列化信息的步骤包括：
在接收到回溯请求时，基于所述回溯请求进行权限校验和时间点校验，若效验通过，则从所述数据库中获取所述序列化信息。
在本实施例中，回溯请求携带有发送该回溯请求的人员名称、回溯起始时间点和回溯终止时间点，根据该人员名称确定对应的人员是否具有回溯权限，若该人员具有回溯权限，则进行时间点校验，具体的：获取请求回溯的回溯起始时间点和回溯终止时间点，确认该回溯起始时间点和回溯终止时间点是否在当前时间点之前，若是，则确认效验通过。若该人员不具有回溯权限，或回溯起始时间点不在当前时间点之前，或回溯终止时间点不在当前时间点之前，则返回效验不通过的通知。其中，在基于所述目标快照生成回溯视频的过程中，确认处于所述回溯起始时间点和回溯终止时间点之间的目标快照，作为回溯快照，基于回溯快照生成回溯视频。
在本实施例中，可视化用户操作回溯方法运行于其上的电子设备(例如图1所示的服务器/终端设备)可以通过有线连接方式或者无线连接方式接收回溯请求。需要指出的是，上述无线连接方式可以包括但不限于3G/4G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。
本申请基于用户页面的状态对用户页面进行快照抓取操作，实现对用户页面的有效抓取，避免产生过多的无效页面快照，减少页面快照整体的体积的同时，避免用户操作信息缺失，提升计算机的处理效率。本申请通过序列化页面快照，便于信息的保存和查找。同时由于通过快照进行信息保存，则无需进行录屏和截屏的方式生成视频，进而更加无需将PDF等类型的文件进行转换操作。在接收到溯回请求时，基于保存的序列化信息生成回溯视频，从而对用户操作的快速可视化回溯。
需要强调的是，为进一步保证上述页面快照的私密和安全性，上述页面快照还可以存储于一区块链的节点中。
本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
本申请可应用于智慧医疗领域中，具体用于对用户在医疗页面中的操作进行回溯，从而推动智慧城市的建设。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种可视化用户操作回溯装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
如图3所示，本实施例所述的可视化用户操作回溯装置300包括：抓取模块301、保存模块302以及生成模块303。其中：抓取模块301，用于基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照；保存模块302，用于序列化所述页面快照，获得序列化信息，并将所述序列化信息保存至数据库中；生成模块303，用于在接收到回溯请求时，从所述数据库中获取所述序列化信息，对所述序列化信息进行反序列化操作，获得目标快照，并基于所述目标快照生成回溯视频，将所述回溯视频展示在前端页面中。
在本实施例中，本申请基于用户页面的状态对用户页面进行快照抓取操作，实现对用户页面的有效抓取，避免产生过多的无效页面快照，减少页面快照整体的体积的同时，避免用户操作信息缺失，提升计算机的处理效率。本申请通过序列化页面快照，便于信息的保存和查找。同时由于通过快照进行信息保存，则无需进行录屏和截屏的方式生成视频，进而更加无需将PDF等类型的文件进行转换操作。在接收到溯回请求时，基于保存的序列化信息生成回溯视频，从而对用户操作的快速可视化回溯。
抓取模块301包括加载子模块和监控子模块，其中，加载子模块用于加载用户页面的DOM元素，并对所述DOM元素进行快照抓取操作，获得第一页面快照。监控子模块用于实时监控所述DOM元素，在检测到所述DOM元素发生改变时，对改变后的所述DOM元素进行快照抓取操作，获得第二页面快照，并将所述第一页面快照和所述第二页面快照作为所述页面快照。
监控子模块包括检测单元和抓取单元，其中，检测单元用于在检测到所述DOM元素发生改变时，将改变后的DOM元素作为目标DOM元素，将所述目标DOM元素中与所述DOM元素不同的数据作为差异数据；抓取单元用于对所述差异数据进行快照抓取操作，获得所述第二页面快照。
生成模块303包括反序列化子模块、排序子模块、第一替换子模块、第二替换子模块以及确定子模块，其中，反序列化子模块用于对所述序列化信息进行反序列化操作，获得初始快照；排序子模块用于基于所述页面快照生成的时间顺序，对所述初始快照进行排序，获得初始快照序列，并将所述初始快照序列的第一个所述初始快照作为待替换快照；第一替换子模块用于确定与所述初始快照序列的第二个所述初始快照相对应的目标差异数据，并根据所述目标差异数据对所述待替换快照进行替换操作，得到与所述初始快照序列的第二个所述初始快照相对应的已替换快照；第二替换子模块用于从所述初始快照序列的第三个所述初始快照开始依次对相邻的上一个所述初始快照相对应的已替换快照执行所述替换操作，得到所有已替换快照，并将第一个所述初始快照和所有已替换快照作为所述目标快照。
在本实施例的一些可选的实现方式中，上述抓取模块301进一步用于：检测所述用户页面是否为目标区域页面，在所述用户页面为目标区域页面时，基于用户页面的状态对所述用户页面进行快照抓取操作，获得所述页面快照。
保存模块302包括去除子模块和序列化子模块，其中，去除子模块用于去除所述页面快照的原始脚本模板，获得快照元素；序列化子模块用于序列化所述快照元素，获得所述序列化信息。
在本实施例的一些可选的实现方式中，上述序列化子模块进一步用于：通过预设的序列化函数对所述快照元素进行序列化操作，获得所述序列化信息。
在本实施例的一些可选的实现方式中，上述生成模块303进一步用于：在接收到回溯请求时，基于所述回溯请求进行权限校验和时间点校验，若效验通过，则从所述数据库中获取所述序列化信息。
本申请基于用户页面的状态对用户页面进行快照抓取操作，实现对用户页面的有效抓取，避免产生过多的无效页面快照，减少页面快照整体的体积的同时，避免用户操作信息缺失，提升计算机的处理效率。本申请通过序列化页面快照，便于信息的保存和查找。同时由于通过快照进行信息保存，则无需进行录屏和截屏的方式生成视频，进而更加无需将PDF等类型的文件进行转换操作。在接收到溯回请求时，基于保存的序列化信息生成回溯视频，从而对用户操作的快速可视化回溯。
为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。
所述计算机设备200包括通过系统总线相互通信连接存储器201、处理器202、网络接口203。需要指出的是，图中仅示出了具有组件201-203的计算机设备200，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
所述存储器201至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器201可以是所述计算机设备200的内部存储单元，例如该计算机设备200的硬盘或内存。在另一些实施例中，所述存储器201也可以是所述计算机设备200的外部存储设备，例如该计算机设备200上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器201还可以既包括所述计算机设备200的内部存储单元也包括其外部存储设备。本实施例中，所述存储器201通常用于存储安装于所述计算机设备200的操作系统和各类应用软件，例如可视化用户操作回溯方法的计算机可读指令等。此外，所述存储器201还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器202在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器202通常用于控制所述计算机设备200的总体操作。本实施例中，所述处理器202用于运行所述存储器201中存储的计算机可读指令或者处理数据，例如运行所述可视化用户操作回溯方法的计算机可读指令。
所述网络接口203可包括无线网络接口或有线网络接口，该网络接口203通常用于在所述计算机设备200与其他电子设备之间建立通信连接。
在本实施例中，本申请基于用户页面的状态对用户页面进行快照抓取操作，实现对用户页面的有效抓取，提升计算机的处理效率。本申请通过序列化页面快照，便于信息的保存和查找。基于保存的序列化信息生成回溯视频，从而对用户操作的快速可视化回溯。
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的可视化用户操作回溯方法的步骤。
在本实施例中，本申请基于用户页面的状态对用户页面进行快照抓取操作，实现对用户页面的有效抓取，提升计算机的处理效率。本申请通过序列化页面快照，便于信息的保存和查找。基于保存的序列化信息生成回溯视频，从而对用户操作的快速可视化回溯。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。
Claims (10)
1.一种可视化用户操作回溯方法，其特征在于，包括下述步骤：
基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照；
序列化所述页面快照，获得序列化信息，并将所述序列化信息保存至数据库中；
在接收到回溯请求时，从所述数据库中获取所述序列化信息，对所述序列化信息进行反序列化操作，获得目标快照，并基于所述目标快照生成回溯视频，将所述回溯视频展示在前端页面中。
2.根据权利要求1所述的可视化用户操作回溯方法，其特征在于，所述基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照的步骤包括：
加载用户页面的DOM元素，并对所述DOM元素进行快照抓取操作，获得第一页面快照；
实时监控所述DOM元素，在检测到所述DOM元素发生改变时，对改变后的所述DOM元素进行快照抓取操作，获得第二页面快照，并将所述第一页面快照和所述第二页面快照作为所述页面快照。
3.根据权利要求2所述的可视化用户操作回溯方法，其特征在于，所述在检测到所述DOM元素发生改变时，对改变后的所述DOM元素进行快照抓取操作，获得第二页面快照的步骤包括：
在检测到所述DOM元素发生改变时，将改变后的DOM元素作为目标DOM元素，将所述目标DOM元素中与所述DOM元素不同的数据作为差异数据；
对所述差异数据进行快照抓取操作，获得所述第二页面快照；
所述对所述序列化信息进行反序列化操作，获得目标快照的步骤包括：
对所述序列化信息进行反序列化操作，获得初始快照；
基于所述页面快照生成的时间顺序，对所述初始快照进行排序，获得初始快照序列，并将所述初始快照序列的第一个所述初始快照作为待替换快照；
确定与所述初始快照序列的第二个所述初始快照相对应的目标差异数据，并根据所述目标差异数据对所述待替换快照进行替换操作，得到与所述初始快照序列的第二个所述初始快照相对应的已替换快照；
从所述初始快照序列的第三个所述初始快照开始依次对相邻的上一个所述初始快照相对应的已替换快照执行所述替换操作，得到所有已替换快照，并将第一个所述初始快照和所有已替换快照作为所述目标快照。
4.根据权利要求1所述的可视化用户操作回溯方法，其特征在于，所述在接收到回溯请求时，从所述数据库中获取所述序列化信息的步骤包括：
在接收到回溯请求时，基于所述回溯请求进行权限校验和时间点校验，若效验通过，则从所述数据库中获取所述序列化信息。
5.根据权利要求1所述的可视化用户操作回溯方法，其特征在于，所述序列化所述页面快照，获得序列化信息的步骤包括：
去除所述页面快照的原始脚本模板，获得快照元素；
序列化所述快照元素，获得所述序列化信息。
6.根据权利要求5所述的可视化用户操作回溯方法，其特征在于，所述序列化所述快照元素，获得所述序列化信息的步骤包括：
通过预设的序列化函数对所述快照元素进行序列化操作，获得所述序列化信息。
7.根据权利要求1所述的可视化用户操作回溯方法，其特征在于，所述基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照的步骤包括：
检测所述用户页面是否为目标区域页面，在所述用户页面为目标区域页面时，基于用户页面的状态对所述用户页面进行快照抓取操作，获得所述页面快照。
8.一种可视化用户操作回溯装置，其特征在于，包括：
抓取模块，用于基于用户页面的状态对所述用户页面进行快照抓取操作，获得页面快照；
保存模块，用于序列化所述页面快照，获得序列化信息，并将所述序列化信息保存至数据库中；
生成模块，用于在接收到回溯请求时，从所述数据库中获取所述序列化信息，对所述序列化信息进行反序列化操作，获得目标快照，并基于所述目标快照生成回溯视频，将所述回溯视频展示在前端页面中。
9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的可视化用户操作回溯方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的可视化用户操作回溯方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111087182.7A CN113760825A (zh) | 2021-09-16 | 2021-09-16 | 可视化用户操作回溯方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111087182.7A CN113760825A (zh) | 2021-09-16 | 2021-09-16 | 可视化用户操作回溯方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113760825A true CN113760825A (zh) | 2021-12-07 |
Family
ID=78796028
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111087182.7A Pending CN113760825A (zh) | 2021-09-16 | 2021-09-16 | 可视化用户操作回溯方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113760825A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114861103A (zh) * | 2022-03-23 | 2022-08-05 | 易保网络技术(上海)有限公司 | 页面回溯方法及其装置、介质和电子设备 |
| CN115145800A (zh) * | 2022-08-29 | 2022-10-04 | 北京微吼时代科技有限公司 | 用于采集终端应用中用户操作行为的方法和装置 |
| CN116862677A (zh) * | 2023-09-04 | 2023-10-10 | 湖北微模式科技发展有限公司 | 一种具备检查功能的互联网交易可回溯方法及系统 |
| CN116862678A (zh) * | 2023-09-04 | 2023-10-10 | 湖北微模式科技发展有限公司 | 一种全证据链的互联网交易行为可回溯系统及方法 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110865843A (zh) * | 2018-08-09 | 2020-03-06 | 阿里巴巴集团控股有限公司 | 页面回溯、信息备份与问题解决方法、系统及设备 |
| CA3060771A1 (en) * | 2018-11-01 | 2020-05-01 | Bank Of Montreal | Systems and methods for generating a snapshot view of virtual infrastructure |
-
2021
- 2021-09-16 CN CN202111087182.7A patent/CN113760825A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110865843A (zh) * | 2018-08-09 | 2020-03-06 | 阿里巴巴集团控股有限公司 | 页面回溯、信息备份与问题解决方法、系统及设备 |
| CA3060771A1 (en) * | 2018-11-01 | 2020-05-01 | Bank Of Montreal | Systems and methods for generating a snapshot view of virtual infrastructure |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114861103A (zh) * | 2022-03-23 | 2022-08-05 | 易保网络技术(上海)有限公司 | 页面回溯方法及其装置、介质和电子设备 |
| CN114861103B (zh) * | 2022-03-23 | 2023-11-10 | 易保网络技术(上海)有限公司 | 页面回溯方法及其装置、介质和电子设备 |
| CN115145800A (zh) * | 2022-08-29 | 2022-10-04 | 北京微吼时代科技有限公司 | 用于采集终端应用中用户操作行为的方法和装置 |
| CN116862677A (zh) * | 2023-09-04 | 2023-10-10 | 湖北微模式科技发展有限公司 | 一种具备检查功能的互联网交易可回溯方法及系统 |
| CN116862678A (zh) * | 2023-09-04 | 2023-10-10 | 湖北微模式科技发展有限公司 | 一种全证据链的互联网交易行为可回溯系统及方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113760825A (zh) | 可视化用户操作回溯方法、装置、计算机设备及存储介质 | |
| CN112527816B (zh) | 数据血缘关系解析方法、系统、计算机设备及存储介质 | |
| CN112860662B (zh) | 自动化生产数据血缘关系建立方法、装置、计算机设备及存储介质 | |
| CN111797297B (zh) | 页面数据处理方法、装置、计算机设备及存储介质 | |
| CN112507141A (zh) | 调查任务生成方法、装置、计算机设备及存储介质 | |
| CN112286815A (zh) | 一种接口测试脚本的生成方法及其相关设备 | |
| CN116453125A (zh) | 基于人工智能的数据录入方法、装置、设备及存储介质 | |
| CN116774973A (zh) | 数据渲染方法、装置、计算机设备及存储介质 | |
| CN116383787A (zh) | 页面创建方法、装置、计算机设备及存储介质 | |
| CN116431731A (zh) | 数据异步导出方法、装置、设备及其存储介质 | |
| CN115757075A (zh) | 任务异常检测方法、装置、计算机设备及存储介质 | |
| CN115687826A (zh) | 页面刷新方法、装置、计算机设备及存储介质 | |
| CN115543565A (zh) | 任务处理方法、装置、计算机设备及存储介质 | |
| CN112086154A (zh) | 儿科信息智能建档方法、装置、设备及存储介质 | |
| CN116795882A (zh) | 数据获取方法、装置、计算机设备及存储介质 | |
| CN116738948A (zh) | 数据处理方法、装置、计算机设备及存储介质 | |
| CN116578630A (zh) | 数据采集方法、装置、计算机设备及存储介质 | |
| CN117235787A (zh) | 一种页面交互方法、装置、设备及其存储介质 | |
| CN115544419A (zh) | 埋点信息采集方法、装置、计算机设备及存储介质 | |
| CN117421233A (zh) | 基于注解的代码生成方法、装置、计算机设备及存储介质 | |
| CN117390119A (zh) | 任务处理方法、装置、计算机设备及存储介质 | |
| CN117034173A (zh) | 数据处理方法、装置、计算机设备及存储介质 | |
| CN112631572A (zh) | 基于移动端的代码展示方法、装置、设备及存储介质 | |
| CN117076595A (zh) | 基于人工智能的文本处理方法、装置、设备及存储介质 | |
| CN116431149A (zh) | 页面排版方法、装置、计算机设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20220602 Address after: 518000 China Aviation Center 2901, No. 1018, Huafu Road, Huahang community, Huaqiang North Street, Futian District, Shenzhen, Guangdong Province Applicant after: Shenzhen Ping An medical and Health Technology Service Co.,Ltd. Address before: Room 12G, Area H, 666 Beijing East Road, Huangpu District, Shanghai 200001 Applicant before: PING AN MEDICAL AND HEALTHCARE MANAGEMENT Co.,Ltd. |
|
| TA01 | Transfer of patent application right |