CN116662698A - Processing method and device for codeless visual configuration, electronic equipment and storage medium - Google Patents

Abstract

The embodiment of the application discloses a processing method and device for codeless visual configuration, electronic equipment and a storage medium. The method comprises the following steps: receiving a configuration request sent by a client, wherein the configuration request comprises a link corresponding to a landing page to be subjected to codeless visual configuration; creating a browser instance according to the configuration request, and starting a browser through the browser instance; loading the landing page in the browser based on the link, and intercepting a page screenshot corresponding to the landing page; and sending the page screenshot and the page node data corresponding to the landing page to the client so as to generate a visual operation area corresponding to the landing page in the client based on the page screenshot and the page node data, wherein the visual operation area is used for triggering the operation of performing codeless visual configuration on the landing page. The code-less visualization configuration by embodiments of the present application has no installed browser plugins, the use is more convenient.

Description

Processing method and device for codeless visual configuration, electronic equipment and storage medium

Technical Field

The application relates to the technical field of data processing, in particular to a processing method and device for codeless visual configuration, electronic equipment and a computer readable storage medium.

Background

With the continuous development of computer technology, a web page data reporting means without code distribution has appeared, which is designed for users who do not accept traditional code distribution modes or have weaker technical capabilities, and the users can configure the flow of web page data reporting without code distribution by using a visualization tool, so as to provide more portable and simple data access experience for the users.

Currently, a solution based on a browser plug-in can be used to realize the code-free visual configuration, but the implementation solution needs to install the browser plug-in, and the browser plug-in can only be installed through a compressed package downloading mode and a developer mode, so that the installation steps are very complicated.

Disclosure of Invention

To solve the above technical problems, embodiments of the present application provide a processing method and apparatus for codeless visualization configuration, an electronic device, a computer readable storage medium, and a computer program product.

According to an aspect of the embodiment of the present application, there is provided a processing method of codeless visualization configuration, including: receiving a configuration request sent by a client, wherein the configuration request comprises a link corresponding to a landing page to be subjected to codeless visual configuration; creating a browser instance according to the configuration request, and starting a browser through the browser instance; loading the landing page in the browser based on the link, and intercepting a page screenshot corresponding to the landing page; and sending the page screenshot and the page node data corresponding to the landing page to the client so as to generate a visual operation area corresponding to the landing page in the client based on the page screenshot and the page node data, wherein the visual operation area is used for triggering the operation of performing codeless visual configuration on the landing page.

According to an aspect of an embodiment of the present application, there is provided a processing apparatus for codeless visualization configuration, including: the configuration request receiving module is configured to receive a configuration request sent by a client, wherein the configuration request comprises a link corresponding to a landing page to be subjected to codeless visual configuration; the browser starting module is configured to create a browser instance according to the configuration request and start a browser through the browser instance; the landing page loading and screenshot module is configured to load the landing page in the browser based on the link and intercept a page screenshot corresponding to the landing page; the response data sending module is configured to send the page screenshot and the page node data corresponding to the landing page to the client so as to generate a visual operation area corresponding to the landing page in the client based on the page screenshot and the page node data, wherein the visual operation area is used for triggering the operation of performing codeless visual configuration on the landing page.

According to an aspect of an embodiment of the present application, there is provided an electronic apparatus including: one or more processors; and a storage means for storing one or more programs which, when executed by the one or more processors, cause the electronic device to implement the processing method of the codeless visualization configuration as described above.

According to an aspect of an embodiment of the present application, there is provided a computer-readable storage medium having stored thereon computer-readable instructions which, when executed by a processor of a computer, cause the computer to perform a processing method of a codeless visualization configuration as described above.

According to an aspect of embodiments of the present application, there is also provided a computer program product comprising a computer program which, when executed by a processor, implements a processing method of a codeless visualization configuration as described above.

In the technical scheme provided by the embodiment of the application, after the client initiates the configuration request for codeless visual configuration, a browser instance is created at the server according to the configuration request, a landing page is loaded through the browser instance, a page screenshot of the landing page is intercepted, and then the page screenshot corresponding to the landing page and page node data are sent to the client so as to display the landing page in the client, and a visual operation area for triggering the operation for codeless visual configuration of the landing page is generated.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application as claimed.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description, serve to explain the principles of the application. It is evident that the drawings in the following description are only some embodiments of the present application and that other drawings may be obtained from these drawings without inventive effort for a person of ordinary skill in the art. In the drawings:

FIG. 1 is an interface schematic diagram of an exemplary visualization tool supporting a codeless visualization configuration;

FIG. 2 is a schematic diagram of an implementation environment in which embodiments of the present application are directed;

FIG. 3 is a flow chart illustrating a method of processing a codeless visualization configuration according to an exemplary embodiment of the present application;

FIG. 4 is a schematic diagram of an exemplary codeless configuration page;

FIG. 5 is a flow chart of step S350 in the embodiment shown in FIG. 3 in an exemplary embodiment;

FIG. 6 is a flowchart illustrating a process for acquiring page node data corresponding to a landing page in accordance with an exemplary embodiment;

FIG. 7 is a flowchart illustrating a process for obtaining a unique identification of a node in accordance with an exemplary embodiment;

FIG. 8 is a schematic diagram of an exemplary service architecture suitable for use with embodiments of the present application;

FIG. 9 is a schematic diagram of a service timing sequence for codeless visualization configuration based on the service architecture of FIG. 8;

FIG. 10 is an overall service flow diagram for implementing a codeless visualization configuration, shown in an exemplary application scenario of the present application;

FIG. 11 is a block diagram of a processing device of a codeless visualization configuration, shown in an exemplary embodiment of the present application;

fig. 12 shows a schematic diagram of a computer system suitable for use in implementing an embodiment of the application.

Detailed Description

Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples do not represent all implementations consistent with the application. Rather, they are merely examples of apparatus and methods consistent with aspects of the application as detailed in the accompanying claims.

The block diagrams depicted in the figures are merely functional entities and do not necessarily correspond to physically separate entities. That is, the functional entities may be implemented in software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor devices and/or microcontroller devices.

The flow diagrams depicted in the figures are exemplary only, and do not necessarily include all of the elements and operations/steps, nor must they be performed in the order described. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the order of actual execution may be changed according to actual situations.

