Method and device for generating service information display page based on drag-and-drop configuration

Abstract

The invention relates to a method and a device for generating a service information display page based on drag-and-drop configuration, and relates to the technical field of software system design. The method comprises the steps of obtaining a pre-configured component library in response to a page generation instruction issued by a page development account; in response to a selection operation of the page development account for the target components, determining a to-be-adjusted component from the target components in the component library and displaying the to-be-adjusted component; in response to an adjustment operation of the page development account for the to-be-adjusted component, updating each element feature in each to-be-adjusted component to obtain an adjusted component; assembling the adjusted component, and rendering the assembled component in a canvas interface to obtain a rendered preview page; and in response to a confirmation operation of the page development account for the preview page, generating a target program code according to the assembled component. By adopting the method, the generation effect of the business information display page can be improved.

Description

Technical Field

[0001] The present application relates to the technical field of software system design, and in particular to a method, apparatus, computer device, computer-readable storage medium and computer program product for generating a business information display page based on drag-and-drop configuration. Background Art

[0002] There are many tools and platforms on the market that can generate business information display pages, which can achieve zero-code rapid generation of display pages, such as display pages of business information related to marketing activities. The development of technology for rapid generation of display pages through configuration has been greatly improved in recent years, especially with the rapid development of mobile Internet, making page-related activities more efficient, personalized and dynamic.

[0003] However, the display pages generated by these tools and platforms are all based on content templates of fixed activities. Only a small number of configurable elements can be reserved on the modified templates through configuration. There is no way to modify the process of the activity and the page layout, resulting in low flexibility in page generation. Therefore, the current generation method of business information display pages has the problem of poor page generation effect. Summary of the invention

[0004] Based on this, it is necessary to provide a method, device, computer equipment, computer-readable storage medium and computer program product for generating a business information display page based on drag-and-drop configuration, which can improve the generation effect of the business information display page in response to the above technical problems.

[0005] In a first aspect, an embodiment of the present application provides a method for generating a business information display page based on drag-and-drop configuration. The method comprises:

[0006] In response to a page generation instruction issued by a page development account, a preconfigured component library is obtained; the page generation instruction is used to generate a program page with a business information display function, and the preconfigured component library includes at least two target components;

[0007] In response to the page development account's selection operation on the target component, determining a component to be adjusted from each of the target components in the component library, and displaying the component to be adjusted in a canvas interface with a grid;

[0008] In response to the adjustment operation of the page development account on the to-be-adjusted component, updating each element feature in each to-be-adjusted component to obtain an adjusted component; the element feature includes location information, specification information and layout information of the element;

[0009] Assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page;

[0010] In response to the confirmation operation of the page development account on the preview page, a target program code is generated according to the assembled components; the target program code is used for the page development account to generate the program page with the business information display function.

[0011] In one embodiment, before the step of obtaining a preconfigured component library, the method further includes:

[0012] Determining the design content of each of the target components based on the requirements of the display function of the business information;

[0013] According to the specific design requirement information in the design content of each target component, the specific design requirement information is converted into executable code to obtain the configured target component;

[0014] The executable code includes the front-end interface program code and the back-end data interaction program code.

[0015] In one embodiment, the determining of the design content of each target component based on the requirement of the display function of the business information includes:

[0016] Acquire the element features of each component element corresponding to each target component; the component elements include basic elements and complex elements, the basic elements include text elements, picture elements and button elements, and the complex elements include form elements, turntable elements and video elements;

[0017] Acquire layout features corresponding to each of the target components; the layout features include visual feedback information, configuration option information, and responsive layout information;

[0018] Acquire the backend logic features corresponding to each of the target components; the backend logic features include component data binding information, event monitoring information and state management information;

[0019] The design content of each of the target components is determined according to the element features, the layout features and the backend logic features.

[0020] In one embodiment, converting the specific design requirement information into executable code according to the specific design requirement information in the design content of each target component to obtain the configured target component includes:

[0021] Determine component interface specification information according to the design content of the target component; the component interface specification information includes property configuration information, event processing information and data binding information;

[0022] Build the component's view layer based on the pre-built front-end framework and perform state management, implement component style customization and interaction logic, and obtain the front-end executable code;

[0023] Determine the communication mechanism and database design mechanism to obtain the executable code of the backend;

[0024] The configured target component is obtained according to the component interface specification information, the front-end executable code and the back-end executable code.

[0025] In one embodiment, assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page includes:

[0026] Generating and displaying a draggable operation interface, wherein each of the adjusted components is displayed in the operation interface;

[0027] In response to an assembly operation of the page development account, assembling the adjusted components;

[0028] When the assembly is completed, the assembled components are rendered in the canvas interface to obtain a rendered preview page;

