Webpage card debugging method and device, computer equipment and storage medium

Abstract

The invention relates to a webpage card debugging method and device, computer equipment and a storage medium. The method comprises the steps that a card style configuration interface is displayed, a target static webpage card template is determined according to static style configuration operation obtained in a card style editing area in the card style configuration interface, and an initial webpage card interface is synchronously displayed based on the target static webpage card template; displaying a dynamic card data configuration area, and determining dynamic data configuration information according to a dynamic data configuration operation obtained by the dynamic card data configuration area; establishing communication connection with a third-party system according to the dynamic data configuration information, and calling dynamic card data from the third-party system; and rendering the dynamic card data into a target area of the initial webpage card interface, generating a target dynamic webpage card, and synchronously displaying the target dynamic webpage card. By adopting the method, the webpage card debugging efficiency can be improved.

Description

Technical Field

[0001] The present application relates to the technical field of web page design, and in particular to a web page card debugging method, device, computer equipment and storage medium. Background Art

[0002] With the development of front-end technology, people have put forward higher and higher requirements for the display of page data. For example, in web design, data is often displayed in the form of web cards, which can improve visibility. However, current web cards are often fixed, and can only be debugged by technicians using professional programming tools to manually write codes, which greatly affects the debugging efficiency of web cards. Summary of the invention

[0003] Based on this, it is necessary to provide a web page card debugging method, device, computer equipment, computer readable storage medium and computer program product to improve the efficiency of web page card debugging in response to the above technical problems.

[0004] In a first aspect, the present application provides a web page card debugging method, comprising:

[0005] Displaying a card style configuration interface, and determining a target static web page card template according to the static style configuration operation obtained in the card style editing area in the card style configuration interface, and synchronously displaying an initial web page card interface based on the target static web page card template;

[0006] Display the dynamic card data configuration area, and determine the dynamic data configuration information according to the dynamic data configuration operation obtained in the dynamic card data configuration area;

[0007] Establish a communication connection with a third-party system according to dynamic data configuration information, and call dynamic card data from the third-party system;

[0008] Render the dynamic card data into the target area of ​​the initial web page card interface, generate a target dynamic web page card, and display the target dynamic web page card synchronously.

[0009] In a second aspect, the present application provides a web page card debugging device, comprising:

[0010] The static style configuration module is used to display the card style configuration interface, and determine the target static web page card template according to the static style configuration operation obtained in the card style editing area in the card style configuration interface, and synchronously display the initial web page card interface based on the target static web page card template;

[0011] A dynamic data configuration module, used to display the dynamic card data configuration area and determine the dynamic data configuration information according to the dynamic data configuration operation obtained in the dynamic card data configuration area;

[0012] A dynamic data calling module is used to establish a communication connection with a third-party system according to dynamic data configuration information and call dynamic card data from the third-party system;

[0013] The web page card generation module is used to render the dynamic card data into the target area of ​​the initial web page card interface, generate the target dynamic web page card, and synchronously display the target dynamic web page card.

[0014] In a third aspect, the present application provides a computer device, the computer device comprising a memory and a processor, the memory storing a computer program, and the processor implementing the steps in the above method when executing the computer program.

[0015] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which implements the steps in the above method when executed by a processor.

[0016] In a fifth aspect, the present application provides a computer program product, which includes a computer program, and the computer program implements the steps in the above method when executed by a processor.

[0017] The web page card debugging method, device, computer equipment, computer readable storage medium and computer program product display a card style configuration interface; determine the target static web page card template according to the static style configuration operation performed on the card style editing area in the card style configuration interface, and synchronously display the initial web page card interface based on the target static web page card template. In this way, the development object only needs to perform very simple configuration operations in the card style configuration interface to realize the online configuration of the static web page card template, and can also instantly view the real-time effect of the target static web page card template online. This is more efficient than the way in which the development object manually writes code in a professional programming tool and continuously compiles to view the effect of the static web page card template online to configure the static web page card template. Display the dynamic card data configuration area; determine the dynamic data configuration information according to the dynamic data configuration operation performed in the dynamic card data configuration area; establish a communication connection with a third-party system according to the dynamic data configuration information, and call dynamic card data from the third-party system; render the dynamic card data into the target area of ​​the initial web page card interface, generate the target dynamic web page card, and synchronously display the target dynamic web page card. In this way, the development object only needs to perform very simple configuration operations in the card configuration interface to configure the dynamic data configuration information online, communicate with the automatic third-party system to automatically obtain dynamic card data, and automatically render the obtained dynamic card data into the configured static web page card template. In addition, the real-time effect of the target dynamic web page card online can be instantly viewed. This is more efficient than the way in which the development object manually writes code in a professional programming tool to configure dynamic card data. In other words, the present application enables the development object to perform some simple configuration operations in the card web page configuration interface through the online configuration of the web page card generation method of static style and dynamic data, and the debugging of the web page card can be realized. Compared with the traditional technology in which the development object manually writes code to debug the web page card method, it is more efficient. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for describing the embodiments are briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative labor.

[0019] Figure 1 An application environment diagram of a web page card debugging method provided in an embodiment of the present application;

[0020] Figure 2 A flowchart of a web page card debugging method provided in an embodiment of the present application;

[0021] Figure 3 A schematic diagram of a static style configuration method provided in an embodiment of the present application;

[0022] Figure 4 A schematic diagram of an interface for static style form configuration provided in an embodiment of the present application;

[0023] Figure 5 A schematic diagram of a static style JSON configuration interface provided in an embodiment of the present application;

[0024] Figure 6 A schematic diagram of a dynamic data interface debugging provided by an embodiment of the present application;

[0025] Figure 7 A schematic diagram of a dynamic data script debugging provided in an embodiment of the present application;

[0026] Figure 8 A flow chart of a dynamic data configuration method provided in an embodiment of the present application;

[0027] Fig. 9 A flowchart of another dynamic data configuration method provided in an embodiment of the present application;

[0028] Fig.10 A flowchart of another web page card debugging method provided in an embodiment of the present application;

[0029] Fig.11 A schematic diagram of an application scenario of a web page card debugging method provided in an embodiment of the present application;

[0030] Fig.12 A structural block diagram of a web page card debugging device provided in an embodiment of the present application;

[0031] Fig.13 An internal structure diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0032] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0033] In order to better understand the web page card debugging method, device, computer equipment and storage medium provided in the embodiment of the present application, the application environment applicable to the embodiment of the present application is described below.

[0034] The web page card debugging method, device, computer equipment and storage medium provided in the embodiments of the present application can be applied to Figure 1 In the application environment shown. Among them, the terminal 102 communicates with the third-party system 104 through the network. The data storage system can store the data that the terminal 102 needs to process. The data storage system can be integrated on the server, or it can be placed on the cloud or other servers. The terminal 102 displays the card style configuration interface; according to the static style configuration operation performed on the card style editing area in the card style configuration interface, the target static web page card template is determined, and the initial web page card interface is synchronously displayed based on the target static web page card template; the dynamic card data configuration area is displayed; according to the dynamic data configuration operation performed in the dynamic card data configuration area, the dynamic data configuration information is determined; according to the dynamic data configuration operation performed in the dynamic card data configuration area, a connection is established with the third-party system 104, and dynamic card data is called from the third-party system 104; the dynamic card data is rendered into the target area of ​​the initial web page card interface, a target dynamic web page card is generated, and the target dynamic web page card is synchronously displayed.

