Web page component capture, display method, device and system

Abstract

The embodiment of the present invention proposes a method, device and system for capturing and displaying web page components. The method includes detecting that a web page is loaded, obtaining configuration information of a web project where the web page is located, obtaining a web project identifier of the web project and a web page identifier of the web page from the configuration information of the web project; obtaining a list of component identifiers contained in the web page; periodically traversing the list of web component identifiers, and obtaining the current component element of the web component according to the traversed web component identifiers; converting the obtained current component element of the web component into a corresponding image; sending the image and the identification information of the image to a component management server, wherein the identification information of the image includes: the web component identifier corresponding to the image, the web page identifier where the web component corresponding to the image is located, and the web project identifier. The embodiment of the present invention realizes the automatic capture of web page components.

Description

Technical Field

[0001] The embodiments of the present invention relate to a method, device and system for capturing and displaying web page components. Background Art

[0002] Currently, web developers divide web pages into modules or components when developing web pages to reduce the coupling between independent content and improve reusability. However, in a large team, it is difficult for developers in collaboration to first understand the modules or components developed by other developers, which greatly increases the possibility of duplicate development. Summary of the invention

[0003] The embodiments of the present invention provide a web page component capture method, device, component visualization method, web page component capture and display system, non-transitory computer-readable storage medium and computer program product to realize automatic capture and visualization of components in a web page.

[0004] The technical solution of the embodiment of the present invention is achieved as follows:

[0005] A web page component capturing method, the method comprising:

[0006] Detecting that a Web page is loaded, obtaining configuration information of a Web project where the Web page is located, obtaining a Web project identifier of the Web project and a Web page identifier of the Web page from the configuration information of the Web project; obtaining a component identifier list included in the Web page;

[0007] Periodically traverse the Web component identifier list, and obtain the current component element of the Web component according to the traversed Web component identifier;

[0008] Convert the obtained current component element of the Web component into a corresponding image;

[0009] The image and the identification information of the image are sent to a component management server, wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification.

[0010] The step of converting the acquired current component element of the Web component into a corresponding image includes:

[0011] If there are multiple components with the same component type in the Web component identification list, the current component elements of the multiple components with the same component type are converted to one picture.

[0012] Before detecting that the Web page is loaded, the method further includes:

[0013] The Web project is started, and it is detected that the Web project is currently in a pre-release environment.

[0014] The step of converting the acquired current component element of the Web component into a corresponding image further includes: marking the image with a component identifier and a timestamp,

[0015] Before sending the image and the identification information of the image to the component management server, the method further includes:

[0016] If multiple images are currently generated, the component identifier and timestamp of each image are checked to determine whether there are images with the same component identifier and timestamp. If so, only one of the images with the same component identifier and timestamp is retained.

[0017] The identification information of the image further includes: one or any combination of: the author of the Web project, the creation time of the Web project, the modification time of the Web project, the capture timestamp of the component, the component type of the component, the component search rule of the component, the component ignore rule of the component, and the path of the Web page.

[0018] A component visualization method, the method comprising:

[0019] The component management server receives the image and the identification information of the image sent by the Web browser; wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification;

[0020] The component management server stores the image in a file server, and writes the storage address of the image and the identification information of the image into the structured data of the web page where the web component corresponding to the image is located;

[0021] Furthermore, when the component management server receives a component display request carrying a Web project identifier, or carrying a Web project identifier and a Web page identifier from the visualization display platform, it searches for the Web project identifier, or searches for structured data corresponding to the Web project identifier and the Web page identifier, and returns the storage address of the image in the structured data to the visualization display platform, so that: the visualization display platform reads the image from the corresponding storage address and displays the image;

[0022] Among them, the picture and the identification information of the picture are: when the Web browser detects that a Web page is loaded, the Web project identification of the Web project and the Web page identification of the Web page are obtained from the configuration information of the Web project where the Web page is located; a component identification list contained in the Web page is obtained; the Web component identification list is periodically traversed, and the current component element of the Web component is obtained according to the traversed Web component identification; after converting the obtained current component element of the Web component into a corresponding picture, the picture and the identification information of the picture are sent to the component management server.

