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

Abstract

The embodiments of the present application disclose a method and device for processing codeless visual configuration, an electronic device, and a storage medium. The method includes: receiving a configuration request sent by a client, the configuration request including a link corresponding to a landing page to be configured with codeless visual configuration; creating a browser instance according to the configuration request, and starting the browser through the browser instance; loading the landing page in the browser based on the link, and capturing a page screenshot corresponding to the landing page; sending the page 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 in the client based on the page screenshot and the page node data, and the visual operation area is used to trigger the operation of performing codeless visual configuration on the landing page. The codeless visual configuration performed by the embodiments of the present application does not require the installation of a browser plug-in, and is more convenient to use.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a method and device for processing codeless visualization configuration, an electronic device, and a computer-readable storage medium. Background Art

[0002] With the continuous development of computer technology, a web data reporting method that does not require coding has emerged. It is designed for users who do not accept traditional coding methods or have weak technical capabilities. Users do not need to code and can use visual tools to configure the web data reporting process, thereby providing users with a more portable and simple data access experience.

[0003] Currently, a browser plug-in-based solution can be used to achieve codeless visual configuration, but this implementation requires the installation of a browser plug-in, which can usually only be downloaded through a compressed package and installed in developer mode, and the installation steps are very cumbersome. Summary of the Invention

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

[0005] According to one aspect of an embodiment of the present application, a method for processing codeless visual configuration is provided, including: receiving a configuration request sent by a client, the configuration request including a link corresponding to a landing page to be codeless visually configured; creating a browser instance according to the configuration request, and starting the browser through the browser instance; loading the landing page in the browser based on the link, and capturing a page screenshot corresponding to the landing page; sending the page 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 in the client based on the page screenshot and the page node data, and the visual operation area is used to trigger the operation of codeless visual configuration of the landing page.

[0006] According to one aspect of an embodiment of the present application, a processing device for codeless visual configuration is provided, including: a configuration request receiving module, configured to receive a configuration request sent by a client, the configuration request including a link corresponding to a landing page to be codeless visually configured; a browser startup module, configured to create a browser instance according to the configuration request, and start the browser through the browser instance; a landing page loading and screenshot module, configured to load the landing page in the browser based on the link, and capture a page screenshot corresponding to the landing page; a response data sending module, configured to send the page 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 in the client based on the page screenshot and the page node data, and the visual operation area is used to trigger the operation of codeless visual configuration of the landing page.

[0007] According to one aspect of an embodiment of the present application, an electronic device is provided, comprising: one or more processors; a storage device for storing one or more programs, which, when executed by the one or more processors, enables the electronic device to implement the processing method of codeless visual configuration as described above.

[0008] According to one aspect of an embodiment of the present application, a computer-readable storage medium is provided, on which computer-readable instructions are stored. When the computer-readable instructions are executed by a processor of a computer, the computer executes the processing method for codeless visualization configuration as described above.

[0009] According to one aspect of an embodiment of the present application, a computer program product is further provided, including a computer program, which implements the processing method for codeless visualization configuration as described above when executed by a processor.

[0010] In the technical solution provided in the embodiments of the present application, after the client initiates a configuration request for codeless visual configuration, a browser instance is created on the server according to the configuration request, the landing page is loaded through the browser instance, and a screenshot of the landing page is taken. The page screenshot and page node data corresponding to the landing page are then sent to the client to display the landing page in the client, and a visual operation area is generated for triggering the codeless visual configuration of the landing page. This method does not require the installation of any plug-ins, so that users can perform codeless visual configuration on any browser.

[0011] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] The accompanying drawings are incorporated into and constitute a part of the specification, illustrating embodiments consistent with the present application and, together with the specification, serving to explain the principles of the present application. It is obvious that the drawings described below are merely some embodiments of the present application, and a person of ordinary skill in the art can derive other drawings based on these drawings without inventive effort. In the drawings:

[0013] Figure 1 This is an exemplary interface diagram of a visualization tool that supports codeless visualization configuration;

[0014] Figure 2 is a schematic diagram of an implementation environment involved in the embodiments of the present application;

[0015] Figure 3 This is a flowchart of a method for processing codeless visualization configuration shown in an exemplary embodiment of the present application;

[0016] Figure 4 is a schematic diagram of an exemplary codeless configuration page;

[0017] Figure 5 yes Figure 3 A flow chart of step S350 in the illustrated embodiment in one exemplary embodiment;

[0018] Figure 6 This is a flowchart illustrating a process of obtaining page node data corresponding to a landing page according to an exemplary embodiment;

[0019] Figure 7 is a flowchart of a process for obtaining a unique identifier of a node, shown in an exemplary embodiment;

[0020] Figure 8 This is a schematic diagram of an exemplary service architecture applicable to an embodiment of the present application;

[0021] Figure 9 is based on Figure 8 A schematic diagram of a service sequence for codeless visual configuration proposed by the service architecture shown;

[0022] Figure 10 This is an overall service flow chart for implementing codeless visual configuration, as shown in an exemplary application scenario of the present application;

[0023] Figure 11 is a block diagram of a processing device for codeless visualization configuration shown in an exemplary embodiment of the present application;

[0024] Figure 12 A schematic diagram of the structure of a computer system suitable for implementing an electronic device according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0025] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. When the following description refers to the drawings, identical numerals in different figures represent identical or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.

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

[0027] The flowcharts shown in the accompanying drawings are for illustrative purposes only and do not necessarily include all contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may be decomposed, while others may be combined or partially combined. Therefore, the actual execution order may vary depending on the actual situation.

[0028] In this application, "plurality" refers to two or more. "And / or" describes the relationship between related objects, indicating that three possible relationships exist. For example, "A and / or B" can mean: A exists alone, A and B exist simultaneously, and B exists alone. The character " / " generally indicates that the related objects are in an "or" relationship.

[0029] First of all, it should be noted that the codeless visual configuration mentioned in the embodiment of this application refers to a means of reporting web data without coding. Users can configure the process of web data reporting using visual tools. It is suitable for users who do not accept traditional data access methods or do not have a code foundation.