[0035] The network is used to provide a medium for a communication link between the third-party system 104 and the terminal 102. The network may include various connection types, such as a wired communication link, a wireless communication link, etc., which is not limited in the embodiment of the present application.

[0036] It should be understood that Figure 1 The third-party system 104 and the terminal 102 are merely illustrative. The terminal 102 may be, but is not limited to, various desktop computers, laptop computers, smart phones, tablet computers, IoT devices, and portable wearable devices. The IoT devices may be smart speakers, smart TVs, smart air conditioners, smart car-mounted devices, etc. The portable wearable devices may be smart watches, smart bracelets, head-mounted devices, etc. The third-party system 104 may be a terminal or a server, and may be implemented using an independent server or a server cluster or a cloud server consisting of multiple servers.

[0037] It should be noted that the web page card debugging method in the traditional technology requires repeated communication and docking between the development object and the test object. That is, the development object needs to debug the fixed web page card by manually writing code in a professional programming tool. After the debugging is completed, the test object deploys the debugged web page card to the real environment for testing and verification, and releases the web page card after successful verification. However, the above web page card debugging process is very cumbersome, which will greatly affect the debugging efficiency of the web page card.

[0038] Based on this, the embodiment of the present application proposes a new web page card debugging method, which allows the development object to only need to perform very simple configuration operations in the card configuration interface to realize online configuration of the static web page card template, and instantly view the real-time effect of the target static web page card template online, which is more efficient than the development object manually writing code in a professional programming tool, and constantly compiling to view the online effect of the static web page card template to configure the static web page card template. In addition, it is also convenient for the development object to configure dynamic data configuration information online, so as to realize communication with a third-party system to automatically obtain dynamic card data, automatically render the acquired dynamic card data into the configured static web page card template, and instantly view the real-time effect of the target dynamic web page card online. This is more efficient than the development object manually writing code in a professional programming tool to configure dynamic card data. In other words, the present application can enable the development object to perform some simple configuration operations in the card web page configuration interface through online configuration of static styles and dynamic data web page card generation methods, and can realize the debugging of web page cards, which is more efficient than the development object manually writing code to debug web page cards in traditional technology.

[0039] In some embodiments, Figure 2 As shown, the embodiment of the present application provides a web page card debugging method, which is applied to Figure 1 The terminal 102 in the example is used for explanation. It is understandable that the method can be implemented by the terminal 102 alone, or can be implemented through interaction between the server and the terminal 102. The method includes the following steps:

[0040] Step S202, displaying a card style configuration interface, and determining a target static web page card template according to the static style configuration operation obtained in the card style editing area in the card style configuration interface, and synchronously displaying an initial web page card interface based on the target static web page card template.

[0041] Among them, the terminal mentioned in the embodiment of the present application refers to a terminal used to run a web card debugger to debug a web card through the web card debugger. A web card debugger refers to a debugger for development objects to develop and debug web cards online. A web card is a component that displays information in an independent form on a web page. It is usually a rectangular area that contains specific content, images, and interactive elements. The purpose of setting up web cards on a web page is to present information in a concise, orderly, and attractive manner, so that users can quickly browse and understand the content.

[0042] In actual application scenarios, the content displayed on web cards usually includes media content, product display, article list, social media updates, etc. Among them, the media content displayed on web cards refers to the web cards that can be used to display media content such as images, videos, and audio, allowing users to quickly preview and play. Product display displayed on web cards refers to the use of web cards to display the image, name, price, and brief description of the product to attract the user's attention and promote purchase. The list of articles displayed on web cards refers to the use of web cards to display the thumbnail, title, brief summary, and release date of the article, so that users can quickly browse and select the content of interest. Social media updates displayed on web pages refer to the use of web cards to display updates, images, comments, reposts, and other content posted by users, allowing users to quickly browse and interact. Overall, by using web cards, a better user experience can be provided, allowing users to obtain the information they need from web pages more quickly and conveniently.

[0043] In some embodiments, a card style configuration interface is built into the web card debugger. The card style configuration interface refers to an interface for the development object to adjust the style and configure dynamic data of the web card. Through the card style configuration interface provided by the web card debugger, the development object can intuitively adjust and configure the static style of the web card, such as appearance, layout and interactive effects, and can also configure the dynamic data displayed on the web card and load it into the web card to achieve the desired effect of the development object.

[0044] It can be understood that in the card style configuration interface, developers can preview and modify the static style of web page cards in real time to instantly view the impact of the changes on the final page. In this way, developers can save time and energy in the development process and quickly implement and adjust the style effects of web page cards.

[0045] Among them, the card style editing area refers to an area in the card style configuration interface for editing and adjusting the style attributes of the web page card. In some embodiments, the style attributes include background color, text font, text color, border style and shadow effect, etc.

[0046] Static style configuration operation refers to the operation of modifying and configuring the style of web page cards in the card style editing area. It should be noted that static style configuration operation is different from dynamic style configuration operation. Static style configuration operation does not involve dynamic or interactive behavior, but only involves the appearance and layout of elements, and does not involve modification of their behavior.

[0047] The initial web card interface refers to a default or placeholder interface displayed before the target static web card template is loaded. This interface can be used to prompt the development object to wait for the web card to load, or to display some static information. It should be noted that once the web card is loaded, the initial web card interface will be replaced by the actual page content.

[0048] It can be understood that static style configuration operations are suitable for style requirements that do not need to change according to the dynamic data configured by the development object. For example, the development object can use static style configuration operations to set the font size, font color and alignment of the title text on the web page card, or set the background color and border style of the button.

[0049] A static web page card template refers to a template used to create a card-style layout in a static page. Among them, the card layout is often used to display content, such as article lists, product displays, information cards, etc. Generally, a static web page card template provides predefined static styles and layouts, so that the development object can easily create and organize card-style content. It can be understood that a static web page card template usually includes the appearance and arrangement of web page cards. The static web page card template includes the border, background color, shadow effect, and spacing between web page cards of the web page card. The static web page card template can also define the static style of the size, title, summary, picture, and other related content of the web page card.

[0050] Specifically, after the development object opens the web card debugger of the terminal, the web card debugger can display the card style configuration interface by default. Alternatively, after the development object opens the web card debugger of the terminal, the card style configuration interface is opened by triggering the corresponding button or option on the web card debugger. The development object can modify and configure the style of the web card in the card style editing area in the card style configuration interface. The terminal responds to the static style configuration operation of the development object and uses the modified and configured static web card template as the target static web card template. At the same time, the terminal synchronously displays the initial web card interface including the target static web card template, so that the development object can browse the static style of the target static web card template in real time, so as to determine whether the static style configuration operation of the target static web card template needs to be performed.

[0051] In some embodiments, the development object can create a blank static web page card template without static style in the card style editing area of ​​the card style configuration interface, and configure the static style of the newly created static web page card template to obtain a target static web page card template. For example, the development object can configure and debug the static style of the newly created static web page card template according to the static style built in the card style debugging area until the style effect expected by the development object is achieved.

[0052] In other embodiments, the card style editing area of ​​the card style configuration interface can provide the development object with multiple created static web page card templates, and the development object can select one of the multiple created static web page card templates directly as the target static web page card template according to actual needs, such as actual business needs. If the static styles of the multiple created static web page card templates cannot meet the needs of the development object, the development object can select one of the static web page card templates and then configure the static style of the selected static web page card template to obtain the target static web page card template.

[0053] Step S204, displaying the dynamic card data configuration area, and determining the dynamic data configuration information according to the dynamic data configuration operation acquired in the dynamic card data configuration area.

