CN114201168A - Webpage component capturing and displaying method, device and system - Google Patents

Webpage component capturing and displaying method, device and system Download PDF

Info

Publication number
CN114201168A
CN114201168A CN202111520516.5A CN202111520516A CN114201168A CN 114201168 A CN114201168 A CN 114201168A CN 202111520516 A CN202111520516 A CN 202111520516A CN 114201168 A CN114201168 A CN 114201168A
Authority
CN
China
Prior art keywords
web
component
picture
web page
identifier
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
Application number
CN202111520516.5A
Other languages
Chinese (zh)
Inventor
崔艺宝
郑菁园
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shell Housing Network Beijing Information Technology Co Ltd
Original Assignee
Shell Housing Network Beijing Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shell Housing Network Beijing Information Technology Co Ltd filed Critical Shell Housing Network Beijing Information Technology Co Ltd
Priority to CN202111520516.5A priority Critical patent/CN114201168A/en
Publication of CN114201168A publication Critical patent/CN114201168A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The embodiment of the invention provides a method, a device and a system for capturing and displaying a webpage component. The method comprises the steps of detecting that a Web page is loaded, acquiring configuration information of a Web item where the Web page is located, and acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from the configuration information of the Web item; acquiring a component identification list contained in the Web page; periodically traversing the Web component identification list, and acquiring the current component element of the Web component according to the traversed Web component identification; converting the acquired current component element of the Web component into a corresponding picture; sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the Web component identification corresponding to the picture, the Web page identification where the Web component corresponding to the picture is located and the Web project identification. The embodiment of the invention realizes the automatic capture of the webpage components.

Description