In the present application, the term "plurality" means two or more. "and/or" describes an association relationship of an association object, meaning that there may be three relationships, e.g., a and/or B may represent: a exists alone, A and B exist together, and B exists alone. The character "/" generally indicates that the context-dependent object is an "or" relationship.

Firstly, it should be noted that, the code-free visual configuration mentioned in the embodiment of the present application refers to a web page data reporting means without code distribution, and a user can configure a web page data reporting process by using a visual tool, which is suitable for users who do not accept a traditional data access manner or do not have a code basis.

Referring to FIG. 1, FIG. 1 is an interface diagram of an exemplary visualization tool supporting a codeless visualization configuration. The exemplary codeless visual configuration interface displays a landing page to be subjected to codeless visual configuration, wherein the landing page is specifically displayed as a visual operation area so as to support triggering the operation of codeless visual configuration on the landing page. For a user, the user can enter the code-free configuration interface shown in fig. 1 only by inputting a link of the landing page needing code-free visual configuration in the visual tool, then the operation for configuring the landing page is triggered in a visual operation area corresponding to the landing page, a corresponding configuration item is displayed in a configuration item display area, and the user can select a corresponding reporting behavior, so that code-free reporting is realized.

It should be appreciated that the landing page referred to in the embodiments of the present application may also be referred to as a landing page or a guide page, which typically displays extended content related to the business links, and which is typically search engine optimized. For example, in the field of Internet advertising, a landing page refers to a web page that is jumped to display to a user when a potential user clicks on an advertisement or searches using a search engine.

In the prior art implementation, the codeless visualization configuration requires that the user use a Chrome browser (which is a non-open source browser item introduced by google corporation) and install a DMP (Data Management Platform ) coding tool plug-in for the browser. However, the browser plug-in is usually installed only through compressed package download and developer mode, and the installation steps are very cumbersome, which still has a high usage threshold for users.

To solve the above problems, embodiments of the present application respectively provide a processing method of a codeless visualization configuration, a processing apparatus of a codeless visualization configuration, an electronic device, a computer readable storage medium, and a computer program product, and these embodiments will be described in detail below.

Referring to fig. 2, fig. 2 is a schematic diagram of an implementation environment according to an embodiment of the present application. The implementation environment includes a terminal 210 and a server 220, wherein the terminal 210 and the server 220 communicate by wired or wireless means.

The terminal 210 is configured to run a visualization tool supporting the codeless visualization configuration, and after a user inputs a link corresponding to a landing page to be subjected to the codeless visualization configuration in the terminal 210, the terminal 210 generates a configuration request and sends the configuration request to the server 220.

After receiving the configuration request sent by the terminal 210, the server 220 creates a browser instance according to the configuration request, starts the browser through the browser instance, loads the landing page in the browser according to the link corresponding to the landing page included in the configuration request, intercepts the page screenshot corresponding to the landing page, and then sends the page screenshot corresponding to the landing page and page node data to the terminal 210.

The terminal 210 displays the landing page according to the received screenshot of the page, and generates a visual operation area corresponding to the landing page according to the received node data of the page, where the visual operation area is used to trigger an operation of performing codeless visual configuration on the landing page, for example, to obtain an interface as shown in fig. 1. The user triggers the operation of configuring the landing page in the visual operation area corresponding to the landing page, the corresponding configuration item is displayed in the interface shown by the terminal 210, the user can select the corresponding reporting behavior until all the data stored after the configuration is completed, and the data is submitted to the server 220 for storage, thereby realizing the code-free reporting.

Note that, the terminal 210 may be any electronic device supporting a codeless visual configuration function, such as a smart phone, a tablet computer, a notebook computer, or a wearable device, but is not limited thereto, and the terminal 210 may be a vehicle-mounted terminal, an aircraft, or other devices applied to a special field. The terminal 210 may communicate with the server 220 via a wireless network such as 3G (third generation mobile information technology), 4G (fourth generation mobile information technology), 5G (fifth generation mobile information technology), or communicate with the server 220 via a wired network, which is not limited in this regard.

The server 220 may be, for example, an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or may be a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs (Content Delivery Network, content delivery networks), and basic cloud computing services such as big data and artificial intelligence platforms, which are not limited herein.

It should be understood that Cloud Technology (Cloud Technology) refers to a hosting Technology that unifies a series of resources such as hardware, software, networks, etc. within a wide area network or a local area network to implement computation, storage, processing, and sharing of data. The cloud technology is also a generic term of network technology, information technology, integration technology, management platform technology, application technology and the like based on cloud computing business model application, and can form a resource pool, and the cloud computing business model application system is flexible and convenient as required.

Fig. 3 is a flow chart illustrating a method of processing a codeless visualization configuration according to an exemplary embodiment of the present application. This approach is applicable to the implementation environment shown in fig. 1 and is specifically performed by the server 210 in the implementation environment shown in fig. 1. The method may also be applied to other implementation environments and performed by devices in other implementation environments, and this embodiment is not limited thereto.

The method according to the embodiment of the present application will be described in detail below with a server as an exemplary execution body. As shown in fig. 3, in an exemplary embodiment, the method includes steps S310 to S370, which are described in detail as follows:

step S310, a configuration request sent by a client is received, wherein the configuration request comprises a link corresponding to a landing page to be subjected to codeless visual configuration.

The client in this embodiment refers to the aforementioned visualization tool for performing codeless visualization configuration, for example, a DMP tool, and provides a portable and easy data access experience for users with weak technical capability or without receiving a traditional coding manner through interaction between the User and a UI (User Interface) provided by the client.

In this embodiment, after the user enters the codeless access function page provided by the visualization tool, the user does not need to download a browser plug-in, and directly inputs a link (also referred to as URL, uniform Resource Locator, uniform resource locator) of the landing page that needs to be configured for codeless visualization. Illustratively, the user clicks a "start" button provided in the codeless access function page to jump to a particular codeless configuration page (such as the page shown in FIG. 1).

And the client responds to the operation triggered in the code-free access function page, generates a configuration request containing a link corresponding to the landing page, and sends the configuration request to the server. The server needs to respond to the received configuration request, so that the client jumps to the codeless configuration page, and the detailed response processing process is described later.