[0054] The dynamic card data configuration area refers to an area used to debug and preview the display effect of dynamic data in the target static web page card. Generally, the dynamic data card debugging area is usually a preview panel or debugging console, which is used to configure dynamic data and observe the rendering and effect of dynamic data in the target static web page card.

[0055] It can be understood that in the dynamic card data configuration area, the development object can input, edit or load dynamic data and view the display effect of these dynamic data on the target static web page card in real time. This helps to verify the correctness of dynamic data, timely troubleshoot possible problems, and make necessary adjustments and improvements.

[0056] Among them, dynamic data configuration operation refers to the flexible configuration and management of data in web page cards during the development process, so as to realize the function of dynamically updating and displaying data in web page cards.

[0057] Dynamic data configuration information refers to the relevant information used to configure and manage dynamic data during the development process. By configuring dynamic data configuration information, the dynamic data update and display functions in the web page card can be realized.

[0058] In some embodiments, the dynamic data configuration information includes at least one of dynamic data source information and dynamic data call information. The dynamic data source information refers to the relevant information of the data source used by the web card debugger. By configuring the dynamic data source information, the web card debugger can obtain real-time or demand-refreshed data from the specified data source to display and use in the target static web card template, so that the web card can be dynamically updated and respond to user operations.

[0059] The dynamic data call information refers to the calling method of calling the dynamic data in the specified data source in the web card debugger. It can be understood that the specific calling method depends on the requirements and interaction mode of the web card debugger.

[0060] Specifically, after the development object configures the target static web card template, the web card debugger can automatically display the dynamic card data configuration area, so that the developer can perform dynamic data configuration operations in the dynamic card data configuration area. Alternatively, the development object triggers the corresponding button or option on the web card debugger to display the dynamic card data configuration area. The development object can perform dynamic data configuration operations in the displayed dynamic card data configuration area, and the web card debugger determines the dynamic data configuration information according to the dynamic data configuration operations of the development object.

[0061] In some embodiments, after the development object configures the target static web page card template, a control for confirming the completion of static style debugging can be triggered in the web page card debugger, such as clicking a "confirm" button. The web page card debugger of the terminal automatically displays the dynamic card data configuration area in response to the above operation.

[0062] In some embodiments, the web card debugger development object can directly select the data source, set the calling method, etc. in the dynamic card data configuration area to obtain dynamic data configuration information. This method is relatively simple and intuitive, and is suitable for non-professional technical objects to perform configuration operations.

[0063] In other embodiments, a code editor may be provided in the dynamic card data configuration area, and the development object may complete the dynamic data configuration operation by writing code to obtain dynamic data configuration information. For example, the development object may directly write relevant configuration codes in the code editor, such as configuring data source information, setting calling methods, etc. This method is more flexible and powerful, and is suitable for technical objects with a certain technical foundation to perform configuration operations.

[0064] Step S206: establishing a communication connection with a third-party system according to the dynamic data configuration information, and calling dynamic card data from the third-party system.

[0065] The third-party system refers to an external system that interacts with the web card debugger to enable the web card debugger to obtain dynamic data. The third-party system is used to provide dynamic data support.

[0066] Specifically, the web card debugger establishes a communication connection with the third-party system according to the dynamic data source information in the dynamic data configuration information, and detects the communication connection status. When the web card debugger successfully establishes a communication connection with the third-party system, the dynamic card data is called from the third-party system according to the dynamic data calling information in the dynamic data configuration information.

[0067] In the case that the web card debugger fails to communicate with the third-party system, it continues to communicate with the third-party system according to the dynamic data source information until the communication connection is successful. If the time for reconnection attempt is too long, or the number of reconnection attempts is too many, the development object can be prompted to re-perform the dynamic data configuration operation to obtain new dynamic data configuration information. The web card debugger then establishes a communication connection with the third-party system according to the new dynamic data configuration information.

[0068] In some embodiments, the web card debugger can construct a request according to the dynamic data configuration information and send it to the third-party system. After receiving the request, the third-party system processes and returns the corresponding dynamic data to the web card debugger, so that the web card debugger processes and displays the received data.

[0069] In other embodiments, after the web card debugger establishes a communication connection with the third-party system, it can exchange real-time data with the third-party system. That is, when new dynamic data is available, the third-party system can actively push the new dynamic data to the web card debugger, so that the web card debugger processes and displays the new dynamic data.

[0070] For ease of understanding, an example is given to illustrate the calling process of dynamic card data. Assume that the third-party system is a supply chain management system, which is responsible for managing the inventory and price of goods and provides corresponding interfaces for the web card debugger to use. The web card debugger can communicate with the supply chain management system to obtain dynamic data such as inventory and price of goods from the supply chain management system. The web card debugger renders these dynamic data into the target static web card template and publishes it to the e-commerce website for display. By integrating with the supply chain management system, the web card debugger can obtain the latest product information in real time and display it dynamically.

[0071] Step S208, rendering the dynamic card data into the target area of ​​the initial web page card interface, generating a target dynamic web page card, and synchronously displaying the target dynamic web page card.

[0072] The target area of ​​the initial web page card refers to the area in the initial web page card used to fill in dynamic card data.

[0073] Specifically, the web page card debugger uses rendering technology to fill the dynamic data obtained from the third-party system into the target area of ​​the initial web page card, thereby generating a target dynamic web page card. After the target dynamic web page card is generated, the target dynamic web page card is synchronously displayed in the web page card debugger.

[0074] In some embodiments, a template engine can be used to create an HTML (Hypertext Markup Language) template for a card, wherein the HTML template contains placeholders to identify the location of dynamic data. After the web page card debugger obtains the dynamic data, the template engine is used to fill the dynamic data into the placeholders to generate a new HTML fragment. The new HTML fragment is inserted into the target area of ​​the initial web page card to generate a target dynamic web page card, and the target dynamic web page card is displayed synchronously. In this way, the update and display of the dynamic web page card can be achieved.

[0075] This application generates web page cards with static styles and dynamic data through online configuration, so that the development object can debug the web page card by performing some simple configuration operations in the card web page configuration interface. This is more efficient than the traditional technology in which the development object debugs the web page card by manually writing code.

[0076] In some embodiments, step S202 specifically includes but is not limited to: determining a target static web page card template from various candidate web page card templates based on a static template selection operation performed on a card style editing area in a card style configuration interface; determining a configured static style based on a static style configuration operation performed on the target static web page card template; re-rendering the target static web page card template according to the configured static style, and synchronously displaying the initial web page card interface based on the re-rendered target static web page card template.

[0077] The static template selection operation refers to the operation of selecting one or more candidate web page card templates from the candidate web page card templates. The candidate web page card template refers to a pre-configured card template with different static styles or layouts that can be selected by the development object. Each candidate web page card template corresponds to a standard data structure, and the development object can develop a third-party data interface based on its standard data structure to meet specific business needs.

[0078] Specifically, the development object can select a card template from a plurality of alternative web page card templates displayed in the card style editing area. The web page card debugger determines the alternative card template selected by the development object as the target static web page card template based on the static template selection operation performed by the development object on the card style editing area in the card style configuration interface. If the default static style in the target static web page card template does not meet the business needs of the development object, the development object can perform a static style configuration operation on the target static web page card template. The web page card debugger determines the static style configured by the development object for the target static web page card template in response to the above-mentioned static style configuration operation. The web page card debugger re-renders the target static web page card template according to the configured static style, and synchronously displays the initial web page card interface based on the re-rendered target static web page card template.