Webpage component capturing and displaying method, device and system
Technical Field
The embodiment of the invention relates to a method, a device and a system for capturing and displaying a webpage component.
Background
Currently, a web page developer can segment web pages according to the form of modules or components when developing the web pages, so as to reduce the coupling degree between the development independent contents and improve the reusability. But within a large team, it is difficult for developers in collaboration to learn about modules or components developed by other developers in a first step, greatly increasing the likelihood of repeated development.
Disclosure of Invention
The embodiment of the invention provides a webpage component capturing method, a webpage component capturing device, a component visual display method, a webpage component capturing and displaying system, a non-transitory computer readable storage medium and a computer program product, so as to realize automatic capturing and visual display of components in a Web page.
The technical scheme of the embodiment of the invention is realized as follows:
a web page component capture method, the method comprising:
the method comprises the steps of detecting that a Web page is loaded, acquiring configuration information of a Web item where the Web page is located, and acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from the configuration information of the Web item; acquiring a component identification list contained in the Web page;
periodically traversing the Web component identification list, and acquiring the current component element of the Web component according to the traversed Web component identification;
converting the acquired current component element of the Web component into a corresponding picture;
sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the Web component identification corresponding to the picture, the Web page identification where the Web component corresponding to the picture is located and the Web project identification.
The converting the acquired current component element of the Web component into a corresponding picture includes:
and if a plurality of components with the same component type exist in the Web component identification list, converting the current component elements of the components with the same component type into a picture.
Before the detecting that the Web page is loaded, further comprising:
and starting the Web item, and detecting that the Web item is currently in a pre-release environment of the Web item.
The converting the obtained current component element of the Web component into a corresponding picture further comprises: marking the picture with a component identifier and a timestamp mark,
before sending the picture and the identification information of the picture to the component management server, the method further includes:
if a plurality of pictures are generated at the same time, checking the component identifier and the timestamp of each picture, judging whether the pictures with the same component identifier and timestamp exist, and if so, only keeping one picture for the pictures with the same component identifier and timestamp.
The identification information of the picture further comprises: 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 of or any combination of paths of the Web page.
A visual component display method, the method comprising:
the method comprises the steps that a component management server receives a picture sent by a Web browser and identification information of the picture; wherein the identification information of the picture comprises: the Web component identification corresponding to the picture, the Web page identification and the Web project identification of the Web component corresponding to the picture;
the component management server stores the picture in a file server, and writes the storage address of the picture and the identification information of the picture into the structural data of the Web page where the Web component corresponding to the picture is located;
and when the component management server receives a component display request which is sent by the visual display platform and carries a Web item identifier or a Web item identifier and a Web page identifier, searching the Web item identifier or structural data corresponding to the Web item identifier and the Web page identifier, and returning a storage address of a picture in the structural data to the visual display platform so as to enable: the visual display platform reads the pictures from the corresponding storage addresses and displays the pictures;
wherein the picture and the identification information of the picture are: when the Web browser detects that a Web page is loaded, acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from configuration information of a Web item where the Web page is located; acquiring a component identification list contained in the Web page; periodically traversing the Web component identification list, and acquiring the current component element of the Web component according to the traversed Web component identification; and after converting the acquired current component element of the Web component into a corresponding picture, sending the picture and the identification information of the picture to a component management server.
A web page component capture apparatus, the apparatus comprising:
the configuration information acquisition module is used for detecting that a Web page is loaded, acquiring configuration information of a Web item where the Web page is located, and acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from the configuration information of the Web item; acquiring a component identification list contained in the Web page;
the acquisition module is used for periodically traversing the Web component identification list and acquiring the current component element of the Web component according to the traversed Web component identification; converting the acquired current component element of the Web component into a corresponding picture; sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the image comprises a Web component identifier corresponding to the image, a Web page identifier and a Web project identifier, wherein the Web component identifier corresponds to the image, and the Web page identifier and the Web project identifier are located on the Web component corresponding to the image.
A web page component capturing and displaying system, the system comprising the web page component capturing device as described above, further comprising: a component management server;
the component management server is used for storing the picture sent by the webpage component capturing device into a file server, and writing the storage address of the picture and the identification information of the picture into the structural data of the Web page where the Web component corresponding to the picture is located; and when receiving an assembly display request which is sent by a visual display platform and carries a Web item identifier, or carries the Web item identifier and a Web page identifier, searching the Web item identifier, or searching the structural data corresponding to the Web item identifier and the Web page identifier, and returning a storage address of a picture in the structural data to the visual display platform so as to enable: and the visual display platform reads the pictures from the corresponding storage addresses and displays the pictures.
A non-transitory computer readable storage medium storing instructions that, when executed by a processor, cause the processor to perform the steps of the web page component capture method as described in any one of the above, or to perform the steps of the component visualization method as described above.
A computer program product comprising a computer program or instructions which, when executed by a processor, carries out the steps of the web page component capturing method as defined in any one of the preceding claims, or the steps of the component visual presentation method as defined in any one of the preceding claims.
In the embodiment of the invention, the component elements of each component on the webpage are periodically acquired and converted into the pictures, so that the components in the Web page are automatically captured, and the visual display of the components is realized, so that a developer can intuitively know the existing components according to the pictures corresponding to the components, and the repeated development of the same component is avoided.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive labor.
FIG. 1 is a flowchart of a web page component capturing method according to an embodiment of the present invention;
FIG. 2 is a flowchart of a method for visually displaying components according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a web page component capturing apparatus according to an embodiment of the present invention;
FIG. 4 is a schematic structural diagram of a web page component capturing and displaying system according to an embodiment of the present invention;
fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The terms "first," "second," "third," "fourth," and the like in the description and in the claims, as well as in the drawings, if any, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are, for example, capable of operation in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprising" and "having," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements explicitly listed, but may include other steps or elements not explicitly listed or inherent to such process, method, article, or apparatus.
The technical solution of the present invention will be described in detail with specific examples. Several of the following embodiments may be combined with each other and some details of the same or similar concepts or processes may not be repeated in some embodiments.
The embodiment of the invention provides a webpage component capturing method, wherein a Web page is detected to be loaded, the configuration information of a Web project where the Web page is located is obtained, and a Web project identifier of the Web project and a Web page identifier of the Web page are obtained from the configuration information of the Web project; acquiring a component identification list contained in the Web page; periodically traversing the Web component identification list, and acquiring the current component element of the Web component according to the traversed Web component identification; converting the acquired current component element of the Web component into a corresponding picture; sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the image management server displays the image corresponding to the Web component visually, and the image corresponding to the image is displayed visually by the Web component identifier, the Web page identifier where the Web component corresponding to the image is located and the Web project identifier. The embodiment of the invention realizes automatic capture and visual display of the components in the Web page.
Fig. 1 is a flowchart of a web page component capturing method according to an embodiment of the present invention, which includes the following steps:
step 101: detecting that a Web page is loaded, acquiring configuration information of a Web item where the Web page is located, and acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from the configuration information of the Web item; and acquiring a component identification list contained in the Web page.
The configuration information of the Web item may be stored in a known path, and the configuration information of the Web item may be acquired from the path.
The original data format of the configuration information of the Web project is generally JSON format, and the configuration information of the Web project may further include: the author of the Web item, the creation or/and modification time of the Web item, the component type, the component lookup rules, the component ignore rules, optional parameters, extension fields, and the like, in one or any combination.
The component identifier list contained in the Web page can be obtained through the page stack information, and the path of the Web page can also be obtained.
Step 102: and periodically traversing the Web component identification list contained in the Web page, and acquiring the current component element of the Web component according to the traversed Web component identification.
The current component elements include: presentation data of the current component, presentation Style labels, and CSS (Cascading Style Sheets), etc.
Since Web pages may be updated over time, the component elements of each Web component may also be updated over time, and thus, the current component elements of each Web component need to be periodically retrieved from the Web browser kernel.
Step 103: and converting the acquired current component element of the Web component into a corresponding picture.
Specifically, a corresponding picture is generated according to the presentation data, the presentation style tag and the CSS in the current component element, and in practical application, the process can be implemented by using an html2canvas plug-in.
In an optional embodiment, in this step, converting the obtained current component element of each Web component into a corresponding picture may include: and if a plurality of components with the same component type exist in the Web component identification list, converting the current component elements of the components with the same component type to a picture.
Step 104: sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the picture comprises a Web component identifier corresponding to the picture, a Web page identifier and a Web project identifier, wherein the Web component identifier corresponds to the picture, and the Web page identifier and the Web project identifier are located on the Web component corresponding to the picture.
Further, the identification information of the picture may further include: the author of the Web project, the creation or/and modification time of the Web project, the component type of the component, the component lookup rule of the component, the component ignore rule of the component, the path of the Web page, and the like.
In the embodiment, the component elements of each component on the webpage are periodically acquired and converted into the pictures, so that the components in the Web page are automatically captured, developers can intuitively know the existing components according to the pictures corresponding to the components, and the same component is prevented from being repeatedly developed.
Consider that: the component capturing process of step 102-104 is performed periodically, and for various reasons, the component capturing speed of each period may not be the same, and if the component capturing speed of the previous period is slow, so that the component capturing process of the previous period is still not completed when the component capturing process of the current period starts, a situation that the previous period and the current period capture the same component at the same time may occur, and at this time, two identical pictures may be generated for the same component, and in order to avoid repeated reporting of the identical pictures for the same component, the embodiment of the present invention provides the following solutions:
in an alternative embodiment, step 103 further comprises: printing the component identifier and the timestamp flag for the picture, and before sending the picture and the identifier information of the picture to the component management server in step 104, further comprising: if a plurality of pictures are generated at the same time, checking the component identifier and the timestamp of each picture, judging whether the pictures with the same component identifier and timestamp exist, and if so, only keeping one picture for the pictures with the same component identifier and timestamp.
In an alternative embodiment, after the step 101 is executed and before the step 102 is executed, a timing component capturing task may be established, and then after each timing time is reached, the component capturing task is executed in the step 102 and 104, and the timing component capturing task is cleared before the first Web page is closed.
In practical applications, in order to avoid the influence of the component capture process on the normal access performance of the Web page and ensure the integrity of the components, the component capture process is preferably performed in a pre-release environment of the Web project. Namely, before step 101, the method further comprises: the first Web item is started, and the pre-release environment of the first Web item is detected.
In an optional embodiment, the execution subject of step 101-104 is a Web browser.
And after the component capture message is uploaded to the component management server, the component management server stores and displays the component data.
Fig. 2 is a flowchart of a visual display method for components according to an embodiment of the present invention, which includes the following specific steps:
step 201: the method comprises the following steps that a component management server receives a picture sent by a Web browser and identification information of the picture, wherein the identification information of the picture comprises: the picture comprises a Web component identifier corresponding to the picture, a Web page identifier and a Web project identifier, wherein the Web component identifier corresponds to the picture, and the Web page identifier and the Web project identifier are located on the Web component corresponding to the picture.
In practical application, the Web browser may also send a picture with a Web component identifier to the component management server, the component management server stores the picture to a preset position, then returns the Web component identifier corresponding to the picture and the storage address of the picture to the Web browser, the Web browser collects the identifier information of the picture according to the Web component identifier, then sends the storage address of the picture and the identifier information of the picture to the component management server, the component management server may place the received storage address of the picture and the received identifier information of the picture in a task queue, and reads the storage address of the picture and the identifier information of the picture from the task queue in a timed batch manner.
Step 202: and the component management server stores the picture in a file server and writes the identification information of the picture into the structural data of the Web page.
That is, the component data (including the Web component identifier, the storage address of the picture corresponding to the Web component, the Web page identifier where the Web component is located, and the Web item identifier) of all the components belonging to the same Web page are placed in the same structured data, so that subsequent retrieval with the Web page as an index is facilitated.
Step 203: the component management server puts the structured data of the Web page into a database.
Step 204: the method comprises the steps that a component management server receives a component display request which is sent by a visual display platform and carries a Web project identifier or a Web project identifier and a Web page identifier, searches a database for the Web project identifier or structured data corresponding to the Web project identifier and the Web page identifier, and returns a storage address of a picture in the structured data to the visual display platform.
The component management server can return the identification information of the picture (including the Web component identification, the Web page identification and the Web project identification where the Web component is located, and the like) to the visual display platform.
Step 205: and the visual display platform receives the storage address of the picture, reads the picture from the corresponding storage address and displays the picture.
In practical application, the visual display platform can also support pictures input in a pluggable form, the pictures are carried in a component display request and sent to the component management server, after the component management server receives the pictures, the storage address of each picture is obtained from the structured data of the database, then each picture is obtained from the corresponding storage address, each picture is matched with the input picture, and the storage address of the matched picture and the identification information (including Web component identification, Web page identification and Web item identification where the Web component is located, and the like) of the picture are returned to the visual display platform.
According to the embodiment, the picture corresponding to the component is displayed to the user, so that the user can visually know the function of the component, the development repeatability is reduced, the development cost of developers is saved, and the team efficiency is improved.
Fig. 3 is a schematic structural diagram of a web page component capturing apparatus 30 according to an embodiment of the present invention, which mainly includes: a configuration information acquisition module 31 and a capture module 32, wherein:
a configuration information obtaining module 31, configured to detect that a Web page is loaded, obtain configuration information of a Web item where the Web page is located, and obtain a Web item identifier of the Web item and a Web page identifier of the Web page from the configuration information of the Web item; and acquiring a component identification list contained in the Web page.
The capturing module 32 is configured to periodically traverse the Web component identifier list, and obtain a current component element of the Web component according to the traversed Web component identifier; converting the acquired current component element of the Web component into a corresponding picture; sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the picture comprises a Web component identifier corresponding to the picture, a Web page identifier and a Web project identifier, wherein the Web component identifier corresponds to the picture, and the Web page identifier and the Web project identifier are located on the Web component corresponding to the picture.
In an optional embodiment, the capturing module 32 converts the acquired current component element of the Web component into a corresponding picture, including: and if a plurality of components with the same component type exist in the Web component identification list, converting the current component elements of the plurality of components with the same component type onto one picture.
In an optional embodiment, before the configuration information obtaining module 31 detects that the Web page is loaded, the method further includes: and starting the Web item, and detecting that the Web item is currently in a pre-release environment of the Web item.
In an optional embodiment, the capturing module 32 converting the acquired current component element of the Web component into a corresponding picture further includes: the picture is marked with a component identifier and a timestamp,
before the capturing module 32 sends the picture and the identification information of the picture to the component management server, the method further includes:
if a plurality of pictures are generated at the same time, checking the component identifier and the timestamp of each picture, judging whether the pictures with the same component identifier and timestamp exist, and if so, only keeping one picture for the pictures with the same component identifier and timestamp.
In an optional embodiment, the identification information of the picture sent by the capturing module 32 further includes: the Web project author, the Web project creation time, the Web project modification time, the component capture timestamp, the component type, the component lookup rule, the component ignore rule, the Web page path, or any combination thereof.
Fig. 4 is a schematic structural diagram of a web page component capturing and displaying system 40 according to an embodiment of the present invention, where the apparatus mainly includes: the web page component capturing apparatus 30 further includes: the component management server 41;
the component management server 41 is configured to store the picture sent by the Web component capturing apparatus 30 in a file server, and write the storage address of the picture and the identification information of the picture into the structured data of the Web page where the Web component corresponding to the picture is located; and when receiving an assembly display request which is sent by the visual display platform and carries a Web item identifier, or carries the Web item identifier and a Web page identifier, searching the Web item identifier, or searching the structural data corresponding to the Web item identifier and the Web page identifier, and returning the storage address of the picture in the structural data to the visual display platform so as to enable: and the visual display platform reads the pictures from the corresponding storage addresses and displays the pictures.
The present application further provides a computer program product, which includes a computer program or instructions, and when the computer program or instructions is executed by a processor, the steps of the webpage component capturing method according to any one of the above embodiments are implemented, or the visual component displaying method according to any one of the above embodiments is implemented.
Embodiments of the present application also provide a computer-readable storage medium storing instructions, which when executed by a processor may perform the webpage component capturing method as described above, or perform the steps in the component visualization presentation method as described above. In practical applications, the computer readable medium may be included in each device/apparatus/system of the above embodiments, or may exist separately and not be assembled into the device/apparatus/system. Wherein instructions are stored in a computer readable storage medium, which stored instructions, when executed by a processor, may perform a method such as web page component capture or perform steps in a method such as component visualization presentation.
According to embodiments disclosed herein, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example and without limitation: a portable computer diskette, 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing, without limiting the scope of the present disclosure. In the embodiments disclosed herein, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
As shown in fig. 5, an embodiment of the present invention further provides an electronic device. As shown in fig. 5, a schematic structural diagram of an electronic device according to an embodiment of the present invention is shown, specifically:
the electronic device may include a processor 51 of one or more processing cores, memory 52 of one or more computer-readable storage media, and a computer program stored on the memory and executable on the processor. The above-mentioned web page component capturing method or the above-mentioned visual component displaying method may be implemented when the program of the memory 52 is executed.
Specifically, in practical applications, the electronic device may further include a power supply 53, an input/output unit 54, and the like. Those skilled in the art will appreciate that the configuration of the electronic device shown in fig. 5 is not intended to be limiting of the electronic device and may include more or fewer components than shown, or some components in combination, or a different arrangement of components. Wherein:
the processor 51 is a control center of the electronic device, connects various parts of the entire electronic device using various interfaces and lines, and performs 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 performing overall monitoring of the electronic device.
The memory 52 may be used to store software programs and modules, i.e., the computer-readable storage media described above. The processor 51 executes various functional applications and data processing by executing software programs and modules stored in the memory 52. The memory 52 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function, and the like; the storage data area may store data created according to the use of the server, and the like. Further, the memory 52 may include high speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device. Accordingly, the memory 52 may also include a memory controller to provide the processor 51 access to the memory 52.
The electronic device further comprises a power supply 53 for supplying power to the various components, which can be logically connected to the processor 51 through a power management system, so as to implement functions of managing charging, discharging, and power consumption through the power management system. The power supply 53 may also include any component including one or more dc or ac power sources, recharging systems, power failure detection circuitry, power converters or inverters, power status indicators, and the like.
The electronic device may also include an input-output unit 54, the input unit output 54 operable to receive input numeric 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 or provided to the user as well as various graphical user interfaces, which may be composed of graphics, text, icons, video, and any combination thereof.
The flowchart and block diagrams in the figures of the present application illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments disclosed herein. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
Those skilled in the art will appreciate that various combinations and/or combinations of features recited in the various embodiments and/or claims of the present disclosure can be made, even if such combinations or combinations are not explicitly recited in the present application. In particular, the features recited in the various embodiments and/or claims of the present application may be combined and/or coupled in various ways, all of which fall within the scope of the present disclosure, without departing from the spirit and teachings of the present application.
The principles and embodiments of the present invention are explained herein using specific examples, which are provided only to help understanding the method and the core idea of the present invention, and are not intended to limit the present application. It will be appreciated by those skilled in the art that changes may be made in this embodiment and its broader aspects and without departing from the principles, spirit and scope of the invention, and that all such modifications, equivalents, improvements and equivalents as may be included within the scope of the invention are intended to be protected by the claims.

