Dynamic webpage generation method and system based on metadata

Abstract

The invention discloses a dynamic webpage generation method and system based on metadata. The dynamic webpage generation method comprises the following steps: establishing a Vue template library, reading JSON (JavaScript Object Notation) data, extracting page layout information, component types, data binding information and interactive logic information, and verifying the correctness of the JSON data; selecting a corresponding Vue template according to a component type defined in the JSON data; replacing a placeholder in the Vue template with data binding information in the JSON data; performing style application on the HTML elements according to page layout information defined in the JSON data; binding a corresponding event processing function for the Vue template according to interaction logic information defined in the JSON data; and combining the obtained Vue template, the page layout information and the event processing function into a webpage. By means of the webpage development method and device, webpage development can be more flexible and efficient, and changes of service requirements can be quickly responded to.

Description

Technical Field

[0001] The invention relates to a dynamic web page generation method based on metadata, and also relates to a corresponding dynamic web page generation system, belonging to the technical field of network front-end development. Background Art

[0002] In low-code development platforms, metadata plays a vital role. It is used to define objects, fields, configurations, codes, logic, and page layouts. Based on these metadata, the platform can automatically generate the system's data structure as well as the application's user interface and automation logic. This type of configurable application is highly flexible, allowing developers to quickly respond to changes in business needs without in-depth programming.

[0003] In the traditional development process, developers need to frequently perform front-end development work when completing page development, which seriously reduces R&D efficiency. In existing dynamic web page generators, whenever a new component needs to be added, developers often need to perform repeated front-end development work, which also limits development efficiency. In addition, the lack of real-time page updates is also a problem. After modifying metadata, traditional dynamic web page generators often need to reload the entire page to see the effect of the change, which affects the efficiency of development and maintenance.

[0004] In the Chinese invention patent with patent number ZL 202011420654.1, a method for generating dynamic web pages with custom configuration is disclosed. The method comprises the following steps: first, a dynamic web page is generated by using templates and data generation; second, the required page is analyzed and the page is split into multiple modules; then, the data template format and the HTML template format are defined and saved in the database; then, the data is filled in by loading the template through a new page, and the template and data are combined to generate the required page; finally, the published page is put into Redis to increase the access speed. However, this technical solution still has the problem of requiring repeated front-end development work, and fails to completely solve the efficiency bottleneck in traditional development. Summary of the invention

[0005] The primary technical problem to be solved by the present invention is to provide a method for generating dynamic web pages based on metadata.

[0006] Another technical problem to be solved by the present invention is to provide a dynamic web page generation system based on metadata.

[0007] In order to achieve the above technical objectives, the present invention adopts the following technical solutions:

[0008] According to a first aspect of an embodiment of the present invention, a method for generating a dynamic web page based on metadata is provided, comprising the following steps:

[0009] S1: Establish a Vue template library, which includes a button library and a business component library;

[0010] S2: Read JSON data, extract page layout information, component type, data binding information and interaction logic information, and verify the correctness of JSON data; if all fields in JSON data are correctly filled in, proceed to step S3; if there are errors in fields in JSON data, send an error report and end the process;

[0011] S3: Select the corresponding Vue template according to the component type defined in the JSON data;

[0012] S4: Replace the placeholders in the Vue template with the data binding information in the JSON data;

[0013] S5: Apply styles to HTML elements according to the page layout information defined in the JSON data;

[0014] S6: Bind the corresponding event processing function to the Vue template according to the interaction logic information defined in the JSON data;

[0015] S7: Combine the obtained Vue template, page layout information and event processing function into a web page.

[0016] Preferably, in step S1, establishing the Vue template library specifically includes the following sub-steps:

[0017] S11: Collect and organize page components according to actual needs, including buttons, input boxes, and drop-down menus; components have different styles, sizes, and colors to meet the needs of different pages;

[0018] S12: Define the JSON data structure to store relevant information of page components, including component type, location information, data binding information, and interaction logic information; automatically generate the corresponding Vue template by reading and parsing JSON data;

[0019] S13: According to the defined JSON data structure, various page components are encapsulated as Vue templates and stored in the Vue template library.

[0020] Preferably, the Vue template includes: a button template, an input box template and a pull-down menu template.

[0021] Preferably, in step S4, if there is a data request requirement for the generation of the current web page, a request is initiated in step S4, and after waiting for the data to be returned, the placeholder in the Vue template is replaced with the data binding information in the JSON data.

[0022] Preferably, in step S5, the style application includes the following sub-steps:

[0023] S51: extracting page layout information from JSON data, including: element position, element size, element margin, element padding, element alignment, background color, and font style;

[0024] S52: dynamically generate corresponding HTML elements according to the component type in the JSON data;

[0025] S53: Select and apply a corresponding cascading style sheet style according to the layout information in the JSON data;