[0023] A web page component capturing device, the device comprising:

[0024] A configuration information acquisition module is used to detect that a Web page is loaded, acquire configuration information of a Web project where the Web page is located, acquire a Web project identifier of the Web project and a Web page identifier of the Web page from the configuration information of the Web project; and acquire a list of component identifiers included in the Web page;

[0025] The capture module is used to periodically traverse the Web component identification list, obtain the current component element of the Web component according to the traversed Web component identification; convert the obtained current component element of the Web component into a corresponding image; send the image and the identification information of the image to a component management server, wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification.

[0026] A web page component capture and display system, the system comprises the web page component capture device as described above, and further comprises: a component management server;

[0027] The component management server is used to store the image sent by the web page component capture device in a file server, and write the storage address of the image and the identification information of the image into the structured data of the web page where the web component corresponding to the image is located; and, when receiving a component display request carrying a web project identifier, or a web project identifier and a web page identifier from a visualization display platform, search for the web project identifier, or search for the structured data corresponding to the web project identifier and the web page identifier, and return the storage address of the image in the structured data to the visualization display platform, so that: the visualization display platform reads the image from the corresponding storage address and displays the image.

[0028] A non-transitory computer-readable storage medium stores instructions, which, when executed by a processor, cause the processor to execute the steps of the web page component capture method as described in any one of the above items, or to execute the steps of the component visualization display method as described in the above items.

[0029] A computer program product includes a computer program or instructions, which, when executed by a processor, implements the steps of the web page component capture method as described in any one of the above items, or implements the steps of the component visualization display method as described in the above items.

[0030] In the embodiment of the present invention, by periodically acquiring the component elements of each component on the web page and converting them into images, the components in the web page are automatically captured and the components are visually displayed, so that developers can intuitively understand the existing components based on the images corresponding to the components and avoid repeated development of the same component. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative labor.

[0032] Figure 1 A flow chart of a web page component capturing method provided by an embodiment of the present invention;

[0033] Figure 2 A flowchart of a component visualization method provided by an embodiment of the present invention;

[0034] Figure 3 A schematic diagram of the structure of a web page component capturing device provided by an embodiment of the present invention;

[0035] Figure 4 A schematic diagram of the structure of a web page component capture and display system provided by an embodiment of the present invention;

[0036] Figure 5 An exemplary structural diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0037] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0038] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein, for example. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products, or devices.

[0039] The technical solution of the present invention is described in detail with specific embodiments below. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0040] The embodiment of the present invention proposes a web page component capture method, in which a web page is detected to be loaded, the configuration information of the web project where the web page is located is obtained, the web project identifier of the web project and the web page identifier of the web page are obtained from the configuration information of the web project; a component identifier list contained in the web page is obtained; the web component identifier list is periodically traversed, and the current component element of the web component is obtained according to the traversed web component identifier; the current component element of the obtained web component is converted into a corresponding image; the image and the identification information of the image are sent to a component management server, wherein the identification information of the image includes: the web component identifier corresponding to the image, the web page identifier of the web component corresponding to the image, and the web project identifier, so that the component management server can visualize the image corresponding to the web component. The embodiment of the present invention realizes automatic capture and visual display of components in a web page.

[0041] Figure 1 A flowchart of a web page component capture method provided by an embodiment of the present invention, wherein the specific steps are as follows:

[0042] Step 101: Detect that a Web page is loaded, obtain configuration information of the Web project where the Web page is located, obtain the Web project identifier of the Web project and the Web page identifier of the Web page from the configuration information of the Web project; and obtain a component identifier list included in the Web page.

[0043] The configuration information of the Web project is saved in a known path, and the configuration information of the Web project can be obtained from the path.

[0044] The original data format of the configuration information of a Web project is generally in JSON format. The configuration information of a Web project may also include: the author of the Web project, the creation and / or modification time of the Web project, component type, component search rules, component ignore rules, optional parameters, extension fields, etc., or any combination thereof.

[0045] The page stack information can be used to obtain a list of component identifiers contained in the Web page, and also to obtain the path of the Web page.

