A front-end page generation method and system

Abstract

The application provides a front-end page generation method and system, code segments written according to a format defined by a preset format template are uploaded; and the code segments are automatically inserted into a front-end preset template to form a front-end page. The code segments are uploaded according to a required format, the code segments are automatically inserted into the template to form the front-end page, the page development efficiency is improved, the page development complexity is reduced, and the page development error rate is reduced.

Description

Technical Field

[0001] This invention relates to the field of web page development technology, and in particular to a front-end page generation method and system. Background Technology

[0002] In the daily development of chart-based interfaces, developers often need to manually write chart code, meticulously locate the context of each logical segment, expose data access points to their parent components, and coordinate with the parent component's styles and logic to ensure the entire page is complete and self-consistent. This process becomes increasingly tedious and repetitive as the interface becomes more complex, especially when developing a page with many charts, resulting in low development efficiency and a high risk of errors. Summary of the Invention

[0003] To address the aforementioned issues, this invention provides a front-end page generation method and system, aiming to solve the technical problems of low page development efficiency and susceptibility to errors in the prior art.

[0004] A front-end page generation method, comprising:

[0005] Step A1: Upload the code snippet you wrote according to the format specified in the preset template;

[0006] Step A2: The code snippet will be automatically inserted into the front-end preset template to form the front-end page.

[0007] Furthermore, the preset format templates include data hooks;

[0008] The front-end pre-built templates have reserved code receiving locations and context code;

[0009] Step A2 includes:

[0010] Step A21: Receive the code fragment according to the reserved code receiving location;

[0011] Step A22: Connect the code snippet to the context code in the front-end preset template using the data hook to form the front-end page.

[0012] Furthermore, the procedure includes the following steps after step A1 and before step A2:

[0013] Step B1: Encapsulate the uploaded code snippet;

[0014] Step A2 includes: inserting the encapsulated code snippet into the front-end preset template.

[0015] Furthermore, the procedure includes the following steps after step A1 and before step A2:

[0016] Step B2: Perform security verification on the uploaded code snippet.

[0017] Furthermore, the front-end pre-built template includes configurable content items, and before step A1, it also includes:

[0018] Step B0: Configure the configurable content items in the front-end preset template to form the current front-end preset template;

[0019] In step A2, the code snippet is automatically inserted into the current front-end preset template to form the front-end page.

[0020] A front-end page generation system, characterized by using the aforementioned front-end page generation method, comprising:

[0021] The upload module is used to upload code snippets according to the format specified by the preset template.

[0022] The page generation module and the connection upload module are used to automatically insert code snippets into the front-end preset template to form the front-end page.

[0023] Furthermore, the preset format templates include data hooks;

[0024] The front-end pre-built templates have reserved code receiving locations and context code;

[0025] The page generation module includes:

[0026] The code receiving unit is used to receive code fragments according to the reserved code receiving positions;

[0027] The code connection unit, or code receiving unit, is used to connect code snippets to the context code in the front-end preset template to form a front-end page based on data hooks.

[0028] Furthermore, it also includes:

[0029] The encapsulation module connects to the upload module and is used to encapsulate the uploaded code snippets.

[0030] The page generation module connects to the encapsulation module, which is used to insert the encapsulated code snippets into the front-end preset template.

[0031] Furthermore, it also includes:

[0032] The verification module, connected to the upload module, is used to perform security verification on the uploaded code snippets.

[0033] The page generation module connects to the verification module, which is used to insert code snippets that pass security verification into the front-end preset template.

[0034] Furthermore, the front-end pre-built templates include configurable content items, and also include:

[0035] The configuration module is used to configure the configurable content items in the front-end preset template to form the current front-end preset template;

[0036] The page generation module is also connected to the configuration module, which is used to automatically insert code snippets into the current front-end preset template to form the front-end page.

[0037] The beneficial technical effects of this invention are: it is used to upload code snippets in the required format, and the code snippets are automatically inserted into the template to form a front-end page, thereby improving page development efficiency, reducing the tedium of page development, and reducing the error rate of page development. Attached Figure Description

[0038] Figure 1-7 This is a flowchart of the steps of a front-end page generation method according to the present invention;