Step S330, a browser instance is created according to the configuration request, and the browser is started through the browser instance.

After receiving the configuration request from the client, the server creates a browser instance according to the configuration request to start the browser through the browser instance. It should be understood that in object-oriented programming, the process of creating objects by classes is referred to as instantiation, which is a process of embodying abstract conceptual classes to such entities, and objects created in this way are referred to as instances, so browser instances created in this embodiment also refer to browser objects created in this way.

After creating the browser instance, the browser started by the browser instance is not an application program for retrieving, displaying and delivering web page information resources in a general sense, but is a browser program simulated in the server, and the browser is generally a coreless browser. It should be understood that a browser kernel (Rendering Engine) refers to a portion of a browser core that is responsible for interpreting and Rendering web pages in a web page grammar, so that a browser kernel, which is generally referred to as a Rendering Engine used by a browser, is used to save computing resources of a server because the browser simulated in the server does not need to perform excessive interpretation and Rendering. It should be further noted that the present embodiment does not limit the browser instance to be modeled as a coreless browser.

And step S350, loading the landing page in the browser based on the link corresponding to the landing page, and intercepting the screenshot corresponding to the landing page.

After the simulated browser in the server is started, loading the landing page in the browser based on the link corresponding to the landing page, and capturing a screen of the loaded landing page to obtain the page screenshot corresponding to the landing page.

The purpose of loading the landing page in the server in this embodiment is not only to obtain a screenshot corresponding to the landing page, but also to obtain page node data corresponding to the landing page according to loading of the landing page, where the page node data corresponds to a page element in the landing page, and the page node data includes location information of the page element in the landing page, and the like, and is not limited herein.

Step S370, sending the screenshot and page node data corresponding to the landing page to the client, so as to generate a visual operation area corresponding to the landing page based on the screenshot and the page node data in the client, where the visual operation area is used to trigger the operation of performing codeless visual configuration on the landing page.

And the server sends the page screenshot corresponding to the landing page and the page node data to the client so as to display the landing page based on the page screenshot in the client and generate a visual operation area corresponding to the landing page in the client based on the page node data.

The visual operation area is used for triggering the operation of performing codeless visual configuration on the landing page, for example, a configuration function for performing visual circle selection on the landing page is added in the visual operation area, if a user triggers and selects a certain page element of the visual operation area, the area corresponding to the page element displays a selection frame, after the user clicks the selection frame, a configuration item display area in a client interface displays a corresponding configuration item, the user operates and selects a corresponding report data item in the configuration item display area, the selection process is repeated until all the configurations are completed, and a 'save' button arranged in the configuration item display area is clicked, so that the client submits the data to a server for saving.

As shown in fig. 4, fig. 4 is a schematic diagram of an exemplary codeless configuration page. The landing page to be subjected to code-free visual configuration is displayed on the right side of the page, and the left side of the page is displayed with a configuration item display area corresponding to the landing page. The configuration item display area shown in fig. 4 is specifically configured to configure user behavior for a page element in a landing page, for example, after a user selects "all" page elements from a landing page to be configured, the area of the page element displays a selection box, and the user selects, in the configuration item display area, the user behavior to be configured for the page element, for example, selects a configuration item of "SEARCH" to configure "all" page elements in the landing page. After the configuration is validated, when the landing page is actually touching the service client, the service client clicks the "all" button in the landing page to trigger the execution of the search function.

As can be seen from the above, in the technical solution provided in this embodiment, the user does not need to install any plugin in the process of implementing the code-free visual configuration in the client, but loads the landing page by simulating the browser in the server, intercepts the page screenshot corresponding to the landing page, and obtains the page node data corresponding to the landing page, and returns the page screenshot and the page node data to the client to display the code-free configuration page, so that the user can specifically perform the configuration operation of the landing page on the code-free configuration page, thereby enabling the user to perform the code-free visual configuration on any browser, greatly simplifying the configuration flow, and improving the user experience of the user performing the code-free visual configuration.

In another exemplary embodiment, the process of creating a browser instance by the server according to the configuration request and starting the browser by the browser instance includes the following steps S331 to S333, which are described in detail below:

step S331, creating an instance according to the received configuration request, and storing the created instance as a browser object to obtain a browser instance;

in step S333, the browser is started by the browser instance.

In step S331, the configuration request is represented by, for example, "nodeapi/convert/analyzeurl=xxx", where "url=xxx" represents a link corresponding to the landing page. The server loads the overt module according to the received configuration request and executes an analysis method, and the analysis method firstly builds a puppreteer instance and stores the puppreteer instance as a browser object to obtain a browser instance.

It should be understood that purrter is a Node library with advanced API (Application Programming Interface, application program interface) for controlling Chrome (a web browser developed by google corporation, specifically an open source item) browser or Chrome browser through DevTools (a plug-in based on Chrome browser for remote debugging) protocol. The browser object is the browser object.

In step S333, the browser may be started by the browser instance to be in an interface-free state mode, which is also referred to as a headless mode, which may also be referred to as headerless browser, to support the use of relevant features and functions supported by the browser without opening the browser GUI (Graphical User Interface ). The embodiment sets the browser to be started into the interface-free state mode, and can save the computing resources of the server under the condition of meeting the application requirements. Of course, in some exemplary application scenarios, such as a condition that the computing resources of the server are sufficient, the browser simulated by the server may be started normally through the browser instance, which is not limited in this embodiment.

In another exemplary embodiment, as shown in fig. 5, step S350 in the embodiment shown in fig. 3 may include steps S351 to S355, which are described in detail below:

In step S351, a new tab page is created by the browser object, and the tab page is stored as a page object.

A new tab page may be created by a newPage method of a browser object (browser object), and stored as a page object, thereby obtaining the page object.

In step S353, the page object is invoked to access the link of the landing page to load the landing page in the browser.

The User-Agent of the tab page may be set using the setUserAgent method of the page object to simulate a data request for the landing page based on the set User-Agent. In response to this data request, the corresponding landing page may be loaded in the browser.