[0026] S54: adjusting the position of the HTML element according to the position information in the JSON data; adjusting the size of the HTML element according to the size information in the JSON data;

[0027] S55: Check the generated page in the browser to verify whether the layout effect conforms to the definition in the JSON data; if the layout effect does not conform to the definition in the JSON data, correct the problematic data and / or code and repeat step S55; if the layout effect conforms to the definition in the JSON data, proceed to step S6.

[0028] Preferably, in step S44, if there is a layout conflict between the multiple HTML elements, adjustments are made according to preset layout rules and / or priorities.

[0029] Preferably, in step S5, binding the corresponding event processing function to the Vue template includes the following sub-steps:

[0030] S61: extracting interaction logic information from the JSON data, including event type, target element selector or ID, and operations to be performed;

[0031] S62: According to the component type and layout information in the JSON data, obtain the corresponding Vue template, use the Vue constructor to construct the Vue template into a Vue instance, and mount the Vue instance to the corresponding document object model element;

[0032] S63: Find the corresponding target element in the Vue template according to the element selector provided in the JSON data;

[0033] S64: Create and bind an event processing function according to the function name defined in the JSON data.

[0034] According to a second aspect of an embodiment of the present invention, there is provided a metadata-based dynamic web page generation system, comprising a processor and a memory; wherein the memory is coupled to the processor and is used to store a computer program, and when the computer program is executed by the processor, the processor implements the above-mentioned dynamic web page generation method.

[0035] Compared with the prior art, the present invention extracts page layout, component type, data binding and interactive logic information by establishing a Vue template library, reading and parsing JSON data, and generates corresponding Vue templates accordingly. This process not only simplifies the development process of web pages, but also significantly improves development efficiency, because only the metadata in JSON format needs to be updated to achieve the addition of new components and dynamic update of pages, without repeating the front-end development work. In addition, the method also reduces the need for page maintenance, because any modification to the page can be quickly implemented by modifying the metadata without reloading the entire page, thereby achieving real-time page updates. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 A flowchart of a method for generating a dynamic web page based on metadata provided by an embodiment of the present invention;

[0037] Figure 2 This is a schematic diagram of a button library in a Vue template library in an embodiment of the present invention;

[0038] Figure 3 This is a schematic diagram of a business component library in a Vue template library in an embodiment of the present invention;

[0039] Figure 4 A schematic diagram of interactive logic information in an embodiment of the present invention;

[0040] Figure 5 A schematic diagram of data binding information in an embodiment of the present invention;

[0041] Figure 6 A schematic diagram of a page layout information list in an embodiment of the present invention;

[0042] Figure 7 A schematic diagram of editing a page layout information style in an embodiment of the present invention;

[0043] Figure 8 A schematic diagram of dialog box style selection in an embodiment of the present invention;

[0044] Fig. 9 A schematic diagram of a preview query page in an embodiment of the present invention;

[0045] Fig.10 A schematic diagram of the structure of a metadata-based dynamic web page generation system provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0046] The technical content of the present invention is described in detail below with reference to the accompanying drawings and specific embodiments.

[0047] First embodiment

[0048] like Figure 1 As shown, a first embodiment of the present invention provides a method for generating a dynamic web page based on metadata, which at least includes the following steps:

[0049] S1: Figure 2 and Figure 3 As shown, a Vue template library is established, which includes a button library and a business component library to support the rapid generation of dynamic web pages.

[0050] S2: Read JSON data, extract page layout information, component type, location information, data binding information and interaction logic information, and verify the correctness of JSON data. If all fields in JSON data are filled in correctly, proceed to step S3. If there is an error in a field in JSON data, send an error report and end the process.

[0051] S3: Select the corresponding Vue template according to the component type defined in the JSON data.

[0052] S4: Replace the placeholders in the Vue template with the data binding information in the JSON data.

[0053] S5: Apply styles to HTML elements according to the page layout information defined in the JSON data.

[0054] S6: Bind the corresponding event processing function to the Vue template according to the interaction logic information defined in the JSON data.

[0055] S7: Combine the obtained Vue template, page layout information and event processing function into a web page.

[0056] In one embodiment of the present invention, the Vue template library is established in step S1, which specifically includes the following sub-steps:

[0057] S11: Collect and organize page components according to actual needs, including buttons, input boxes, and drop-down menus. Components have different styles, sizes, and colors to meet the needs of different pages.

[0058] S12: Define the JSON data structure to store the relevant information of the page components, including component type, location information, data binding information, and interaction logic information. By reading and parsing the JSON data, the corresponding Vue template is automatically generated.

[0059] S13: According to the defined JSON data structure, various page components are encapsulated as Vue templates and stored in the Vue template library.