[0039] Figure 8-14 This is a schematic diagram of a front-end page generation system according to the present invention. Detailed Implementation

[0040] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0041] It should be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other.

[0042] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, but this is not intended to limit the scope of the invention.

[0043] See Figure 1 This invention provides a front-end page generation method, comprising:

[0044] Step A1: Upload the code snippet you wrote according to the format specified in the preset template;

[0045] Step A2: The code snippet will be automatically inserted into the front-end preset template to form the front-end page.

[0046] In step A1, users can write code snippets according to the format specified in the preset template and then upload them.

[0047] Users can write code snippets according to the requirements specified in the preset format template.

[0048] This tool is used to upload code snippets in the required format. The code snippets are automatically inserted into the template to form the front-end page, improving page development efficiency, reducing the tediousness of page development, and lowering the error rate. Specifically, the front-end page is a web chart page.

[0049] See Figure 2 Furthermore, the preset format templates include data hooks;

[0050] The front-end pre-built templates have reserved code receiving locations and context code;

[0051] Step A2 includes:

[0052] Step A21: Receive the code fragment according to the reserved code receiving location;

[0053] Step A22: Connect the code snippet to the context code in the front-end preset template using the data hook to form the front-end page.

[0054] The preset format template determines the format of the user-uploaded code based on the context code of the front-end preset template and reserves data hooks. The data hooks are used to associate the code snippet inserted into the front-end preset template with the context code.

[0055] See Figure 3 Specifically, it also includes step A3: viewing the generated front-end page in real time.

[0056] Specifically, step A4 involves storing the code snippet in the database. This can be done through a backend interface, persistently storing the code snippet and increasing its reusability.

[0057] Specifically, it also includes step A5: setting the source code of the front-end page to downloadable mode.

[0058] See Figure 4 Furthermore, the procedure includes the following steps after step A1 and before step A2:

[0059] Step B1: Package the uploaded code snippet.

[0060] In step B1, the code snippet is encapsulated using a built-in processing function to prevent damage to the content of the front-end preset template.

[0061] Step A2 includes: inserting the encapsulated code snippet into the front-end preset template.

[0062] See Figure 5 Furthermore, the procedure includes the following steps after step A1 and before step A2:

[0063] Step B2: Perform security verification on the uploaded code snippet;

[0064] Step A2 includes inserting the code snippet that has passed security verification into the front-end preset template to form the front-end page.

[0065] Step A2 will only proceed after the security verification has been completed.

[0066] See Figure 6 Furthermore, step B2 will only execute step B1 after the security check has passed, prior to step B1.

[0067] See Figure 7 Furthermore, the front-end pre-built template includes configurable content items, and before step A1, it also includes:

[0068] Step B0: Configure the configurable content items in the front-end preset template to form the current front-end preset template;

[0069] In step A2, the code snippet is automatically inserted into the current front-end preset template to form the front-end page.

[0070] Step B0 is followed by:

[0071] Step B4: Parse the current front-end preset template and obtain the current preset format template based on the context logic information parsed from the context code.

[0072] In step A1, the written code snippet is uploaded according to the format specified by the current preset format template.

[0073] Using a single, unchanging front-end template lacks versatility and commonality, leading to variations between different development projects. This invention enhances the versatility of front-end templates by selectively configuring them, allowing for greater flexibility in addressing these differences. For example, in a chart page, content items might be chart items. When developing chart interfaces, multiple versions of open-source libraries are commonly used. This invention allows users to configure the configurable content items of the front-end template before use, selecting appropriate open-source library versions for configurable chart items to create the desired template. Defining only one configuration item per content item facilitates security checks on code snippets and makes it easier to insert code snippets into the current front-end template.

[0074] Furthermore, before step B0, there is a step to preview the pre-built front-end modules. This requires a commonly used, previewable solution to be pre-built using the front-end development framework. This way, after the user imports the configuration items for the content items, the appearance commonly used in regular projects can be displayed naturally. This kind of secondary development truly reduces workload, for example, reducing the need for developers to manually and repeatedly proofread the relationship between chart components and their parent components.