Claims (10)

1. A web page component capturing method, characterized in that the method comprises:
the method comprises the steps of detecting that a Web page is loaded, acquiring configuration information of a Web item where the Web page is located, and acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from the configuration information of the Web item; acquiring a component identification list contained in the Web page;
periodically traversing the Web component identification list, and acquiring the current component element of the Web component according to the traversed Web component identification;
converting the acquired current component element of the Web component into a corresponding picture;
sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the Web component identification corresponding to the picture, the Web page identification where the Web component corresponding to the picture is located and the Web project identification.
2. The method of claim 1, wherein the converting the obtained current component element of the Web component into a corresponding picture comprises:
and if a plurality of components with the same component type exist in the Web component identification list, converting the current component elements of the components with the same component type into a picture.
3. The method of claim 1, wherein before the detecting that the Web page is loaded, further comprising:
and starting the Web item, and detecting that the Web item is currently in a pre-release environment of the Web item.
4. The method of claim 1, wherein the converting the obtained current component element of the Web component into a corresponding picture further comprises: marking the picture with a component identifier and a timestamp mark,
before sending the picture and the identification information of the picture to the component management server, the method further includes:
if a plurality of pictures are generated at the same time, checking the component identifier and the timestamp of each picture, judging whether the pictures with the same component identifier and timestamp exist, and if so, only keeping one picture for the pictures with the same component identifier and timestamp.
5. The method of claim 1, wherein the identification information of the picture further comprises: 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 of or any combination of paths of the Web page.
6. A visual component display method is characterized by comprising the following steps:
the method comprises the steps that a component management server receives a picture sent by a Web browser and identification information of the picture; wherein the identification information of the picture comprises: the Web component identification corresponding to the picture, the Web page identification and the Web project identification of the Web component corresponding to the picture;
the component management server stores the picture in a file server, and writes the storage address of the picture and the identification information of the picture into the structural data of the Web page where the Web component corresponding to the picture is located;
and when the component management server receives a component display request which is sent by the visual display platform and carries a Web item identifier or a Web item identifier and a Web page identifier, searching the Web item identifier or structural data corresponding to the Web item identifier and the Web page identifier, and returning a storage address of a picture in the structural data to the visual display platform so as to enable: the visual display platform reads the pictures from the corresponding storage addresses and displays the pictures;
wherein the picture and the identification information of the picture are: when the Web browser detects that a Web page is loaded, acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from configuration information of a Web item where the Web page is located; acquiring a component identification list contained in the Web page; periodically traversing the Web component identification list, and acquiring the current component element of the Web component according to the traversed Web component identification; and after converting the acquired current component element of the Web component into a corresponding picture, sending the picture and the identification information of the picture to a component management server.
7. A web page component capturing apparatus, the apparatus comprising:
the configuration information acquisition module is used for detecting that a Web page is loaded, acquiring configuration information of a Web item where the Web page is located, and acquiring a Web item identifier of the Web item and a Web page identifier of the Web page from the configuration information of the Web item; acquiring a component identification list contained in the Web page;
the acquisition module is used for periodically traversing the Web component identification list and acquiring the current component element of the Web component according to the traversed Web component identification; converting the acquired current component element of the Web component into a corresponding picture; sending the picture and the identification information of the picture to a component management server, wherein the identification information of the picture comprises: the image comprises a Web component identifier corresponding to the image, a Web page identifier and a Web project identifier, wherein the Web component identifier corresponds to the image, and the Web page identifier and the Web project identifier are located on the Web component corresponding to the image.
8. A web page component capturing and presenting system, comprising the web page component capturing apparatus according to claim 7, further comprising: a component management server;
the component management server is used for storing the picture sent by the webpage component capturing device into a file server, and writing the storage address of the picture and the identification information of the picture into the structural data of the Web page where the Web component corresponding to the picture is located; and when receiving an assembly display request which is sent by a visual display platform and carries a Web item identifier, or carries the Web item identifier and a Web page identifier, searching the Web item identifier, or searching the structural data corresponding to the Web item identifier and the Web page identifier, and returning a storage address of a picture in the structural data to the visual display platform so as to enable: and the visual display platform reads the pictures from the corresponding storage addresses and displays the pictures.
9. A non-transitory computer readable storage medium storing instructions which, when executed by a processor, cause the processor to perform the steps of the web page component capture method of any one of claims 1 to 5 or the steps of the component visualization presentation method of claim 6.
10. A computer program product comprising a computer program or instructions, characterized in that the computer program or instructions, when executed by a processor, performs the steps of the web page component capturing method according to any one of claims 1 to 5, or performs the steps of the component visual presentation method according to claim 6.
CN202111520516.5A 2021-12-13 2021-12-13 Webpage component capturing and displaying method, device and system Pending CN114201168A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111520516.5A CN114201168A (en) 2021-12-13 2021-12-13 Webpage component capturing and displaying method, device and system

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111520516.5A CN114201168A (en) 2021-12-13 2021-12-13 Webpage component capturing and displaying method, device and system

