A system and method for generating static pages

Abstract

The present application discloses a system and method for generating static pages, the system comprising: a static page generation module that automatically generates corresponding static page codes according to templates and components selected by users, a custom area rendering module that supports user-defined page areas and dynamically loads and renders user-defined components and content, and an e-commerce system integration module that performs data interaction and synchronization between the generated static pages and the business scenarios of the e-commerce system. The present application can simplify the static page generation process during the website building process of e-commerce merchants, improve website building efficiency, provide powerful customization functions, meet the diverse needs of e-commerce merchants, realize seamless integration of static pages and e-commerce systems, and ensure real-time synchronization and interaction of data.

Description

Technical Field

[0001] The present application relates to the field of software development, and in particular to a system and method for generating static pages. Background Art

[0002] E-commerce merchants face complex issues of code writing and page design during website building. Traditional website building methods require a lot of development and design requirements. Page production methods often require writing a lot of code and designing complex page layouts. The process is cumbersome, inefficient, time-consuming and costly.

[0003] With the development of technology, some page generation tools have emerged in the existing technology. Although these tools can provide certain templates and components for users to use, they are insufficient in page generation efficiency, customization capabilities, and integration with e-commerce systems. Therefore, how to efficiently generate static pages, enhance page customization functions, and achieve seamless data connection and real-time interaction when integrating with e-commerce systems has become a technical challenge. Summary of the invention

[0004] In order to simplify the static page generation process during website construction, improve website construction efficiency, provide powerful customization functions, meet the diverse needs of e-commerce merchants, realize the integration of static pages with e-commerce systems, and ensure real-time synchronization and interaction of data, the present application provides a system and method for static page generation for e-commerce business scenarios.

[0005] In a first aspect, the present application provides a system for generating static pages for e-commerce business scenarios, including:

[0006] Static page generation module, custom area rendering module and e-commerce system integration module;

[0007] The static page generation module is used to automatically generate corresponding static page codes according to the template and components selected by the user; it includes: a template parsing unit, used to parse the placeholders and component tags in the template selected by the user; a component rendering unit, used to insert the HTML, CSS and JavaScript codes corresponding to the components selected by the user into the corresponding positions of the template according to the placeholders and component tags in the template; a code generation unit, used to generate complete static page codes and save them to a specified directory; a static page acquisition unit, used to run and load the generated complete static page codes to generate static pages;

[0008] The custom area rendering module is used to support user-defined page areas and dynamically load and render user-defined components and content; it includes: a component loading unit, which is used to dynamically load components in the custom area of ​​the generated static page according to user selection; a content rendering unit, which renders and loads components according to content input by the user; an event processing unit, which is used to process user-defined interaction events;

[0009] The e-commerce system integration module is used to perform data interaction and synchronization between the generated static page and the e-commerce system; it includes: a data synchronization unit, used to synchronize the data in the e-commerce system to the generated static page; an event interaction unit, used to process the user's operations in the static page and return the operation results to the e-commerce system; a business logic processing unit, used to process the user's operation request according to the business logic of the e-commerce system.

[0010] By adopting the above solution and a modular design approach, three core functions are provided: static page generation, custom area rendering, and e-commerce system integration. By parsing the template's placeholders and component tags, the component code is directly inserted into the template, allowing users to efficiently and conveniently generate feature-rich static pages. By dynamically loading components and rendering user-defined components and content in the custom area content component, and processing component interaction events, the user's personalized requirements are met. By synchronizing e-commerce system data and feeding back static interface user operations, smooth interaction with the e-commerce system is ensured.

[0011] Preferably, the static page generation module further includes: a template and component analysis unit;

[0012] The template and component analysis unit is used to receive and integrate the templates and components selected by the user in the past, construct common templates and common component combinations, store the code information containing placeholders and component tags corresponding to the common templates, and the merged code information of the common component combinations; determine whether the template selected by the current user is a common template, and determine whether the components selected by the current user include common component combinations;

[0013] The template parsing unit is further used to obtain the judgment result of the template and component analysis unit. If the judgment result is that the template selected by the current user is a common template, the code information containing placeholders and component tags corresponding to the common template directly called is used to replace the placeholders and component tags in the template selected by the parsed user;

[0014] The component rendering unit is also used to obtain the judgment result of the template and component analysis unit. If the judgment result is that there is a common component combination for the component selected by the current user, for the selected common component combination, the stored code information will be directly called to merge the code, and the merged code will be inserted into the corresponding position of the template according to the placeholders and component tags in the template; for the remaining selected components, the HTML, CSS and JavaScript codes corresponding to the components selected by the user will be inserted into the corresponding positions of the template according to the placeholders and component tags in the template.

[0015] By adopting the above solution, considering that users generally use commonly used templates to create multiple similar pages, two or more components in the template will be inserted into the same position or adjacent positions of the template. The code for storing the template and the merging code of the components are used to make multiple components seamlessly integrated on the template, which is more concise and efficient, and improves the efficiency of static page generation.