[0030] See also Figure 1 , Figure 1 This is an example interface diagram of a visualization tool that supports codeless visualization configuration. The exemplary codeless visualization configuration interface displays the landing page to be configured with codeless visualization. The landing page is specifically displayed as a visualization operation area to support the triggering of codeless visualization configuration for the landing page. For users, they only need to enter the link of the landing page that needs codeless visualization configuration in the visualization tool to enter the Figure 1 The codeless configuration interface shown in the figure will then trigger the configuration operation for the landing page in the visual operation area corresponding to the landing page. The configuration item display area will display the corresponding configuration items, and the user can select the corresponding reporting behavior to achieve codeless reporting.

[0031] It should be understood that the landing page mentioned in the embodiments of this application can also be called a landing page or a guide page. Generally, this page will display extended content related to the business link and is usually search engine optimized. For example, in the field of internet advertising, a landing page refers to the webpage that jumps to the user after the potential user clicks on the advertisement or searches using a search engine.

[0032] In existing technologies, codeless visualization configuration requires users to use the Chrome browser (a non-open-source browser project launched by Google) and install the DMP (Data Management Platform) coding tool plug-in. However, browser plug-ins can usually only be downloaded via a compressed package and installed in developer mode, making the installation process very cumbersome and still a high barrier to entry for users.

[0033] To solve the above problems, the embodiments of the present application respectively propose a method for processing codeless visualization configuration, a processing device for codeless visualization configuration, an electronic device, a computer-readable storage medium, and a computer program product. These embodiments will be introduced in detail below.

[0034] See also Figure 2 , Figure 2 2 is a schematic diagram of an implementation environment involved in an embodiment of the present application, wherein the implementation environment includes a terminal 210 and a server 220, wherein the terminal 210 and the server 220 communicate via a wired or wireless manner.

[0035] The terminal 210 is used to run a visualization tool that supports codeless visualization configuration. After the user enters the link corresponding to the landing page to be configured with codeless visualization in the terminal 210 , the terminal 210 generates a configuration request and sends it to the server 220 .

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

[0037] The terminal 210 displays the landing page according to the received page screenshot, and generates a visual operation area corresponding to the landing page according to the received page node data. The visual operation area is used to trigger the operation of performing codeless visual configuration on the landing page, for example, Figure 1The user triggers the configuration operation for the landing page in the visual operation area corresponding to the landing page, and the corresponding configuration items will be displayed in the interface shown in the terminal 210. The user can select the corresponding reporting behavior until all the configurations are completed and the saved data is submitted to the server 220 for storage, thereby realizing code-free reporting.

[0038] It should be noted that the terminal 210 can be any electronic device that supports the codeless visual configuration function, such as a smartphone, tablet computer, laptop computer, or wearable device, but is not limited thereto. For example, the terminal 210 can also be a vehicle-mounted terminal, aircraft, or other device used in special fields. The terminal 210 can communicate with the server 220 via a wireless network such as 3G (third generation mobile information technology), 4G (fourth generation mobile information technology), or 5G (fifth generation mobile information technology), or communicate with the server 220 via a wired network, and this is not limited herein.

[0039] Server 220 can be, for example, an independent physical server, or a server cluster or distributed system composed of multiple physical servers. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms, and there is no limitation here.

[0040] Cloud technology refers to a hosting technology that unifies hardware, software, and network resources within a wide or local area network (WAN) to enable data computing, storage, processing, and sharing. It also encompasses network, information, integration, management platform, and application technologies used in the cloud computing business model. This technology can be combined into a resource pool for on-demand, flexible, and convenient use.

[0041] Figure 3 This is a flowchart of a method for processing codeless visual configuration shown in an exemplary embodiment of the present application. Figure 1 The implementation environment shown and Figure 1 The server 210 in the illustrated implementation environment specifically performs the method. The method may also be applied to other implementation environments and performed by devices in other implementation environments, and this embodiment does not limit this.

[0042] The following describes in detail the method proposed in the embodiment of the present application using the server as an exemplary execution subject. Figure 3 As shown, in an exemplary embodiment, the method includes steps S310 to S370, which are described in detail as follows:

[0043] Step S310: receiving a configuration request sent by the client, where the configuration request includes a link corresponding to a landing page for codeless visual configuration.

[0044] The client in this embodiment refers to the aforementioned visualization tool for codeless visualization configuration, such as a DMP tool, which provides a portable and simple data access experience for users who do not accept traditional coding methods or have weak technical capabilities through interaction between the user and the UI (User Interface) provided by the client.

[0045] In this embodiment, after the user enters the codeless access function page provided by the visualization tool, there is no need to download a browser plug-in, and the user can directly enter the link of the landing page (also known as URL, Uniform Resource Locator) for codeless visualization configuration. For example, the user clicks the "Start" button set in the codeless access function page to jump to the specific codeless configuration page (such as Figure 1 page shown).

[0046] In response to an action triggered on the codeless access page, the client generates a configuration request containing a link to the landing page and sends it to the server. The server must process the received configuration request to redirect the client to the codeless configuration page. See the following section for details on the response processing process.

[0047] Step S330: Create a browser instance according to the configuration request, and start the browser through the browser instance.

[0048] After receiving the configuration request from the client, the server creates a browser instance based on the configuration request and launches the browser through the browser instance. It should be understood that in object-oriented programming, the process of creating an object from a class is called instantiation. This is the process of converting an abstract conceptual class into a concrete object of that class. The object created in this way is called an instance. Therefore, the browser instance created in this embodiment also refers to the browser object created in this way.

[0049] After the server creates a browser instance, the browser launched through the browser instance is not an application used to retrieve, display and transmit web information resources in the usual sense, but a browser program simulated in the server. This browser is generally a coreless browser. It should be understood that the browser kernel (Rendering Engine) refers to the core part of the browser, which is responsible for interpreting the syntax of the web page and rendering the web page. Therefore, the browser kernel commonly referred to is also the rendering engine used by the browser. Since the browser simulated in the server in this embodiment does not need to perform too much interpretation and rendering, a coreless browser can be used to save the server's computing resources. It should also be noted that this embodiment does not limit the browser instance to only simulate the form of a coreless browser.