[0029] Save the existing operations of the page development account at the current time node, and save the rendered preview page.

[0030] In one embodiment, the method further comprises:

[0031] In response to a trigger instruction for function deployment, uploading the target program code to a cloud platform;

[0032] The uploaded target program code is run in the cloud platform to launch the business information display function.

[0033] In a second aspect, the present application also provides a device for generating a business information display page based on drag-and-drop configuration. The device includes:

[0034] A component library acquisition module, used to acquire a pre-configured component library in response to a page generation instruction issued by a page development account; the page generation instruction is used to generate a program page with a business information display function, and the pre-configured component library includes at least two target components;

[0035] A selection module, configured to determine a component to be adjusted from each of the target components in the component library in response to a selection operation of the page development account on the target component, and to display the component to be adjusted in a canvas interface having a grid;

[0036] An adjustment module, configured to update the characteristics of each element in each component to be adjusted in response to the adjustment operation of the page development account on the component to be adjusted, and obtain an adjusted component; the element characteristics include position information, specification information and layout information of the element;

[0037] An assembling module, used for assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page;

[0038] A code generation module is used to generate target program code according to the assembled components in response to the confirmation operation of the page development account on the preview page; the target program code is used for the page development account to generate the program page with business information display function.

[0039] In a third aspect, the present application further provides a computer device. The computer device includes a memory and a processor, the memory stores a computer program, and the processor implements the following steps when executing the computer program:

[0040] In response to a page generation instruction issued by a page development account, a preconfigured component library is obtained; the page generation instruction is used to generate a program page with a business information display function, and the preconfigured component library includes at least two target components;

[0041] In response to the page development account's selection operation on the target component, determining a component to be adjusted from each of the target components in the component library, and displaying the component to be adjusted in a canvas interface with a grid;

[0042] In response to the adjustment operation of the page development account on the to-be-adjusted component, updating each element feature in each to-be-adjusted component to obtain an adjusted component; the element feature includes location information, specification information and layout information of the element;

[0043] Assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page;

[0044] In response to the confirmation operation of the page development account on the preview page, a target program code is generated according to the assembled components; the target program code is used for the page development account to generate the program page with the business information display function.

[0045] In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0046] In response to a page generation instruction issued by a page development account, a preconfigured component library is obtained; the page generation instruction is used to generate a program page with a business information display function, and the preconfigured component library includes at least two target components;

[0047] In response to the page development account's selection operation on the target component, determining a component to be adjusted from each of the target components in the component library, and displaying the component to be adjusted in a canvas interface with a grid;

[0048] In response to the adjustment operation of the page development account on the to-be-adjusted component, updating each element feature in each to-be-adjusted component to obtain an adjusted component; the element feature includes location information, specification information and layout information of the element;

[0049] Assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page;

[0050] In response to the confirmation operation of the page development account on the preview page, a target program code is generated according to the assembled components; the target program code is used for the page development account to generate the program page with the business information display function.

[0051] In a fifth aspect, the present application further provides a computer program product. The computer program product includes a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0052] In response to a page generation instruction issued by a page development account, a preconfigured component library is obtained; the page generation instruction is used to generate a program page with a business information display function, and the preconfigured component library includes at least two target components;

[0053] In response to the page development account's selection operation on the target component, determining a component to be adjusted from each of the target components in the component library, and displaying the component to be adjusted in a canvas interface with a grid;

[0054] In response to the adjustment operation of the page development account on the to-be-adjusted component, updating each element feature in each to-be-adjusted component to obtain an adjusted component; the element feature includes location information, specification information and layout information of the element;

[0055] Assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page;

[0056] In response to the confirmation operation of the page development account on the preview page, a target program code is generated according to the assembled components; the target program code is used for the page development account to generate the program page with the business information display function.

[0057] The above-mentioned method, device, computer equipment, storage medium and computer program product for generating a business information display page based on drag-and-drop configuration first obtain a pre-configured component library, then determine the components to be adjusted from the target components in the component library and display them in a canvas interface with a grid, and then update the characteristics of each element in each component to be adjusted to obtain the adjusted component, and then assemble and render the adjusted components to obtain a rendered preview page, and finally generate the target program code based on the assembled components for the page development account to generate a program page with business information display function. The generation of marketing activities based on drag-and-drop is not restricted by fixed templates, allowing users to freely adjust the position and size of elements, achieve more diverse layouts, adapt to different content and design requirements, and improve the flexibility of page generation; in the process of dragging elements, users can preview the final effect in real time, which helps to make better decisions and quickly adjust the design, and improves the generation effect of the business information display page. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related technologies, the drawings required for use in the embodiments or the related technical descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0059] FIG1 is an application environment diagram of a method for generating a business information display page based on drag-and-drop configuration in one embodiment;