[0046] Step 102: Periodically traverse the list of Web component identifiers included in the Web page, and obtain the current component element of the Web component according to the traversed Web component identifiers.

[0047] The current component elements include: display data of the current component, display style tags and CSS (Cascading Style Sheets) and the like.

[0048] Since a Web page may be updated over time, the component elements of each Web component may also be updated over time. Therefore, it is necessary to periodically obtain the current component elements of each Web component from the Web browser kernel.

[0049] Step 103: Convert the current component element of the acquired Web component into a corresponding image.

[0050] Specifically, the corresponding image is generated according to the display data, display style tags and CSS in the current component element. In practical applications, this process can be implemented using the html2canvas plug-in.

[0051] In an optional embodiment, in this step, converting the current component element of each acquired Web component into a corresponding image may include: if there are multiple components of the same component type in the Web component identification list, converting the current component elements of the multiple components of the same component type into one image.

[0052] Step 104: Send the image and the identification information of the image to the component management server, wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification.

[0053] Furthermore, the identification information of the image may also include: the author of the Web project, the creation and / or modification time of the Web project, the component type of the component, the component search rule of the component, the component ignore rule of the component, the path of the Web page, etc. or any combination thereof.

[0054] In the above embodiment, component elements of each component on the web page are periodically obtained and converted into images, thereby achieving automatic capture of components in the web page, thereby making it easier for developers to intuitively understand existing components based on the images corresponding to the components and avoiding repeated development of the same component.

[0055] Considering that the component capture process of steps 102-104 is performed periodically, and due to various reasons, the component capture speed of each cycle may be different, if the component capture speed of the previous cycle is slow, resulting in the component capture process of the previous cycle not being completed when the component capture process of the current cycle starts, the same component may be captured at the same time in the previous cycle and the current cycle, and two identical pictures may be generated for the same component. In order to avoid repeated reporting of the same picture of the same component, the embodiment of the present invention provides the following solution:

[0056] In an optional embodiment, step 103 further includes: marking the image with a component identifier and a timestamp, and, in step 104, before sending the image and the identification information of the image to the component management server, further includes: if multiple images are currently generated at the same time, checking the component identifier and timestamp of each image to determine whether there are images with the same component identifier and timestamp, and if so, retaining only one of the images with the same component identifier and timestamp.

[0057] In an optional embodiment, after executing step 101 and before executing step 102, a scheduled component capture task can be established, and then after each scheduled time is reached, the component capture task is executed through steps 102-104, and before the first Web page is closed, the scheduled component capture task is cleared.

[0058] In practical applications, in order to avoid the impact of the component capture process on the normal access performance of the Web page and to ensure the integrity of the component, the above component capture process is preferably performed in the pre-release environment of the Web project. That is, before step 101, it further includes: starting the first Web project and detecting that the current environment is the pre-release environment of the first Web project.

[0059] In an optional embodiment, steps 101-104 are performed by a web browser.

[0060] After the component capture message is uploaded to the component management server, the component management server performs storage and display processing of the component data.

[0061] Figure 2 A flowchart of a component visualization method provided by an embodiment of the present invention, wherein the specific steps are as follows:

[0062] Step 201: The component management server receives a picture and identification information of the picture sent by a Web browser, wherein the identification information of the picture includes: an identification of a Web component corresponding to the picture, an identification of a Web page where the Web component corresponding to the picture is located, and an identification of a Web project.

[0063] In actual applications, the Web browser may first send an image with a Web component identifier to a component management server. The component management server stores the image in a preset location, and then returns the Web component identifier corresponding to the image and the storage address of the image to the Web browser. The Web browser then collects the identification information of the image based on the Web component identifier, and then sends the storage address of the image and the identification information of the image to the component management server. The component management server may put the received storage address of the image and the identification information of the image into a task queue, and read the storage address of the image and the identification information of the image from the task queue in a timed batch manner.

[0064] Step 202: The component management server stores the image in the file server, and writes the identification information of the image into the structured data of the Web page.

[0065] That is, the component data of all components belonging to the same Web page (including: Web component identifier, storage address of the image corresponding to the Web component, Web page identifier where the Web component is located, and Web project identifier) ​​are placed in the same structured data, thereby facilitating subsequent retrieval with the Web page as the index.