[0079] In some embodiments, if the default static style in the target static web page card template meets the business requirements of the development object, the development object may not perform static style configuration operations on the target static web page card template. The web page card debugger may synchronously display the initial web page card interface according to the target static web page card template selected by the development object.

[0080] It can be seen that in this embodiment, the development object can be enabled to perform online static style debugging, and can quickly select a target static web page card template that meets business needs without having to build it from scratch, saving time and energy. In addition, the development object can also customize the selected target static web page card template, meeting personalized display needs and improving development efficiency.

[0081] In some embodiments, the step of "determining the configured static style based on the static style configuration operation performed on the target static web page card template" specifically includes but is not limited to: displaying the form style editing module; determining the configured static style based on the static style selection operation performed on multiple alternative static styles.

[0082] Among them, the form style editing module refers to a module that enables the development object to intuitively edit the static style of the web page card in a form-based manner, such as customizing and editing the appearance and style of the web page card.

[0083] In some embodiments, the form style editing module provides a plurality of alternative static styles, wherein the alternative static styles refer to a series of pre-designed style options of web page cards.

[0084] The static style selection operation refers to an operation of selecting one or more static styles from multiple alternative static styles.

[0085] Specifically, after the development object determines the target static web page card template, the web page card editor displays the form style editing module. The development object can select a static style that meets business requirements from multiple alternative static styles built into the form style editing module to obtain a configured static style.

[0086] It can be seen that in this embodiment, the development object does not need to design or write a static style from scratch, but can directly select a static style for configuration from multiple alternative static styles built into the form style editing module, which can save the development object's time and energy and improve the efficiency of web page card debugging.

[0087] In some embodiments, the step of "determining the configured static style based on the static style configuration operation performed on the target static web page card template" specifically includes but is not limited to: displaying the custom style editing module; obtaining the style attribute data entered in the style data editor; parsing the style attribute data to obtain the style attribute value of the target static web page card template; and determining the static style configured for the target static web page card template based on the style attribute value.

[0088] The style data editor refers to an editor used to edit style attribute data.

[0089] The style attribute data is data written in a preset format and used to describe the style corresponding to the target static web page card template. The style attribute data is composed of a series of key-value pairs, each of which represents a style attribute and its corresponding value.

[0090] Style attribute values ​​can be specific numeric values, color values, strings, or other data types suitable for the corresponding style attributes. Each style attribute has a fixed range and type of specified values. The style attribute value extracted from the style attribute data is the actual style value of the specified element. For example, if the style attribute is "background-color:red;", the value extracted from the style attribute data is "red". These style attribute values ​​are used to apply the specified style to the element to present a specific appearance.

[0091] In practical applications, the preset format may be a lightweight data exchange format (JavaScript Object Notation, JSON). The style attribute data is JSON data used to describe the target static web page card.

[0092] Specifically, after the development object determines the target static web page card template, the web page card editor displays the custom style editing module. The development object writes the corresponding style attribute data in the style editing module. The web page card debugger obtains the style attribute data entered by the development object in the style data editor. The web page card debugger parses the style attribute data, that is, reads the style attribute and the corresponding value one by one from the style attribute data key-value pairs to obtain the parsed style attribute value. The web page card debugger determines the static style configured by the development object for the target static web page card template based on the style attribute value.

[0093] It can be seen that in the embodiment, in addition to performing form-based configuration operations on static styles in the form style editing module, the development object can also configure the static style by directly writing style attribute data, which can meet different static style configuration requirements and improve the applicability of static style configuration.

[0094] In some embodiments, Figure 3 As shown, the static style in the web page card of the embodiment of the present application is based on the metadata model and supports form-based and JSON-based configuration. The implementation process of the static style configuration of the web page card includes: first, define the static styles of some web page cards in advance to meet the needs of different scenarios, such as the static style requirements of report-type web page cards. Next, initialize the metadata of the static style and store it in the database. Then, the form style editing module and the JSON style editing module can be designed according to the metadata stored in the database, so that the development object can configure the static data through any editor. The rendering of the static style of the web page card is realized through the front end to generate the target web page card template.

[0095] In some embodiments, Figure 4As shown, it is one of the card style configuration interfaces. The static web page card template is displayed in real time on the left side of the card style configuration interface, and the card editing, card debugging, form configuration and JSON configuration tabs are included on the right side of the card style editing module. Among them, card editing refers to the static style configuration operation of the displayed static web page card template, card debugging refers to the operation of dynamic data debugging of the displayed static web page card template, form configuration refers to providing a form style editing module for form-based style configuration, and JSON configuration refers to providing a JSON style editing module to input JOSN data for style configuration. In the card editing tab, the operation object needs to enter some basic information of the static web page card template, such as card name, card description, PC-side Uniform Resource Locato (URL) and mobile-side URL, and also needs to determine whether to start and stop the static web page card template. In the form configuration tab, the operation object needs to determine whether paging is supported and enter some basic information of the form configuration, such as page number, page size, tab column, etc.

[0096] In some embodiments, Figure 5 As shown, this is another card style configuration interface. Figure 5 The card style configuration interface is Figure 4 The difference is that the operation object is the JSON configuration tab, in which the operation object can be edited as follows: Figure 5 The JSON data shown is used to configure the static style of the static web page card template.

[0097] In other embodiments, after the development object determines the target static web page card template, the web page card editor can also display an online code editor, and the operating object can directly edit the HTML and Cascading Style Sheets (CSS) code on the online code editor. After the code is edited, the static web page card template can be obtained.

[0098] In some embodiments, the dynamic card data configuration area includes a control module and a connection module, and the dynamic data configuration information includes dynamic data source information. Step S204 specifically includes but is not limited to: obtaining third-party interface information, interface transfer parameters, interface request methods, and interface request header information in each input control of the control module; obtaining the connection management configuration operation performed in the connection module to determine the connection management information; using the third-party interface information, interface transfer parameters, interface request methods, interface request header information, and connection management information as dynamic data source information.

[0099] Among them, the third-party interface information, interface transfer parameters, interface request mode and interface request header information are all input by the development object in various input controls according to the reference input prompt information displayed in the control module; the reference input prompt information refers to the information used to prompt whether the data input by the development object meets the specifications. Input controls refer to elements or components used in the control module to receive, obtain and process the input of the development object. Input controls can include various forms of text fields, drop-down menus, radio buttons, check boxes, sliders, etc.

[0100] Third-party interface information refers to the Application Programming Interface (API) information developed and maintained by the service provider of the third-party system.

[0101] Interface passing parameters are to specify the details of the required operation or request by passing some data or configuration options to the API interface when using the API interface. In some embodiments, the interface passing parameters include input parameters and request header parameters. Request header parameters refer to parameters added to the header of the request to pass authentication information and request format.

[0102] The interface request method refers to the method by which the terminal sends a request when communicating with a third-party system, such as the request method for obtaining resources from a third-party system (GET), the request method for submitting data to a third-party system (POST), the request method for updating resources (PUT), the request method for deleting resources (DELETE), and the request method for partially updating resources (PATCH).

[0103] Connection management configuration operations refer to the management and configuration operations of the connection pool when communicating with a third-party system. For example, creating a connection, using a connection, releasing a connection, and destroying a connection. Connection management information refers to information used to reflect the connection configuration status.