[0060] Figure 2 It is a flowchart of a method for generating a business information display page based on drag-and-drop configuration in one embodiment;

[0061] Figure 3 It is a flowchart of a method for generating a business information display page based on drag-and-drop configuration in another embodiment;

[0062] Figure 4 It is a structural block diagram of a device for generating a business information display page based on drag-and-drop configuration in one embodiment;

[0063] FIG5 is a diagram showing the internal structure of a computer device in one embodiment;

[0064] FIG. 6 is a diagram showing the internal structure of a computer device in another embodiment. DETAILED DESCRIPTION

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

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

[0067] The method for generating a business information display page based on drag-and-drop configuration provided in the embodiment of the present application can be applied in the application environment shown in Figure 1. The terminal 102 communicates with the server 104 through a network.

[0068] The terminal 102 may be, but is not limited to, various personal computers, laptops, 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 server 104 may be implemented as an independent server or a server cluster consisting of multiple servers.

[0069] In one embodiment, Figure 2 As shown, a method for generating a service information display page based on drag-and-drop configuration is provided, and the method is applied to the terminal 102 in FIG. 1 as an example for description, including the following steps:

[0070] S201, in response to a page generation instruction issued by a page development account, obtaining a preconfigured component library.

[0071] Among them, the page development account refers to the account used by the program developer who generates page functions. The page generation instructions are used to generate a program page with business information display functions. The preconfigured component library includes at least two target components, which are program components with information display and data interaction.

[0072] S202, in response to the page development account's selection operation on the target component, determining the component to be adjusted from each target component in the component library, and displaying the component to be adjusted in a canvas interface with a grid.

[0073] Exemplarily, the component to be adjusted is a selected component, that is, a component to be adjusted and assembled in a canvas interface to generate a display page.

[0074] S203, in response to the adjustment operation of the page development account on the components to be adjusted, updating the characteristics of each element in each component to be adjusted to obtain an adjusted component.

[0075] The element features include the position information, specification information and layout information of the element; generally, the adjustment operation includes adjusting the position, specification size and layout of the component.

[0076] Among them, each component to be adjusted allows users to freely adjust the position and size of elements to create a unique page layout.

[0077] S204, assembling the adjusted components to obtain assembled components, rendering the assembled components in a canvas interface to obtain a rendered preview page.

[0078] The assembly process can be implemented by dragging and dropping. The drag-and-drop interactive design is usually more intuitive and easy to use. Users can preview the final effect in real time through direct operation.

[0079] S205 , in response to a confirmation operation of the page development account on the preview page, generating target program codes according to the assembled components.

[0080] Among them, the target program code is used for the page development account to generate a program page with business information display function.

[0081] In the above-mentioned method for generating a business information display page based on drag-and-drop configuration, firstly, a pre-configured component library is obtained, then the components to be adjusted are determined from the target components in the component library and displayed in a canvas interface with a grid, and then the characteristics of each element in each component to be adjusted are updated to obtain the adjusted components, and then the adjusted components are assembled and rendered to obtain a rendered preview page, and finally the target program code is generated according to the assembled components for the page development account to generate a program page with business information display function. The generation of marketing activities based on drag-and-drop is not restricted by fixed templates, allowing users to freely adjust the position and size of elements, achieve more diverse layouts, adapt to different content and design requirements, and improve the flexibility of page generation; in the process of dragging elements, users can preview the final effect in real time, which helps to make better decisions and quickly adjust the design, and improves the generation effect of the business information display page.

[0082] In one embodiment, before the step of obtaining a preconfigured component library, the method also includes: determining the design content of each target component based on the requirements of the display function of the business information; and converting the specific design requirement information into executable code according to the specific design requirement information in the design content of each target component to obtain the configured target component.

[0083] The executable code includes the front-end interface program code and the back-end data interaction program code.

[0084] For example, before configuring the component library, component design and component implementation are required. In the component design phase, you first need to understand and analyze business requirements, especially what information needs to be displayed to users. Then, based on these requirements, determine the specific design content of each component, such as the function, structure, style, and data interaction method of the component to ensure that it can effectively meet business goals. The component implementation phase focuses on development, generating code based on the specific requirements defined in the previous design phase to turn the design concept into a real and usable function. Write logic, style, data exchange, etc., while ensuring that the final output component can work properly and meet the original design specifications.

[0085] In this embodiment, firstly, the design content of each target component is determined based on the demand of the display function of business information, and then the specific design requirement information in the design content of each target component is converted into executable code to obtain the configured target component; a clear component design and implementation process is adopted to ensure that business needs are effectively understood and met, thereby improving the practicality of the component, improving development efficiency, and making the code structure more maintainable.

