Method and system for quickly building project page structure

Abstract

The invention discloses a method and system for quickly building a project page structure, and relates to the technical field of front-end page development. In order to solve the problems that under the current technical background, developers still need to manually write a large number of basic codes with similar structures, the process is tedious and code redundancy is easily caused, the adopted method comprises the steps that S1, a page framework is sorted out according to a product prototype; s2, analyzing a page prototype to determine page types and business contents, and performing distinguishing and configuration attribute definition on different types of pages in a configuration item; s3, extracting a basic code structure according to the page type; and S4, compiling a configuration file and constructing a code framework. According to the method, the page structure can be quickly built, and manual code framework building and high-repeatability basic code writing are not needed.

Description

Technical Field

[0001] The present invention relates to the technical field of front - end page development, and specifically, it is a method and system for quickly building a project page structure. Background Art

[0002] Under the background of the existing technology, although there are various front - end frameworks, component construction tools, and code generation tools, it is still inevitable to manually create the main component files and write some similar codes. For this problem, due to the non - uniformity of business types and UI styles, it is very difficult to provide a general technical solution for quickly building the main page structure. Therefore, there is still room for improvement in development efficiency during the project construction process. Summary of the Invention

[0003] In view of the problem that developers still need to manually write a large number of basic codes with similar structures under the current technical background, which is a cumbersome process and prone to code redundancy, the present invention provides a method and system for quickly building a project page structure.

[0004] In a first aspect, the present invention provides a method for quickly building a project page structure. The technical solution adopted to solve the above - mentioned technical problems is as follows:

[0005] A method for quickly building a project page structure includes the following steps:

[0006] S1. Based on the product prototype, sort out the page architecture;

[0007] S2. Analyze the page prototype to determine the page type and business content, and distinguish and configure attribute definitions for different types of pages in the configuration items;

[0008] S3. Extract the basic code structure according to the page type;

[0009] S4. Write the configuration file and build the code framework.

[0010] Optionally, the specific operations included in step S1 are as follows:

[0011] S1.1. Project prototype analysis: Deeply analyze the project prototype and understand the design intention and function of each page;

[0012] S1.2. Page classification and hierarchy division: Classify the pages in the project prototype according to the page function and usage; Identify the pages at different levels and clarify the logical relationship between the pages;

[0013] S1.3. Draw a page map: Use a chart or graphic tool to draw a page map according to the page classification result and the page hierarchy identification result to visually display the link relationship and jump path between the pages.

[0014] Optionally, the specific operations included in step S2 are as follows:

[0015] S2.1. Page type recognition and classification: Carefully review the page prototype and divide the page into two types, namely table page and form page, according to the page function and presentation form. For the form page, further determine whether it is a multi-step form page;

[0016] S2.2. Define configuration attributes: Define corresponding configuration attributes according to the page type and business content, where:

[0017] For the table page, define the following configuration attributes: basic attributes, data source, column definition, operation buttons;

[0018] For the form page, define the following configuration attributes: basic attributes, field definition, validation rules, submission logic;

[0019] For the multi-step form page, also define the following configuration attributes: number of steps, step names, components of each step, and flow rules;

[0020] The basic attributes specifically include: ① Title and description: Define a title and description for each page to assist users in understanding and identifying the page purpose; ② Layout and style: Define the basic layout and style attributes of the page, including responsive design, theme color, and font size; ③ Data binding and interaction: Configure the data interaction logic between the page and the backend service, including request method, data format, and error handling; ④ Automatic generation and componentization: Use a template engine or scripting language to automatically generate the corresponding page code and sub-components according to the configuration; for multi-step forms, automatically generate the sub-components of each step to ensure component reuse and code cleanliness; ⑤ Permission control: Configure page access permissions according to business requirements to ensure that only authorized users can access the specified page.

[0021] Further optionally, execute step S3 to extract the basic code structure according to the page type, specifically including:

[0022] (A) For the table type page, the process of extracting the basic code structure is as follows:

[0023] Define table attributes: Create a table object through code or use relevant component attributes to determine the column structure of the table and set the initial state;

[0024] Data acquisition and update: Write a method to obtain data from the backend, convert the obtained data into the appropriate format and fill it into the table. At the same time, define the logic for refreshing the list and updating the data to the backend;