[0104] Specifically, the development object refers to the reference input prompt information of the control module, inputs the third-party interface information, interface transfer parameters, interface request method and interface request header information in each input control, and the web card debugger obtains the above data. The development object can also perform connection management configuration operations in the connection module, and the web card debugger responds to the above connection management configuration operations to determine the connection management information configured by the development object. The web card debugger can verify the third-party interface information, interface transfer parameters, interface request method, interface request header information and connection management information, and directly use the above configured data as dynamic data source information after the verification is passed. If the verification fails, the web card debugger prompts the development object to re-enter the data.

[0105] It can be seen that in this embodiment, the development object can configure the dynamic data source information online through the interface, which is more efficient than the traditional method of directly modifying the code. In addition, through the above steps, the web card debugger can be made more flexible, which is convenient for the development object to switch or adjust different interfaces and connection configurations.

[0106] In some embodiments, the dynamic card data configuration area also includes an execution module; the dynamic data configuration information also includes dynamic data call information. Step S204 specifically includes but is not limited to: determining the dynamic data call information according to an interface call method selected from a plurality of alternative interface call methods displayed in the execution module, and an interface call relationship configured for the selected interface call method.

[0107] The execution module is a background concept. The development object will enter the address and business parameters of the third-party system in the dynamic card data configuration area, and the executor is responsible for communicating with the third-party system through the above parameters entered by the development object. Usually, the protocol for communicating with the third-party system is the Hypertext Transfer Protocol (HTTP).

[0108] The alternative interface calling method refers to the interface calling method that is preset and available for the development object to choose. The interface calling relationship includes one or more interfaces specifically called in the third-party system, and the calling order of one or more interfaces.

[0109] Specifically, multiple alternative interface calling methods are displayed on the execution module. The development object can select one of the multiple alternative interface calling methods according to actual needs. In addition, the development object also needs to configure the interface calling relationship of the selected interface calling method. The web card debugger determines the interface calling method selected by the development object and the configured interface calling relationship as dynamic data calling information.

[0110] It can be seen that in the embodiments of the present application, the development object can select different interface calling methods and configure different interface calling relationships according to different business scenarios and requirements, which can improve flexibility.

[0111] In some embodiments, Figure 6The figure shows one of the dynamic data configuration interfaces. The left side of the dynamic data configuration interface displays the dynamic data rendered in the static web page card template in real time, such as "year-on-year growth of 12.0%". The right side of the dynamic data configuration interface includes tabs for card editing and card debugging. Card editing refers to configuring dynamic data configuration information by entering data in input controls. The development object can enter dynamic data source information in each input control of the card editor, such as the address of the third-party system, the request method for sending the request, the request header, etc.

[0112] In some embodiments, the dynamic card data configuration area includes a dynamic script management module and a dynamic script debugging module. Step S204 specifically includes but is not limited to: determining a target dynamic script template from various preset dynamic script templates according to a script template selection operation performed in the dynamic script management module; loading the target dynamic script template through the dynamic script debugging module, and determining the target dynamic script according to a dynamic script encoding operation performed based on the loaded target dynamic script template; and determining dynamic data configuration information according to the target dynamic script.

[0113] Each preset dynamic script template is developed through different dynamic script development toolkits. A dynamic script development toolkit refers to a set of tools for developing and executing dynamic scripts, which usually includes a series of tools, libraries and frameworks for writing, processing and executing dynamic scripts.

[0114] The script template selection operation refers to the operation of selecting one or more preset dynamic script templates from various preset dynamic script templates.

[0115] Dynamic script encoding operation refers to the process of encoding and operating in the dynamic script of the target dynamic script template.

[0116] Specifically, the development object can select one of the preset dynamic script templates from the preset dynamic script templates displayed in the dynamic script management module. The web card debugger responds to the above-mentioned script template selection operation and uses the preset dynamic script template selected by the development object as the target dynamic script template. Afterwards, the web card debugger loads the target dynamic script template through the dynamic script debugging module. The development object performs secondary encoding and operation in the dynamic script based on the loaded target dynamic script template to obtain the target dynamic script. The web card debugger parses the target dynamic script to determine the dynamic data configuration information therefrom.

[0117] It can be seen that in this embodiment, in addition to inputting corresponding data in the input controls of the execution module and the connection module to configure dynamic data, the development object can also configure dynamic data by directly writing dynamic scripts, which can meet different dynamic data configuration requirements and improve the applicability of dynamic data configuration. In addition, by providing a preset dynamic script template, the development efficiency can be further improved.

[0118] It should be noted that in this way, the control module and the connection module are built into the script development toolkit. Therefore, the script can interact with the third-party system through the script development toolkit. Since the underlying logic is implemented by the same set of code, it supports scripted online programming and has higher flexibility.

[0119] In some embodiments, Figure 7 As shown in the figure, it is another dynamic data configuration interface. Among them, card debugging refers to configuring dynamic data configuration information by editing dynamic scripts. The development object can be Figure 7 Enter the dynamic script in the right interface shown to complete the dynamic data configuration requirements.

[0120] In some embodiments, step S206 specifically includes but is not limited to: establishing a communication connection with a third-party system based on the dynamic data source information; when the interface calling method in the dynamic data calling information is a single interface call, calling each interface in the third-party system according to the interface calling relationship in the dynamic data calling information to obtain the dynamic card data returned by each interface in the third-party system.

[0121] Among them, single interface call refers to a calling method of calling the interface of a third-party system and directly obtaining the dynamic card data returned by the interface.

[0122] Specifically, the web card debugger establishes a communication connection with the third-party system according to the dynamic data source information. When the interface calling mode in the dynamic data calling information is a single interface calling, the web card debugger directly calls the interfaces according to the interface calling relationship in the dynamic data calling information, i.e., after determining one or more interfaces that need to be called in the third-party system, and obtains the dynamic card data returned by these interfaces respectively.

[0123] It can be seen that in this embodiment, by acquiring the dynamic card data returned by each interface of the third-party system in a single interface call manner, a complete dynamic card data set can be obtained to ensure data integrity.

[0124] In some embodiments, the web page card debugging method of the embodiment of the present application specifically also includes but is not limited to: when the interface calling mode in the dynamic data calling information is an interactive call, according to the interface calling relationship in the dynamic data calling information, the interface calling order is determined from the various interfaces of the third-party system; the currently called interface is determined in sequence according to the interface calling order, and the dynamic card data returned by the currently called interface is used as the interface transfer parameter of the next called interface to obtain the dynamic card data returned by the next called interface according to the interface transfer parameter.

[0125] The interactive call refers to a calling method of calling an interface of a third-party system and obtaining dynamic card data returned by one of the interfaces through interaction between the interfaces of the third-party system.

[0126] Exemplarily, for example, if the result returned by the first interface includes a dynamic token, when the execution module calls the second interface, it will pass the dynamic token as a parameter to the second interface to obtain the data returned by the second interface.

[0127] Specifically, when the interface calling mode in the dynamic data calling information is an interactive calling, the web card debugger determines the interface calling order from each interface of the third-party system according to the interface calling relationship in the dynamic data calling information. The web card debugger determines the currently called interface from each interface in turn according to the interface calling order, and uses the dynamic card data returned by the currently called interface as the interface transfer parameter of the next called interface, that is, the input parameter, to obtain the dynamic card data returned by the next called interface according to the interface transfer parameter. Then, the web card debugger continues to determine the new currently called interface, and uses the dynamic card data returned by the previous called interface as the input parameter, and obtains the dynamic card data returned by the first called interface according to the input parameter, until all interfaces are called and the dynamic card data returned by the last called interface is received.