[0075] This invention enables rapid front-end page development through a standardized process, offering high reusability and eliminating the need for developers to read diverse and inconsistent code layouts. Furthermore, it provides significant advantages for future upgrades of preset templates and front-end pre-built templates, ensuring backward compatibility.

[0076] See Figure 8 The present invention also provides a front-end page generation system, using the aforementioned front-end page generation method, comprising:

[0077] The upload module (1) is used to upload code snippets written in accordance with the format specified by the preset format template;

[0078] The page generation module (2) and the connection upload module (1) are used to automatically insert code snippets into the front-end preset template to form a front-end page.

[0079] Furthermore, the upload module (1) is used to enable users to write code snippets according to the format specified by the preset format template and then upload them.

[0080] This tool is used to upload code snippets in the required format. The code snippets are automatically inserted into the template to form the front-end page, improving page development efficiency, reducing the tediousness of page development, and lowering the error rate of page development.

[0081] Specifically, the front-end page is a web chart page.

[0082] See Figure 9 Furthermore, the preset format templates include data hooks;

[0083] The front-end pre-built templates have reserved code receiving locations and context code;

[0084] Page generation module (2) includes:

[0085] The code receiving unit (21) is used to receive code fragments according to the reserved code receiving position;

[0086] The code connection unit (22) and the code receiving unit (21) are used to connect the code fragments to the context code in the front-end preset template to form a front-end page according to the data hook.

[0087] The preset format template determines the format of the user-uploaded code based on the context code of the front-end preset template and reserves data hooks. The page generation module (2) associates the code snippet inserted into the front-end preset template with the context code through data hooks.

[0088] See Figure 10 Specifically, the page display module (6) connects to the page generation module (2) and is used to display the generated front-end page. The page display module (6) allows users to view the generated front-end page in real time.

[0089] Specifically, the storage module (7) and the connection upload module (1) are used to store code snippets into the database. The code snippets can be stored in the database through the backend interface, and are persistently stored in the database to increase the reusability of the code snippets.

[0090] Specifically, the download module (8) and the page generation module (2) are used to download the source code of the front-end page.

[0091] See Figure 11 Furthermore, it also includes:

[0092] The encapsulation module (3) is connected to the upload module (1) and is used to encapsulate the uploaded code fragments;

[0093] The page generation module (2) connects to the encapsulation module (3) to insert the encapsulated code snippets into the front-end preset template.

[0094] The encapsulation module (3) encapsulates code snippets through built-in processing functions to avoid damaging the content of the front-end preset template.

[0095] See Figure 12 Furthermore, it also includes:

[0096] The verification module (4) is connected to the upload module (1) and is used to perform security verification on the uploaded code snippets.

[0097] Specifically, the page generation module (2) connects to the verification module (4) to insert code snippets that have passed security verification into the front-end preset template.

[0098] See Figure 13 Specifically, the encapsulation module (3) is connected to the verification module (4) to encapsulate code segments that have passed security verification.

[0099] See Figure 14 Furthermore, the front-end pre-built templates include configurable content items, and also include:

[0100] The configuration module (5) is used to configure the configurable content items in the front-end preset template to form the current front-end preset template;

[0101] The page generation module (2) is also connected to the configuration module (5), which is used to automatically insert code snippets into the current front-end preset template to form a front-end page.

[0102] Specifically, the content item is the chart item.

[0103] Specifically, it also includes a parsing module (9) and a connection configuration module (5), which are used to parse the current front-end preset template and obtain the current preset format template based on the context logic information parsed from the context code. The preset format template includes the upload format of the code snippet and the reserved data hooks.

[0104] The upload module (1) connects to the parsing module (9) and uploads the written code snippets according to the format specified by the current preset format template.

[0105] Using a single, unchanging front-end template lacks versatility and commonality, leading to variations between different development projects. This invention enhances the versatility of front-end templates by selectively configuring them, allowing for greater flexibility in addressing these differences. For example, in a chart page, content items might be chart items. When developing chart interfaces, multiple versions of open-source libraries are commonly used. This invention allows users to configure the configurable content items of the front-end template before use, selecting appropriate open-source library versions for configurable chart items to create the desired template. Defining only one configuration item per content item facilitates security checks on code snippets and makes it easier to insert code snippets into the current front-end template.