[0086] In one embodiment, based on the requirements of the display function of business information, the design content of each target component is determined, including: obtaining element features of each component element corresponding to each target component; obtaining layout features corresponding to each target component; obtaining backend logic features corresponding to each target component; and determining the design content of each target component based on the element features, layout features and backend logic features.

[0087] Among them, component elements include basic elements and complex elements. Basic elements include text elements, picture elements and button elements, and complex elements include form elements, turntable elements and video elements. Layout features include visual feedback information, configuration option information and responsive layout information. Back-end logic features include component data binding information, event monitoring information and state management information.

[0088] For example, when designing these components, different marketing needs need to be taken into account, including basic elements such as text, pictures, buttons, and complex elements such as forms, carousels, and videos. Each component needs to define clear boundaries, attribute configurations, and interactive behaviors; each component should provide intuitive visual feedback and rich configuration options such as color, size, font, etc. to adapt to different design styles and brand requirements. At the same time, the design of components should take into account responsive layout; the back-end logic needs to handle component data binding, event monitoring, and state management.

[0089] In this embodiment, the element features, layout features and back-end logic features of each component element corresponding to each target component are respectively obtained, and the design content of each target component is determined based on the element features, layout features and back-end logic features; the design of the element features of each component element improves the flexibility of the platform and the user's usage efficiency, defines the boundaries between components, the layout features ensure the ease of use of the components, and ensures that good visual effects and functionality can be maintained on different devices, and the back-end logic features ensure that changes in the user interface can be reflected in real time in the final generated page, which greatly improves the development efficiency and personalization level of activity-related pages.

[0090] In one embodiment, according to the specific design requirement information in the design content of each target component, the specific design requirement information is converted into executable code to obtain the configured target component, including: determining the component interface specification information according to the design content of the target component; building the view layer of the component based on the pre-built front-end framework and performing state management to implement the style customization and interaction logic of the component to obtain the front-end executable code; determining the communication mechanism and the database design mechanism to obtain the back-end executable code; obtaining the configured target component according to the component interface specification information, the front-end executable code and the back-end executable code.

[0091] The component interface specification information includes property configuration information, event processing information and data binding information.

[0092] For example, first, a clear set of component interface specifications needs to be defined, including property configuration, event handling, and data binding; in the implementation process, a front-end framework such as React or Vue.js can be used to build the component's view layer, taking advantage of the responsive data binding and componentization features it provides, while combining CSS and JavaScript to implement component style customization and interaction logic; on the back end, it is necessary to design a RESTful API or use communication mechanisms such as WebSocket; the database design must be able to flexibly store the attribute values ​​and layout information of each component.

[0093] In this embodiment, the component interface specification information is first determined according to the design content of the target component, and then the view layer of the component is built based on the pre-built front-end framework and state management is performed to implement the style customization and interaction logic of the component, and the front-end executable code is obtained, and then the communication mechanism and the database design mechanism are determined to obtain the back-end executable code. Finally, according to the component interface specification information, the front-end executable code and the back-end executable code, the configured target component is obtained; the interface specification will guide the development and interaction of the component, ensure the compatibility and consistency between different components, and the responsive data binding and componentization characteristics make the update and state management of the component more efficient. The setting of the communication mechanism enables the front-end component to interact with the server for data and save the user's configuration changes in real time. The database design should be able to flexibly store the attribute values ​​and layout information of each component to facilitate subsequent reading and rendering.

[0094] In one embodiment, the adjusted components are assembled to obtain assembled components, and the assembled components are rendered in a canvas interface to obtain a rendered preview page, including: generating and displaying a draggable operation interface, in which each adjusted component is displayed; in response to the assembly operation of the page development account, the adjusted components are assembled; when the assembly is completed, the assembled components are rendered in a canvas interface to obtain a rendered preview page; saving the existing operations of the page development account at the current time node, and saving the rendered preview page.

[0095] For example, first, a draggable operation interface needs to be provided, which displays all available components, such as pictures, text boxes, buttons, etc.; users can start assembling by dragging these components to the editing area; the editing area is usually a canvas with a grid system, which can help users align components and keep the layout neat and consistent; when the component is dragged into the canvas, the user can adjust its size and position, and modify the specific configuration of the component through the property panel, such as color, font size, link, etc.; in order to realize this drag and drop and instant preview function, it is usually necessary to use a JavaScript framework or library on the front end to handle component state management, drag and drop logic and real-time rendering; the back end is responsible for saving every step of the user's operation to ensure that the user's progress can be saved and loaded later.