[0050] Step S350: load the landing page in the browser based on the link corresponding to the landing page, and take a screenshot of the page corresponding to the landing page.

[0051] After starting the browser simulated in the server, the landing page can be loaded in the browser based on the link corresponding to the landing page, and by taking a screenshot of the loaded landing page, the page screenshot corresponding to the landing page can be obtained.

[0052] 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 the page node data corresponding to the landing page based on the loading of the landing page. The page node corresponds to the page element in the landing page. The page node data includes the location information of the page element in the landing page, etc., which is not limited here.

[0053] Step S370, sends the page 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 in the client based on the page screenshot and page node data. The visual operation area is used to trigger the operation of codeless visual configuration of the landing page.

[0054] The server sends the page screenshot and page node data corresponding to the landing page 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.

[0055] The visual operation area is used to trigger the operation of codeless visual configuration for the landing page. For example, the visual operation area adds a configuration function for visually circling the landing page. If the user triggers the selection of a page element in the visual operation area, the area corresponding to the page element will display a selection box. After the user clicks the selection box, the configuration item display area in the client interface will display the corresponding configuration item. The user selects the corresponding reported data item in the configuration item display area and repeats the selection process until all configurations are completed. Click the "Save" button set in the configuration item display area to enable the client to submit the data to the server for saving.

[0056] like Figure 4 As shown, Figure 4 This is a schematic diagram of an exemplary codeless configuration page. The landing page to be configured with codeless visualization is displayed on the right side of the page, and the configuration item display area corresponding to the landing page is displayed on the left side of the page. Figure 4 The configuration item display area shown is specifically used to configure user behaviors for page elements on the landing page. For example, after the user selects the "All" page element from the landing page to be configured, a checkbox will appear in the page element area. The user can select the user behavior to configure for this page element in the configuration item display area. For example, selecting the "SEARCH" configuration item configures the "All" page element on the landing page. After the configuration takes effect, when the landing page actually reaches business customers, the business customer clicks the "All" button on the landing page to trigger the search function.

[0057] From the above, it can be seen that in the technical solution provided in this embodiment, the user does not need to install any plug-in to implement the codeless visual configuration process in the client. Instead, it simulates the browser in the server to load the landing page, and captures the corresponding page screenshot of the landing page, and obtains the page node data corresponding to the landing page, and returns the page screenshot and page node data to the client to display the codeless configuration page, so that the user can perform specific configuration operations of the landing page on the codeless configuration page. This allows the user to perform codeless visual configuration on any browser, greatly simplifies the configuration process, and improves the user experience of the user performing codeless visual configuration.

[0058] In another exemplary embodiment, the server creates a browser instance according to the configuration request, and the process of starting the browser through the browser instance includes the following steps S331 to S333, which are described in detail as follows:

[0059] 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;

[0060] Step S333: Start the browser through the browser instance.

[0061] In step S331, the configuration request is represented by, for example, "nodeapi / convert / analyze?url=xxx," where "url=xxx" represents the link to the landing page. Based on the received configuration request, the server loads the convert module and executes the analyze method. The analyze method first creates a puppeteer instance and stores it as a browser object to obtain a browser instance.

[0062] It's important to understand that puppeteer is a Node library with a high-level Application Programming Interface (API) that controls a Chromium (an open-source web browser developed by Google) or Chrome browser through the DevTools (a Chrome browser extension for remote debugging) protocol. The browser object is the browser object.

[0063] In step S333, the browser can be started in a headless state mode through the browser instance, wherein the headless state mode is also called headless mode, or headerless browser, which supports the use of relevant features and functions supported by the browser without opening the browser GUI (Graphical User Interface). This embodiment sets the browser to start in a headless state mode, which can save the server's computing resources while meeting the application requirements. Of course, in some exemplary application scenarios, such as when the server has sufficient computing resources, the browser simulated by the server can also be started normally through the browser instance, and this embodiment does not limit this.

[0064] In another exemplary embodiment, Figure 5 As shown, Figure 3 In the illustrated embodiment, step S350 may include steps S351 to S355, which are described in detail as follows:

[0065] Step S351: Create a new tab page through the browser object and store the tab page as a page object.

[0066] A new tab page can be created through the newPage method of the browser object (browser object), and the tab page is stored as a page object to obtain a page object.

[0067] Step S353: call the page object to access the link of the landing page to load the landing page in the browser.

[0068] You can use the setUserAgent method of the page object to set the User-Agent of the tab, simulating a data request for the landing page based on the set User-Agent. In response to this data request, the corresponding landing page can be loaded in the browser.

[0069] It should be noted that User-Agent is part of the HTTP (Hyper Text Transfer Protocol) protocol and is a component of the header field. It is usually called the UA string, and in this embodiment it is also called user agent information. It is an identifier that provides the visited website with information such as the browser type, operating system and version, CPU (Central Processing Unit) type, browser rendering engine, browser language, browser plug-in, etc. Therefore, it can be seen that the data request simulated in this embodiment is an HTTP request. For example, the User-Agent of the tab can be set to: 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 (0x17001525) NetType / WIFI Language / zh_CN", which simulates a data request initiated on an iPhone device.

[0070] In another exemplary embodiment, the process of a browser loading a landing page in response to a data request may include the following steps:

[0071] Step S3531, calling the page object to start request interception;

[0072] Step S3533: After intercepting the data request, determine whether the data request is a historical request;

[0073] Step S3535: If it is determined that the data request is not a historical request, the landing page is loaded in the browser according to the data request.