[0025] Event handling: Write event handling functions for row clicks, sorting changes, and filter applications to enhance the interactivity and functionality of the table;

[0026] (B) For form-type pages, the process of extracting the basic code structure is as follows:

[0027] Step sub-component definition: Create independent components for each step of the multi-step form, and define form items, default values, validation rules, and layout styles in detail within the components;

[0028] Step jump logic: Implement the navigation function between steps in the relevant components or containers, and ensure the correct transfer and storage of data during step switching through an effective data management mechanism;

[0029] Form submission: Define the processing method for form submission. In the defined processing method, perform data verification and serialization processing, send a back-end request, and perform corresponding prompts and processing based on the feedback information from the back-end to ensure the integrity and accuracy of form data.

[0030] Further optionally, the specific steps involved in step S4 include:

[0031] S4.1. Provide a configuration file: Write a configuration file in a standard format based on the page architecture, page type, and configuration attribute information sorted out in the previous steps;

[0032] S4.2. Read the configuration file: Use a file operation tool to read the content of the configuration file;

[0033] S4.3. Recursively construct code files: Recursively construct the corresponding code files according to the page type attributes in the configuration file;

[0034] S4.4. Fill in the corresponding code content: Fill in the corresponding code content according to the different page type attributes to complete the preliminary construction of the code framework.

[0035] In the second aspect, the present invention provides a system for quickly building a project page structure. The technical solution adopted to solve the above technical problems is as follows:

[0036] A system for quickly building a project page structure, the structure of which includes:

[0037] An architecture sorting module for sorting out the page architecture based on the product prototype;

[0038] An analysis and configuration module for analyzing the page prototype to determine the page type and business content, and differentiating and defining configuration attributes for different types of pages in the configuration items;

[0039] A page extraction module for extracting the basic code structure according to the page type;

[0040] Writing building blocks for writing configuration files and building code frameworks.

[0041] Optionally, the involved architecture sorting module specifically includes:

[0042] A prototype analysis unit for deeply analyzing the project prototype and understanding the design intent and functions of each page;

[0043] A page classification unit for classifying the pages in the project prototype according to page functions and purposes;

[0044] A hierarchical division unit for identifying pages at different levels and clarifying the logical relationships between pages;

[0045] A map drawing unit for using chart or graphic tools to draw a page map based on the page classification results and page level identification results to visually display the link relationships and jump paths between pages.

[0046] Optionally, the involved analysis and configuration module specifically includes:

[0047] A page identification unit for reviewing the page prototype and dividing the page into two types: table page and form page according to the page function and presentation form. For form pages, further determine whether it is a multi-step form page;

[0048] A defining attributes unit for defining corresponding configuration attributes according to the page type and business content, where: (a) For table pages, the defining attributes unit defines the following configuration attributes: basic attributes, data source, column definition, operation buttons; (b) For form pages, the defining attributes unit defines the following configuration attributes: basic attributes, field definition, validation rules, submission logic; (c) For multi-step form pages, the defining attributes unit also defines the following configuration attributes: number of steps, step names, components of each step, and flow rules; The basic attributes specifically include: ① Title and description: Define a title and description for each page to assist users in understanding and identifying the page purpose; ② Layout and style: Define the basic layout and style attributes of the page, including responsive design, theme color, and font size; ③ Data binding and interaction: Configure the data interaction logic between the page and the backend service, including request method, data format, and error handling; ④ Automatic generation and componentization: Use a template engine or scripting language to automatically generate corresponding page code and sub-components according to the configuration; For multi-step forms, automatically generate sub-components for each step to ensure component reuse and code cleanliness; ⑤ Permission control: Configure page access permissions according to business requirements to ensure that only authorized users can access specified pages.

[0049] Further optionally, the involved page extraction module includes a table extraction sub-module and a form extraction sub-module;

[0050] The table extraction submodule extracts the basic code structure of the table type page, specifically including:

[0051] The property definition unit is used to create a table object through code or use related component properties to determine the column structure of the table and set the initial state;

[0052] Write a definition unit to write a method for obtaining data from the backend, convert the obtained data into a format and fill it into the table. At the same time, define the logic of refreshing the list and updating the data to the backend;