[0060] In one embodiment of the present invention, the Vue template includes: a button template, an input box template and a pull-down menu template.

[0061] When the component type is a button, select the button template. The template defines the button's style, size, color and other properties.

[0062] When the component type is an input box, select the input box template. The template defines the input box's border, font, placeholder and other properties.

[0063] When the component type is a drop-down menu, select the drop-down menu template. This template defines the drop-down menu's option style, expansion effect and other properties.

[0064] The present invention can realize the addition of new components and the dynamic update of pages by only updating the metadata in Json format, without repeating the front-end development work.

[0065] like Figure 4 As shown, in one embodiment of the present invention, the page layout information in step S2 includes: element position, element size, element margin, element padding, element alignment, background color and font style.

[0066] The interaction logic information includes: event type, target element selector or ID, and the operation to be performed.

[0067] In one embodiment of the present invention, in step S4, if there is a data request requirement for the generation of the current web page, a request is initiated in step S4, and after waiting for the data to be returned, the placeholder in the Vue template is replaced with the data binding information in the JSON data. Figure 5 As shown, the data binding information includes: name, gender and department.

[0068] In one embodiment of the present invention, the style application in step S5 includes the following sub-steps:

[0069] S52: Dynamically generate corresponding HTML elements according to the component type in the JSON data.

[0070] S53: According to the layout information in the JSON data, a corresponding Cascading Style Sheets (CSS) style is selected for application.

[0071] S54: Adjust the position of the HTML element according to the position information in the JSON data. Adjust the size of the HTML element according to the size information in the JSON data. If there is a layout conflict (such as overlap, position error, etc.) between multiple HTML elements, adjust them according to preset layout rules and / or priorities.

[0072] S55: Check the generated page in the browser to verify whether the layout effect conforms to the definition in the JSON data. If the layout effect does not conform to the definition in the JSON data, correct the problematic data and / or code and repeat step S55. If the layout effect conforms to the definition in the JSON data, proceed to step S6.

[0073] In one embodiment of the present invention, step S6 binds the corresponding event processing function to the Vue template, including the following sub-steps:

[0074] S61: Extract key information about the interaction logic from the JSON data, including: function name (such as click, hover, input, etc.), target element selector or ID, and operation to be performed (or function name to be called).

[0075] S62: According to the component type and layout information in the JSON data, a corresponding Vue template is obtained, the Vue template is constructed into a Vue instance using a Vue constructor, and the Vue instance is mounted to a corresponding Document Object Model (DOM) element.

[0076] S63: According to the element selector provided in the JSON data, find the corresponding target element in the Vue template.

[0077] S64: Create and bind an event processing function according to the function name defined in the JSON data.

[0078] In one embodiment of the present invention, Figure 6 As shown in the figure, we first focus on the modification process of page layout information. In this step, users can select an existing page layout information and adjust it. Page layout information is a key part of the web page structure, which determines the position, size and arrangement of each element in the web page. Users can optimize the page layout according to their needs to improve the user experience and the visual effect of the page.

[0079] Then, if Figure 7As shown in the figure, users can modify the display name and editing style of the label. This step involves the text information and visual style of the page elements, such as font, color, and alignment. By adjusting these properties, users can ensure the readability and aesthetics of the page content, while also keeping the page style consistent with the brand image.

[0080] Then, if Figure 8 As shown in the figure, users need to select the basic component types used in the page. These basic components include check boxes, drop-down boxes, text boxes, time selectors, radio buttons, etc. These components are the basic elements that constitute dynamic web pages. Users can select appropriate components according to the functional requirements of the page and configure their properties and behaviors.

[0081] Finally, if Fig. 9 As shown, the user saves the modified information. This step is to save the previously modified layout information, style, and component configuration in order to generate new page components. After saving, the user can preview the page to view the latest changes to ensure that all modifications are in line with expectations. The preview function allows users to make final checks and adjustments to the page before actual deployment to ensure the compatibility and consistency of the page on different devices and browsers.

[0082] Through the above steps, users can dynamically generate or modify web pages based on metadata, greatly improving the flexibility and efficiency of web page development. This method not only reduces the repetitive work of front-end development, but also realizes rapid update and real-time preview of pages, making the development process more efficient and intuitive.

[0083] Second embodiment

[0084] Based on the above method, the second embodiment of the present invention provides a dynamic web page generation system based on metadata. Fig.10 As shown, the system includes one or more processors and a memory, wherein the memory is coupled to the processor and is used to store a computer program, and when the computer program is executed by the processor, the processor implements the above-mentioned dynamic web page generation method.

[0085] Wherein, the processor is used to control the overall operation of the system to complete all or part of the steps of the above method. The processor can be a central processing unit (CPU), a graphics processing unit (GPU), a field programmable gate array (FPGA), an application-specific integrated circuit (ASIC), a digital signal processing (DSP) chip, etc. The memory is used to store various types of data to support operations in the system, and these data may include, for example, instructions for any application or method for operating on the system, and application-related data. The memory can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, etc.