[0074] The setRequestInterception method of the page object can be used to enable the request interception function. At the same time, all requests in the browser are monitored and intercepted. If the aforementioned simulated data request is intercepted, it is determined whether the data request is a historical request, that is, whether it is a repeated data request. If it is determined not to be a historical request, the landing page is loaded in the browser according to the data request. If it is determined to be a historical request, no request response is made.

[0075] It should be noted that, in step S3533, the process of determining whether the intercepted data request is a historical request may include the following process:

[0076] First, a determination is made as to whether the resource type to which the data request belongs is a first preset type. Examples of the first preset type include at least one of document, stylesheet, and image types, which are not limited herein. If the determination is yes, the data request is determined not to be a historical request, and the data request is continued. If the determination is no, the determination is made as to whether the suffix included in the data request is a second preset type.

[0077] The second preset type includes, for example, at least one of ".js," ".json," and ".json," and is not limited thereto. If the determination is yes, the data request is continued. If the determination is no, unique information is generated based on the attribute information included in the data request.

[0078] The data request contains attribute information such as origin (origin information, used to point to the locally hosted version of the code repository) and pathname (path name). By combining the parameters corresponding to origin and pathname, a unique information can be generated. Then, it is determined whether the unique information has been recorded. If it is, it means that this data request has been requested before, and it is therefore determined to be a historical request. If it is not, it is determined that the data request is not a historical request, and the data request is continued.

[0079] Through the above process, a comprehensive judgment can be made from multiple aspects on whether the intercepted data request is a historical request, so as to ensure that the landing page loading process executed by the browser is effective, thereby ensuring that the server is not wasted.

[0080] Step S355: After the landing page is loaded successfully, the page object is called to take a screenshot of the landing page to obtain a page screenshot corresponding to the landing page.

[0081] This embodiment calls the page object to take a screenshot of the landing page after the landing page is successfully loaded, thereby obtaining a screenshot of the page. When the browser is in a non-interface state mode, since the browser GUI is not open, the display of the landing page's graphical user interface can be obtained by taking a screenshot of the landing page loaded by the browser.

[0082] In another exemplary embodiment, considering that the landing page may be long, all page information of the landing page can only be fully obtained by scrolling the page. Therefore, before taking a screenshot of the loaded landing page, the scrollability of the loaded landing page can also be judged.

[0083] For example, you can use the following process to capture a screenshot of the landing page:

[0084] Scroll the landing page down by a specified pixel width, for example, 300 pixels.

[0085] Determine whether the current scroll height of the landing page is greater than or equal to the scrollable distance of the landing page. If not, continue to scroll the landing page down by a specified pixel increment until the current scroll height of the landing page is greater than or equal to the scrollable distance of the landing page. The scrollable distance of the landing page is usually the page height of the landing page.

[0086] If the judgment is yes, determine whether the landing page can be scrolled to the bottom of the page twice; wherein, this can be determined by determining whether the number of times the page has been scrolled to the bottom of the page is greater than or equal to 1. If it is less than 1, continue to scroll down by a specified pixel amplitude and then repeat the previous judgment logic. The purpose is that in a few application scenarios, the page elements of the landing page are dynamically loaded. After the first judgment of scrolling to the bottom, the page can continue to scroll down due to the dynamically added elements. This adapts to such application scenarios. If the number of times the page has been scrolled to the bottom of the page is greater than or equal to 1, it can be determined that the landing page can be scrolled to the bottom of the page twice.

[0087] If the judgment is yes, slide the landing page to the top of the page and take a screenshot of the landing page to obtain a page screenshot corresponding to the landing page.

[0088] You can take a screenshot of the landing page by calling the screenshot method of the page object to obtain the corresponding page screenshot. Figure 1 Generally, it is the base64 data of the image. Therefore, through the solution provided by this embodiment, the complete page content of the landing page can be intercepted based on the page scrolling method.

[0089] like Figure 6 As shown, in another exemplary embodiment, the process of obtaining page node data corresponding to the landing page includes steps S610 to S630, which are described in detail as follows:

[0090] 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.

[0091] In this embodiment, the title of the landing page can be obtained through the title method of the page object, and the page elements contained in the landing page can be located according to the title. At the same time, all nodes of the landing page are recursively parsed to obtain the location information and unique identifier of each node. It should be noted that the page elements contained in the landing page generally refer to the tags in the page, and the nodes contained in the landing page refer to all the content in the page. Therefore, the page elements generally correspond to the page nodes.

[0092] Exemplarily, the process of parsing all nodes of a landing page to obtain location information of each node may include the following steps S611 to S612:

[0093] Step S611, obtaining the location attributes of the page elements contained in the landing page;

[0094] Step S612: Based on the position attributes of the page elements contained in the landing page, the layout type and layout level of each node in the landing page are globally traversed to obtain the position information of each node.

[0095] In step S611, the position attributes of the page element include, for example, the width, height, distance from the top, distance from the bottom, and distance from the left of the page. This position information is used to describe the location of the page element in the landing page. For example, the position attributes of each node can be obtained through the node's getBoundingClientRect method.

[0096] In step S612, the getComputedStyle method of the global window object is used to obtain the layout type and layout level of each node, and the position attribute of the node is repeatedly obtained to obtain the position information of each node. In addition, the position attributes of each node can also be assembled into a node tree data based on the layout type and layout level of the nodes, which is not limited here.

[0097] Exemplarily, the process of parsing all nodes of a landing page to obtain a unique identifier for each node may include steps S613 to S617, which are described in detail as follows:

[0098] Step S613: determine whether the page element contained in the landing page has an identity identifier. If so, use the identity identifier of the page element as the unique identifier of the corresponding node;

[0099] Step S614: If not, obtain the specified attribute information of the page element, filter the specified attribute information, generate a temporary identifier based on the filtered attribute information, and perform a global search on the temporary identifier;

[0100] Step S615: If the search result indicates that the temporary identifier corresponds to a unique page element, the temporary identifier is used as the unique identifier of the corresponding node;

[0101] Step S616: If the search result indicates that the temporary identifier does not correspond to a unique page element, the position of the page element in the parent node is obtained, and a type identifier is generated. The identifier of the child element corresponding to the parent node is generated based on the type identifier and the temporary identifier.