[0066] Step 203: The component management server puts the structured data of the Web page into a database.

[0067] Step 204: The component management server receives a component display request carrying a Web project identifier, or a Web project identifier and a Web page identifier from the visualization display platform, searches for the Web project identifier, or the structured data corresponding to the Web project identifier and the Web page identifier in the database, and returns the storage address of the image in the structured data to the visualization display platform.

[0068] The component management server may return the identification information of the image (including: the Web component identification, the Web page identification where the Web component is located, the Web project identification, etc.) to the visualization display platform.

[0069] Step 205: The visualization display platform receives the storage address of the image, reads the image from the corresponding storage address, and displays the image.

[0070] In actual applications, the visualization display platform can also support images input in a pluggable form, and carry the image in the component display request to send it to the component management server. After receiving the image, the component management server obtains the storage address of each image from the structured data in the database, and then obtains each image from the corresponding storage address, matches each image with the input image, and returns the storage address of the matched image and the identification information of the image (including: Web component identification, Web page identification where the Web component is located, Web project identification, etc.) to the visualization display platform.

[0071] The above embodiment displays the pictures corresponding to the components to the users, so that the users can intuitively understand the functions of the components, reduce development duplication, save the development costs of developers and improve the team efficiency.

[0072] Figure 3 This is a schematic diagram of the structure of a web page component capturing device 30 provided in an embodiment of the present invention. The device mainly comprises: a configuration information acquisition module 31 and a capturing module 32, wherein:

[0073] The configuration information acquisition module 31 is used to detect that a Web page is loaded, obtain the configuration information of the Web project where the Web page is located, obtain the Web project identifier of the Web project and the Web page identifier of the Web page from the configuration information of the Web project; and obtain a list of component identifiers contained in the Web page.

[0074] The capture module 32 is used to periodically traverse the Web component identification list, obtain the current component element of the Web component according to the traversed Web component identification; convert the obtained current component element of the Web component into a corresponding image; send the image and the identification information of the image to the component management server, wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification.

[0075] In an optional embodiment, the capture module 32 converts the current component element of the acquired Web component into a corresponding image, including: if there are multiple components of the same component type in the Web component identification list, converting the current component elements of the multiple components of the same component type into one image.

[0076] In an optional embodiment, before the configuration information acquisition module 31 detects that the Web page is loaded, the following further comprises: starting the Web project and detecting that the Web project is currently in a pre-release environment.

[0077] In an optional embodiment, the capture module 32 converts the acquired current component element of the Web component into a corresponding image further comprising: marking the image with a component identifier and a timestamp,

[0078] Before the capture module 32 sends the image and the identification information of the image to the component management server, the capture module 32 further includes:

[0079] If multiple images are currently generated, the component identifier and timestamp of each image are checked to determine whether there are images with the same component identifier and timestamp. If so, only one of the images with the same component identifier and timestamp is retained.

[0080] In an optional embodiment, the identification information of the image sent by the capture module 32 further includes: the author of the Web project, the creation time of the Web project, the modification time of the Web project, the capture timestamp of the component, the component type of the component, the component search rule of the component, the component ignore rule of the component, one or any combination of the path of the Web page.

[0081] Figure 4 A schematic diagram of the structure of a webpage component capture and display system 40 provided in an embodiment of the present invention, the device mainly comprises: the webpage component capture device 30 mentioned above, and also comprises: a component management server 41;

[0082] The component management server 41 is used to store the image sent by the web page component capture device 30 in the file server, and write the storage address of the image and the identification information of the image into the structured data of the web page where the web component corresponding to the image is located; and, when receiving a component display request carrying a Web project identifier, or a Web project identifier and a Web page identifier from the visualization display platform, it searches for the Web project identifier, or searches for the structured data corresponding to the Web project identifier and the Web page identifier, and returns the storage address of the image in the structured data to the visualization display platform, so that: the visualization display platform reads the image from the corresponding storage address and displays the image.

[0083] An embodiment of the present application also provides a computer program product, including a computer program or instructions, which, when executed by a processor, implements the steps of the web page component capture method described in any of the above embodiments, or implements the component visualization display method described in any of the above embodiments.