Note that, the User-Agent is a part of HTTP (Hyper Text Transfer Protocol ) protocol, belongs to a component part of the header field, is commonly called a UA string, and is also called User Agent information in this embodiment, and is an identifier for providing information such as a browser type, an operating system and version, a CPU (Central Processing Unit ) type, a browser rendering engine, a browser language, and a browser plug-in used by a User to a visited website. It can thus be seen that the data request emulated by this embodiment is an HTTP request. For example, user-Agent that can set a tab page is: mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/7.0.21 (0 x 17001525) NetType/WIFI Language/zh_CN ", which mimics a data request initiated on an iPhone device.

In another exemplary embodiment, the process of loading the landing page by the browser in response to the data request may include the steps of:

step S3531, calling a page object to start request interception;

step S3533, after intercepting the data request, judging whether the data request is a history request;

in step S3535, if it is determined that the data request is not a history request, the landing page is loaded in the browser according to the data request.

The setrequest interaction method of the page object can be used for starting the function of request interception. Meanwhile, all requests in the browser are monitored, and the monitored requests are intercepted. If the simulated data request is intercepted, judging whether the data request is a history request, namely judging whether the data request is a repeatedly initiated data request. And if the history request is judged to be not the history request, loading the landing page in the browser according to the data request. If the request is a history request, no request response is performed.

It should be noted that, in step S3533, the process of determining whether the intercepted data request is a history request may include the following procedures:

firstly, judging whether the resource type to which the data request belongs is a first preset type or not. The first preset type includes, for example, at least one of document, style sheet, image, etc., and is not limited herein. If yes, determining that the data request is not a history request, and continuing to execute the data request. If not, continuing to judge whether the suffix contained in the data request is of the second preset type.

The second preset type includes, for example, at least one of ". Js", ". Json", and is not limited thereto. If yes, continuing to execute the data request. If not, continuing to generate unique information according to the attribute information contained in the data request.

The attribute information contained in the data request includes, for example, origin information (version hosted by the code base for pointing to the local) and pathname, and unique information can be generated by merging parameters corresponding to the origin and pathname. Then, it may be determined whether the unique information is recorded, if so, it indicates that the data request has been previously requested, and thus is determined to be a history request, and if not, it is determined that the data request is not a history request, and thus the data request is continued to be executed.

Through the flow, whether the intercepted data request is the history request or not can be comprehensively judged from multiple aspects, so that the process of loading the landing page executed by the browser is effective, and the server can be prevented from being wasted.

Step S355, calling a page object to screen capture the landing page after the landing page is loaded successfully so as to obtain a page screenshot corresponding to the landing page.

In the embodiment, after the landing page is loaded successfully, the page object is called to screen the landing page so as to obtain the screen capture of the page obtained by screen capture. Under the condition that the browser is in the interface-free state mode, the GUI of the browser is not opened, and the display condition of the graphical user interface of the landing page can be obtained by capturing the screen of the landing page loaded by the browser.

In other exemplary embodiments, considering that the page spread of the landing page may be long, all page information of the landing page may be completely obtained through page scrolling, so before the loaded landing page is captured, the rolling performance of the loaded landing page may be determined.

By way of example, a page screenshot of a landing page may be taken by:

scrolling the landing page down by a specified pixel magnitude, for example 300 pixels;

judging whether the current rolling height of the landing page is larger than or equal to the page rolling distance of the landing page, if not, continuing to roll the landing page downwards by a specified pixel amplitude until the current rolling height of the landing page is larger than or equal to the page rolling distance of the landing page; wherein the page scrollable distance of the landing page is typically the page height of the landing page;

If yes, judging whether the floor page can be scrolled to the bottom of the page twice; the method comprises the steps of judging whether the number of times of scrolling to the bottom of a page is greater than or equal to 1, if the number of times of scrolling to the bottom of the page is less than 1, continuing to scroll downwards by a specified pixel amplitude, and then repeating the previous judgment logic, wherein the purpose is that page elements of a landing page of a few application scenes are dynamically loaded;

if yes, sliding the landing page to the top of the page, and capturing a screen of the landing page to obtain a page screenshot corresponding to the landing page.

The screen capturing of the landing page can be carried out by calling the screen method of the page object to obtain a corresponding page screenshot, wherein the page screenshot is generally base64 data of a picture. Therefore, through the scheme provided by the embodiment, the whole page content of the landing page can be intercepted based on the page scrolling mode.

As shown in fig. 6, in another exemplary embodiment, the process of acquiring page node data corresponding to a landing page includes steps S610 to S630, which are described in detail below:

In step S610, after the landing page is loaded successfully, all nodes of the landing page are parsed to obtain the location information and unique identifier of each node.

According to the embodiment, the title of the landing page can be obtained through the title method of the page object, page elements contained in the landing page are positioned according to the title, and all nodes of the landing page are recursively analyzed at the same time, so that the position information and the unique identification of each node are obtained. It should be noted that, the page element included in the landing page generally refers to a tag in the page, and the node included in the landing page refers to all contents in the page, so the page element generally corresponds to the page node.

For example, the process of parsing all nodes of the landing page to obtain the location information of each node may include the following steps S611 to S612:

step S611, obtaining the position attribute of the page element contained in the landing page;

step S612, globally traversing the layout type and the layout level of each node in the landing page according to the position attribute of the page element contained in the landing page, so as to obtain the position information of each node.

In step S611, the position attribute of the page element includes, for example, the width, height, distance from the top of the page, distance from the bottom of the page, distance from the left of the page, and the like of the page element to describe the position in the landing page where the page element is located by these position information. The location attribute of each node may be obtained by a getbase clientselect method of the node, for example.

In step S612, the getcomputedstate method of the global window object may be used to obtain the layout type and layout hierarchy of each node, and repeatedly obtain the location attribute of the node, thereby obtaining the location information of each node. In addition, the position attribute of each node may be assembled into a node tree data according to the layout type and the layout level among the nodes, which is not limited herein.

Illustratively, the process of parsing all nodes of the landing page to obtain the unique identifier of each node may include the following steps S613 to S617, which are described in detail below:

step S613, judging whether the page element contained in the floor page has an identity, if so, using the identity of the page element as a unique identity of the corresponding node;

step S614, if not, acquiring the appointed attribute information of the page element, filtering the appointed attribute information, generating a temporary identifier according to the filtered attribute information, and performing global retrieval on the temporary identifier;