[0102] Step S617: determine whether the parent node has an identity identifier. If so, assign the parent node's identity identifier to the type identifier, and use the corresponding child element identifier as the unique identifier of the node corresponding to the page element.

[0103] In step S613, whether the page element has an identity identifier can be understood as whether the page element has an ID (Identity Document) attribute. The identity identifier is usually globally unique. Therefore, if it is judged to have it, the identity identifier of the page element (i.e., the ID identifier) ​​is directly used as the unique identifier of the corresponding node.

[0104] In step S614, if the page element does not have a unique identity identifier, the specified attribute information of the page element is further obtained, such as the tagName (tag name) attribute and the class (class) attribute, and the class attribute is filtered at the same time. The filtering strategy is whether it is a class attribute of the status type, and then the filtered class attribute information and the tagName attribute information are combined to obtain a temporary identifier, and the temporary identifier is used for global search to obtain the corresponding search results.

[0105] In step S615, if the search result indicates that the temporary identifier corresponds to a unique page element, such as the number of retrieved page elements is 1, it means that the temporary representation can be used to uniquely identify the node corresponding to the page element, so the temporary identifier is used as the unique identifier of the corresponding node.

[0106] 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 retrieved page elements is greater than 1, the position of the page element in the parent node is obtained, and a type identifier, such as an nth-of-type(n) identifier, is generated to mark the position of the node where the page element is located in the parent node through the generated type identifier, and then the type identifier and the temporary identifier are combined to generate an identifier for the child element corresponding to the parent node, that is, a candidate unique identifier for the node corresponding to this page element. It should be understood that the "(n)" contained in the type identifier means that since the number of retrieved page elements is multiple, the number of parent nodes corresponding to the page elements should also be multiple.

[0107] In step S617, after obtaining the identifier of the child element corresponding to the parent node, it is determined whether the parent node has a unique identity identifier. If it does, the identity identifier of the parent node is assigned to the type identifier, that is, the result obtained by combining the identity identifier of the parent node and the aforementioned temporary identifier is used as the unique identifier of the node corresponding to the page element.

[0108] If the parent node has a unique identity identifier, a temporary identifier corresponding to the parent node is generated according to the record of step S614, and a global search is performed on the temporary identifier. If the search result indicates that the temporary identifier corresponds to a unique page element, then this temporary identifier can uniquely identify the parent node. Therefore, the temporary identifier of the parent node is assigned to the type identifier, and the result obtained by combining the temporary identifier corresponding to the parent node and the temporary identifier of the child node corresponding to the parent node (that is, the current page element) is used as the unique identifier of the node corresponding to the page element.

[0109] If the unique identifier of the node corresponding to the current page element cannot be obtained by traversing the parent node once, the parent node corresponding to the parent node will continue to traverse and repeat the process of obtaining the unique identifier as described above until the unique identifier of the node corresponding to the current page element is finally obtained based on the relevant identifier of the parent node that can be uniquely identified, or the body node or html node is traversed.

[0110] The process of obtaining the unique identifier of a node can also be expressed as Figure 7 According to the process shown in Figure 7 As can be seen from the process shown, this embodiment recursively searches for a parent node with unique identification information when there are multiple nodes with the same identification information. The unique identification information of the parent node is combined with the identification information of the corresponding child element to generate a unique identifier for the node corresponding to the page element. By executing this process, the unique identifier of each node included in the landing page can be accurately obtained.

[0111] Step S630: Use the location information and unique identifier of each node as the page node data corresponding to the landing page.

[0112] In this embodiment, the location information and unique identifier of each node are used as the page node data corresponding to the landing page. The server returns the page node data corresponding to the landing page and the page screenshot corresponding to the landing page to the client. Then, 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 to support the user's triggering operation on the page elements in the landing page on the codeless configuration page.

[0113] It should also be noted that, in another exemplary embodiment, the page screenshot corresponding to the landing page includes image data in a specified format, such as the aforementioned base64 data. Before sending the page node data corresponding to the landing page and the page screenshot corresponding to the landing page to the client, the server also uploads the image data in the specified format to the COS (Cloud Object Service, object storage) system to generate the corresponding CDN (Content Delivery Network, content distribution network) address, and then destroys the browser instance created previously.

[0114] The COS system is a distributed storage service for storing massive amounts of files, offering advantages such as high scalability, low cost, reliability, and security. The COS system can be used to store static resources such as static scripts, audio and video, images, and attachments. Static resources stored in the COS system can also be connected to CDN services for distribution to clients.

[0115] That is, the server in this embodiment uses the COS system and CDN service to return the page node data corresponding to the landing page and the page screenshot corresponding to the landing page to the client. In the application scenario where the server is connected to a large number of codeless visual configuration services, this method can reduce the resource pressure of the server and improve the efficiency of codeless visual configuration to a certain extent.

[0116] Figure 8 This is a schematic diagram of an exemplary service architecture applicable to an embodiment of the present application. Figure 2 The server 220 in the implementation environment shown. Figure 8 As shown, this exemplary service architecture mainly reflects the server's reception and response process for configuration requests from the client. This process can be implemented by functional modules such as a request monitoring module, a request parsing module, a log module, and a cache module.

[0117] Among them, the request monitoring module may include sub-modules such as exception handling, middleware, dynamic routing, etc., to realize related processing of configuration requests, such as exception monitoring and routing of requests; the request parsing module may include sub-modules such as browser, Node library, page parsing conversion, screenshot image upload, response data assembly, etc., to realize the server creating a browser instance according to the configuration request, and starting the browser through the browser instance, loading the landing page in the browser based on the link corresponding to the landing page, and taking the page screenshot corresponding to the landing page, and sending the page screenshot and page node data corresponding to the landing page to the client execution process; the log module is used to store log information, such as error logs, request access logs, and request response logs; the cache module is used to provide storage space to store data that needs to be cached during the codeless visual configuration process.