[0128] It can be seen that in this embodiment, by interactively calling, that is, interactively calling according to the interface calling relationship and order in the dynamic data calling information, the real-time and relevance of dynamic data can be achieved, and more accurate and coherent dynamic card data can be provided. The development object can choose single interface calling and interactive calling according to actual business needs, and it can also be applied to different business scenarios to improve applicability.

[0129] In some embodiments, the dynamic card data includes a dynamic card field. Step S208 specifically includes but is not limited to: performing preliminary processing on the dynamic card field returned by the third-party system through the data processing module to obtain a preliminary processed dynamic card field; performing structural conversion on the preliminary processed dynamic card field through the output unit to obtain a structurally converted dynamic card field; rendering the structurally converted dynamic card field into the target area to generate a target dynamic web page card, and synchronously displaying the target dynamic web page card.

[0130] The dynamic card fields after structural conversion match the fields defined in the target static web page card template. Structural conversion of dynamic card fields refers to the process of converting dynamic card fields from one structure to another format.

[0131] For example, a web page card relies on two interfaces, namely interface A and interface B. Assuming that interface A returns 10 fields and interface B returns 5 fields, then the first 3 fields of interface A and the first 4 fields of interface B can be combined and calculated by online coding and configuration to obtain the fields after structure conversion.

[0132] As another example, the interface provider provides a history interface, but the fields returned by the history interface are inconsistent with the fields defined by the development object in the web page card. In this case, it is necessary to perform structural conversion on the fields returned by the history interface.

[0133] Specifically, the web card debugger performs preliminary processing on the dynamic card fields returned by the third-party system through the data processing module to obtain preliminary processed dynamic card fields. For example, the web card debugger performs data aggregation, data filtering, and data calculation on the dynamic card fields returned by the third-party system to obtain preliminary processed dynamic card fields. The web card debugger performs structural conversion on the preliminary processed dynamic card fields through the output unit so that the dynamic card fields can be adapted to the fields defined in the target static web card template to obtain the dynamic card fields after structural conversion. The web card debugger renders the dynamic card fields after structural conversion into the target area, generates the target dynamic web page card, and synchronously displays the target dynamic web page card.

[0134] It can be seen that in this embodiment, by performing preliminary processing and structural conversion on the dynamic card fields, it is possible to meet complex business scenarios of web page card docking and improve applicability.

[0135] In some embodiments, data aggregation refers to merging multiple dynamic card fields into a whole. For example, interface A returns 5 fields and interface B returns 6 fields. The function of data aggregation is to extract the first two fields of interface A and the first three fields of interface B to generate a new field.

[0136] In some embodiments, data filtering refers to filtering out dynamic card fields that meet the requirements according to specific conditions. For example, interface A returns 100 pieces of personnel data, but the data returned to the web card only includes those who are older than 40 years old.

[0137] In some embodiments, data calculation refers to performing numerical operations, statistical analysis, and calculation logic on dynamic card fields to obtain new dynamic card fields. For example, if interface A returns the number of users in each department, the user can fill in the calculation formula in the data processing module to calculate the total number of departments.

[0138] In some embodiments, Figure 8 As shown in the figure, it is a process of a dynamic data configuration method, which specifically includes: defining the data structure of the card dynamic data, designing the input control module, providing a visual input interface for the input control module, mainly including the third-party interface API, input parameters, request mode, request header, input prompt and verification. Designing the connection module, the connection module is mainly responsible for the management of the Hypertext Transfer Protocol (HTTP) connection pool, and is mainly used for the creation, use, release and destruction of connections. Designing the execution module, the execution module is responsible for calling the third-party interface, including single interface call and interactive call. Among them, the single interface call refers to the third-party system interface A and the third-party system interface B returning the results to the web card debugger respectively, while the interactive call refers to first calling the third-party interface A, taking the result of the third-party interface A as the input parameter of the third-party interface B, and calling the third-party interface B, and the third-party interface B returns the result to the web card debugger. In addition, other interface call functions also include the timeout mechanism of the interface call, the cache mechanism, the request body size control, and the interceptor setting. Designing the data processing module, the data processing module can perform secondary processing on the dynamic data returned by a single or multiple interfaces of the third-party system, such as data aggregation, data filtering and data calculation. Design an output unit, which converts the structure of dynamic data, handles exceptions and caches uniformly, and transmits dynamic data to web page cards. After that, the dynamic data can be rendered and the effect of web page cards can be displayed in real time. Web page card preview can preview the effect and layout of web page card preview in real time in the production environment. Card preview is only for development objects and has no effect on other users.

[0139] Among them, unified exception handling refers to converting the business and network exceptions of the third-party system into friendly exceptions of the web card debugger. Unified cache handling means that the web card debugger will cache the third-party data when calling the third-party interface. When the third-party interface or network is abnormal, it will stop calling the third-party interface and use the local cache data of the web card.

[0140] In some embodiments, Fig. 9 As shown in the figure, it is a process of another dynamic data configuration method, which specifically includes: defining the data structure of the card dynamic data. Designing a dynamic script development toolkit, the development object can perform complex coding work based on this toolkit. Designing a dynamic script management module, the dynamic script management module provides script templates for different scenarios, so that the development object can develop based on the script template to improve the overall development efficiency. Designing a dynamic script debugging module, the dynamic script debugging module can load, security check, compile and execute the dynamic script in real time. While developing the script, the development object can directly see the script execution results and the real-time rendering effect of the dynamic data in the web card. Based on dynamic script coding, complex business coding work can be efficiently completed, such as secondary processing of the return data of multiple interfaces, single interface call, interactive call, and additional functions. Among them, single interface call refers to the third-party system interface A and the third-party system interface B returning the results to the web card debugger respectively, while interactive call refers to first calling the third-party interface A, taking the result of the third-party interface A as the input parameter of the third-party interface B, and calling the third-party interface B, and the third-party interface B returns the result to the web card debugger. In addition, other interface call functions include interface call timeout mechanism, cache mechanism, request body size control, and interceptor setting. Design a data processing module, which can perform secondary processing on dynamic data returned by a single or multiple interfaces of a third-party system, such as data aggregation, data filtering, and data calculation. Design an output unit, which performs structural conversion, unified exception processing, and unified cache processing on dynamic data, and transmits dynamic data to web page cards. After that, the dynamic data can be rendered and the effect of the web page card can be displayed in real time. Web page card preview can preview the effect and layout of the web page card in real time in the production environment. The web page card preview is only for development objects and has no effect on other users.

[0141] In some embodiments, after step S208, the web page card debugging method of the present application specifically further includes but is not limited to: in response to a card push operation performed on the target dynamic web page card, pushing the target dynamic web page card to the target area of ​​the card configuration terminal.

[0142] The card push operation refers to the operation of pushing the target dynamic web page card to the third-party system. The card configuration terminal refers to the terminal that specifically publishes the web page card.

[0143] In some embodiments, the card configuration terminal may be a human resources (HR) system, a financial system, a learning platform, etc. The target area of ​​the card configuration terminal refers to an area in the card configuration terminal that matches the layout and size of the target area of ​​the web card debugger.

[0144] Specifically, after completing the web page card debugging, the development object may perform a card push operation on the target dynamic web page card. In response to the above operation, the web page card debugger pushes the target dynamic web page card to the target area of ​​the card configuration terminal.

[0145] It can be seen that in this embodiment, after the development object completes the web card debugging through the web card debugger, the debugged target dynamic web card can be directly released to the production environment without going through the traditional version release process, which can quickly respond to business changes and improve the efficiency of web card configuration.

