[发明专利]网页组件捕获、展示方法、装置及系统

说明书

本发明实施例提出网页组件捕获、展示方法、装置及系统。方法包括检测到Web页面被加载，获取所述Web页面所在的Web项目的配置信息，从所述Web项目的配置信息中获取所述Web项目的Web项目标识和所述Web页面的Web页面标识；获取所述Web页面包含的组件标识列表；周期性地遍历所述Web组件标识列表，根据遍历到的Web组件标识，获取Web组件的当前组件元素；将获取的所述Web组件的所述当前组件元素转换成对应的图片；将所述图片以及所述图片的标识信息发送给组件管理服务器，其中，所述图片的标识信息包括：所述图片对应的Web组件标识、所述图片对应的Web组件所在的所述Web页面标识和所述Web项目标识。本发明实施例实现了对网页组件的自动捕获。

技术领域

本发明实施例涉及网页组件捕获、展示方法、装置及系统。

背景技术

目前，网页开发者在开发网页时会把网页按模块或组件的形式进行切分，以减少开发独立内容之间的耦合度，提高复用性。但是在大的团队内，处于协作的开发者之间很难第一步了解到其他开发者所开发的模块或组件，极大地增加重复开发的可能性。

发明内容

本发明实施例提出网页组件捕获方法、装置、以及组件可视化展示方法、网页组件捕获及展示系统、非瞬时计算机可读存储介质和计算机程序产品，以实现对Web页面中的组件的自动捕获以及可视化展示。

本发明实施例的技术方案是这样实现的：

一种网页组件捕获方法，该方法包括：

检测到Web页面被加载，获取所述Web页面所在的Web项目的配置信息，从所述Web项目的配置信息中获取所述Web项目的Web项目标识和所述Web页面的Web页面标识；获取所述Web页面包含的组件标识列表；

周期性地遍历所述Web组件标识列表，根据遍历到的Web组件标识，获取Web组件的当前组件元素；

将获取的所述Web组件的所述当前组件元素转换成对应的图片；

将所述图片以及所述图片的标识信息发送给组件管理服务器，其中，所述图片的标识信息包括：所述图片对应的Web组件标识、所述图片对应的Web组件所在的所述Web页面标识和所述Web项目标识。

所述将获取的所述Web组件的所述当前组件元素转换成对应的图片，包括：

若所述Web组件标识列表中存在组件类型相同的多个组件，则将所述组件类型相同的多个组件的当前组件元素转换到一幅图片上。

所述检测到所述Web页面被加载之前，进一步包括：

所述Web项目启动，检测到当前处于所述Web项目的预发布环境。

所述将获取的所述Web组件的所述当前组件元素转换成对应的图片进一步包括：为所述图片打上组件标识和时间戳标志，

所述将该图片以及该图片的标识信息发送给组件管理服务器之前，进一步包括：

若当前同时有多幅图片生成，则查看每幅图片的组件标识和时间戳，判断是否存在组件标识和时间戳相同的图片，若存在，则对于组件标识和时间戳相同的图片，只保留其中的一幅图片。

所述图片的标识信息进一步包括：所述Web项目的作者、所述Web项目的创建时间、所述Web项目的修改时间、所述组件的捕获时间戳、所述组件的组件类型、所述组件的组件查找规则、所述组件的组件忽略规则、所述Web页面的路径之一或任意组合。

一种组件可视化展示方法，该方法包括：

组件管理服务器接收Web浏览器发来的图片及所述图片的标识信息；其中，所述图片的标识信息包括：所述图片对应的Web组件标识、所述图片对应的Web组件所在的Web页面标识和Web项目标识；