[0118] It should be noted that in actual application scenarios, the server can be configured Figure 8 The number of functional modules shown is not limited here. Figure 8 The functional modules shown are usually implemented in the server as applications deployed in the server. The functions implemented by these applications are all recorded in the embodiments of the aforementioned processing method for codeless visual configuration, and will not be repeated in this embodiment.

[0119] Figure 9 is based on Figure 8 The service architecture shown in FIG is a schematic diagram of a service sequence for codeless visual configuration. Figure 9 As shown in the figure, the entire codeless visual configuration processing flow is initiated by the user triggering the configuration landing page in the client. After the client enters the visual configuration page, the user enters the link corresponding to the landing page on the page. The client then generates a configuration request containing the landing page link and sends the configuration request to the Node service deployed by the server.

[0120] The Node service then loads the convert module and executes the analyze method. The analyze method first creates a puppeteer instance and stores it as a browser object to obtain a browser instance, so as to start the browser through the browser instance.

[0121] In the puppeteer instance, a new tab is created through the newPage method of the browser object, and the tab is stored as a page object to obtain the page object. The setUserAgent method of the page object is then used to set the User-Agent of the tab to simulate data requests for the landing page based on the set User-Agent. Subsequently, the request interception function is activated to intercept repeated data requests. For non-repeated data requests, the landing page node is recursively parsed by scrolling the landing page to the bottom of the page and obtaining the page title. At the same time, the browser screenshot API is called to capture a screenshot of the landing page, and the page screenshot and page node data corresponding to the landing page are returned to the Node service. The Node service uploads the page screenshot to the COS system, assembles the page screenshot and page node data, and returns the assembled data to the client.

[0122] The client parses the node information and screenshots, and renders the corresponding visual operation area of ​​the landing page. The user selects the node to be configured in the visual operation area displayed by the client and selects the corresponding configuration item in the configuration item display area. After the user completes all configurations, all configuration data is written to the database for storage.

[0123] It should be understood that Figure 9 The example flow is only shown to illustrate the sequential process of performing codeless visualization configuration. The detailed execution process is recorded in the aforementioned embodiment of the processing method for codeless visualization configuration, and will not be repeated here.

[0124] Figure 10 This is an overall service flow chart for implementing codeless visual configuration, shown in an exemplary application scenario of the present application.

[0125] like Figure 10 As shown, the client visually configures a page based on the user's web browsing behavior and sends a configuration request to the server. The server loads the convert module and executes the analyze method, creating a new Puppetry instance and storing it as a browser object to obtain a browser instance. Within the Puppetry instance, a new tab is created using the browser object's newPage method and stored as a page object, resulting in a page object. The page object's setUserAgent method is then used to set the tab's User-Agent to simulate a data request. Subsequently, the request interception function is enabled to block duplicate data requests. For non-duplicate data requests, the landing page loads normally. Because the landing page content may require scrolling to fully display, the landing page is scrolled down 300 pixels. The server then checks whether the current scroll distance is greater than or equal to the scrollable distance, i.e., whether the page has been scrolled to the bottom. This is followed by a check to see if the page can be scrolled to the bottom twice, to accommodate the rare scenario of dynamically loading page elements. If so, the page is scrolled to the top, and a screenshot and node information parsing begin. The captured page screenshots are uploaded to the COS system, which then destroys the puppeteer instance. The screenshots and page node data corresponding to the landing page are assembled into response data and returned to the client. The client parses the page node data and screenshots, and renders the visual operation area corresponding to the landing page. The user selects the node to be configured in the visual operation area displayed on the client, and selects the corresponding configuration behavior type in the configuration item display area. After the user completes all configurations, all configuration data is saved, thus completing the entire codeless visual configuration process.

[0126] As can be seen from the above, the user does not need to install any plug-ins to implement the codeless visual configuration process in the client. Instead, it simulates the browser in the server to load the landing page, captures the corresponding page screenshot of the landing page, and obtains the page node data corresponding to the landing page, and returns the page screenshot and page node data to the client to display the codeless configuration page, so that the user can perform specific configuration operations of the landing page on the codeless configuration page. This allows the user to perform codeless visual configuration on any browser, greatly simplifying the configuration process and improving the user experience of the codeless visual configuration. Other beneficial effects are recorded in the embodiment of the aforementioned method for processing codeless visual configuration, and will not be repeated here.

[0127] Figure 11 FIG. 1 is a block diagram of a processing device for codeless visualization configuration according to an exemplary embodiment of the present application. Figure 11 As shown, the device includes:

[0128] The configuration request receiving module 1110 is configured to receive a configuration request sent by the client, and the configuration request includes a link corresponding to the landing page to be visually configured without code; the browser starting module 1130 is configured to create a browser instance according to the configuration request and start the browser through the browser instance; the landing page loading and screenshot module 1150 is configured to load the landing page in the browser based on the link and capture the page screenshot corresponding to the landing page; the response data sending module 1170 is configured to send the page 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 in the client based on the page screenshot and page node data, and the visual operation area is used to trigger the operation of performing code-free visual configuration on the landing page.

[0129] In another exemplary embodiment, the browser launching module 1130 includes:

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

[0131] In another exemplary embodiment, the landing page loading and screenshot module 1150 includes:

[0132] The tab creation unit is configured to create a new tab through the browser object and store the tab as a page object; the landing page loading unit is configured to call the page object to access the link to load the landing page in the browser; the page screenshot unit is configured to call the page object to take a screenshot of the landing page after the landing page is successfully loaded to obtain a page screenshot corresponding to the landing page.

[0133] In another exemplary embodiment, the landing page loading unit includes:

[0134] The data request generation subunit is configured to call the page object to set the user agent information of the tab to simulate the data request for the landing page based on the set user agent information; the data request response subunit is configured to load the landing page in the browser in response to the data request.

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

[0136] The request interception sub-unit is configured to call the page object to initiate request interception; the request judgment sub-unit is configured to determine whether the data request is a historical request after intercepting the data request; the loading and execution sub-unit is configured to load the landing page in the browser according to the data request if it is determined that the data request is not a historical request.