[0096] In this embodiment, a draggable operation interface is first generated and displayed, in which the adjusted components are displayed. The adjusted components are then assembled, and then the assembled components are rendered in the canvas interface to obtain a rendered preview page. Finally, the existing operations of the page development account at the current time node are saved, and the rendered preview page is saved. In the process of dragging elements, the user can preview the final effect in real time, which helps to make better decisions and quickly adjust the design.

[0097] In one embodiment, the method further includes: uploading the target program code to the cloud platform in response to a trigger instruction for function deployment; and running the uploaded target program code in the cloud platform to display the function with online business information.

[0098] Exemplarily, the automatic deployment specifically includes: the generated marketing activity page code is automatically uploaded to the cloud platform, and the marketing activity is automatically launched online through one-click deployment.

[0099] In this embodiment, the target program code is first uploaded to the cloud platform in response to the trigger instruction of the function deployment, and then the uploaded target program code is run in the cloud platform to launch the business information display function; the complexity of function deployment is simplified through the automated process, and the efficiency and flexibility are improved. One-click deployment not only saves labor costs and reduces human errors, but also can quickly launch the business information display function, thereby improving the efficiency of function deployment.

[0100] In another embodiment, Figure 3 As shown, a method for generating a business information display page based on drag-and-drop configuration is provided, comprising the following steps:

[0101] S301, obtaining element features of each component element corresponding to each target component.

[0102] S302: Obtain layout features corresponding to each target component.

[0103] S303, obtaining backend logical features corresponding to each target component.

[0104] S304, determining the design content of each target component according to the element characteristics, layout characteristics and backend logic characteristics.

[0105] S305, determining component interface specification information according to the design content of the target component.

[0106] S306, building the component's view layer based on the pre-built front-end framework and performing state management, implementing component style customization and interaction logic, and obtaining the front-end executable code.

[0107] S307, determine the communication mechanism and database design mechanism, and obtain the back-end executable code.

[0108] S308, obtaining the configured target component according to the component interface specification information, the front-end executable code and the back-end executable code.

[0109] It should be noted that the specific limitations of the above steps can be found in the specific limitations of the method for generating a business information display page based on drag-and-drop configuration above, which will not be repeated here.

[0110] The current method of generating pages based on template configuration is an efficient and flexible method. It allows relevant personnel to quickly create personalized pages, such as business information display pages for marketing activities, by selecting different content modules and custom parameters within the predefined template framework. This method uses automation technology to generate a variety of activity materials without in-depth technical details to meet the needs of different channels and target user groups. Relevant personnel can easily select templates, upload brand elements, adjust copy and design through the user interface, and then publish them to the appropriate advertising platform or social media. The template configuration method not only improves the efficiency of content production, but also ensures brand consistency, while reducing error rates and costs, allowing activities to respond quickly to market changes.

[0111] However, the method of generating pages based on template configuration has the following problems: 1. Limited flexibility: The template configuration method usually fixes the structure of the activity. Although it can be customized within a certain range, the flexibility in layout and design is more limited compared to the drag-and-drop method. The drag-and-drop method allows users to adjust the position and size of elements more freely to achieve a more diverse layout. 2. Limited creative expression: Due to the limitations of the template, the creative expression of the activity may be constrained. The template determines the modules and style options that can be replaced, while the drag-and-drop method has almost no restrictions and provides a broader creative space. 3. The degree of personalization: Although templates can quickly generate activities, it may lead to the convergence of the final output and it is difficult to fully reflect the uniqueness of the brand. The drag-and-drop method makes it easier to create unique and personalized content based on the specific needs of the brand.

[0112] Based on this, the embodiment of the present application provides a method for generating a business information display page based on drag-and-drop configuration, and describes the method for generating a business information display page based on drag-and-drop configuration in detail with a specific embodiment. It is worth understanding that the following description is only an exemplary description, and not a specific limitation of the application.

[0113] The method for generating a business information display page based on drag-and-drop configuration provided in this application, also known as a method for generating marketing activities based on drag-and-drop configuration, provides higher layout and design flexibility, allowing users to freely adjust the position and size of elements to create a unique page layout. This degree of freedom enables event-related personnel to fully demonstrate their creativity without being restricted by preset structures. At the same time, drag-and-drop interactive designs are usually more intuitive and easy to use, and users can preview the final effect in real time through direct operations, which not only lowers the threshold for use, but also increases user participation.

[0114] The business information display page generated by the method for generating a business information display page based on drag-and-drop configuration provided in this application is highly dynamic and adaptable, and can quickly respond to market changes and iterative requirements of marketing activities without redesigning the entire template. This method also reduces the reliance on professional technical support, allowing business personnel with non-technical backgrounds to easily create and manage various activities.