[0016] Preferably, the static page generation module further includes: a static page acquisition verification unit;

[0017] The static page acquisition verification unit is used to detect whether the generated static page includes all the components selected by the user based on the image detection technology; if all the components are included, no auxiliary operation is performed; if all the components are not included and there are components that have not been loaded and generated, the spare code of the corresponding component is searched from the preset component library for the components that have not been loaded and generated, and the spare code of the corresponding component is sent to the component rendering unit;

[0018] The component rendering unit is further used to receive the spare code of the corresponding component, replace the original code of the corresponding component with the spare code of the corresponding component, and re-insert the code corresponding to the component selected by the user into the corresponding position of the template according to the placeholder and component mark in the template;

[0019] The code generation unit is also used to regenerate the complete static page code and save it to a specified directory;

[0020] The static page acquisition unit is further used to run loading and regenerate the static page according to the regenerated complete static page code.

[0021] By adopting the above solution, considering that many component codes cannot be displayed in the actual loading process after being inserted into the template, image detection technology is used to verify whether all components are loaded. For components that are not loaded, backup codes are obtained to replace the original codes and regenerate the page to ensure user needs for components.

[0022] Preferably, the static page generation module further includes: a component code optimization unit;

[0023] The component code optimization unit is used to obtain the code of the component selected by the user, optimize and compress the code of the selected component, remove blanks, comments, and repeated codes in the code, and obtain the optimized code of the component selected by the user;

[0024] The component rendering unit is also used to replace the original code of the component selected by the user with the optimized code of the component selected by the user, and insert the optimized code corresponding to the component selected by the user into the corresponding position of the template according to the placeholder and component mark in the template.

[0025] By adopting the above solution, code optimization and code compression are used to further simplify the time of inserting code into templates and improve the efficiency of generating static pages.

[0026] Preferably, the custom area rendering module further includes: a loading component association unit;

[0027] The loading component associating unit is further used to associate the components dynamically loaded in the custom area of ​​the generated static page according to the user selection;

[0028] The content rendering unit is also used to synchronously render associated components according to the content input by the user.

[0029] By adopting the above solution, taking into account the unified style of e-commerce merchants' website building, the need to render multiple components with the same style of color background in the custom area is required, and thus a tool for associating components is designed to complete the unified rendering of multiple components and improve the efficiency of custom rendering.

[0030] Preferably, the custom area rendering module includes: an interaction event monitoring and conflict processing unit;

[0031] The interactive event monitoring and conflict processing unit is used to monitor the interactive events generated by the component triggering in the custom area, associate the component name with each interactive event generated by the component triggering, introduce an interactive event queue mechanism, and sequentially add the interactive events generated by the component triggering in the custom area monitored in real time to the queue, attaching the timestamp and the preset priority of the interactive event generated by the component triggering; when there are interactive events at the same time, according to the preset priority of the interactive events generated by the component triggering, adjust the order of adding the interactive events monitored at the same time to the queue so that the interactive events with high priority are placed at the front of the queue compared with the interactive events with low priority; when there is a preset conflict among the interactive events obtained within the first preset time period, adjust the order of the interactive events with preset conflict in the interactive event queue so that the time interval between the interactive events with preset conflict is greater than the first preset time;

[0032] The event processing unit is also used to process the user-defined component triggers to generate interaction events according to the order of the interaction event queue.

[0033] By adopting the above solution, considering that conflicts may occur when multiple components trigger the generation of interactive events, an interactive event queue mechanism is adopted, and timestamps and priorities are set to adjust the event processing order in real time to avoid event conflicts.

[0034] Preferably, the interaction event monitoring and conflict processing unit is also used to calculate the frequency of the same interaction events triggered and generated by the same component within a second preset time period. If the frequency of the same interaction events triggered and generated by the same component is greater than the preset frequency, the order of the monitored same interaction events triggered and generated by the same component in the queue is adjusted so that the time interval between the same interaction events triggered and generated by the same component is greater than the second preset time.

[0035] By adopting the above solution, considering that there are performance problems caused by too frequent interactive events triggered by dynamic components in static pages, the design waits for a period of time after triggering the interactive events to process them again to avoid frequent processing. By adopting the above solution, considering that there are performance problems caused by too frequent interactive events triggered by dynamic components in static pages, the design waits for a period of time after triggering the interactive events to process them again to avoid frequent processing.

[0036] Preferably, the custom area rendering module further includes: a content security review unit;

[0037] The content security review unit is used to check the legality and version compatibility of the content input by the user, and prompt that illegal and version-incompatible content cannot be input.

[0038] By adopting the above solution, a review mechanism is designed to avoid problems such as illegality and incompatibility, taking into account issues such as whether the source of the content entered by the user in the custom area is legal and whether the version is compatible, so as to avoid problems such as illegality and incompatibility.