[0146] In some embodiments, Fig.10 As shown, taking the Groovy Programming Language (groovy) dynamic script development of report web page cards as an example, the entire development process is explained: the development object selects a card template, and sets the card style based on the selected card template, such as using the card default style or setting a personalized style. Next, develop an access party API based on the card data structure, and develop a groovy script to connect to the third-party interface to obtain a third-party system token. Then, call the report data interface based on the third-party system token, and process the results returned by the report data interface. Preview the web page card, and after confirmation, perform the card publishing configuration, that is, you can send the web page card to different card configuration terminals, such as portals, mailboxes, and instant messaging (IM).

[0147] In a specific embodiment, the web page card debugging method of the present application includes the following steps:

[0148] 1. Static style configuration: The web card debugger displays the card style configuration interface, which includes a card style editing area. The card style editing area is provided with a form style editing module and a JOSN style editing module. The development object can perform static template selection operations in the card style editing area, so that the web card editor can determine the target static web card template from the alternative web card templates. The development object can perform static style selection operations among the multiple alternative static styles provided by the form style editing module to determine the configured static style. The development object can also input JOSN data in the JOSN style editing module so that the web card editor parses the JOSN data to obtain the style attribute values ​​of the target static web card template, and determines the static style configured for the target static web card template based on the style attribute values.

[0149] 2. Dynamic data configuration: The web card debugger displays the dynamic card data configuration area, which includes a visualized input control module, a connection module, an execution module, a data processing module, and an output unit. The development object can input third-party interface information, interface transfer parameters, interface request methods, and interface request header information in each input control of the input control module; manage the HTTP connection pool in the connection module, determine the connection management information, and obtain dynamic data source information. The interface call method (including single interface call and interactive call) selected from the multiple alternative interface call methods displayed in the execution module, and the interface call relationship configured for the selected interface call method, determine the dynamic data call information. The dynamic card data configuration area can also include a dynamic script management module, a dynamic script debugging module, a data processing module, and an output unit. The development object can perform a script template selection operation in the dynamic script management module and determine the target dynamic script template from each preset dynamic script template. The web card debugger loads the target dynamic script template through the dynamic script debugging module. The development object performs a dynamic script encoding operation based on the loaded target dynamic script template to obtain the target dynamic script. The web card debugger determines the dynamic data configuration information according to the target dynamic script.

[0150] 3. Dynamic data call: The call of dynamic data is realized through the execution module. That is, first establish a communication connection with the third-party system according to the dynamic data source information; when the interface call mode in the dynamic data call information is a single interface call, call each interface in the third-party system according to the interface call relationship in the dynamic data call information to obtain the dynamic card data returned by each interface in the third-party system. When the interface call mode in the dynamic data call information is an interactive call, determine the interface call sequence from each interface of the third-party system according to the interface call relationship in the dynamic data call information; determine the currently called interface in turn according to the interface call sequence, and use the dynamic card data returned by the currently called interface as the interface transfer parameter of the next called interface to obtain the dynamic card data returned by the next called interface according to the interface transfer parameter.

[0151] 4. Dynamic data processing: The data processing module performs secondary processing on the dynamic card data returned by a single or multiple third-party interfaces, such as data aggregation, data filtering, data calculation, etc. The output unit performs structural conversion, unified abnormal processing, and unified cache processing on the dynamic data after secondary processing, and transmits the processed dynamic data to the web page card.

[0152] 6. Web card publishing: The web card debugger renders the dynamic card data into the target area of ​​the initial web card interface, generates the target dynamic web card, and displays the target dynamic web card synchronously. After the development object executes the card push operation, the web card debugger publishes the target dynamic web card into the target area of ​​the card configuration terminal.

[0153] In some embodiments, Fig.11 As shown, the web page card debugging method of the present application can be applied in the field of reporting. The development object can perform the configuration operation of the web page card in the card style configuration interface of the web page card debugger to obtain the target dynamic web page card. Among them, the target dynamic web page card can be a web page card for displaying business reports. Afterwards, the target dynamic web page card can be published to the card configuration terminal, such as the reporting system, to display the target dynamic web page card at the target position of the reporting system.

[0154] It should be understood that, although the steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indications of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear description in this article, there is no strict order restriction on the execution of these steps, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments may include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0155] Based on the same inventive concept, the embodiment of the present application also provides a web card debugging device. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in one or more web card debugging device embodiments provided below can refer to the limitations of the web card debugging method above, and will not be repeated here.

[0156] like Fig.12 As shown, the embodiment of the present application provides a web card debugging device, including:

[0157] The static style configuration module 1202 is used to display the card style configuration interface, and determine the target static web page card template according to the static style configuration operation obtained in the card style editing area in the card style configuration interface, and synchronously display the initial web page card interface based on the target static web page card template;

[0158] The dynamic data configuration module 1204 is used to display the dynamic card data configuration area and determine the dynamic data configuration information according to the dynamic data configuration operation obtained in the dynamic card data configuration area;

[0159] The dynamic data calling module 1206 is used to establish a communication connection with a third-party system according to the dynamic data configuration information and call dynamic card data from the third-party system;

[0160] The web page card generation module 1208 is used to render the dynamic card data into the target area of ​​the initial web page card interface, generate a target dynamic web page card, and synchronously display the target dynamic web page card.

[0161] The web page card debugging device displays a card style configuration interface; determines the target static web page card template according to the static style configuration operation performed on the card style editing area in the card style configuration interface, and synchronously displays the initial web page card interface based on the target static web page card template. In this way, the development object only needs to perform very simple configuration operations in the card style configuration interface to realize the online configuration of the static web page card template, and can also instantly view the real-time effect of the target static web page card template online. This is more efficient than the way in which the development object manually writes code in a professional programming tool and continuously compiles to view the effect of the static web page card template online to configure the static web page card template. Display the dynamic card data configuration area; determine the dynamic data configuration information according to the dynamic data configuration operation performed in the dynamic card data configuration area; establish a communication connection with a third-party system according to the dynamic data configuration information, and call dynamic card data from the third-party system; render the dynamic card data into the target area of ​​the initial web page card interface, generate a target dynamic web page card, and synchronously display the target dynamic web page card. In this way, the development object only needs to perform very simple configuration operations in the card configuration interface to configure the dynamic data configuration information online, communicate with the automatic third-party system to automatically obtain dynamic card data, and automatically render the obtained dynamic card data into the configured static web page card template. In addition, the real-time effect of the target dynamic web page card online can be instantly viewed. This is more efficient than the way in which the development object manually writes code in a professional programming tool to configure dynamic card data. In other words, the present application enables the development object to perform some simple configuration operations in the card web page configuration interface through the online configuration of the web page card generation method of static style and dynamic data, and the debugging of the web page card can be realized. Compared with the traditional technology in which the development object manually writes code to debug the web page card method, it is more efficient.

[0162] In some embodiments, the static style configuration module 1202 is also used to determine a target static web page card template from various candidate web page card templates based on a static template selection operation performed on a card style editing area in a card style configuration interface; determine a configured static style based on a static style configuration operation performed on the target static web page card template; re-render the target static web page card template according to the configured static style, and synchronously display the initial web page card interface based on the re-rendered target static web page card template.

[0163] In some embodiments, the static style configuration module 1202 is also used to display a form style editing module; the form style editing module provides multiple alternative static styles; and the configured static style is determined according to a static style selection operation performed on the multiple alternative static styles.