[0084] The embodiment of the present application also provides a computer-readable storage medium, which stores instructions, and the instructions, when executed by a processor, can execute the web page component capture method as described above, or execute the steps in the component visualization display method as described above. In practical applications, the computer-readable medium can be included in each device / apparatus / system in the above embodiments, or it can exist independently without being assembled into the device / apparatus / system. Among them, instructions are stored in a computer-readable storage medium, and the instructions stored therein can execute the web page component capture method as described above, or execute the steps in the component visualization display method as described above, when executed by a processor.

[0085] According to the embodiments disclosed in the present application, the computer-readable storage medium may be a non-volatile computer-readable storage medium, for example, it may include but is not limited to: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof, but it is not used to limit the scope of protection of the present application. In the embodiments disclosed in the present application, the computer-readable storage medium may be any tangible medium containing or storing a program, which may be used by or in combination with an instruction execution system, apparatus, or device.

[0086] like Figure 5 As shown, an embodiment of the present invention also provides an electronic device. Figure 5 As shown, it shows a schematic diagram of the structure of an electronic device involved in an embodiment of the present invention, specifically:

[0087] The electronic device may include a processor 51 with one or more processing cores, a memory 52 with one or more computer-readable storage media, and a computer program stored in the memory and executable on the processor. When executing the program in the memory 52, the webpage component capture method or the component visualization display method may be implemented.

[0088] Specifically, in practical applications, the electronic device may further include components such as a power supply 53, an input / output unit 54, etc. Those skilled in the art may understand that Figure 5 The structure of the electronic device shown in the figure does not constitute a limitation on the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0089] The processor 51 is the control center of the electronic device. It uses various interfaces and lines to connect various parts of the entire electronic device. It executes various functions of the server and processes data by running or executing software programs and / or modules stored in the memory 52 and calling data stored in the memory 52, thereby monitoring the electronic device as a whole.

[0090] The memory 52 can be used to store software programs and modules, that is, the above-mentioned computer-readable storage medium. The processor 51 executes various functional applications and data processing by running the software programs and modules stored in the memory 52. ​​The memory 52 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function, etc.; the data storage area may store data created according to the use of the server, etc. In addition, the memory 52 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 52 may also include a memory controller to provide the processor 51 with access to the memory 52.

[0091] The electronic device also includes a power supply 53 for supplying power to various components, which can be logically connected to the processor 51 through a power management system, so as to manage charging, discharging, power consumption and other functions through the power management system. The power supply 53 can also include one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, power status indicators and other arbitrary components.

[0092] The electronic device may also include an input and output unit 54, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control. The input unit output 54 may also be used to display information input by the user or information provided to the user and various graphical user interfaces, which may be composed of graphics, text, icons, videos and any combination thereof.

[0093] The flow chart and block diagram in the accompanying drawings of the present application show the possible architecture, function and operation of the system, method and computer program product according to the various embodiments disclosed in the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the above-mentioned module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the box can also occur in the order of the standards in different figures. For example, the boxes represented by two connections can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0094] Those skilled in the art will appreciate that the features described in the various embodiments and / or claims of the present disclosure may be combined and / or combined in a variety of ways, even if such combinations or combinations are not explicitly described in the present application. In particular, without departing from the spirit and teachings of the present application, the features described in the various embodiments and / or claims of the present application may be combined and / or combined in a variety of ways, and all of these combinations and / or combinations fall within the scope disclosed in the present application.

[0095] Specific embodiments are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core ideas, and is not used to limit the present application. For those skilled in the art, changes can be made in the specific implementation methods and application scopes according to the ideas, spirits and principles of the present invention, and any modifications, equivalent substitutions, improvements, etc. made therein should be included in the scope of protection of this application.

Claims

1. A web page component capture method, characterized in that: The method includes: Detecting that a Web page is loaded, obtaining configuration information of a Web project where the Web page is located, obtaining a Web project identifier of the Web project and a Web page identifier of the Web page from the configuration information of the Web project; obtaining a list of Web component identifiers included in the Web page; Periodically traverse the Web component identifier list, and obtain the current component element of the Web component according to the traversed Web component identifier; Convert the obtained current component element of the Web component into a corresponding image; The image and the identification information of the image are sent to a component management server, wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification.