[0053] Write function units to write event handling functions for row clicks, sort changes, and filter applications to enhance the interactivity and functionality of the table;

[0054] The form extractor extracts the basic code structure of the form type page, specifically including:

[0055] Step definition unit, which is used to create independent components for each step of a multi-step form, and define form items, default values, validation rules, and layout styles in detail within the component;

[0056] The step jump unit is used to implement the navigation function between steps in related components or containers, and ensure the correct transmission and storage of data during the step switching process through an effective data management mechanism;

[0057] The definition method unit is used to define the processing method for form submission, perform data verification and serialization in the defined processing method, send backend requests, and perform corresponding prompts and processing based on the feedback information from the backend to ensure the integrity and accuracy of the form data.

[0058] Optionally, the writing of the building blocks involved specifically includes:

[0059] The file writing unit is used to write the configuration file in a standardized format according to the page architecture, page type and configuration attribute information sorted out by the above modules;

[0060] The file reading unit is used to read the configuration file content using the file operation tool;

[0061] The recursive construction unit is used to recursively construct the corresponding code file according to the page type attributes in the configuration file;

[0062] The code filling unit is used to fill in the corresponding code content according to the different page type attributes to complete the initial construction of the code framework.

[0063] Compared with the prior art, the method and system for quickly building a project page structure of the present invention has the following beneficial effects:

[0064] 1. The present invention can quickly build the main page structure with extremely low development costs under the condition of unified page types and UI style specifications, and solve the problems of a large amount of repetitive code and low development efficiency in the development process of the back-end management system, especially in the construction of table and form pages.

[0065] 2. For the back-end system project with fixed page types and unified UI styles, the present invention can quickly build the page structure without manually constructing the code framework and writing basic codes with high repetition; the usage logic of the file operation tool can be reused and highly customized; the code framework is declared in the form of a configuration file, which has high scalability, and more application scenarios can be handled by expanding configuration attributes in the future; when initializing and building the project, the development cost is extremely low, greatly simplifying the development content such as defining components, maintaining routes, writing framework class codes, and introducing component libraries. BRIEF DESCRIPTION OF THE DRAWINGS

[0066] Attached Figure 1 is the flowchart of the method in the first embodiment of the present invention;

[0067] Attached Figure 2 is the module connection block diagram of the second embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0068] In order to make the technical solutions, the technical problems to be solved and the technical effects of the present invention clearer and more understandable, the following combines specific embodiments to clearly and completely describe the technical solutions of the present invention.

[0069] Embodiment 1:

[0070] Combined with attached Figure 1 , this embodiment proposes a method for quickly building a project page structure, which includes the following steps:

[0071] S1. Based on the product prototype, sort out the page architecture, specifically including the following operations:

[0072] S1.1. Project prototype analysis: Deeply analyze the project prototype (including but not limited to user interface (UI) sketches, wireframes or high-fidelity prototypes), and understand the design intent and functions of each page.

[0073] S1.2. Page classification and hierarchical division: Classify the pages in the project prototype according to page functions and uses; identify pages at different levels, clarify the logical relationships between pages. For example, identify which pages belong to the main page, and the secondary or deeper-level sub-pages mounted under the main page, analyze the jump logic between pages, and determine which pages can be directly accessed from the main menu, and which pages need to be jumped through other pages.

[0074] S1.3. Draw a page map: Use chart or graphic tools to draw a page map based on the page classification results and page hierarchy recognition results to visually display the link relationships and jump paths between pages, which helps subsequent developers understand and maintain the entire project structure.

[0075] During this process, pay particular attention to the jump logic between pages, especially those complex relationships involving nested navigation. Clarifying the relationships between pages helps to reasonably plan the routing structure and lay the foundation for subsequent automated code generation.

[0076] S2. Analyze the page prototype to determine the page type and business content, and distinguish and configure attribute definitions for different types of pages in the configuration item. The specific operations are as follows:

[0077] S2.1. Page type recognition and classification: Carefully review the page prototype and divide the pages into two types: table pages and form pages according to the functions and presentation forms of the pages. For form pages, further determine whether it is a multi-step form page;

[0078] S2.2. Define configuration attributes: Define corresponding configuration attributes according to the page type and business content, where:

[0079] For table pages, which are used to display a large amount of data and usually include functions such as sorting, searching, and paging, the following configuration attributes need to be defined: basic attributes, data source (such as API interface), column definition (including column name, data type, sortable or not, etc.), operation buttons (such as edit, delete, details, etc.);

[0080] For form pages, which are used to collect user input and may involve simple data entry or complex multi-step forms, the following configuration attributes need to be defined: basic attributes, field definition (field name, field type, required or not, etc.), validation rules (such as data format, length limit, etc.), submission logic (such as the processing function after form submission);

[0081] For multi-step form pages, the following configuration attributes are also defined: the number of steps, step names, components and flow rules for each step (such as next step, previous step, skip, etc.);

[0082] The basic attributes specifically include: ① Title and description: Define a title and description for each page to assist users in understanding and identifying the purpose of the page; ② Layout and style: Define the basic layout and style attributes of the page, including responsive design, theme color, and font size; ③ Data binding and interaction: Configure the data interaction logic between the page and the backend service, including request method, data format, and error handling; ④ Automatic generation and componentization: Use a template engine or scripting language to automatically generate the corresponding page code and sub-components according to the configuration; for multi-step forms, automatically generate the sub-components for each step to ensure component reuse and code cleanliness; ⑤ Permission control: According to business requirements, configure page access permissions to ensure that only authorized users can access the specified page, which may involve permission judgments at the role level, department level, or other conditions.

[0083] S3. Extract the basic code structure according to the page type, specifically including:

[0084] (A) For a table-type page, the process of extracting the basic code structure is as follows:

[0085] Define table attributes: Create a table object through code or use relevant component attributes to determine the column structure of the table (including column headers, field names, widths, alignment methods, etc.), and set the initial state (such as paging, filtering, and sorting rules);

[0086] Data acquisition and update: Write a method to obtain data from the backend, convert the obtained data into the appropriate format, and fill it into the table. At the same time, define the logic for refreshing the list and updating the data to the backend;

[0087] Event handling: Write event handling functions for row clicks, sorting changes, and filter applications to enhance the interactivity and functionality of the table;

[0088] (B) For a form-type page, the process of extracting the basic code structure is as follows:

[0089] Definition of step sub-components: Create independent components for each step of a multi-step form, and within the components, define form items, default values, validation rules, and layout styles in detail;

[0090] Step jump logic: Implement the navigation function between steps (such as nextStep() and previousStep()) in relevant components or containers, and ensure the correct transfer and storage of data during step switching through an effective data management mechanism;

[0091] Form submission: Define a processing method for form submission (such as handleSubmit()). In the defined processing method, perform data verification and serialization processing, send a back-end request, and give corresponding prompts and processing based on the feedback information from the back-end to ensure the integrity and accuracy of form data.

[0092] Of course, in actual use, the page types are certainly not limited to these two types, namely table pages and form pages. There may also be other page types, such as detail pages. For detail pages, the process of extracting the basic code structure is usually as follows:

[0093] (1) Data loading: Implement a data loading mechanism, which may include asynchronous loading, lazy loading, or dynamic loading to optimize page performance and user experience.

[0094] (2) Display logic: Write components for displaying data to ensure the accurate presentation of information and consider prompt messages in case of exceptions.

[0095] S4. Write a configuration file and build a code framework, specifically including:

[0096] S4.1. Provide a configuration file: Write a configuration file in a standard format based on the page architecture, page type, and configuration attribute information sorted out in the previous steps.

[0097] S4.2. Read the configuration file: Use a file operation tool to read the content of the configuration file.

[0098] S4.3. Recursively build code files: Recursively build corresponding code files according to the page type attribute in the configuration file.

[0099] S4.4. Fill in the corresponding code content: Fill in the corresponding code content according to the different page type attributes to complete the preliminary construction of the code framework.

[0100] Embodiment 2:

[0101] Combined with the attached Figure 2 , this embodiment proposes a system for quickly building a project page structure, and its structure includes:

[0102] An architecture sorting module, used to sort out the page architecture based on the product prototype.

[0103] An analysis and configuration module, used to analyze the page prototype to determine the page type and business content, and distinguish and define configuration attributes for different types of pages in the configuration items.

[0104] A page extraction module, used to extract the basic code structure according to the page type.

[0105] A writing and building module, used to write a configuration file and build a code framework.