[0164] In some embodiments, the static style configuration module 1202 is also used to display a custom style editing module; obtain style attribute data input in a style data editor; the style attribute data is written in a preset format and is used to describe the style corresponding to the target static web page card template; parse the style attribute data to obtain the style attribute value of the target static web page card template; determine the static style configured for the target static web page card template based on the style attribute value.

[0165] In some embodiments, the dynamic card data configuration area includes a control module and a connection module, and the dynamic data configuration information includes dynamic data source information. The dynamic data configuration module 1204 is also used to obtain third-party interface information, interface transfer parameters, interface request methods, and interface request header information in each input control of the control module; obtain the connection management configuration operation performed in the connection module to determine the connection management information; and use the third-party interface information, interface transfer parameters, interface request methods, interface request header information, and connection management information as dynamic data source information.

[0166] In some embodiments, the dynamic card data configuration area further includes an execution module; the dynamic data configuration information also includes dynamic data call information. The dynamic data configuration module 1204 is further used to determine the dynamic data call information according to the interface call method selected from the multiple alternative interface call methods displayed by the execution module and the interface call relationship configured for the selected interface call method.

[0167] In some embodiments, the dynamic card data configuration area includes a dynamic script management module and a dynamic script debugging module. The dynamic data configuration module 1204 is also used to determine a target dynamic script template from various preset dynamic script templates according to the script template selection operation performed in the dynamic script management module; wherein each preset dynamic script template is developed through different dynamic script development toolkits; load the target dynamic script template through the dynamic script debugging module, determine the target dynamic script according to the dynamic script encoding operation performed based on the loaded target dynamic script template; and determine the dynamic data configuration information according to the target dynamic script.

[0168] In some embodiments, the dynamic card data includes dynamic card fields. The web page card generation module 1208 is further used to perform preliminary processing on the dynamic card fields returned by the third-party system through the data processing module to obtain preliminary processed dynamic card fields; perform structural conversion on the preliminary processed dynamic card fields through the output unit to obtain structurally converted dynamic card fields; the structurally converted dynamic card fields are matched with the fields defined in the target static web page card template; the structurally converted dynamic card fields are rendered into the target area to generate a target dynamic web page card, and the target dynamic web page card is synchronously displayed.

[0169] Each module in the web card debugging device can be implemented in whole or in part by software, hardware, or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute operations corresponding to each module.

[0170] In some embodiments, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Fig.13As shown. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit and an input device. Among them, the processor, the memory and the input / output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input / output interface. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be implemented through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, the steps in the above-mentioned web card debugging method are implemented. The display unit of the computer device is used to form a visually visible picture, which can be a display screen, a projection device or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen; the input device of the computer device can be a touch layer covering the display screen, or a key, trackball or touchpad provided on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0171] Those skilled in the art will understand that Fig.13 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0172] In some embodiments, a computer device is provided. The computer device includes a memory and a processor. The memory stores a computer program. When the processor executes the computer program, the steps in the above method embodiments are implemented.

[0173] In some embodiments, a computer-readable storage medium is provided, which stores a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0174] In some embodiments, a computer program product is provided. The computer program product includes a computer program. When the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0175] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards of relevant countries and regions.

[0176] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

[0177] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0178] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A web page card debugging method, characterized in that: include: Displaying a card style configuration interface, and determining a target static web page card template according to a static style configuration operation obtained in a card style editing area in the card style configuration interface, and synchronously displaying an initial web page card interface based on the target static web page card template; Displaying a dynamic card data configuration area, and determining dynamic data configuration information according to the dynamic data configuration operation acquired in the dynamic card data configuration area; Establishing a communication connection with a third-party system according to the dynamic data configuration information, and calling dynamic card data from the third-party system; The dynamic card data is rendered into the target area of ​​the initial web page card interface to generate a target dynamic web page card, and the target dynamic web page card is synchronously displayed.

2. The method according to claim 1, characterized in that The step of determining a target static web page card template according to the static style configuration operation acquired in the card style editing area in the card style configuration interface, and synchronously displaying an initial web page card interface based on the target static web page card template includes: Determine a target static web page card template from among the candidate web page card templates according to a static template selection operation performed on the card style editing area in the card style configuration interface; Determining a configured static style according to a static style configuration operation performed on the target static web page card template; The target static web page card template is re-rendered according to the configured static style, and the initial web page card interface is synchronously displayed based on the re-rendered target static web page card template.

3. The method according to claim 2, characterized in that The step of determining the configured static style according to the static style configuration operation performed on the target static web page card template includes: Displaying a form style editing module; the form style editing module provides multiple static styles for selection; The configured static style is determined according to a static style selection operation performed on the multiple candidate static styles.

4. The method according to claim 2, characterized in that: The step of determining the configured static style according to the static style configuration operation performed on the target static web page card template further includes: Display custom style editing module; Acquire the style attribute data input in the style data editor; the style attribute data is data written in a preset format and used to describe the style corresponding to the target static web page card template; Parsing the style attribute data to obtain the style attribute value of the target static web page card template; The static style configured for the target static web page card template is determined according to the style attribute value.

5. The method according to claim 1, characterized in that The dynamic card data configuration area includes a control module and a connection module, and the dynamic data configuration information includes dynamic data source information; the dynamic data configuration operation obtained by the dynamic card data configuration area determines the dynamic data configuration information, including: Obtain third-party interface information, interface transfer parameters, interface request mode and interface request header information in each input control of the control module; Acquire the connection management configuration operation performed in the connection module to determine the connection management information; The third-party interface information, the interface transfer parameters, the interface request method, the interface request header information and the connection management information are used as the dynamic data source information.

6. The method according to claim 1, characterized in that The dynamic card data configuration area also includes an execution module; the dynamic data configuration information also includes dynamic data call information; the dynamic data configuration information is determined according to the dynamic data configuration operation obtained in the dynamic card data configuration area, and further includes: The dynamic data calling information is determined according to an interface calling method selected from a plurality of alternative interface calling methods displayed by the execution module and an interface calling relationship configured for the selected interface calling method.

7. The method according to claim 1, characterized in that The dynamic card data configuration area includes a dynamic script management module and a dynamic script debugging module; the dynamic data configuration information is determined according to the dynamic data configuration operation obtained by the dynamic card data configuration area, and further includes: According to the script template selection operation performed in the dynamic script management module, a target dynamic script template is determined from various preset dynamic script templates; wherein each of the preset dynamic script templates is developed by using different dynamic script development toolkits; Loading the target dynamic script template through the dynamic script debugging module, and determining the target dynamic script according to the dynamic script encoding operation performed based on the loaded target dynamic script template; Dynamic data configuration information is determined according to the target dynamic script.

8. The method according to claim 1, characterized in that The dynamic card data includes a dynamic card field; the rendering of the dynamic card data into a target area of ​​the initial web page card interface, generating a target dynamic web page card, and synchronously displaying the target dynamic web page card includes: Performing preliminary processing on the dynamic card fields returned by the third-party system through a data processing module to obtain preliminary processed dynamic card fields; The output unit performs structural conversion on the initially processed dynamic card fields to obtain structurally converted dynamic card fields; the structurally converted dynamic card fields match the fields defined in the target static web page card template; The dynamic card fields after structural conversion are rendered into the target area, a target dynamic web page card is generated, and the target dynamic web page card is displayed synchronously.

9. A computer device, comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the web page card debugging method described in any one of claims 1 to 8 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the web card debugging method described in any one of claims 1 to 8 are implemented.

Images