2. The webpage component capture method according to claim 1, characterized in that: The step of converting the acquired current component element of the Web component into a corresponding image includes: If there are multiple components with the same component type in the Web component identification list, the current component elements of the multiple components with the same component type are converted to one picture.

3. The webpage component capture method according to claim 1, characterized in that: Before detecting that the web page is loaded, the method further includes: The Web project is started, and it is detected that the Web project is currently in a pre-release environment.

4. The web page component capture method according to claim 1, characterized in that: The step of converting the acquired current component element of the Web component into a corresponding image further includes: marking the image with a component identifier and a timestamp, Before sending the picture and the identification information of the picture to the component management server, the method further includes: If multiple images are currently generated, the component identifier and timestamp of each image are checked to determine whether there are images with the same component identifier and timestamp. If so, only one of the images with the same component identifier and timestamp is retained.

5. The webpage component capture method according to claim 1, characterized in that: The identification information of the image further includes: one or any combination of: the author of the Web project, the creation time of the Web project, the modification time of the Web project, the capture timestamp of the component, the component type of the component, the component search rule of the component, the component ignore rule of the component, and the path of the Web page.

6. A component visualization display method, characterized in that: The method includes: The component management server receives the image and the identification information of the image sent by the Web browser; wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification; The component management server stores the image in a file server, and writes the storage address of the image and the identification information of the image into the structured data of the web page where the web component corresponding to the image is located; Furthermore, when the component management server receives a component display request carrying a Web project identifier, or carrying a Web project identifier and a Web page identifier from the visualization display platform, it searches for the Web project identifier, or searches for structured data corresponding to the Web project identifier and the Web page identifier, and returns the storage address of the image in the structured data to the visualization display platform, so that: the visualization display platform reads the image from the corresponding storage address and displays the image; Among them, the picture and the identification information of the picture are: when the Web browser detects that a Web page is loaded, the Web project identification of the Web project and the Web page identification of the Web page are obtained from the configuration information of the Web project where the Web page is located; the Web component identification list contained in the Web page is obtained; the Web component identification list is periodically traversed, and the current component element of the Web component is obtained according to the traversed Web component identification; after converting the obtained current component element of the Web component into a corresponding picture, the picture and the identification information of the picture are sent to the component management server.

7. A web page component capture device, characterized in that: The device includes: A configuration information acquisition module, used to detect that a Web page is loaded, acquire configuration information of a Web project where the Web page is located, acquire a Web project identifier of the Web project and a Web page identifier of the Web page from the configuration information of the Web project; and acquire a list of Web component identifiers contained in the Web page; The capture module is used to periodically traverse the Web component identification list, obtain the current component element of the Web component according to the traversed Web component identification; convert the obtained current component element of the Web component into a corresponding image; send the image and the identification information of the image to a component management server, wherein the identification information of the image includes: the Web component identification corresponding to the image, the Web page identification where the Web component corresponding to the image is located, and the Web project identification.

8. A web page component capture and display system, characterized in that: The system comprises the webpage component capturing device as claimed in claim 7, and further comprises: a component management server; The component management server is used to store the image sent by the web page component capture device in a file server, and write the storage address of the image and the identification information of the image into the structured data of the web page where the web component corresponding to the image is located; and, when receiving a component display request carrying a web project identifier, or a web project identifier and a web page identifier from a visualization display platform, search for the web project identifier, or search for the structured data corresponding to the web project identifier and the web page identifier, and return the storage address of the image in the structured data to the visualization display platform, so that: the visualization display platform reads the image from the corresponding storage address and displays the image.

9. A non-transitory computer-readable storage medium storing instructions, characterized in that: When the instructions are executed by a processor, the processor executes the steps of the web page component capturing method as described in any one of claims 1 to 5, or executes the steps of the component visual display method as described in claim 6.

10. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed by a processor, the steps of the web page component capturing method as described in any one of claims 1 to 5 are implemented, or the steps of the component visual display method as described in claim 6 are implemented.

Images