[0039] Preferably, the e-commerce system integration module further includes: a data cache unit;

[0040] The data cache unit is used to obtain and store common commodity information and order data of the e-commerce system;

[0041] The data synchronization unit is also used to directly obtain common commodity information and order data of the e-commerce system from the data cache unit and synchronize them to the generated static page.

[0042] By adopting the above solution, considering that e-commerce merchants will generate multiple static pages at one time when building a website, each page needs to synchronously display the relevant products of the e-commerce system. In order to reduce the number of interactions with the backend of the e-commerce system and speed up page loading, commonly used product information and order data are pre-cached.

[0043] In a second aspect, the present application provides a method for generating a static page using any of the above systems, comprising:

[0044] Get the template and component selected by the user;

[0045] Automatically generate static page code based on the template and components selected by the user, and run and load the static page code to generate a static page;

[0046] Dynamically load user-selected components in the custom area of ​​the generated static page; render recorded components based on user input; handle user-defined interaction events;

[0047] Synchronize data in the e-commerce system to static pages; process user operations in static pages and return the results to the e-commerce system; process user operation requests according to the business logic of the e-commerce system.

[0048] By adopting the above solution, templates and components are selected to automatically generate static page codes, support users to customize page areas and dynamically load rendering components, and realize data interaction and synchronization with the e-commerce system, thereby improving page generation efficiency, enriching page functions, and improving user experience.

[0049] In summary, this application has the following beneficial effects:

[0050] 1. Adopting modular design concept, it provides three core functions: efficient generation of static pages based on templates and components selected by users, customized area rendering that dynamically loads components and content based on user personalized needs, and seamless integration with e-commerce systems, ensuring real-time synchronization and interaction of data, improving page generation efficiency, enriching page functions, and improving user experience;

[0051] 2. A static page acquisition verification unit is further set for static pages to avoid the generation of faulty pages, and a component code optimization unit is further set to complete component code optimization to improve the efficiency of page generation;

[0052] 3. During the custom rendering process, listen to the interactive events triggered by multiple components, introduce an event queue mechanism, and adjust the processing order in the queue for conflicting or frequent interactive events;

[0053] 4. Cache commonly used product information and order data in the e-commerce system to reduce the number of interactions with the backend of the e-commerce system and speed up page loading. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] Figure 1 It is a structural schematic diagram of a system for generating static pages described in a specific embodiment;

[0055] Figure 2 The present invention is a flowchart of a method for generating a static page described in a specific embodiment. DETAILED DESCRIPTION

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

[0057] Considering that existing website building tools usually lack powerful customization functions and are difficult to meet the diverse needs of e-commerce merchants, it is necessary to quickly generate static pages integrated with the e-commerce system for e-commerce merchants to improve the website building efficiency and user experience of merchants, such as Figure 1 As shown, an embodiment of the present application discloses a system for generating static pages, the system comprising: a static page generation module 1, a custom area rendering module 2 and an e-commerce system integration module 3.

[0058] Specifically, the static page generation module 1 specifically includes: a template parsing unit 11, a component rendering unit 12, a code generation unit 13, and a static page acquisition unit 14. Through the above modules and in combination with the templates and components selected by the user from the preset template library and component library, a static page containing complete and diverse components is efficiently generated. Among them, the preset component library includes but is not limited to the following components: group purchase list, appointment list, hourly flash sale, pre-sale list, smart recommendation, product list, limited time sale, coupon list, new user exclusive, bargaining, custom area, carousel animation, auxiliary line, title DIY, universal hot zone, versatile navigation, video and announcement, etc.

[0059] Specifically, the template parsing unit 11 is used to parse the placeholders and component tags in the template selected by the user to provide accurate positioning information for subsequent component rendering. The component rendering unit 12 is used to insert the code information corresponding to the component selected by the user into the corresponding position of the template according to the placeholders and component tags in the template; the code information includes: HTML, CSS and JavaScript code, etc. The code generation unit 13 is used to generate a complete static page code and save it to a specified directory; wherein each complete static page code is stored in a user-specified directory in the order of generation to facilitate subsequent publishing and deployment; the static page acquisition unit 14 is used to run and load the generated static page according to the complete static page code.

[0060] The custom area rendering module 2 specifically includes: a component loading unit 21, a content rendering unit 22 and an event processing unit 23; this module supports user-defined page areas, and dynamically loads and renders user-defined components and content.

[0061] Specifically, the component loading unit 21 is used to dynamically load components in the custom area of ​​the generated static page according to the user's selection; wherein the user can not only add components in the preset component library in the custom area, but also upload and configure his own components to achieve more advanced custom effects. The content rendering unit 22 renders the loaded components according to the content input by the user; the input content includes text, pictures, background styles, shapes, etc. The event processing unit 23 is used to process user-defined interactive events; the user-defined interactive events include events generated by user component triggering, such as clicks, slides, etc., to provide users with a smooth interactive experience.