step S615, if the search result indicates that the temporary identifier corresponds to a unique page element, the temporary identifier is used as a unique identifier of a corresponding node;

step S616, if the search result indicates that the temporary identifier does not correspond to the unique page element, acquiring the position of the page element in the parent node, generating a type identifier, and generating an identifier of a child element corresponding to the parent node according to the type identifier and the temporary identifier;

Step S617, judging whether the father node has an identity, if so, giving the identity of the father node to a type identity, and taking the identity of the corresponding obtained child element as the unique identity of the node corresponding to the page element.

In step S613, whether the page element has an ID (Identity Document, identity number) is understood to mean whether the page element has an ID (Identity Document, identity number) attribute, and the identity is generally globally unique, so if the page element is determined to have the ID, the identity of the page element (i.e., the ID number) is directly used as the unique identifier of the corresponding node.

In step S614, if the page element does not have the unique id, the specified attribute information of the page element, such as the tagName attribute and the class attribute, is further obtained, and the class attribute is filtered, and the filtering policy is the class attribute of the state type, and then the filtered class attribute information and the tagName attribute information are combined to obtain the temporary id, and global search is performed using the temporary id, so as to obtain the search result correspondingly.

In step S615, if the search result indicates that the temporary identifier corresponds to a unique page element, if the number of the searched page elements is 1, it indicates that the temporary identifier may be used to uniquely identify the node corresponding to the page element, and therefore, the temporary identifier is used as the unique identifier of the corresponding node.

In step S616, if the search result indicates that the temporary identifier does not correspond to a unique page element, for example, the number of the searched page elements is greater than 1, the location of the page element in the parent node is obtained, and a type identifier, such as nth-of-type (n) identifier, is generated, so that the location of the node in the parent node where the page element is located is marked by the generated type identifier, and then the type identifier and the temporary identifier are combined to generate an identifier of a child element corresponding to the parent node, that is, a candidate unique identifier of the node corresponding to the page element. It should be understood that "(n)" included in the type identifier means that, since the number of the retrieved page elements is plural, the number of the parent nodes corresponding to the page elements should be plural.

In step S617, after the identifier of the child element corresponding to the parent node is obtained, it is determined whether the parent node has a unique identifier, and if so, the identifier of the parent node is assigned to the type identifier, that is, a result obtained by combining the identifier of the parent node and the temporary identifier is used as the unique identifier of the node corresponding to the page element.

If the father node has a unique identity, generating a temporary identifier corresponding to the father node according to the record of step S614, and performing global search on the temporary identifier, if the obtained search result indicates that the temporary identifier corresponds to a unique page element, identifying the temporary identifier can uniquely identify the father node, so that the temporary identifier of the father node is given to the type identifier, and the result obtained by combining the temporary identifier corresponding to the father node and the temporary identifier of the child node (i.e., the current page element) corresponding to the father node is used as the unique identifier of the page element corresponding node.

If the unique identifier of the node corresponding to the current page element cannot be obtained by traversing the parent node once, traversing the parent node corresponding to the parent node continuously, and repeating the process of obtaining the unique identifier until the unique identifier of the node corresponding to the current page element is finally obtained based on the related identifier of the parent node capable of being uniquely identified, or traversing to a body node or an html node.

The process of obtaining the unique identifier of the node as above may also be represented as a flow shown in fig. 7. As can be seen from the flow shown in fig. 7, in this embodiment, in the case where there are a plurality of nodes with the same identification information, the unique identification of the node corresponding to the page element is generated by recursively searching for the parent node with the unique identification information according to the combination of the unique identification information of the parent node and the identification information of the corresponding child element. By performing the above process, the unique identification of each node included in the floor page can be accurately obtained.

In step S630, the location information and the unique identifier of each node are used as page node data corresponding to the landing page.

In this embodiment, the location information and the unique identifier of each node are used as page node data corresponding to the landing page, and the server returns the page node data corresponding to the landing page and the page screenshot corresponding to the landing page to the client, so that a corresponding visual operation area can be generated for the page screenshot corresponding to the landing page based on the page node data corresponding to the landing page, so as to support the triggering operation of the user on the page elements in the landing page on the code-free configuration page.

It should be further noted that, in another exemplary embodiment, the page screenshot corresponding to the landing page includes the picture data in the specified format, for example, the aforementioned base64 data, and before the server sends the page node data corresponding to the landing page and the page screenshot corresponding to the landing page to the client, the server further uploads the picture data in the specified format to the COS (Cloud Object Service, object storage) system to generate the corresponding CDN (Content Delivery Network ) address, and then destroys the previously created browser instance.

The COS system is a distributed storage service system for storing mass files, and has the advantages of high expansibility, low cost, reliability, safety and the like. The COS system may be used to store static resources including static scripts, audio video, pictures, attachments, etc., and the static resources stored in the COS system may be accessed to the CDN service to deliver these static resources to clients by the CDN service.

That is, the server in this embodiment returns the page node data corresponding to the landing page and the page screenshot corresponding to the landing page to the client by means of the COS system and the CDN service, and in an application scenario where the server is connected to a large number of codeless visual configuration services, the resource pressure of the server can be reduced in this manner, and the codeless visual configuration efficiency can be improved to a certain extent.

Fig. 8 is a schematic diagram of an exemplary service architecture suitable for use with the server 220 in the implementation environment of fig. 2, in accordance with an embodiment of the present application. As shown in fig. 8, the exemplary service architecture mainly reflects a process of receiving and responding a configuration request from a client by a server, and the process can be implemented by a functional module such as a request monitoring module, a request analyzing module, a log module, a cache module and the like.

The request monitoring module can comprise sub-modules such as exception handling, middleware, dynamic routing and the like to realize relevant processing of configuration requests, such as exception monitoring, routing and the like of the requests; the request analysis module can comprise sub-modules such as a browser, a Node library, page analysis conversion, screen capture picture uploading, response data assembling and the like, so that a browser instance is created by a server according to a configuration request, the browser is started through the browser instance, the landing page is loaded in the browser based on a link corresponding to the landing page, page captures corresponding to the landing page are intercepted, and page captures corresponding to the landing page and page Node data are sent to an execution process of a client; the log module is used for storing log information such as error logs, request access logs and request response logs; the caching module is used for providing a storage space to store data to be cached in the codeless visualization configuration process.