Publications (1)

Publication Number Publication Date
CN114201168A true CN114201168A (en) 2022-03-18

Family

ID=80653143

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111520516.5A Pending CN114201168A (en) 2021-12-13 2021-12-13 Webpage component capturing and displaying method, device and system

Country Status (1)

Country Link
CN (1) CN114201168A (en)

Similar Documents

Publication Publication Date Title
US8756614B2 (en) Central registry for binding features using dynamic pointers
CN109739855B (en) Method and system for realizing data sheet splicing and automatically training machine learning model
US20130318496A1 (en) Detection of central-registry events influencing dynamic pointers and app feature dependencies
US11113137B2 (en) Error incident fingerprinting with unique static identifiers
CN113593071A (en) Inspection method, inspection device, inspection system, computer equipment and storage medium
CN113868126A (en) Application debugging method, device and storage medium of equipment
CN111324352A (en) Code generation method of application page and related equipment
CN112306594A (en) Rendering method and device based on mobile terminal and storage medium
CN110245074B (en) Log record generation method and device, storage medium and server
CN111309743A (en) Report pushing method and device
CN117472704A (en) Machine room management method, equipment and storage medium based on three-dimensional model
CN108520063B (en) Event log processing method and device and terminal equipment
CN111309221B (en) Page processing method, device and equipment
CN114201168A (en) Webpage component capturing and displaying method, device and system
CN108920337A (en) A kind of device exception information methods of exhibiting and computer equipment
CN111274143B (en) Buried point test method, buried point test device, buried point test equipment and storage medium
CN112860311A (en) Application program issuing method and device and electronic equipment
CN112417259A (en) Media resource processing method, device, equipment and storage medium
CN115904572B (en) Template creation method, calling method, program product, system and device
CN114138509B (en) Data interaction method and device and computer readable storage medium
CN108037981B (en) Accessory management method and device
US20230342366A1 (en) Operating assistance system and operating assistance method
CN117130897A (en) Method, device, medium and electronic equipment for detecting installation package
US20150066997A1 (en) Systems and Methods for Managing Power Plant Component Information
JP2023030849A (en) Information processing apparatus, information processing method, and program

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