[0062] The e-commerce system integration module 3 includes: a data synchronization unit 31, an event interaction unit 32 and a business logic processing unit 33; this module performs data interaction and synchronization between the generated static page and the business scenario of the e-commerce system.

[0063] Specifically, the data synchronization unit 31 is used to synchronize the data in the e-commerce system to the generated static page to ensure the accuracy and timeliness of the information; the event interaction unit 32 is used to process the user's operations in the generated static page and return the operation results to the e-commerce system, such as adding to the shopping cart, placing an order, etc., and feed these operation results back to the e-commerce system; the business logic processing unit 33 is used to process user operation requests according to the business logic of the e-commerce system itself, ensuring the smooth progress of the transaction process.

[0064] For the system described in the above embodiment, during use, the user first selects the favorite template and required components through the system interface, and inserts the corresponding HTML, CSS and JavaScript codes into the template according to the template and components selected by the user; at the same time, the user can freely add and configure components in the custom area, and the custom area rendering module dynamically loads and renders these components; finally, through the e-commerce system integration module, the generated static page is connected to the backend e-commerce system for data, and information such as goods and orders are synchronized. For example: the user selects a template containing a group list and a carousel animation, the system parses the template, and inserts the code of the group list and the carousel animation into the corresponding position, generates the final static page code, and runs the loading code to generate the static page; the user selects a video component in the custom area and enters the video link, the system loads the video component and renders the video content, and processes the interactive events such as play, pause, etc. generated by the user-defined trigger; the user browses the goods in the static page generated by the system and adds them to the shopping cart, the system synchronizes the product information to the e-commerce system, processes the add to shopping cart operation, and returns the operation result.

[0065] With respect to the system described in the above embodiment, a modular design is used to simplify the complex page creation process into a few simple operation steps, which greatly improves the efficiency of website building. At the same time, the preset component library and custom area rendering technology are used to fully meet the personalized needs of users.

[0066] In a specific embodiment, taking into account the homogeneity of styles and needs of some e-commerce merchants in the process of building websites, some templates and component combinations are frequently selected by users. The technical means of combining and inserting commonly used component code snippets are used to further efficiently generate complete static pages. The static page generation module 1 also includes a template and component analysis unit 15.

[0067] Specifically, the template and component analysis unit 15 is used to receive and analyze the templates and components that are integrated with the user's historical selections, construct commonly used templates and commonly used component combinations, store the code information corresponding to the commonly used templates, including placeholders and component tags, and the merged code information of the commonly used component combinations; determine whether the template selected by the current user is a commonly used template, and determine whether the components selected by the current user include commonly used component combinations; wherein, the information of the templates and components selected by the user in the past three months is selected, the frequency of the selected templates and component combinations is calculated, and the commonly used templates and component combinations corresponding to the templates and component combinations with a selection frequency higher than the preset selection frequency are used to construct commonly used templates and commonly used component combinations. In addition, the templates and components selected by the user in the history can be analyzed and integrated to construct commonly used component combinations that match commonly used templates, that is, commonly used templates and commonly used component combinations that match commonly used templates are selected.

[0068] The template parsing unit 11 is also used to obtain the judgment result of the template and component analysis unit 15. If the judgment result is that the template selected by the current user is a common template, the code information containing placeholders and component tags obtained by directly calling the common template parsing is used to replace the placeholders and component tags in the template selected by the parsing user; the component rendering unit 12 is also used to obtain the judgment result of the template and component analysis unit 15. If the judgment result is that the component selected by the current user has a common component combination, for the selected common component combination, the stored code information merging code will be directly called, and the merged code will be inserted into the corresponding position of the template according to the placeholders and component tags in the template; for the remaining selected components, the HTML, CSS and JavaScript codes corresponding to the components selected by the user are inserted into the corresponding position of the template according to the placeholders and component tags in the template. In addition, if the judgment result is that the template selected by the current user is a common template and the component selected by the current user has a common component combination that matches the common template, for the selected common component combination that matches the common template, the stored code information merging code will be directly called, and the merged code will be inserted into the corresponding position of the common template according to the placeholders and component tags in the common template.

[0069] For example, a user selects a common template for an e-commerce webpage. Several adjacent placeholders are reserved in the common template page for displaying product information, purchase buttons and other components. The user selects common component combinations such as "product list component" and "add to cart button component" from the component library. In order to insert them into a specific position of the template more efficiently, the merged code information of the component combination is called, including the merged information of the HTML code, the merged CSS code and the merged JavaScript code, and the code information of the called component combination is inserted into the corresponding position of the template.

[0070] In a specific embodiment, considering that some codes may fail to run, resulting in incomplete components of the final static page generation, in order to avoid this situation that reduces the user experience, means such as verifying the generated static page are used to further ensure the generation of a complete static page. The static page generation module 1 also includes: a static page acquisition verification unit 16.