[0106] In this embodiment, the involved architecture sorting module specifically includes:

[0107] A prototype analysis unit, which is used to deeply analyze the project prototype (including but not limited to user interface (UI) sketches, wireframes or high-fidelity prototypes), and understand the design intent and functions of each page;

[0108] A page classification unit, which is used to classify the pages in the project prototype according to the page functions and purposes;

[0109] A hierarchy division unit, which is used to identify pages at different levels, clarify the logical relationships between pages. For example, identify and determine which pages belong to the main page, and the secondary or deeper-level sub-pages mounted under the main page, analyze the jump logic between pages, and determine which pages can be directly accessed from the main menu and which pages need to be jumped through other pages;

[0110] A map drawing unit, which is used to use chart or graphic tools to draw a page map according to the page classification result and the page hierarchy identification result, so as to intuitively display the link relationships and jump paths between pages, which helps subsequent developers understand and maintain the entire project structure.

[0111] In this embodiment, the involved analysis and configuration module specifically includes:

[0112] A page identification unit, which is used to review the page prototype, and divide the pages into two types: table pages and form pages according to the page functions and presentation forms. For form pages, further judge whether it is a multi-step form page;

[0113] Define an attribute unit, which is used to define corresponding configuration attributes according to the page type and business content. Specifically: (a) For a table page, the defined attribute unit defines the following configuration attributes: basic attributes, data source (such as an API interface), column definition (including column name, data type, sortability, etc.), operation buttons (such as edit, delete, details, etc.); (b) For a form page, the defined attribute unit defines the following configuration attributes: basic attributes, field definition (field name, field type, required or not, etc.), validation rules (such as data format, length limit, etc.), submission logic (such as the processing function after form submission); (c) For a multi-step form page, the defined attribute unit also defines the following configuration attributes: number of steps, step names, components and transition rules for each step (such as next step, previous step, skip, etc.); The basic attributes specifically include: ① Title and description: Define a title and description for each page to assist users in understanding and identifying the purpose of the page; ② Layout and style: Define the basic layout and style attributes of the page, including responsive design, theme color, and font size; ③ Data binding and interaction: Configure the data interaction logic between the page and the backend service, including request method, data format, and error handling; ④ Automatic generation and componentization: Use a template engine or scripting language to automatically generate the corresponding page code and sub-components according to the configuration; For a multi-step form, automatically generate sub-components for each step to ensure component reuse and code cleanliness; ⑤ Permission control: Configure page access permissions according to business requirements to ensure that only authorized users can access the specified page, which may involve permission judgments at the role level, department level, or other conditions.

[0114] In this embodiment, the involved page extraction module includes a table extraction sub-module and a form extraction sub-module;

[0115] The table extraction sub-module extracts the basic code structure for a table-type page, specifically including:

[0116] An attribute definition unit, which is used to create a table object through code or utilize relevant component attributes to determine the column structure of the table (including column headers, field names, widths, alignment methods, etc.), and set the initial state (such as paging, filtering, and sorting rules);

[0117] A writing definition unit, which is used to write a method for obtaining data from the backend, convert the obtained data and fill it into the table, and at the same time, define the logic for refreshing the list and updating data to the backend;

[0118] A writing function unit, which is used to write event handling functions for row clicks, sorting changes, and filter applications to enhance the interactivity and functionality of the table;

[0119] The form extraction sub-module extracts the basic code structure for a form-type page, specifically including:

[0120] A step definition unit, which is used to create independent components for each step of a multi-step form, and define form items, default values, validation rules, and layout styles in detail inside the components;

[0121] A step jump unit, which is used to implement the navigation function between steps (such as nextStep() and previousStep()) in relevant components or containers, and ensure the correct transfer and storage of data during step switching through an effective data management mechanism;

[0122] A definition method unit, which is used to define the processing method for form submission (such as handleSubmit()), perform data verification and serialization processing in the defined processing method, send a backend request, and perform corresponding prompts and processing according to the feedback information from the backend to ensure the integrity and accuracy of form data.

[0123] In this embodiment, the specific writing and construction modules involved include:

[0124] A writing file unit, which is used to write a configuration file in a standard format based on the page architecture, page type, and configuration attribute information sorted out by the foregoing modules;