[0106] Furthermore, the page display module (6) is also used to preview the front-end pre-built modules. It is required that a commonly used previewable scheme be pre-built using the front-end development framework. In this way, after the user imports the configuration items of the content items, the appearance commonly used in the usual projects can be displayed naturally. This kind of secondary development will truly reduce the workload, such as reducing the need for developers to manually and repeatedly check the relationship between the chart component and the parent component.

[0107] This invention enables rapid development of front-end pages through a standardized system, offering high reusability and eliminating the need for developers to read diverse and inconsistent code layouts. Furthermore, it provides significant advantages for future upgrades of preset format templates and front-end pre-built templates, ensuring backward compatibility.

[0108] The above are merely preferred embodiments of the present invention and are not intended to limit the implementation methods and protection scope of the present invention. Those skilled in the art should recognize that any equivalent substitutions and obvious changes made based on the description and illustrations of the present invention should be included within the protection scope of the present invention.

Claims

1. A method for generating a front-end page, characterized in that, include: The front-end pre-built templates have reserved code receiving locations and context code; The current front-end preset template is parsed, and the current preset format template is obtained based on the context logic information parsed from the context code. The preset format template determines the format of the user-uploaded code based on the context code of the front-end preset template. Step A1: Upload the code snippet you wrote according to the format specified in the current preset template; Step A2: Automatically insert the code snippet into the front-end preset template to form the front-end page; The preset format template has reserved data hooks; Step A2 includes: Step A21: Receive the code fragment according to the reserved code receiving position; Step A22: Connect the code snippet to the context code in the front-end preset template according to the data hook to form the front-end page; The pre-built front-end template includes configurable content items, and before step A1, it also includes: Step B0: Configure the configurable content items in the front-end preset template to form the current front-end preset template; In step A2, the code snippet is automatically inserted into the current front-end preset template to form the front-end page; After performing step B0, the process further includes: Step B4: Parse the current front-end preset template and obtain the current preset format template based on the context logic information parsed from the context code.

2. The front-end page generation method as described in claim 1, characterized in that, The method includes the following steps after step A1 and before step A2: Step B1: Encapsulate the uploaded code snippet; Step A2 includes: inserting the encapsulated code snippet into the front-end preset template.

3. The front-end page generation method as described in claim 1, characterized in that, The method includes the following steps after step A1 and before step A2: Step B2: Perform a security check on the uploaded code snippet.

4. A front-end page generation system, characterized in that, Using a front-end page generation method as described in any one of claims 1-3, comprising: The upload module is used to upload code snippets according to the format specified by the preset template. The page generation module, connected to the upload module, is used to automatically insert the code snippet into the front-end preset template to form a front-end page; The preset format template has reserved data hooks; The front-end pre-set template has reserved a code receiving location and context code; The page generation module includes: A code receiving unit is configured to receive the code fragment according to the reserved code receiving location; A code connection unit, connected to the code receiving unit, is used to connect the code fragment to the context code in the front-end preset template to form the front-end page according to the data hook; The current front-end preset template is parsed, and the current preset format template is obtained based on the context logic information parsed from the context code. The preset format template determines the format of the user-uploaded code based on the context code of the front-end preset template.

5. A front-end page generation system as described in claim 4, characterized in that, Also includes: An encapsulation module, connected to the upload module, is used to encapsulate the uploaded code fragment; The page generation module is connected to the encapsulation module and is used to insert the encapsulated code snippet into the front-end preset template.

6. A front-end page generation system as described in claim 4, characterized in that, Also includes: The verification module, connected to the upload module, is used to perform security verification on the uploaded code fragment; The page generation module is connected to the verification module and is used to insert the code snippet that has passed the security verification into the front-end preset template.

7. A front-end page generation system as described in claim 4, characterized in that, The pre-built front-end template includes configurable content items, and also includes: The configuration module is used to configure the configurable content items in the front-end preset template to form the current front-end preset template; The page generation module is also connected to the configuration module, and is used to automatically insert the code snippet into the current front-end preset template to form the front-end page.

Images