[0115] In contrast, the method of generating pages based on template configuration simplifies the design process, but may be limited in terms of personalization and creative expression, and may not be flexible enough when facing scenarios that require frequent updates and personalized customization. Therefore, the method for generating a business information display page based on drag-and-drop configuration provided by this application shows significant advantages in the pursuit of innovative and personalized business strategies.

[0116] The implementation process of the method for generating a business information display page based on drag-and-drop configuration provided in this application is as follows:

[0117] (1) Component design specifically includes:

[0118] The component design based on drag-and-drop marketing campaign generation is a process of atomizing and standardizing functional modules, aiming to improve the flexibility of the platform and the efficiency of user use. When designing these components, different marketing needs need to be considered, including basic elements such as text, pictures, buttons, as well as complex elements such as forms, carousels, and videos. Each component needs to define clear boundaries, attribute configurations, and interactive behaviors.

[0119] To ensure the ease of use of components, each component should provide intuitive visual feedback and rich configuration options, such as color, size, font, etc., to adapt to different design styles and brand requirements. At the same time, the design of components should take into account responsive layout to ensure good visual effects and functionality on different devices.

[0120] In addition, the backend logic needs to handle component data binding, event monitoring, and state management to ensure that changes in the user interface can be reflected in the final generated marketing campaign in real time. In this way, the creation of marketing campaigns becomes as simple and intuitive as building blocks, greatly improving the development efficiency and personalization level of marketing campaigns.

[0121] (2) Component implementation includes:

[0122] The implementation of components for drag-and-drop marketing campaign generation involves multiple technical aspects, ensuring that each component is both independent and can work with other components. First, a set of clear component interface specifications need to be defined, including attribute configuration, event handling, and data binding. These interface specifications will guide the development and interaction of components and ensure compatibility and consistency between different components.

[0123] In the implementation process, you can use front-end frameworks such as React or Vue.js to build the component's view layer, and use the responsive data binding and componentization features they provide to make component updates and state management more efficient. At the same time, combine CSS and JavaScript to implement component style customization and interaction logic.

[0124] On the backend side, it is necessary to design a RESTful API or use a communication mechanism such as WebSocket so that the front-end components can interact with the server and save the user's configuration changes in real time. The database design should be able to flexibly store the attribute values ​​and layout information of each component to facilitate subsequent reading and rendering.

[0125] (3) Component assembly specifically includes:

[0126] The component assembly of the drag-and-drop marketing campaign is a dynamic and interactive process that allows users to combine and configure individual components in an intuitive way to form a complete marketing page. In the assembly process, a draggable operation interface is first provided, which displays all available components, such as pictures, text boxes, buttons, etc. Users can start assembling by dragging these components to the editing area.

[0127] The editing area is usually a canvas with a grid system, which helps users align components and keep the layout neat and consistent. After a component is dragged into the canvas, users can adjust its size, position, and modify the specific configuration of the component through the property panel, such as color, font size, link, etc.

[0128] In order to implement this drag and drop and instant preview function, it is usually necessary to use a JavaScript framework or library on the front end to handle component state management, drag and drop logic, and real-time rendering. The back end is responsible for saving every step of the user's operation to ensure that the user's progress can be saved and loaded later.

[0129] In addition, data transmission or event triggering may be required between components, so it is also necessary to define a communication mechanism between components so that different components can respond accordingly based on user interactions, thereby realizing complex interaction logic.

[0130] (4) Generating a marketing activity page specifically includes: after the user completes the component assembly, the html code of the corresponding marketing activity interface is generated according to the components selected by the user and the attribute values ​​of each component.

[0131] (5) Automatic deployment specifically includes: the generated marketing activity page code is automatically uploaded to the cloud platform, and the marketing activity is automatically launched online through one-click deployment.

[0132] The advantages of the method for generating a business information display page based on drag-and-drop configuration provided by this application include:

[0133] (1) High flexibility: Drag-and-drop marketing campaign generation allows users to freely adjust the position and size of elements to achieve more diverse layouts. This flexibility allows marketing campaigns to better fit users’ creative ideas and better adapt to different content and design requirements.

[0134] (2) Creative freedom: Since marketing campaigns are not restricted by fixed templates, drag-and-drop generation provides marketers with a wider creative space. Marketing campaigns can be more unique and personalized, helping brands stand out in the market.

[0135] (3) Intuitive user interface: The drag-and-drop generation of marketing campaigns is usually very intuitive, and users can directly see how their operations affect the final layout and design. This instant feedback makes the generation process of marketing campaigns simpler and more efficient.

[0136] (4) Real-time preview: When dragging elements, users can preview the final effect in real time, which helps to make better decisions and quickly adjust the design.