In the actual application scenario, more or fewer functional modules than those shown in fig. 8 may be configured on the server, which is not limited herein. In addition, it should be noted that the functional modules shown in fig. 8 are generally implemented in a server as application programs deployed in the server, and functions implemented by the application programs are all described in the foregoing embodiment of the processing method of the codeless visualization configuration, which is not described in detail in this embodiment.

Fig. 9 is a schematic diagram of a service sequence for performing a codeless visualization configuration based on the service architecture shown in fig. 8. As shown in fig. 9, the whole processing flow of the codeless visual configuration is started by triggering the configuration landing page in the client by the user, after the client enters the visual configuration page, the user inputs the link corresponding to the landing page in the page, the client generates a configuration request containing the landing page link, and the configuration request is sent to the Node service deployed by the server.

Then loading the overt module by the Node service and executing an analysis method, wherein the analysis method firstly builds a puppreteer instance and stores the puppreteer instance as a browser object to obtain a browser instance so as to start the browser through the browser instance.

In the puberteer example, a new tab page is created by a newPage method of a browser object, and the tab page is stored as a page object, so as to obtain a page object, and then a setUserAgent method of the page object is used for setting a User-Agent of the tab page, so as to simulate a data request for a landing page based on the set User-Agent. And then starting a request interception function to intercept repeated data requests, and for data requests which are not repeated, scrolling a landing page to the bottom of the page, acquiring a page title to recursively analyze a landing page Node, calling a browser screen capture API to intercept a page screenshot of the landing page, returning the page screenshot corresponding to the landing page and page Node data to Node service, uploading the page screenshot to a COS (class of operation) system by the Node service, assembling the page screenshot and the page Node data, and returning the assembled data to a client.

The client analyzes the node information and the screen capturing picture, and draws and renders to obtain a visual operation area corresponding to the landing page. The user selects the node to be configured in the visual operation area displayed by the client, selects the corresponding configuration item in the configuration item display area, and writes all configuration Data into a DB (Data Base) for storage after the user completes all configuration.

It should be understood that fig. 9 is only an example flow shown for illustrating the time sequence procedure of the codeless visualization configuration, and detailed execution procedures are described in the foregoing embodiments of the processing method of the codeless visualization configuration, and are not repeated herein.

Fig. 10 is an overall service flow diagram for implementing a codeless visualization configuration, as shown in an exemplary application scenario of the present application.

As shown in fig. 10, the client visualizes the configuration page based on the web behavior accessed by the user, and sends a configuration request to the server, and the server loads the conversion module and executes the analysis method, creates a puberter instance and stores the puberter instance as a browser object to obtain a browser instance. In the pupprteer instance, a new tag page is created by a newPage method of a browser object, and the tag page is stored as a page object, so that a page object is obtained, and then a User-Agent of the tag page is set by a setUserAgent method of the page object, so that a simulated data request is obtained. Subsequently, a request interception function is started to intercept repeated data requests, and loading of the landing page is normally performed for data requests that are not repeated. Because the situation that the page content of the landing page can be completely displayed only by scrolling can exist, the page of the landing page is required to be scrolled downwards by 300 pixels, then the current page sliding distance is judged to be larger than or equal to the page scrollable distance, namely, whether the page is scrolled to the bottom of the page is judged, whether the page can be scrolled to the bottom of the page twice is continuously judged, so that the situation that fewer page elements are dynamically loaded is met, if yes, the page is slid to the top of the page, and page screenshot and node information analysis are started. The intercepted page screenshot is uploaded to a COS system, then the purrter instance is destroyed, and the page screenshot corresponding to the landing page and page node data are assembled into response data and returned to the client. The client analyzes the page node data and the page screenshot, and draws and renders to obtain a visual operation area corresponding to the landing page. The user selects the node to be configured in the visual operation area displayed by the client, selects the behavior type corresponding to the configuration in the configuration item display area, and stores all configuration data after the user completes all configuration, thereby completing the whole code-free visual configuration process.

From the above, the user does not need to install any plug-in the process of realizing the code-free visual configuration in the client, but loads the landing page by simulating the browser in the server, intercepts the page screenshot corresponding to the landing page, and acquires the page node data corresponding to the landing page, and returns the page screenshot and the page node data to the client to display the code-free configuration page, so that the user can specifically perform the configuration operation of the landing page on the code-free configuration page, thereby enabling the user to perform the code-free visual configuration on any browser, greatly simplifying the configuration flow and improving the user experience of the user in performing the code-free visual configuration. Other advantages are described in the foregoing embodiments of the processing method for codeless visualization configuration, and are not described herein.

Fig. 11 is a block diagram of a processing device of a codeless visualization configuration, as shown in an exemplary embodiment of the present application. As shown in fig. 11, the apparatus includes:

the configuration request receiving module 1110 is configured to receive a configuration request sent by a client, where the configuration request includes a link corresponding to a landing page to be configured in a code-free visual manner; a browser launch module 1130 configured to create a browser instance according to the configuration request and launch the browser through the browser instance; the landing page loading and screenshot module 1150 is configured to load a landing page in the browser based on the link, and intercept a page screenshot corresponding to the landing page; the response data sending module 1170 is configured to send the page screenshot and the page node data corresponding to the landing page to the client, so as to generate, in the client, a visualization operation area corresponding to the landing page based on the page screenshot and the page node data, where the visualization operation area is used to trigger an operation of performing codeless visualization configuration on the landing page.

In another exemplary embodiment, the browser launch module 1130 includes:

an instance creation unit configured to create an instance according to the configuration request and store the created instance as a browser object to obtain a browser instance; and the starting unit is configured to start the browser through the browser instance.

In another exemplary embodiment, the floor page load and screenshot module 1150 includes:

a tab page creation unit configured to create a new tab page through the browser object and store the tab page as a page object; the system comprises a landing page loading unit, a page object access link, a page object loading unit and a page object loading unit, wherein the landing page loading unit is configured to call a page object access link so as to load a landing page in a browser; and the page screen capturing unit is configured to call the page object to capture a screen of the landing page after the landing page is loaded successfully so as to obtain a page screenshot corresponding to the landing page.