[0071] The static page acquisition verification unit 16 is used to detect whether the generated static page includes all the components selected by the user based on the image detection technology; if all the components are included, no auxiliary operation is performed; if all the components are not included and there are components that have not been loaded, the spare code of the corresponding component is searched from the component code library for the components that have not been loaded, and the spare code of the corresponding component is sent to the component rendering unit; wherein, the image detection technology adopts the neural network technology; using the image detection technology, all the components of the generated static page are obtained, compared with all the components selected by the user, to determine whether all the components selected by the user are included, and to determine the components that have not been loaded; the preset component library stores the code information and spare code information of each component.

[0072] The component rendering unit 12 is also used to receive the spare code of the corresponding component, replace the original code of the corresponding component with the spare code of the corresponding component, and re-insert the code corresponding to the component selected by the user into the corresponding position of the template according to the placeholder and component mark in the template. The code generation unit 13 is also used to regenerate the complete static page code and save it to a specified directory; the static page acquisition unit 14 is also used to run and load the regenerated static page according to the regenerated complete static page code.

[0073] For example: if the "product list component" is not detected in the generated static page, the backup code of the corresponding product list component is queried from the preset component library, and the backup code is used to replace the original code and inserted into the template, and the code generation unit is reused to generate a complete static page again.

[0074] In a specific embodiment, in order to further efficiently generate a complete static page, the static page generation module 1 further includes: a component code optimization unit 17 .

[0075] The component code optimization unit 17 is used to obtain the code of the component selected by the user from the preset component library, optimize and compress the code of the selected component, remove blanks, comments, and repeated codes in the code, and obtain the optimized code of the selected component.

[0076] The component rendering unit 12 is also used to replace the original code of the selected component with the optimized code of the selected component, and insert the optimized code corresponding to the component selected by the user into the corresponding position of the template according to the placeholder and component mark in the template.

[0077] In a specific embodiment, considering the needs of e-commerce merchants for uniform rendering of some components in static pages during website building and meeting user customization requirements, the custom area rendering module also includes: a loading component association unit 24.

[0078] The loading component association unit 24 is also used to associate components dynamically loaded in a custom area of ​​the generated static page according to user selection; the content rendering unit 22 is also used to synchronously render associated components according to the content input by the user, such as: synchronously setting the background, filling the shape with the same color, edge selection, and editing the opacity setting.

[0079] In a specific embodiment, considering that conflicts may exist in the processing of interactive events in the custom rendering area, resulting in chaotic display of static pages, in order to ensure the orderliness of the custom areas in the static pages, the custom area rendering module includes: an interactive event monitoring and conflict processing unit 25.

[0080] The interactive event monitoring and conflict processing unit 25 is used to monitor the interactive events generated by the user-defined component trigger in the custom area, associate the component name with each interactive event generated by the component trigger, introduce an interactive event queue mechanism, and sequentially add the interactive events generated by the component trigger in the custom area monitored in real time to the queue, attaching the timestamp and the preset priority of the component trigger to generate the interactive event; when there are interactive events at the same time, according to the preset priority of the component trigger to generate the interactive event, adjust the order of adding the interactive events monitored at the same time to the queue so that the interactive events with high priority are placed at the front of the queue compared with the interactive events with low priority; when there is a preset conflict among the interactive events obtained within the first preset time period, adjust the order of the interactive events monitored with the preset conflict in the interactive event queue so that the time interval between the interactive events with the preset conflict is greater than the first preset time; the preset conflict is set according to the typical conflict between the interactive events corresponding to the components added by each user.

[0081] For example: In a custom area, two components are loaded in the custom area according to the user's choice, one is a drop-down menu (component A), and the other is a modal dialog box (component B). Component A has a preset interaction event. When the user clicks the arrow of the drop-down menu, the menu item will expand or collapse; component B has a preset interaction event. When the user clicks a button on the page, the modal dialog box will pop up, and it will be closed by clicking in the area outside the dialog box. If the current user clicks the button that triggers the modal dialog box when the drop-down menu is expanded, the modal dialog box will pop up; if the user tries to click an area outside the drop-down menu to close the modal dialog box, but this area also covers part of the drop-down menu, there will be an interaction event conflict, that is, there will be interaction events at the same time. According to the setting, the priority of the preset interaction event of component B is greater than the preset interaction time of component A, then the interaction event that closes the modal dialog box is in the front of the queue.