[0137] (5) Strong adaptability: As marketing campaigns continue to change and iterate, the drag-and-drop generation of marketing campaigns can easily respond to various modification needs without having to redesign the entire template.

[0138] (6) Reduced reliance on technology: With tools that generate marketing campaigns based on drag-and-drop methods, marketers with non-technical backgrounds can also easily create and manage marketing campaigns on their own, reducing reliance on professional design or development teams.

[0139] (7) Easy to iterate and optimize: By generating marketing campaigns based on drag-and-drop, marketers can quickly experiment with different designs and layouts, find the most suitable solution, and easily perform subsequent optimization and iteration.

[0140] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, 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 can 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.

[0141] Based on the same inventive concept, the embodiment of the present application also provides a device for generating a business information display page based on drag-and-drop configuration for implementing the above-mentioned method for generating a business information display page based on drag-and-drop configuration. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above-mentioned method, so the specific limitations in the embodiments of one or more devices for generating business information display pages based on drag-and-drop configuration provided below can be referred to the limitations of the method for generating a business information display page based on drag-and-drop configuration above, and will not be repeated here.

[0142] In one embodiment, Figure 4 As shown, a device for generating a business information display page based on drag-and-drop configuration is provided, including: a component library acquisition module 401, a selection module 402, an adjustment module 403, an assembly module 404, and a code generation module 405, wherein:

[0143] The component library acquisition module 401 is used to acquire a pre-configured component library in response to a page generation instruction issued by a page development account; the page generation instruction is used to generate a program page with a business information display function, and the pre-configured component library includes at least two target components;

[0144] A selection module 402 is used to determine the component to be adjusted from each target component in the component library in response to the selection operation of the page development account on the target component, and display the component to be adjusted in a canvas interface with a grid;

[0145] The adjustment module 403 is used to update the characteristics of each element in each component to be adjusted in response to the adjustment operation of the page development account on the component to be adjusted, and obtain the adjusted component; the element characteristics include the position information, specification information and layout information of the element;

[0146] An assembling module 404 is used to assemble the adjusted components to obtain assembled components, and render the assembled components in a canvas interface to obtain a rendered preview page;

[0147] The code generation module 405 is used to generate target program code according to the assembled components in response to the confirmation operation of the page development account on the preview page; the target program code is used for the page development account to generate a program page with business information display function.

[0148] In one embodiment, the device is used to: determine the design content of each target component based on the requirements of the display function of business information; convert the specific design requirement information into executable code according to the specific design requirement information in the design content of each target component to obtain the configured target component; wherein the executable code includes the front-end interface program code and the back-end data interaction program code.

[0149] In one embodiment, the device is used to: obtain element features of each component element corresponding to each target component; component elements include basic elements and complex elements, basic elements include text elements, picture elements and button elements, and complex elements include form elements, turntable elements and video elements; obtain layout features corresponding to each target component; layout features include visual feedback information, configuration option information and responsive layout information; obtain back-end logic features corresponding to each target component; back-end logic features include component data binding information, event monitoring information and state management information; determine the design content of each target component based on element features, layout features and back-end logic features.

[0150] In one embodiment, the device is used to: determine component interface specification information according to the design content of the target component; the component interface specification information includes property configuration information, event processing information and data binding information; build the view layer of the component based on the pre-built front-end framework and perform state management, implement component style customization and interaction logic, and obtain the front-end executable code; determine the communication mechanism and database design mechanism, and obtain the back-end executable code; obtain the configured target component according to the component interface specification information, the front-end executable code and the back-end executable code.

[0151] In one embodiment, the device is used to: generate and display a draggable operation interface, in which each adjusted component is displayed; assemble the adjusted components in response to the assembly operation of the page development account; when the assembly is completed, render the assembled components in the canvas interface to obtain a rendered preview page; save the existing operations of the page development account at the current time node, and save the rendered preview page.

[0152] In one embodiment, the device is used to: upload the target program code to the cloud platform in response to a trigger instruction for function deployment; and run the uploaded target program code in the cloud platform to display the function with online business information.

[0153] Each module in the above-mentioned device for generating a business information display page based on drag-and-drop configuration can be implemented in whole or in part by software, hardware, or a combination thereof. Each of the above-mentioned modules 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 of the above modules.

[0154] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be shown in FIG5. The computer device includes a processor, a memory, an input / output interface (Input / Output, referred to as I / O) and a communication interface. The processor, the memory and the input / output interface are connected via a system bus, and the communication interface is connected to the system bus via the input / output interface. 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, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store data. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a method for generating a business information display page based on a drag-and-drop configuration is implemented.