In another exemplary embodiment, a floor page loading unit includes:

a data request generation subunit configured to invoke the page object to set user agent information of the tab page, so as to simulate a data request for the landing page based on the set user agent information; and a data request response subunit configured to load the landing page in the browser in response to the data request.

In another exemplary embodiment, the data request response subunit includes:

a request interception subunit configured to invoke a page object to initiate request interception; the request judging subunit is configured to judge whether the data request is a history request or not after intercepting the data request; and the loading execution subunit is configured to load the landing page in the browser according to the data request if the data request is judged not to be the history request.

In another exemplary embodiment, the data request response subunit further comprises:

the unique information generation subunit is configured to generate unique information according to attribute information contained in the data request if the resource type to which the data request belongs is judged to be not a first preset type and the suffix contained in the data request is judged to be not a second preset type; if it is determined that the unique information is not recorded, it is determined that the data request is not a history request.

In another exemplary embodiment, a page screen capturing unit includes:

a scrolling subunit configured to scroll the landing page downward by a specified pixel amplitude; a first judging unit configured to judge whether the current scroll height of the landing page is greater than or equal to the page scrollable distance of the landing page, and if not, performing the step of scrolling the landing page downward by a specified pixel amplitude on a jump; and the second judging unit is configured to judge whether the landing page can be scrolled to the bottom of the page twice if the first judging unit judges that the landing page can be scrolled to the bottom of the page, and if the first judging unit judges that the landing page can be scrolled to the bottom of the page, the landing page is slid to the top of the page, and screen capturing is carried out on the landing page so as to obtain a screen capture corresponding to the landing page.

In another exemplary embodiment, the apparatus further comprises:

the node analysis module is configured to analyze all nodes of the landing page after the landing page is loaded successfully so as to obtain the position information and the unique identification of each node; the page node data acquisition module is configured to take the position information and the unique identification of each node as page node data corresponding to the landing page.

In another exemplary embodiment, the node resolution module includes:

a position attribute acquiring unit configured to acquire a position attribute of a page element contained in a landing page; and the position traversing unit is configured to globally traverse the layout type and the layout level of each node in the landing page according to the position attribute of the page element contained in the landing page so as to obtain the position information of each node.

In another exemplary embodiment, the node resolution module further comprises a unique identification acquisition unit configured to: judging whether the page element contained in the floor page has an identity, if so, taking the identity of the page element as a unique identity of a corresponding node; if the page element does not have the attribute information, acquiring the appointed attribute information of the page element, filtering the appointed attribute information, generating a temporary identifier according to the filtered attribute information, and performing global retrieval on the temporary identifier; if the search result indicates that the temporary identifier corresponds to the unique page element, the temporary identifier is used as the unique identifier of the corresponding node; if the search result indicates that the temporary identifier does not correspond to the unique page element, acquiring the position of a parent node of the page element, generating a type identifier, and generating an identifier of a child element corresponding to the parent node according to the type identifier and the temporary identifier; judging whether the father node has an identity, if so, giving the identity of the father node to a type identity, and taking the identity of the corresponding obtained child element as the unique identity of the node corresponding to the page element.

In another exemplary embodiment, the page screenshot corresponding to the landing page includes picture data in a specified format; the apparatus further comprises: the data storage module is configured to upload the picture data in the appointed format to the object storage system so as to generate a corresponding content distribution network address; the instance destroying module is configured to destroy the browser instance.

It should be noted that, the processing apparatus of the codeless visualization configuration provided in the foregoing embodiment and the processing method of the codeless visualization configuration provided in the foregoing embodiment belong to the same concept, and the specific manner in which each module and unit perform the operation has been described in detail in the method embodiment, which is not repeated herein. In practical application, the processing device with the codeless visualization configuration provided in the foregoing embodiment may allocate the functions to different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above, which is not limited herein.

The embodiment of the application also provides electronic equipment, which comprises: one or more processors; and a storage device for storing one or more programs, which when executed by the one or more processors, cause the electronic device to implement the processing method of the codeless visualization configuration provided in the above embodiments.

Fig. 12 shows a schematic diagram of a computer system suitable for use in implementing an embodiment of the application. It should be noted that, the computer system 1200 of the electronic device shown in fig. 12 is only an example, and should not impose any limitation on the functions and the application scope of the embodiments of the present application.

As shown in fig. 12, the computer system 1200 includes a central processing unit (Central Processing Unit, CPU) 1201 that can perform various appropriate actions and processes, such as performing the methods described in the above embodiments, according to a program stored in a Read-Only Memory (ROM) 1202 or a program loaded from a storage section 1208 into a random access Memory (Random Access Memory, RAM) 1203. In the RAM 1203, various programs and data required for the system operation are also stored. The CPU 1201, ROM 1202, and RAM 1203 are connected to each other through a bus 1204. An Input/Output (I/O) interface 1205 is also connected to bus 1204.

The following components are connected to the I/O interface 1205: an input section 1206 including a keyboard, a mouse, and the like; an output portion 1207 including a Cathode Ray Tube (CRT), a liquid crystal display (Liquid Crystal Display, LCD), and a speaker, etc.; a storage section 1208 including a hard disk or the like; and a communication section 1209 including a network interface card such as a LAN (Local Area Network ) card, a modem, or the like. The communication section 1209 performs communication processing via a network such as the internet. The drive 1210 is also connected to the I/O interface 1205 as needed. A removable medium 1211 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is installed as needed on the drive 1210 so that a computer program read out therefrom is installed into the storage section 1208 as needed.

In particular, according to embodiments of the present application, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present application include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising a computer program for performing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication portion 1209, and/or installed from the removable media 1211. When being executed by the central processing unit 1201, performs various functions defined in the system of the present application.

It should be noted that, the computer readable medium shown in the embodiments of the present application may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium may be, for example, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory, a read-only memory, an erasable programmable read-only memory, a flash memory, an optical fiber, an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. A computer program embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. Where 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.

The units involved in the embodiments of the present application may be implemented by software, or may be implemented by hardware, and the described units may also be provided in a processor. Wherein the names of the units do not constitute a limitation of the units themselves in some cases.