[0082] Another example: In a custom area, two components are loaded in the custom area according to the user's selection, one is a drop-down menu (component A), and the other is a quick search box (component B). After the user selects an option in the drop-down menu (component A), the menu will automatically collapse and trigger an interaction event. The interaction event will send a request to the server to obtain data related to the selected option. Then, the user quickly selects an option from the drop-down menu and immediately enters content in the quick search box (component B) to search. The two interaction events are triggered almost at the same time (the time interval between them is less than the preset time), and an interaction time conflict occurs, that is, the previous interaction event (such as the onchange event of component A) has not completed data processing, and the next interaction event (such as the oninput or onkeydown event of component B) has already started to execute; adjust the time interval between the two interaction times so that the interaction event of component B occurs after the preset time interval between the interaction events of component A.

[0083] Taking into account the performance degradation caused by frequent component interactions in the custom area, the interaction event monitoring and conflict handling unit 25 is also used to calculate the frequency of the same interaction events triggered by the same component within a second preset time period. If the frequency of the same interaction events triggered by the same component is greater than the preset frequency, the order of the same interaction events triggered by the same component in the interaction event queue is adjusted so that the time interval between the same interaction events triggered by the same component is greater than the second preset time.

[0084] The event processing unit 23 is further used to process the user-defined component-triggered interaction events according to the order of the interaction event queue.

[0085] In addition, for the event processing unit 23, event throttling or anti-shake mechanism can also be used to reduce the processing frequency of interactive events. The throttling mechanism refers to processing only one interactive event within a specific time, and the anti-shake mechanism refers to waiting for a period of time after an interactive event is triggered and generated before executing. If the same component triggers the generation of the same interactive event again during this period, the timing is restarted until a period of time is waited before executing.

[0086] In a specific embodiment, taking into account the legality and compatibility issues of user input content, in order to avoid these problems and ensure that the components in the custom area can subsequently interact normally, the custom area rendering module also includes: a content security review unit 26.

[0087] The content security review unit 26 is used to check the legality and version compatibility of the content input by the user, and prompt that the illegal and version-incompatible content cannot be input; wherein, the version compatibility refers to the content version that is allowed to be added and can run normally in the current component that is preset. For example: the legality and version compatibility of the video link input by the user in the video component are checked, and if it is illegal or the video version is incompatible, the video cannot be played in the custom area.

[0088] In a specific embodiment, in order to further optimize the integration process between the generated static page and the e-commerce system, the e-commerce system integration module further includes: a data cache unit 34.

[0089] The data cache unit 34 is used to obtain and store the commonly used commodity information and order data of the e-commerce system; that is, the commonly used commodity information and order data are obtained based on the statistical analysis of the background data of the e-commerce system; the data synchronization unit 31 is also used to directly obtain the commonly used commodity information and order data of the e-commerce system from the data cache unit and synchronize them to the generated static page; thereby reducing the number of interactions with the back end of the e-commerce system and speeding up the loading of static page data.

[0090] In addition, the data synchronization unit 31 can also prioritize synchronizing the core data in the e-commerce system to the generated static page based on the performance of the device on which the user installs the system, and continue to synchronize the remaining data in the e-commerce system to the generated static page in response to poor performance, such as computing resources lower than preset resources or device network speed lower than preset speed.

[0091] like Figure 2 As shown, the embodiment of the present application discloses a method for generating a static page using any of the above systems, and the specific steps include:

[0092] S1. Get the template and components selected by the user.

[0093] S2. Automatically generate static page code according to the template and components selected by the user, and run and load the static page code to generate a static page.

[0094] Among them, automatically generating static page code according to the template and component selected by the user includes: parsing the placeholders and component tags in the template selected by the user, inserting the HTML, CSS and JavaScript codes corresponding to the component selected by the user into the corresponding position of the template according to the placeholders and component tags in the template, generating complete static page code and saving it to a specified directory; among them, obtaining the code of the component selected by the user from the preset component library, optimizing and compressing the code of the selected component, removing blanks, comments and repeated codes in the code, and obtaining the optimized code of the selected component.

[0095] S3. Dynamically load the components selected by the user in the custom area of ​​the generated static page; render the recorded components according to the content input by the user; and process the interaction events defined by the user.

[0096] S4. Synchronize the data in the e-commerce system to the static page; process the user's operations in the static page and return the results to the e-commerce system; process the user's operation requests according to the business logic of the e-commerce system.

[0097] In a specific embodiment, the method S2 step further includes:

[0098] Based on the image detection technology, it is detected whether the generated static page includes all the components selected by the user; if all the components are included, no auxiliary operation is performed; if all the components are not included and there are components that have not been loaded, the backup code of the corresponding component is searched from the preset component library for the components that have not been loaded, and the backup code of the corresponding component is searched; the original code of the corresponding component is replaced with the backup code of the corresponding component, and the code corresponding to the component selected by the user is re-inserted into the corresponding position of the template according to the placeholder and component tag in the template; the complete static page code is regenerated and saved to the specified directory; the static page is regenerated according to the regenerated complete static page code.

[0099] In a specific embodiment, the method S2 step further includes:

[0100] Receive, analyze and integrate the templates and components selected by the user in history, build common templates and common component combinations, store the code information containing placeholders and component tags corresponding to the common templates, and the merged code information of the common component combinations; determine whether the template selected by the current user is a common template, and determine whether the component selected by the current user includes a common component combination; if the judgment result is that the template selected by the current user is a common template, directly call the code information containing placeholders and component tags corresponding to the common template to replace the placeholders and component tags in the template selected by the user; if the judgment result is that there is a common component combination in the component selected by the current user, for the selected common component combination, directly call the stored code information to merge the code, and insert the merged code into the corresponding position of the template according to the placeholders and component tags in the template; for the remaining selected components, insert the HTML, CSS and JavaScript codes corresponding to the components selected by the user into the corresponding positions of the template according to the placeholders and component tags in the template.

[0101] In a specific embodiment, the method step S3 further includes:

[0102] Monitor interactive events generated by component triggering in a custom area, associate component names with interactive events generated by component triggering, introduce interactive event queue mechanism, add interactive events generated by component triggering in a custom area monitored in real time to the queue in order, attach timestamps and preset priorities of interactive events generated by component triggering; when there are interactive events at the same time, adjust the order in which interactive events monitored at the same time are added to the queue according to the preset priorities of interactive events generated by component triggering so that interactive events with high priorities are placed at the front of the queue compared to interactive events with low priorities; when interactive events acquired within a first preset time period have preset conflicts, adjust the order of interactive events monitored with preset conflicts in the interactive event queue so that the time interval between interactive events with preset conflicts is greater than the first preset time; process interactive events generated by user-defined component triggering according to the order of the interactive event queue;

[0103] Calculate the frequency of the same interaction events triggered and generated by the same component within a second preset time period. If the frequency of the same interaction events triggered and generated by the same component is greater than the preset frequency, adjust the order of the same interaction events triggered and generated by the same component in the interaction event queue so that the time interval between the same interaction events triggered and generated by the same component is greater than the second preset time.

[0104] In a specific embodiment, the method step S3 further includes:

[0105] Dynamically load components in custom areas of generated static pages based on user selections; render associated components synchronously based on user input.

[0106] In a specific embodiment, the method step S3 further includes:

[0107] The content entered by the user is checked for legality and version compatibility. If the content is illegal or incompatible with the version, it will be prompted that the content cannot be entered.

[0108] In a specific embodiment, the method step S4 further includes:

[0109] Acquire and store the commonly used commodity information and order data of the e-commerce system, and directly obtain the commonly used commodity information and order data of the e-commerce system from the data cache unit and synchronize them to the generated static page.

[0110] The embodiment of the present application also discloses a computer-readable storage medium.

[0111] Specifically, the computer-readable storage medium stores a computer program that can be loaded by a processor and execute the method for generating static pages as described above. The computer-readable storage medium includes, for example: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0112] The embodiment of the present application also discloses a computer device.

[0113] Specifically, the computer device includes a memory and a processor, and the memory stores a computer program that can be loaded by the processor and execute the above method for generating static pages.

[0114] The above are all preferred embodiments of the present application, and are not intended to limit the protection scope of the present application. Any feature disclosed in this specification (including the abstract and drawings), unless otherwise stated, can be replaced by other equivalent or alternative features with similar purposes. That is, unless otherwise stated, each feature is only an example of a series of equivalent or similar features.

Claims

1. A system for generating static pages, characterized in that: include: Static page generation module, custom area rendering module and e-commerce system integration module; The static page generation module is used to automatically generate corresponding static page codes according to the template and components selected by the user; it includes: a template parsing unit, used to parse the placeholders and component tags in the template selected by the user; a component rendering unit, used to insert the HTML, CSS and JavaScript codes corresponding to the components selected by the user into the corresponding positions of the template according to the placeholders and component tags in the template; a code generation unit, used to generate complete static page codes and save them to a specified directory; a static page acquisition unit, used to run and load the generated complete static page codes to generate static pages; The custom area rendering module is used to support user-defined page areas and dynamically load and render user-defined components and content; it includes: a component loading unit, which is used to dynamically load components in the custom area of ​​the generated static page according to user selection; a content rendering unit, which renders and loads components according to content input by the user; an event processing unit, which is used to process user-defined interaction events; The e-commerce system integration module is used to perform data interaction and synchronization between the generated static page and the e-commerce system; it includes: a data synchronization unit, which is used to synchronize the data in the e-commerce system to the generated static page; an event interaction unit, which is used to process the user's operation in the static page and return the operation result to the e-commerce system; a business logic processing unit, which is used to process the user's operation request according to the business logic of the e-commerce system; the static page generation module also includes: a template and component analysis unit; The template and component analysis unit is used to receive and integrate the templates and components selected by the user in the past, construct common templates and common component combinations, store the code information containing placeholders and component tags corresponding to the common templates, and the merged code information of the common component combinations; determine whether the template selected by the current user is a common template, and determine whether the components selected by the current user include common component combinations; The template parsing unit is further used to obtain the judgment result of the template and component analysis unit. If the judgment result is that the template selected by the current user is a common template, the code information containing placeholders and component tags corresponding to the common template is directly called to replace the placeholders and component tags in the template selected by the parsed user; The component rendering unit is further used to obtain the judgment result of the template and component analysis unit. If the judgment result is that there is a common component combination for the component selected by the current user, for the selected common component combination, directly call the stored code information to merge the code, and insert the merged code into the corresponding position of the template according to the placeholder and component mark in the template; for the remaining selected components, insert the HTML, CSS and JavaScript codes corresponding to the components selected by the user into the corresponding positions of the template according to the placeholder and component mark in the template; The static page generation module also includes: a static page acquisition verification unit; The static page acquisition verification unit is used to detect whether the generated static page includes all the components selected by the user based on the image detection technology; if all the components are included, no auxiliary operation is performed; if all the components are not included and there are components that have not been loaded and generated, the spare code of the corresponding component is searched from the preset component library for the components that have not been loaded and generated, and the spare code of the corresponding component is sent to the component rendering unit; The component rendering unit is further used to receive the spare code of the corresponding component, replace the original code of the corresponding component with the spare code of the corresponding component, and re-insert the code corresponding to the component selected by the user into the corresponding position of the template according to the placeholder and component mark in the template; The code generation unit is also used to regenerate the complete static page code and save it to a specified directory; The static page acquisition unit is further used to run loading and regenerate the static page according to the regenerated complete static page code.