[0086] In an exemplary embodiment, the system can be implemented by a computer chip or entity, or by a product with a certain function, for executing the above method and achieving the same technical effect as the above method. Specifically, the computer can be, for example, a personal computer, a laptop computer, a vehicle-mounted human-computer interaction device, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

[0087] In another exemplary embodiment, the present invention further provides a computer-readable storage medium including program instructions, which, when executed by a processor, implements the steps of the method in any of the above embodiments. For example, the computer-readable storage medium may be the above-mentioned memory including program instructions, which may be executed by a processor to complete the above-mentioned method and achieve the same technical effect as the above-mentioned method.

[0088] It should be noted that the above embodiments are only examples, and the technical solutions of the various embodiments can be combined, all within the protection scope of the present invention.

[0089] The above is a detailed description of the method and system for generating dynamic web pages based on metadata provided by the present invention. For those skilled in the art, any obvious changes made to the method without departing from the essence of the present invention will constitute an infringement of the patent right of the present invention and the corresponding legal liability will be borne.

Claims

1. A method for generating dynamic web pages based on metadata, characterized in that The steps include: S1: Establish a Vue template library, which includes a button library and a business component library; S2: Read JSON data, extract page layout information, component type, data binding information and interaction logic information, and verify the correctness of JSON data; if all fields in JSON data are correctly filled in, proceed to step S3; if there are errors in fields in JSON data, send an error report and end the process; S3: Select the corresponding Vue template according to the component type defined in the JSON data; S4: Replace the placeholders in the Vue template with the data binding information in the JSON data; S5: Apply styles to HTML elements according to the page layout information defined in the JSON data; S6: Bind the corresponding event processing function to the Vue template according to the interaction logic information defined in the JSON data; S7: Combine the obtained Vue template, page layout information and event processing function into a web page.

2. The method for generating a dynamic web page according to claim 1, wherein The Vue template library is established in step S1, which specifically includes the following sub-steps: S11: Collect and organize page components according to actual needs, including buttons, input boxes, and drop-down menus; components have different styles, sizes, and colors to meet the needs of different pages; S12: Define the JSON data structure to store relevant information of page components, including component type, location information, data binding information, and interaction logic information; automatically generate the corresponding Vue template by reading and parsing JSON data; S13: According to the defined JSON data structure, various page components are encapsulated as Vue templates and stored in the Vue template library.

3. The method for generating a dynamic web page as claimed in claim 2, characterized in that The Vue template includes: a button template, an input box template and a pull-down menu template.

4. The method for generating a dynamic web page according to claim 1, wherein In step S4, if there is a data request requirement for the generation of the current web page, a request is initiated in step S4, and after waiting for the data to be returned, the placeholder in the Vue template is replaced with the data binding information in the JSON data.

5. The method for generating a dynamic web page according to claim 1, wherein In step S5, the style application includes the following sub-steps: S51: extracting page layout information from JSON data, including: element position, element size, element margin, element padding, element alignment, background color, and font style; S52: dynamically generate corresponding HTML elements according to the component type in the JSON data; S53: Select and apply a corresponding cascading style sheet style according to the layout information in the JSON data; S54: adjusting the position of the HTML element according to the position information in the JSON data; adjusting the size of the HTML element according to the size information in the JSON data; S55: Check the generated page in the browser to verify whether the layout effect conforms to the definition in the JSON data; if the layout effect does not conform to the definition in the JSON data, correct the problematic data and / or code and repeat step S55; if the layout effect conforms to the definition in the JSON data, proceed to step S6.

6. The method for generating a dynamic web page as claimed in claim 5, characterized in that In step S44, if there is a layout conflict between the multiple HTML elements, adjustments are made according to preset layout rules and / or priorities.

7. The method for generating a dynamic web page according to claim 1, wherein In step S5, binding the corresponding event processing function to the Vue template includes the following sub-steps: S61: extracting interaction logic information from the JSON data, including event type, target element selector or ID, and operations to be performed; S62: According to the component type and layout information in the JSON data, obtain the corresponding Vue template, use the Vue constructor to construct the Vue template into a Vue instance, and mount the Vue instance to the corresponding document object model element; S63: Find the corresponding target element in the Vue template according to the element selector provided in the JSON data; S64: Create and bind an event processing function according to the function name defined in the JSON data.

8. A metadata-based dynamic web page generation system, characterized in that It comprises a processor and a memory; wherein the memory is coupled to the processor and is used to store a computer program, and when the computer program is executed by the processor, the processor implements the dynamic web page generation method according to any one of claims 1 to 7.

Images