[0125] A reading file unit, which is used to read the content of the configuration file using a file operation tool;

[0126] A recursive construction unit, which is used to recursively construct corresponding code files according to the page type attributes in the configuration file;

[0127] A code filling unit, which is used to fill corresponding code content according to different page type attributes to complete the preliminary construction of the code framework.

[0128] In summary, by using the method and system for quickly building a project page structure of the present invention, the main page structure can be quickly built with extremely low development costs, and the problems of a large amount of repetitive code and low development efficiency in the development process of the backend management system, especially in the construction of table and form pages, can be solved.

[0129] The above applications use specific examples to elaborate in detail the principles and implementation methods of the present invention. These examples are only used to help understand the core technical content of the present invention. Based on the above specific embodiments of the present invention, those skilled in the art of this technology, without departing from the principles of the present invention, any improvements and modifications made to the present invention shall fall within the scope of patent protection of the present invention.

Claims

1. A method for quickly building a project page structure, characterized in that: The steps include: S1. Sort out the page structure based on the product prototype; S2. Analyze the page prototype to determine the page type and business content, distinguish different types of pages and define configuration attributes in the configuration items; S3, extracting basic code structure according to page type; S4. Write configuration files and build a code framework.

2. A method for quickly building a project page structure according to claim 1, characterized in that: The step S1 specifically includes the following operations: S1.

1. Project prototype analysis: In-depth analysis of the project prototype to understand the design intent and function of each page; S1.

2. Page classification and hierarchical division: Classify the pages in the project prototype according to their functions and uses; identify pages of different levels and clarify the logical relationship between pages; S1.

3. Draw a page map: Use charts or graphic tools to draw a page map based on the page classification results and page hierarchy identification results to intuitively display the link relationships and jump paths between pages.

3. A method for quickly building a project page structure according to claim 2, characterized in that: The step S2 specifically includes the following operations: S2.

1. Page type identification and classification: Carefully review the page prototype and classify the pages into two types: table pages and form pages according to their functions and presentation forms. For form pages, further determine whether they are multi-step form pages; S2.

2. Define configuration attributes: Define corresponding configuration attributes according to page type and business content, including: For the table page, define the following configuration properties: basic properties, data source, column definition, and operation button; For the form page, define the following configuration properties: basic properties, field definitions, validation rules, and submission logic; For multi-step form pages, the following configuration properties are also defined: the number of steps, step names, components of each step, and flow rules; The basic properties specifically include: ① Title and description: define a title and description for each page to help users understand and identify the purpose of the page; ② Layout and style: define the basic layout and style attributes of the page, including responsive design, theme color and font size; ③ Data binding and interaction: configure the data interaction logic between the page and the back-end service, including request method, data format and error handling; ④ Automatic generation and componentization: use template engines or scripting languages ​​to automatically generate corresponding page codes and sub-components according to the configuration; for multi-step forms, automatically generate sub-components for each step to ensure component reuse and code neatness; ⑤ Permission control: configure page access rights according to business needs to ensure that only authorized users can access specified pages.

4. A method for quickly building a project page structure according to claim 3, characterized in that: Execute step S3 to extract the basic code structure according to the page type, which specifically includes: (A) For a table-type page, the process of extracting the basic code structure is as follows: Define table properties: Create a table object through code or use related component properties to determine the column structure of the table and set the initial state; Data acquisition and update: Write methods to obtain data from the backend, convert the obtained data into a format and fill it into the table. At the same time, define the logic of refreshing the list and updating the data to the backend; Event handling: Write event handling functions for row clicks, sort changes, and filter applications to enhance the interactivity and functionality of the table; (B) For a form-type page, the process of extracting the basic code structure is as follows: Step subcomponent definition: Create an independent component for each step of the multi-step form, and define the form items, default values, validation rules, and layout styles in detail within the component; Step jump logic: implement navigation functions between steps in related components or containers, and ensure the correct transmission and storage of data during step switching through effective data management mechanisms; Form submission: Define the processing method for form submission, perform data verification and serialization in the defined processing method, send backend requests, and perform corresponding prompts and processing based on the feedback information from the backend to ensure the integrity and accuracy of the form data.

5. A method for quickly building a project page structure according to claim 4, characterized in that: The step S4 specifically includes: S4.