Another aspect of the application also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor implements a processing method of a codeless visualization configuration as described above. The computer-readable storage medium may be included in the electronic device described in the above embodiment or may exist alone without being incorporated in the electronic device.

Another aspect of the application also provides a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device performs the processing method of the codeless visualization configuration provided in the above embodiments.

The foregoing is merely illustrative of the preferred embodiments of the present application and is not intended to limit the embodiments of the present application, and those skilled in the art can easily make corresponding variations or modifications according to the main concept and spirit of the present application, so that the protection scope of the present application shall be defined by the claims.

Claims (16)

1. A method for processing a codeless visualization configuration, comprising:

receiving a configuration request sent by a client, wherein the configuration request comprises a link corresponding to a landing page to be subjected to codeless visual configuration;

creating a browser instance according to the configuration request, and starting a browser through the browser instance;

loading the landing page in the browser based on the link, and intercepting a page screenshot corresponding to the landing page;

and sending the page screenshot and the page node data corresponding to the landing page to the client so as to generate a visual operation area corresponding to the landing page in the client based on the page screenshot and the page node data, wherein the visual operation area is used for triggering the operation of performing codeless visual configuration on the landing page.

2. The method of claim 1, wherein creating a browser instance from the configuration request and launching a browser through the browser instance comprises:

creating an instance according to the configuration request, and storing the created instance as a browser object to obtain the browser instance;

and starting the browser through the browser instance.

3. The method according to claim 2, wherein loading the landing page in the browser based on the link and intercepting a screenshot corresponding to the landing page comprises:

creating a new tab page through the browser object, and storing the tab page as a page object;

invoking the page object to access the link to load the landing page in the browser;

and calling the page object to screen capture the landing page after the landing page is loaded successfully so as to obtain a page screenshot corresponding to the landing page.

4. A method according to claim 3, wherein the invoking the page object to access the link to load the landing page in the browser comprises:

invoking the page object to set user agent information of the tag page so as to simulate a data request for the landing page based on the set user agent information;

and loading the landing page in the browser in response to the data request.

5. The method of claim 4, wherein loading the landing page in the browser in response to the data request comprises:

Invoking the page object to initiate request interception;

after intercepting the data request, judging whether the data request is a history request or not;

and if the data request is judged to be not a history request, loading the landing page in the browser according to the data request.

6. The method of claim 5, wherein said determining whether said data request is a history request comprises:

if the resource type of the data request is judged to be not the first preset type and the suffix contained in the data request is judged to be not the second preset type, generating unique information according to the attribute information contained in the data request;

if it is determined that the unique information is not recorded, it is determined that the data request is not a history request.

7. The method of claim 3, wherein invoking the page object to screen capture the landing page after the landing page is loaded successfully to obtain a screenshot corresponding to the landing page comprises:

scrolling the landing page downward by a specified pixel magnitude;

judging whether the current rolling height of the landing page is larger than or equal to the page rolling distance of the landing page, if not, executing the step of downwards rolling the landing page by a specified pixel amplitude in a jumping mode;

If yes, judging whether the landing page can be scrolled to the bottom of the page twice;

and if so, sliding the landing page to the top of the page, and capturing a screen of the landing page to obtain a page screenshot corresponding to the landing page.

8. The method according to any one of claims 1 to 7, further comprising:

after the landing page is loaded successfully, all nodes of the landing page are analyzed to obtain the position information and the unique identification of each node;

and taking the position information and the unique identification of each node as page node data corresponding to the landing page.

9. The method of claim 8, wherein the parsing all nodes of the landing page to obtain location information and unique identification of each node comprises:

acquiring the position attribute of the page element contained in the landing page;

and according to the position attribute of the page element contained in the landing page, globally traversing the layout type and the layout level of each node in the landing page to obtain the position information of each node.

10. The method according to claim 9, wherein the method further comprises:

Judging whether the page element contained in the floor page has an identity, if so, taking the identity of the page element as a unique identity of a corresponding node;

if the page element does not have the attribute information, acquiring the appointed attribute information of the page element, filtering the appointed attribute information, generating a temporary identifier according to the filtered attribute information, and performing global retrieval on the temporary identifier;

and if the retrieval result indicates that the temporary identifier corresponds to the unique page element, the temporary identifier is used as the unique identifier of the corresponding node.

11. The method according to claim 10, wherein the method further comprises:

if the search result indicates that the temporary identifier does not correspond to the unique page element, acquiring the position of the page element in the father node, generating a type identifier, and generating an identifier of a child element corresponding to the father node according to the type identifier and the temporary identifier;

judging whether the father node has an identity, if so, giving the identity of the father node to the type identity, and taking the identity of the corresponding obtained child element as the unique identity of the node corresponding to the page element.

12. The method according to any one of claims 1 to 7, wherein the page screen shot corresponding to the landing page includes picture data in a specified format; before sending the screenshot corresponding to the landing page and page node data to the client, the method further comprises:

uploading the picture data in the appointed format to an object storage system to generate a corresponding content distribution network address;

destroying the browser instance.

13. A processing apparatus for codeless visualization configuration, comprising:

the configuration request receiving module is configured to receive a configuration request sent by a client, wherein the configuration request comprises a link corresponding to a landing page to be subjected to codeless visual configuration;

the browser starting module is configured to create a browser instance according to the configuration request and start a browser through the browser instance;

the landing page loading and screenshot module is configured to load the landing page in the browser based on the link and intercept a page screenshot corresponding to the landing page;

the response data sending module is configured to send the page screenshot and the page node data corresponding to the landing page to the client so as to generate a visual operation area corresponding to the landing page in the client based on the page screenshot and the page node data, wherein the visual operation area is used for triggering the operation of performing codeless visual configuration on the landing page.

14. An electronic device, comprising:

one or more processors;

storage means for storing one or more programs that, when executed by the one or more processors, cause the electronic device to implement the method of any of claims 1-12.

15. A computer readable storage medium having stored thereon computer readable instructions which, when executed by a processor of a computer, cause the computer to perform the method of any of claims 1 to 12.

16. A computer program product comprising a computer program, characterized in that the computer program, when executed by a processor, implements the method of any one of claims 1 to 12.