[0137] In another exemplary embodiment, the data request response subunit further includes:

[0138] The unique information generation sub-unit is configured to generate unique information based on the attribute information contained in the data request if it is determined that the resource type to which the data request belongs is not the first preset type and the suffix contained in the data request is not the second preset type; if it is determined that the unique information has not been recorded, it is determined that the data request is not a historical request.

[0139] In another exemplary embodiment, the page screenshot unit includes:

[0140] The scrolling sub-unit is configured to scroll the landing page down by a specified pixel amplitude; the first judgment unit is configured to judge whether the current scrolling height of the landing page is greater than or equal to the scrollable distance of the landing page. If it is judged as no, it jumps to execute the step of scrolling the landing page down by a specified pixel amplitude; the second judgment unit is configured to judge whether the landing page can be scrolled to the bottom of the page twice if the first judgment unit judges as yes. If it is judged as yes, it slides the landing page to the top of the page and takes a screenshot of the landing page to obtain a page screenshot corresponding to the landing page.

[0141] In another exemplary embodiment, the apparatus further comprises:

[0142] The node parsing module is configured to parse all nodes of the landing page after the landing page is successfully loaded to obtain the location information and unique identifier of each node; the page node data acquisition module is configured to use the location information and unique identifier of each node as the page node data corresponding to the landing page.

[0143] In another exemplary embodiment, the node parsing module includes:

[0144] The position attribute acquisition unit is configured to obtain the position attributes of the page elements contained in the landing page; the position traversal unit is configured to globally traverse the layout type and layout level of each node in the landing page based on the position attributes of the page elements contained in the landing page to obtain the position information of each node.

[0145] In another exemplary embodiment, the node parsing module also includes a unique identifier acquisition unit, which is configured to: determine whether the page element contained in the landing page has an identity identifier, and if so, use the identity identifier of the page element as the unique identifier of the corresponding node; if not, obtain the specified attribute information of the page element, and filter the specified attribute information, generate a temporary identifier based on the filtered attribute information, and perform a global search on the temporary identifier; if the search result indicates that the temporary identifier corresponds to a unique page element, use the temporary identifier as the unique identifier of the corresponding node; if the search result indicates that the temporary identifier does not correspond to a unique page element, obtain the position of the parent node of the page element, and generate a type identifier, and generate an identifier of the child element corresponding to the parent node based on the type identifier and the temporary identifier; determine whether the parent node has an identity identifier, and if so, assign the identity identifier of the parent node to the type identifier, and use the identifier of the corresponding child element as the unique identifier of the node corresponding to the page element.

[0146] In another exemplary embodiment, the page screenshot corresponding to the landing page includes image data in a specified format; the device also includes: a data storage module, configured to upload the image data in a specified format to an object storage system to generate a corresponding content distribution network address; and an instance destruction module, configured to destroy the browser instance.

[0147] It should be noted that the processing device for codeless visual configuration provided in the above embodiment and the processing method for codeless visual configuration provided in the above embodiment are based on the same concept, and the specific manner in which each module and unit performs operations has been described in detail in the method embodiment and will not be repeated here. In actual applications, the processing device for codeless visual configuration provided in the above embodiment can allocate the above functions to different functional modules as needed, that is, divide the internal structure of the device into different functional modules to complete all or part of the functions described above, and this is not limited here.

[0148] An embodiment of the present application also provides an electronic device, comprising: one or more processors; a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the electronic device implements the processing method of the codeless visualization configuration provided in the above-mentioned embodiments.

[0149] Figure 12 The following is a schematic diagram showing the structure of a computer system suitable for implementing an electronic device according to an embodiment of the present application. Figure 12 The computer system 1200 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0150] like Figure 12As shown, the computer system 1200 includes a central processing unit (CPU) 1201, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 1202 or the program loaded from the storage part 1208 to the random access memory (RAM) 1203, such as executing the method described in the above embodiment. Various programs and data required for system operation are also stored in the RAM 1203. The CPU 1201, ROM 1202 and RAM 1203 are connected to each other via a bus 1204. An input / output (I / O) interface 1205 is also connected to the bus 1204.

[0151] 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 section 1207 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and speakers; a storage section 1208 including a hard disk; and a communication section 1209 including a network interface card such as a LAN (Local Area Network) card or a modem. The communication section 1209 performs communication processing via a network such as the Internet. A drive 1210 is also connected to the I / O interface 1205 as needed. Removable media 1211, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 1210 as needed, so that computer programs read from the removable media can be installed in the storage section 1208 as needed.

[0152] In particular, according to an embodiment of the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present application includes a computer program product that includes a computer program carried on a computer-readable medium, the computer program including a computer program for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 1209 and / or installed from the removable medium 1211. When the computer program is executed by the central processing unit 1201, the various functions defined in the system of the present application are performed.

[0153] It should be noted that the computer-readable medium shown in the embodiments of the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium can be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or component, or any combination of the above. More specific examples of computer-readable storage media can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, 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 above. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate or transmit a program for use by or in combination with an instruction execution system, device or device. The computer program contained on the computer-readable medium can be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.

[0154] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present application. Among them, each box in the flowchart or block diagram can represent a module, program segment, or part of the code, and the above-mentioned module, program segment, or part of the code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0155] The units involved in the embodiments described in this application may be implemented by software or hardware, and the units described may also be set in a processor. In some cases, the names of these units do not constitute limitations on the units themselves.

[0156] Another aspect of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the aforementioned method for processing codeless visualization configuration. The computer-readable storage medium may be included in the electronic device described in the above embodiments, or may exist independently and not be incorporated into the electronic device.

[0157] Another aspect of the present application provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the codeless visualization configuration processing method provided in each of the above embodiments.

[0158] The above content is only a preferred exemplary embodiment of the present application and is not intended to limit the implementation scheme of the present application. Ordinary technicians in this field can easily make corresponding changes or modifications based on the main ideas and spirit of the present application. Therefore, the scope of protection of the present application shall be based on the scope of protection required by the claims.