1. Provide a configuration file: Based on the page architecture, page type and configuration attribute information sorted out in the previous steps, write a configuration file in a standardized format; S4.

2. Read the configuration file: Use the file operation tool to read the configuration file content; S4.3, recursively construct code files: according to the page type attributes in the configuration file, recursively construct the corresponding code files; S4.

4. Fill in the corresponding code content: According to the different page type attributes, fill in the corresponding code content to complete the preliminary construction of the code framework.

6. A system for quickly building a project page structure, characterized in that: Its structure includes: The architecture combing module is used to comb out the page architecture based on the product prototype; The analysis and configuration module is used to analyze the page prototype to determine the page type and business content, distinguish different types of pages and define configuration attributes in the configuration items; Page extraction module, used to extract basic code structure according to page type; Write building blocks to write configuration files and build code frameworks.

7. A system for quickly building a project page structure according to claim 6, characterized in that: The architecture combing module specifically includes: Prototype analysis unit, used to deeply analyze the project prototype and understand the design intent and function of each page; Page classification unit, used to classify pages in the project prototype according to page functions and purposes; Hierarchical division unit, used to identify pages at different levels and clarify the logical relationship between pages; The map drawing unit is used to use charts or graphic tools to draw a page map according to the page classification results and page hierarchy identification results to intuitively display the link relationship and jump path between pages.

8. A system for quickly building a project page structure according to claim 7, characterized in that: The analysis configuration module specifically includes: The page identification unit is used to review the page prototype and classify the page into two types: table page and form page according to the function and presentation form of the page. For the form page, it is further determined whether it is a multi-step form page; The define attribute unit is used to define corresponding configuration attributes according to the page type and business content, where: (a) for the table page, the define attribute unit defines the following configuration attributes: basic attributes, data source, column definition, and operation button; (b) for the form page, the define attribute unit defines the following configuration attributes: basic attributes, field definition, validation rules, and submission logic; (c) for the multi-step form page, the define attribute unit also defines the following configuration attributes: the number of steps, step names, components of each step, and flow rules; the basic attributes specifically include: ① Title and description: define a title and description for each page, to assist ① Layout and style: define the basic layout and style attributes of the page, including responsive design, theme color and font size; ② Data binding and interaction: configure the data interaction logic between the page and the back-end service, including request method, data format and error handling; ④ Automatic generation and componentization: use template engine or scripting language to automatically generate corresponding page code and sub-components according to the configuration; for multi-step forms, automatically generate sub-components for each step to ensure component reuse and neat code; ⑤ Permission control: configure page access rights according to business needs to ensure that only authorized users can access the specified page.

9. A system for quickly building a project page structure according to claim 8, characterized in that: The page extraction module further includes a table extraction submodule and a form extraction submodule; The table extraction submodule extracts the basic code structure of the table type page, specifically including: The property definition unit is used to create a table object through code or use related component properties to determine the column structure of the table and set the initial state; Write a definition unit to write a method for obtaining data from the backend, convert the obtained data into a format and fill it into the table. At the same time, define the logic of refreshing the list and updating the data to the backend; Write function units to write event handling functions for row clicks, sort changes, and filter applications to enhance the interactivity and functionality of the table; The form extractor extracts the basic code structure of the form type page, specifically including: Step definition unit, which is used to create independent components for each step of a multi-step form, and define form items, default values, validation rules, and layout styles in detail within the component; The step jump unit is used to implement the navigation function between steps in related components or containers, and ensure the correct transmission and storage of data during the step switching process through an effective data management mechanism; The definition method unit is used to define the processing method for form submission, perform data verification and serialization in the defined processing method, send backend requests, and perform corresponding prompts and processing based on the feedback information from the backend to ensure the integrity and accuracy of the form data.

10. A system for quickly building a project page structure according to claim 9, characterized in that: The writing construction module specifically includes: The file writing unit is used to write the configuration file in a standardized format according to the page architecture, page type and configuration attribute information sorted out by the above modules; The file reading unit is used to read the configuration file content using the file operation tool; The recursive construction unit is used to recursively construct the corresponding code file according to the page type attributes in the configuration file; The code filling unit is used to fill in the corresponding code content according to the different page type attributes to complete the initial construction of the code framework.

Images