2. The system for generating static pages according to claim 1, characterized in that: The static page generation module also includes: a component code optimization unit; The component code optimization unit is used to obtain the code of the component selected by the user, optimize and compress the code of the selected component, remove blanks, comments, and repeated codes in the code, and obtain the optimized code of the component selected by the user; The component rendering unit is also used to replace the original code of the component selected by the user with the optimized code of the component selected by the user, and insert the optimized code corresponding to the component selected by the user into the corresponding position of the template according to the placeholder and component mark in the template.

3. The system for generating static pages according to claim 1, characterized in that: The custom area rendering module further includes: a loading component association unit; The loading component associating unit is further used to associate the components dynamically loaded in the custom area of ​​the generated static page according to the user selection; The content rendering unit is also used to synchronously render associated components according to the content input by the user.

4. The system for generating static pages according to claim 1, characterized in that: The custom area rendering module includes: an interactive event monitoring and conflict processing unit; The interactive event monitoring and conflict processing unit is used to monitor the interactive events generated by the component triggering in the custom area, associate the component name with each interactive event generated by the component triggering, introduce an interactive event queue mechanism, and sequentially add the interactive events generated by the component triggering in the custom area monitored in real time to the queue, attaching the timestamp and the preset priority of the interactive event generated by the component triggering; when there are interactive events at the same time, according to the preset priority of the interactive events generated by the component triggering, adjust the order of adding the interactive events monitored at the same time to the queue so that the interactive events with high priority are placed at the front of the queue compared with the interactive events with low priority; when there is a preset conflict among the interactive events obtained within the first preset time period, adjust the order of the interactive events with preset conflict in the interactive event queue so that the time interval between the interactive events with preset conflict is greater than the first preset time; The event processing unit is also used to process the interaction events triggered by the user-defined components according to the order of the interaction event queue.

5. The system for generating static pages according to claim 4, characterized in that: The interaction event monitoring and conflict processing unit is also used to calculate the frequency of the same interaction events triggered and generated by the same component within a second preset time period. If the frequency of the same interaction events triggered and generated by the same component is greater than the preset frequency, the order of the same interaction events triggered and generated by the same component in the queue is adjusted so that the time interval between the same interaction events triggered and generated by the same component is greater than the second preset time.

6. The system for generating static pages according to claim 1, characterized in that: The custom area rendering module also includes: a content security review unit; The content security review unit is used to check the legality and version compatibility of the content input by the user, and prompt that the illegal and version-incompatible content cannot be input.

7. The system for generating static pages according to claim 1, characterized in that: The e-commerce system integration module also includes: a data cache unit; The data cache unit is used to obtain and store common commodity information and order data of the e-commerce system; The data synchronization unit is also used to directly obtain common commodity information and order data of the e-commerce system from the data cache unit and synchronize them to the generated static page.

8. A method for generating static pages using the system of claim 1 to claim 7, characterized in that: include: Get the template and component selected by the user; Automatically generate static page code based on the template and components selected by the user, and run and load the static page code to generate a static page; Dynamically load the components selected by the user in the custom area of ​​the generated static page; render the loaded components according to the content entered by the user; Handle user-defined interaction events; Synchronize data in the e-commerce system to static pages; Process user operations on static pages and return the results to the e-commerce system; process user operation requests according to the business logic of the e-commerce system.

Images