[0155] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be shown in FIG6. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit, and an input device. The processor, the memory, and the input / output interface are connected via a system bus, and the communication interface, the display unit, and the input device are connected to the system bus via the input / output interface. 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 an 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 may be implemented through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a method for generating a business information display page based on a drag-and-drop configuration is implemented. The display unit of the computer device is used to form a visually visible picture, which may 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, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device shell, or an external keyboard, touchpad or mouse.

[0156] Those skilled in the art will understand that the structures shown in FIGS. 5 and 6 are merely block diagrams of partial structures related to the scheme of the present application, and do not constitute a limitation on the computer device to which the scheme of the present application is applied. The specific computer device may include more or fewer components than those shown in the figures, or combine certain components, or have a different arrangement of components.

[0157] In one embodiment, a 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.

[0158] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0159] In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0160] Those skilled 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 this 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.

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

[0162] 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 method for generating a business information display page based on drag-and-drop configuration, characterized in that: The method comprises: In response to a page generation instruction issued by a page development account, a preconfigured component library is obtained; the page generation instruction is used to generate a program page with a business information display function, and the preconfigured component library includes at least two target components; In response to the page development account's selection operation on the target component, determining a component to be adjusted from each of the target components in the component library, and displaying the component to be adjusted in a canvas interface with a grid; In response to the adjustment operation of the page development account on the to-be-adjusted component, updating each element feature in each to-be-adjusted component to obtain an adjusted component; the element feature includes location information, specification information and layout information of the element; Assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page; In response to the confirmation operation of the page development account on the preview page, a target program code is generated according to the assembled components; the target program code is used for the page development account to generate the program page with the business information display function.

2. The method according to claim 1, characterized in that Before the step of obtaining a preconfigured component library, the method further includes: Determining the design content of each of the target components based on the requirements of the display function of the business information; According to the specific design requirement information in the design content of each target component, the specific design requirement information is converted into executable code to obtain the configured target component; The executable code includes the front-end interface program code and the back-end data interaction program code.

3. The method according to claim 2, characterized in that Determining the design content of each target component based on the requirements of the display function of the business information includes: Acquire the element features of each component element corresponding to each target component; the component elements include basic elements and complex elements, the basic elements include text elements, picture elements and button elements, and the complex elements include form elements, turntable elements and video elements; Acquire layout features corresponding to each of the target components; the layout features include visual feedback information, configuration option information, and responsive layout information; Acquire the backend logic features corresponding to each of the target components; the backend logic features include component data binding information, event monitoring information and state management information; The design content of each of the target components is determined according to the element features, the layout features and the backend logic features.

4. The method according to claim 2, characterized in that: The step of converting the specific design requirement information into executable code according to the specific design requirement information in the design content of each target component to obtain the configured target component includes: Determine component interface specification information according to the design content of the target component; the component interface specification information includes property configuration information, event processing information and data binding information; Build the component's view layer based on the pre-built front-end framework and perform state management, implement component style customization and interaction logic, and obtain the front-end executable code; Determine the communication mechanism and database design mechanism to obtain the executable code of the backend; The configured target component is obtained according to the component interface specification information, the front-end executable code and the back-end executable code.

5. The method according to claim 1, characterized in that The step of assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page includes: Generating and displaying a draggable operation interface, wherein each of the adjusted components is displayed in the operation interface; In response to an assembly operation of the page development account, assembling the adjusted components; When the assembly is completed, the assembled components are rendered in the canvas interface to obtain a rendered preview page; Save the existing operations of the page development account at the current time node, and save the rendered preview page.

6. The method according to claim 1, characterized in that The method further comprises: In response to a trigger instruction for function deployment, uploading the target program code to a cloud platform; The uploaded target program code is run in the cloud platform to launch the business information display function.

7. A device for generating a business information display page based on drag-and-drop configuration, characterized in that: The device comprises: A component library acquisition module, used to acquire a pre-configured component library in response to a page generation instruction issued by a page development account; the page generation instruction is used to generate a program page with a business information display function, and the pre-configured component library includes at least two target components; A selection module, configured to determine a component to be adjusted from each of the target components in the component library in response to a selection operation of the page development account on the target component, and to display the component to be adjusted in a canvas interface having a grid; An adjustment module, configured to update the characteristics of each element in each component to be adjusted in response to the adjustment operation of the page development account on the component to be adjusted, and obtain an adjusted component; the element characteristics include position information, specification information and layout information of the element; An assembling module, used for assembling the adjusted components to obtain assembled components, and rendering the assembled components in the canvas interface to obtain a rendered preview page; A code generation module is used to generate target program code according to the assembled components in response to the confirmation operation of the page development account on the preview page; the target program code is used for the page development account to generate the program page with business information display function.

8. 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 method according to any one of claims 1 to 6 are implemented.

9. 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 method according to any one of claims 1 to 6 are implemented.

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

Images