Claims

1. A method for processing codeless visual configuration, characterized in that: include: Receive a configuration request sent by a client, wherein the configuration request includes a link corresponding to a landing page for codeless visual configuration; Creating a browser instance according to the configuration request, and starting the browser through the browser instance; Loading the landing page in the browser based on the link, and capturing a screenshot corresponding to the landing page; Sending the page 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 in the client based on the page screenshot and the page node data, wherein the visual operation area is used to trigger the operation of performing codeless visual configuration of the landing page; After the landing page is loaded successfully, all nodes of the landing page are parsed; The analysis of all nodes of the landing page includes: Obtaining the location attributes of the page elements contained in the landing page; Based on the position attributes of the page elements contained in the landing page, globally traverse the layout type and layout level of each node in the landing page to obtain the position information of each node; Determine whether the page element contained in the landing page has an identity identifier, and if so, use the identity identifier of the page element as the unique identifier of the corresponding node; If not, obtaining the specified attribute information of the page element, filtering the specified attribute information, generating a temporary identifier according to the filtered attribute information, and performing a global search on the temporary identifier; If the search result indicates that the temporary identifier corresponds to a unique page element, the temporary identifier is used as the unique identifier of the corresponding node.

2. The method according to claim 1, characterized in that Creating a browser instance according to the configuration request and starting the browser through the browser instance includes: Creating an instance according to the configuration request, and storing the created instance as a browser object to obtain the browser instance; Launches a browser via the browser instance.

3. The method according to claim 2, characterized in that The step of loading the landing page in the browser based on the link and capturing a screenshot of the landing page includes: Creating a new tab page through the browser object and storing the tab page as a page object; Calling the page object to access the link to load the landing page in the browser; After the landing page is loaded successfully, the page object is called to take a screenshot of the landing page to obtain a page screenshot corresponding to the landing page.

4. The method according to claim 3, characterized in that The calling page object accesses the link to load the landing page in the browser, including: Calling the page object to set the 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; The landing page is loaded in the browser in response to the data request.

5. The method according to claim 4, characterized in that The loading of the landing page in the browser in response to the data request includes: Calling the page object to initiate request interception; After intercepting the data request, determining whether the data request is a historical request; If it is determined that the data request is not a historical request, the landing page is loaded in the browser according to the data request.

6. The method according to claim 5, characterized in that The determining whether the data request is a historical request includes: If it is determined that the resource type to which the data request belongs is not the first preset type, and the suffix included in the data request is not the second preset type, generating unique information according to the attribute information included in the data request; If it is determined that the unique information has not been recorded, it is determined that the data request is not a historical request.

7. The method according to claim 3, characterized in that The calling of the page object to take a screenshot of the landing page after the landing page is successfully loaded to obtain a page screenshot corresponding to the landing page includes: Scroll the landing page downward by a specified pixel amount; Determine whether the current scroll height of the landing page is greater than or equal to the scrollable distance of the landing page. If not, jump to the step of scrolling the landing page downward by a specified pixel width. If the answer is yes, determine whether the landing page can be scrolled to the bottom of the page twice; If the judgment is yes, slide the landing page to the top of the page and take a screenshot 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, characterized in that The method further comprises: The location information and unique identifier of each node among all the nodes of the landing page are used as the page node data corresponding to the landing page.

9. The method according to claim 1, characterized in that The method further comprises: If the search result indicates that the temporary identifier does not correspond to a unique page element, the position of the page element in the parent node is obtained, and a type identifier is generated. The identifier of the child element corresponding to the parent node is generated based on the type identifier and the temporary identifier. Determine whether the parent node has an identity identifier. If so, assign the identity identifier of the parent node to the type identifier, and use the corresponding identifier of the child element as the unique identifier of the node corresponding to the page element.

10. The method according to any one of claims 1 to 7, characterized in that The page screenshot corresponding to the landing page includes image data in a specified format; Before sending the page screenshot and page node data corresponding to the landing page to the client, the method further includes: Uploading the image data in the specified format to the object storage system to generate a corresponding content delivery network address; Destroys the browser instance.

11. A processing device for codeless visual configuration, characterized in that: include: A configuration request receiving module, configured to receive a configuration request sent by a client, wherein the configuration request includes a link corresponding to a landing page for codeless visual configuration; A browser startup module is configured to create a browser instance according to the configuration request and start the browser through the browser instance; A landing page loading and screenshot module, configured to load the landing page in the browser based on the link and capture a page screenshot corresponding to the landing page; a response data sending module, configured to send a page 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 in the client based on the page screenshot and the page node data, wherein the visual operation area is used to trigger an operation of performing codeless visual configuration on the landing page; A node parsing module is configured to parse all nodes of the landing page after the landing page is successfully loaded; Wherein, the node parsing module includes: a position attribute acquisition unit configured to acquire position attributes of page elements contained in the landing page; a location traversal unit configured to globally traverse the layout type and layout level of each node in the landing page according to the location attributes of the page elements contained in the landing page, so as to obtain the location information of each node; The unique identifier acquisition unit is configured to determine whether the page element contained in the landing page has an identity identifier. If so, the identity identifier of the page element is used as the unique identifier of the corresponding node; if not, the specified attribute information of the page element is obtained, and the specified attribute information is filtered, a temporary identifier is generated according to the filtered attribute information, and a global search is performed on the temporary identifier; if the search result indicates that the temporary identifier corresponds to a unique page element, the temporary identifier is used as the unique identifier of the corresponding node.

12. An electronic device, characterized in that: include: one or more processors; A storage device for storing one or more programs, which, when executed by the one or more processors, enables the electronic device to implement the method according to any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that Computer-readable instructions are stored thereon, and when the computer-readable instructions are executed by a processor of a computer, the computer is caused to execute the method according to any one of claims 1 to 10.

14. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the method according to any one of claims 1 to 10 is implemented.

Images