Form page processing method, device, system, electronic equipment and storage medium

Abstract

The embodiment of the application provides a form page processing method, device and system, electronic equipment and a storage medium, the method comprises the following steps: obtaining the development requirement of a form, then dividing the development requirement to obtain a plurality of sub-form requirements, obtaining the sub-form component corresponding to the sub-form requirement, obtaining the main form page, and finally integrating the main form page and the sub-form component to obtain the form page. By dividing the development requirement, obtaining a plurality of sub-form requirements, and splitting the form into a plurality of sub-form requirements, the component-based development can make the code structure clearer, the function of the sub-form component is clear, the sub-form requirement corresponding sub-form component and the main form page are integrated to obtain the form page, thereby realizing the modularization of the code, and improving the readability and maintainability of the code.

Description

Technical Field

[0001] This invention relates to the field of page development technology, and in particular to a method, apparatus, system, electronic device, and storage medium for processing forms on a page. Background Technology

[0002] In the daily practice of front-end development for management applications, forms are one of the most common development scenarios. Currently, a mechanism that can quickly generate form component code is typically used, allowing developers to rapidly build the basic framework of the application, validate business logic, and quickly respond to market changes.

[0003] However, this approach did not fully consider long-term maintainability and scalability during its design. In particular, when faced with the need to manage large forms, developing the entire form as a separate component would significantly increase the amount of code, thereby reducing the readability and maintainability of the code. Summary of the Invention

[0004] In view of the above problems, embodiments of the present invention are proposed to provide a form page processing method, apparatus, system, electronic device and storage medium that overcomes or at least partially solves the above problems.

[0005] To address the aforementioned problems, this invention discloses a form page processing method, the method comprising:

[0006] Obtain the development requirements for the form;

[0007] Based on the form development requirements, multiple sub-form requirements are obtained;

[0008] Retrieve the subform component corresponding to the subform requirement;

[0009] Get the main form page;

[0010] Create a reference variable for the subform component;

[0011] Invoke a preset integrated component, pass a reference variable of the sub-form component to the preset integrated component, and invoke the sub-form component on the main form page according to the reference variable of the sub-form component.

[0012] Optionally, the method further includes:

[0013] Call the preset integration component to obtain the form initialization method of the form;

[0014] When the form is initialized by calling the initialization form method, the preset integrated component is called to obtain the initialization subform method, and the data of the subform component is initialized by the initialization subform method;

[0015] The data of the initialized sub-form components are integrated to obtain the data of the initialized form.

[0016] Optionally, the method further includes:

[0017] After obtaining the data entered by the user on the form, the preset integrated component is called to obtain the form validation method of the form;

[0018] When the form validation method is called to validate the form data, the preset integrated component is called to obtain the sub-form validation method of the sub-form component, and the data of the sub-form component is validated through the sub-form validation method.

[0019] The validation results of the data from the sub-form components are integrated to obtain the validation result of the form data.

[0020] Optionally, the method further includes:

[0021] When obtaining the data entered by the user on the form, the preset integration component is called to obtain the data corresponding to the binding value variable of the sub-form component. The binding value variable is used to realize the two-way binding of the data of the sub-form component.

[0022] The data of the sub-form components are integrated to obtain the data of the form.

[0023] Optionally, the method further includes:

[0024] When the user closes the form page, the preset integration component is invoked to obtain status parameters, which are used to indicate whether the form data has changed;

[0025] If the status parameter indicates that the data in the form has changed, a reminder message is sent to the user to notify the user that there are unsaved modifications.

[0026] Optionally, the development requirements include functional requirements and layout requirements, and the process of breaking down the form development requirements into multiple sub-form requirements includes:

[0027] Based on either the functional requirements or the layout requirements, generate multiple sub-form requirements.

[0028] Accordingly, embodiments of the present invention disclose a form page processing apparatus, the apparatus comprising:

[0029] The development requirements acquisition module is used to acquire the development requirements of the form.

[0030] The sub-form requirement determination module is used to break down the form development requirements into multiple sub-form requirements.

[0031] The subform component acquisition module is used to acquire the subform component corresponding to the subform requirement.

[0032] The main form page retrieval module is used to retrieve the main form page;

[0033] An integration module is used to integrate the main form page and the sub-form components to obtain the form page;

[0034] The reference variable creation module is used to create reference variables for the subform component;

[0035] The integration module is used to call a preset integration component, pass a reference variable of the sub-form component to the preset integration component, and call the sub-form component on the main form page according to the reference variable of the sub-form component.

[0036] Optionally, the device further includes:

[0037] The initialization form method retrieval module is used to call the preset integrated component to retrieve the initialization form method of the form;

[0038] An initialization module is used to call the preset integrated component to obtain the initialization sub-form method when the initialization form method is called to initialize the form, and to initialize the data of the sub-form component through the initialization sub-form method;

[0039] An integrated initialization data module is used to integrate the data of the initialized sub-form components to obtain the data of the initialized form.

[0040] Optionally, the device further includes:

[0041] The form validation method acquisition module is used to call the preset integrated component to obtain the form validation method after obtaining the data entered by the user on the page for the form;

[0042] The validation module is used to call the preset integrated component to obtain the sub-form validation method of the sub-form component when the form validation method is called to validate the data of the form, and to validate the data of the sub-form component through the sub-form validation method.

[0043] The integrated validation result module is used to integrate the validation results of the data of the sub-form components to obtain the validation result of the data of the form.

[0044] Optionally, the device further includes:

[0045] The data acquisition module is used to call the preset integration component to obtain the data corresponding to the binding value variable of the sub-form component when acquiring the data input by the user on the page of the form. The binding value variable is used to realize the two-way binding of the data of the sub-form component.

[0046] The data integration module is used to integrate the data of the sub-form components to obtain the data of the form.

[0047] Optionally, the device further includes:

[0048] The status parameter acquisition module is used to call the preset integration component to obtain status parameters when the user closes the form page. The status parameters are used to indicate whether the form data has changed.

[0049] The reminder module is used to send a reminder message to the user if the status parameter indicates that the data in the form has changed. The reminder message is used to prompt the user that there are unsaved modifications.

[0050] Optionally, the development requirements include functional requirements and layout requirements, and the sub-form requirement determination module further includes:

[0051] The sub-form requirement determination sub-module generates multiple sub-form requirements based on one of the functional requirements or the layout requirements.

[0052] Accordingly, this invention discloses a form page processing system, characterized in that the system is used to obtain form development requirements; split the form development requirements into multiple sub-form requirements; obtain the sub-form components corresponding to the sub-form requirements; obtain the main form page; create reference variables for the sub-form components; call a preset integration component and pass the reference variables of the sub-form components to the preset integration component, and call the sub-form components on the main form page according to the reference variables of the sub-form components.

[0053] Accordingly, this invention discloses an electronic device, including: a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, it implements the various steps of the above-described form page processing method embodiment.

[0054] Accordingly, embodiments of the present invention disclose a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the various steps of the above-described form page processing method embodiments.

[0055] The embodiments of the present invention have the following advantages:

[0056] This invention obtains form development requirements, then breaks them down into multiple sub-form requirements, obtains the corresponding sub-form components, acquires the main form page, creates reference variables for the sub-form components, calls a preset integration component, passes the reference variables of the sub-form components to the preset integration component, and calls the sub-form components on the main form page based on the reference variables, thereby integrating the main form page and the sub-form components to obtain the form page. By dividing the development requirements into multiple sub-form requirements and splitting the form into multiple sub-form components, component-based development makes the code structure clearer and the functions of the sub-form components more defined. By integrating the sub-form components corresponding to the sub-form requirements and the main form page, the form page is obtained, thereby achieving code modularization and improving code readability and maintainability. Attached Figure Description

[0057] Figure 1 This is a flowchart of the steps of a form page processing method according to an embodiment of the present invention;

[0058] Figure 2 This is a structural block diagram of a form page processing device according to an embodiment of the present invention. Detailed Implementation

[0059] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0060] In the daily practice of front-end development for management applications, forms are one of the most common development scenarios. Currently, a mechanism that can quickly generate form component code is typically used, allowing developers to rapidly build the basic framework of the application, validate business logic, and quickly respond to market changes.

[0061] However, this approach did not fully consider long-term maintainability and scalability during its design. In particular, when faced with the need to manage large forms, developing the entire form as a separate component would significantly increase the amount of code, thereby reducing the readability and maintainability of the code.

[0062] One of the core concepts of this invention is to divide development requirements into multiple sub-form requirements, and then split the form into multiple sub-form components. Component-based development makes the code structure clearer and the functions of the sub-form components more defined. By integrating the sub-form components corresponding to the sub-form requirements with the main form page, the form page is obtained, thereby realizing code modularization and improving code readability and maintainability.

[0063] Reference Figure 1 The diagram illustrates a flowchart of a form page processing method according to an embodiment of the present invention, which may specifically include the following steps:

[0064] Step 101: Obtain the development requirements for the form.

[0065] Specifically, the development requirements of a form can be obtained by acquiring its requirements document. This document can include the form's main purpose, functional requirements, design requirements, data processing, and storage. Functional requirements can include fields and inputs: a detailed list of all required fields and their types (e.g., text, number, date, selection, etc.); data validation: specifying validation rules for each field, such as required fields, format checks, and length limits; user interaction: describing how users interact with the form, including buttons, links, and prompts; special functions: providing detailed descriptions of any special functional requirements (e.g., file upload, map integration, payment processing, etc.). Design requirements can include visual design: providing or describing required visual elements, such as color schemes, font choices, icons, and images; layout and responsiveness: specifying the form's layout requirements and whether responsive design is needed to adapt to different devices. Data processing and storage can include data collection: describing how form data is collected, stored, and processed; data security: describing security measures such as encryption and access control if sensitive data is involved; and data export and reporting: specifying the data export format and report generation method if required. Of course, this embodiment of the invention does not limit the method of obtaining form development requirements.

[0066] Step 102: Based on the form development requirements, break down the requirements into multiple sub-form requirements.

[0067] Specifically, after obtaining the development requirements of the form, the development requirements are divided into several sub-form development requirements. By dividing the development requirements of the entire form into several sub-form development requirements, the work can be allocated more efficiently and parallel development can be achieved, which improves development efficiency, makes the code structure clear, and improves code maintainability and extensibility.

[0068] Step 103: Obtain the subform component corresponding to the subform requirement.

[0069] Specifically, after dividing the development requirements into multiple sub-form requirements, sub-form components are developed according to the sub-form requirements. The sub-form components can be developed by members of the same team or by members of different teams respectively. This embodiment of the invention does not limit this.

[0070] Small form components can be developed using native methods, existing encapsulated component libraries, and low-code methods. Developing small form components using native technologies means directly using HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript to build the components. JavaScript is a widely used programming language, primarily used for web development to make web pages interactive. This approach offers maximum flexibility and control, but may require more time and effort to implement complex functions. Using existing encapsulated component libraries can greatly simplify the development process. These libraries provide rich pre-built components and styles, enabling the rapid implementation of complex form functionalities. Low-code platforms offer a visual development approach, allowing applications to be built by dragging and dropping components and configuring properties. This approach significantly reduces coding workload and is suitable for rapid prototyping and scenarios with relatively simple business logic. The implementation method for small form component development can be set according to actual needs in practical applications, and this embodiment of the invention does not impose any limitations on this.

[0071] After developing the subform component based on the subform requirements, obtain the subform component corresponding to the subform requirements.

[0072] Step 104: Obtain the main form page.

[0073] Specifically, the development of the main form page components is based on development requirements. The development of these components only needs to focus on the overall logical flow, such as the overall form's style design, data validation and submission, form data requests in view or edit modes, and interactive handling when leaving the page with edited form data. Style design needs to ensure a clear and consistent form layout, displaying well on different devices and screen sizes. CSS or style libraries can be used to unify the form's visual style. Data validation can implement client-side and server-side data validation to ensure data integrity and validity. Submission handling can handle form submission events, perform data processing and submission. Form data requests in view or edit modes can include loading form data from the server and populating form fields in view or edit modes, achieving smooth mode switching so that the form state and data remain consistent when users switch between different modes. Interactive handling when leaving the page with edited form data can include displaying a prompt when a user attempts to leave the page with unsaved edited data, reminding the user to save or discard changes, and providing temporary or automatic save functions to prevent data loss during editing.

[0074] After developing the components for the main form page according to the development requirements, obtain the main form page.

[0075] Step 105: Create a reference variable for the subform component.

[0076] Specifically, you can create reference variables for each subform component by defining ref variables. In front-end development, ref variables are usually used to reference component instances so that they can be manipulated directly.

[0077] Step 106: Invoke the preset integration component, pass the reference variable of the sub-form component to the preset integration component, and invoke the sub-form component on the main form page according to the reference variable of the sub-form component.

[0078] Specifically, after creating a reference variable for the subform component, a preset integration component is called, passing the subform component's reference variable to the preset integration component. Then, on the main form page, the subform component is called based on its reference variable. For example, the preset integration component can be a custom `useForm` hook. The form hook can receive a collection of `ref` variables from all subform components. On the main form page, the form hook is used, passing an array of `refs` containing the `ref` variables of all subform components. The form hook receives this array of `refs` and can then call the subform component on the main form page using its `ref` variable, thus integrating the main form page and the subform components to obtain the form page.

[0079] Vue.js is a progressive JavaScript framework for building user interfaces. Vue 3 is the latest major version of Vue.js, and it introduces the Composition API. The Composition API allows developers to organize code based on logical functionality, rather than by options. In Vue 3, the Composition API is used to encapsulate form initialization, validation, and other logic. This allows developers to focus only on form styles and specific business rules, without repeatedly writing generic form logic. This approach enables the reuse and modularization of form logic, making the code more concise and maintainable.

[0080] After obtaining the main form page and sub-form components, the sub-form components are imported one by one into the main form page for integration, resulting in the form page. By integrating the main form page and sub-form components to obtain the form page, component-based development makes the code structure clearer, each component has a defined function, and achieves code modularity, enhancing code readability and maintainability. Furthermore, component-based development allows for independent development of each sub-form component, enabling parallel development and improving development efficiency. Moreover, as project requirements change, we only need to modify the logic of the corresponding sub-form component without altering the entire form. This flexibility makes the development process more efficient and reduces the possibility of errors.

[0081] The form page processing method of this invention first obtains the form's development requirements, then divides the development requirements into multiple sub-form requirements, then obtains the sub-form components corresponding to the sub-form requirements, obtains the main form page, and finally creates reference variables for the sub-form components. A preset integration component is then called, and the reference variables of the sub-form components are passed to the preset integration component. Finally, on the main form page, the sub-form components are called based on their reference variables, thereby integrating the main form page and the sub-form components to obtain the form page. By dividing the development requirements into multiple sub-form requirements and splitting the form into multiple sub-form components, component-based development makes the code structure clearer and the functions of the sub-form components more defined. By integrating the sub-form components corresponding to the sub-form requirements and the main form page, the form page is obtained, thus achieving code modularization and improving code readability and maintainability.

[0082] In this embodiment of the invention, the method further includes:

[0083] Call the preset integration component to obtain the form initialization method of the form;

[0084] When the form is initialized by calling the initialization form method, the preset integrated component is called to obtain the initialization subform method, and the data of the subform component is initialized by the initialization subform method;

[0085] The data of the initialized sub-form components are integrated to obtain the data of the initialized form.

[0086] Specifically, form hooks can receive a collection of refs from all child form components and return key variables and methods. Among them, the methods returned by form hooks include the initForm method (the form initialization method), which is used to reset the form's state and restore it to its initial or default state. Form hooks can be used to call the initForm method to initialize the form.

[0087] The subform component includes an initialization method, which is used to reset the state of the subform, restoring it to its initial or default state. This method can be called when the subform component is mounted to ensure that the subform data is set correctly.

[0088] When the form hook calls the form initialization method to initialize the form, the form initialization method calls the child form component's initialization method, which in turn initializes the child form component's data. After the child form component's data is initialized, the initialized data of the child form component is integrated to obtain the initialized form data.

[0089] In this embodiment of the invention, the method further includes:

[0090] After obtaining the data entered by the user on the form, the preset integrated component is called to obtain the form validation method of the form;

[0091] When the form validation method is called to validate the form data, the preset integrated component is called to obtain the sub-form validation method of the sub-form component, and the data of the sub-form component is validated through the sub-form validation method.

[0092] The validation results of the data from the sub-form components are integrated to obtain the validation result of the form data.

[0093] Specifically, the methods returned by form hooks also include the `validate` method (form validation method). This method typically iterates through the form fields, checks whether each field meets specific validation rules, and returns a boolean value indicating whether the form is valid.

[0094] The subform component includes a subform validation method. The subform validation method is used to check whether each field of the subform component meets specific validation rules and returns a boolean value indicating whether the form is valid. This method can be called before the form is submitted to ensure that the form data meets the expected rules and conditions.

[0095] Users can enter and submit data on the form page. After obtaining the user's data input on the form page and receiving the user's data submission request, the form hook is used to call the form validation method. The form validation method iterates through all child form component reference variables in the ref collection of child form components, calls the child form validation method of each child form component, and makes the child form validation method check the validity of the child form component's data. The validation result of the child form component's data includes a boolean value indicating whether the child form component's data is valid.

[0096] The form validation method calls the subform validation method of the subform component. After the data validation of the subform component is completed, the validation results of the subform component's data are integrated to obtain the form's data validation result.

[0097] In this embodiment of the invention, the method further includes:

[0098] When obtaining the data entered by the user on the form, the preset integration component is called to obtain the data corresponding to the binding value variable of the sub-form component. The binding value variable is used to realize the two-way binding of the data of the sub-form component.

[0099] The data of the sub-form components are integrated to obtain the data of the form.

[0100] Specifically, the child form component includes a `modelValue` variable (bound value variable) used to implement two-way data binding. Implementing two-way data binding typically involves synchronizing the values ​​of form fields with the component's state or properties. The bound value variable can represent the data of the child form component; this variable can be a state variable or a value passed down from the parent component via a property. Within the child form component, it receives the bound value variable and a callback function. The bound value variable represents the initial value of the child form component's input fields, and the callback function notifies the parent component that the input field's value has changed. The child form component is referenced in the form page, and the bound value variable and callback function are passed.

[0101] In Vue 3, bound value variables are typically used in custom form components (such as custom input fields, checkboxes, etc.) to enable two-way data binding with the parent component. This variable is passed to the child component via the `v-model` directive. `v-model` is a Vue.js directive used to create two-way data binding between form input elements and components. The child component can receive and use it via props, which are primarily used for passing values ​​between components. Custom Input Field Component: In `CustomInput.vue`, `CustomInput.vue` represents a custom Vue.js component that receives the `modelValue` variable via props and binds it to the `value` property of the input field. When the value of the input field changes, the parent component's data is updated via the `$emit` event. Parent Component: In the parent component, the `v-model` directive binds the `username` and `password` variables to the custom input field component, achieving two-way data binding. Two-way Data Binding: Through the `v-model` directive, the parent component's data is automatically synchronized to the child component, and changes in the child component's input will automatically update the parent component's data. This method enables two-way data binding between custom form components and their parent components, making form data management more convenient and efficient.

[0102] The key variables returned by the form hook include the `form` object, which is used to store the values ​​of all child form components. The keys of this object are typically the names or identifiers of the form fields, and the values ​​are the current values ​​of the corresponding fields. In this way, the `form` object variable provides a centralized place to manage and access the entire form's data. The `form` variable is an object, initially empty. When a child component is mounted, the form hook initializes the `form` object based on the `refs` array (the collection of reference variables for child forms) and updates the `form` object when form field values ​​change. The form hook returns the `form` variable, which is the form data obtained after integrating the data from the child form components. This approach provides a centralized place to manage and access the entire form's data, making form processing more modular and easier to maintain.

[0103] In this embodiment of the invention, the method further includes:

[0104] When the user closes the form page, the preset integration component is invoked to obtain status parameters, which are used to indicate whether the form data has changed;

[0105] If the status parameter indicates that the data in the form has changed, a reminder message is sent to the user to notify the user that there are unsaved modifications.

[0106] Specifically, key variables returned by the form hook also include the state parameter `formIsChanged`, a boolean value indicating whether the form data has changed. This variable is typically used to control the enabled state of the form submit button or to prompt the user to save changes when attempting to leave the page. The initial value of the state parameter `formIsChanged` is false, and it becomes true when the form field value changes.

[0107] The state parameter `formIsChanged` can be used to control the submit button. Using `disabled = {!formIsChanged}` on the form submit button ensures that the submit button is only enabled when the form data changes.

[0108] The formIsChanged status parameter can also be used to prompt users to save changes. When a user attempts to leave the page, the value of the formIsChanged status parameter can prompt the user to save changes to prevent data loss. When the user closes the form page, the formIsChanged status parameter indicates that the form data has changed, and a reminder message is sent to the user to remind them that there are unsaved modifications.

[0109] In this way, the formIsChanged status parameter provides a simple way to track changes in form data and take appropriate action when necessary.

[0110] In this embodiment of the invention, the development requirements include functional requirements and layout requirements. The step of breaking down the form development requirements into multiple sub-form requirements includes:

[0111] Based on either the functional requirements or the layout requirements, generate multiple sub-form requirements.

[0112] Specifically, development requirements can be divided according to functional requirements, layout requirements, or number of personnel, resulting in multiple sub-form requirements. In actual development scenarios, several situations may arise:

[0113] In simple form requirements, the number of fields to be filled is too large. In this case, form requirements are mainly divided into blocks based on a certain number of fields for form development. This keeps the number of lines of code in a single file within a certain range, making development and maintenance easier.

[0114] Form requirements are inherently modular. Take a simple example: a form might require inputting knowledge information from a knowledge base. This knowledge information might include basic information, permission information, and related information. Dividing these into corresponding sub-forms makes the development logic clearer and more efficient. Furthermore, different information forms may sometimes have mutual constraints. For instance, knowledge might be categorized as public or private. Public knowledge requires no permission information, while private knowledge is mandatory. In such cases, during form initialization, different information items can be initialized based on the newly created knowledge type.

[0115] The form contains embedded items from other business modules. Continuing the previous example, if the knowledge information needs to maintain a category called "knowledge category," and the selected knowledge category is "product manual," then submitting the current form requires approval. This means that in addition to filling out the knowledge form, it also requires calling the approval function to submit the approval form information. Generally, the approval function is also an independent function; it doesn't belong to the current knowledge module's requirements and is an external call. Therefore, when all forms in the system are developed using standard form input and output methods, even forms from external modules can still perform similar form data integration and validation.

[0116] Forms with specific layout requirements. Generally speaking, most forms on a client-side are arranged vertically, but sometimes there are special layout requirements, such as placing basic information on the left, images or file information on the right, and related information filling an entire row, etc. Dividing large form requirements into corresponding sub-form functions for development based on layout requirements can better adapt to changes in form layout requirements.

[0117] The sub-form functional modules in the above scenarios are all independent of each other. As long as they are developed with standardized input and output, they can be assigned to different personnel.

[0118] A subform can be understood as an independent form requirement. Form fields generally have defined data rules. The form initialization method is the method for initializing this independent form, and the form data validation method is the method for validating this independent form. Subforms can also be used independently because the initialization and validation methods of subforms and forms are the same. If there is a need to integrate multiple subforms, use form hooks to call the form initialization and validation methods of the subforms. If there is a need for only a single small form, you can directly use the form initialization and validation methods of the subforms normally.

[0119] Form hooks are logic integration modules that simplify form development by encapsulating form state management, data validation, and submission processing logic. The advantages of form hooks include: Code reuse: Encapsulating form-related logic in a custom hook allows for reuse across multiple components, reducing code duplication. Simplified components: Components using form hooks only need to focus on UI presentation and user interaction, without needing to handle complex form state management. Improved maintainability: Centralized management of form logic makes the code easier to understand and maintain. Flexibility: `useFormhook` can be extended and customized as needed, adding custom validation rules, asynchronous operations, etc. Form hook functionality includes: State management: Managing the values ​​and states of form fields, such as the `form` object and the `formIsChanged` state. Data validation: Providing validation logic for form fields to ensure data integrity and validity. Submission processing: Handling form submission events, processing data, and submitting it. Reset functionality: Providing methods to reset the form state, such as `initForm`. Mode switching: Supporting switching between view and edit modes, and corresponding data loading and saving logic.

[0120] The form hook receives an array of `refs` containing the refs of all child form components. It returns the form object, the `formIsChanged` state, and the methods `handleChange`, `handleSubmit`, `initForm`, and `validate`. The `handleChange` method is called when the value of each child form component changes, updating the form object and the `formIsChanged` state. The `handleSubmit` method handles the form submission event, processing and submitting the data. The `initForm` method resets the form state, restoring it to its initial or default state. `Validate` implements form validation logic, ensuring data integrity and validity. This approach allows for centralized management of form state and behavior, making the code more modular and maintainable.

[0121] By using form hooks to encapsulate form initialization, validation, and other logic, developers can focus on form styles and specific business rules without having to repeatedly write generic form logic, thus improving development efficiency.

[0122] When forms are complex, we can break them down into multiple smaller forms, which may be developed by different team members. Each smaller form is developed independently, and the logic is integrated by calling pre-defined form hooks. This not only improves development efficiency, but also makes the code structure clearer, with each component having a defined function, making it easier to maintain and extend.

[0123] Small form components are independent and reusable, making them easy to adjust and optimize across different projects and meet diverse business needs. Furthermore, as project requirements change, we only need to modify the logic of the corresponding small form, without altering the entire form. This flexibility makes the development process more efficient and reduces the possibility of errors.

[0124] It should be noted that, for the sake of simplicity, the method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments of the present invention are not limited to the described order of actions, because according to the embodiments of the present invention, some steps can be performed in other orders or simultaneously. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions involved are not necessarily essential to the embodiments of the present invention.

[0125] Reference Figure 2 The diagram shows a structural block diagram of a form page processing device according to an embodiment of the present invention, which may specifically include the following modules:

[0126] The development requirements acquisition module 201 is used to acquire the development requirements of the form.

[0127] The sub-form requirement determination module 202 is used to split the form development requirements into multiple sub-form requirements.

[0128] The subform component acquisition module 203 is used to acquire the subform component corresponding to the subform requirement.

[0129] The main form page retrieval module 204 is used to retrieve the main form page.

[0130] This reference variable creation module 205 is used to create reference variables for the subform component;

[0131] The integration module 206 is used to call a preset integration component, pass a reference variable of the sub-form component to the preset integration component, and call the sub-form component on the main form page according to the reference variable of the sub-form component.

[0132] The invention provides a form page processing device that obtains form development requirements, then breaks them down into multiple sub-form requirements, obtains the corresponding sub-form components, acquires the main form page, creates reference variables for the sub-form components, calls a preset integration component, passes the reference variables of the sub-form components to the preset integration component, and calls the sub-form components on the main form page based on the reference variables, thereby integrating the main form page and sub-form components to obtain the form page. By dividing development requirements into multiple sub-form requirements and splitting the form into multiple sub-form components, component-based development makes the code structure clearer and the functions of the sub-form components more defined. By integrating the sub-form components corresponding to the sub-form requirements and the main form page, the form page is obtained, thus achieving code modularization and improving code readability and maintainability. Form hooks are used to encapsulate the initialization and validation logic of the form. This allows developers to focus only on the form style and specific business rules, without having to repeatedly write general form logic, improving development efficiency. When the form is complex, it can be broken down into multiple smaller forms, which may be developed separately by different team members. Each small form is developed independently, and its logic is integrated by calling pre-defined form hooks. This not only improves development efficiency, but also makes the code structure clearer, with each component having a defined function that is easy to maintain and extend. Small form components are independent and reusable, facilitating adjustments and optimizations across different projects and meeting diverse business needs. Furthermore, as project requirements change, we only need to modify the logic of the corresponding small form, without altering the entire form. This flexibility makes the development process more efficient and reduces the possibility of errors.

[0133] In this embodiment of the invention, the device further includes:

[0134] The initialization form method retrieval module is used to call the preset integrated component to retrieve the initialization form method of the form;

[0135] An initialization module is used to call the preset integrated component to obtain the initialization sub-form method when the initialization form method is called to initialize the form, and to initialize the data of the sub-form component through the initialization sub-form method;

[0136] An integrated initialization data module is used to integrate the data of the initialized sub-form components to obtain the data of the initialized form.

[0137] In this embodiment of the invention, the device further includes:

[0138] The form validation method acquisition module is used to call the preset integrated component to obtain the form validation method after obtaining the data entered by the user on the page for the form;

[0139] The validation module is used to call the preset integrated component to obtain the sub-form validation method of the sub-form component when the form validation method is called to validate the data of the form, and to validate the data of the sub-form component through the sub-form validation method.

[0140] The integrated validation result module is used to integrate the validation results of the data of the sub-form components to obtain the validation result of the data of the form.

[0141] In this embodiment of the invention, the device further includes:

[0142] The data acquisition module is used to call the preset integration component to obtain the data corresponding to the binding value variable of the sub-form component when acquiring the data input by the user on the page of the form. The binding value variable is used to realize the two-way binding of the data of the sub-form component.

[0143] The data integration module is used to integrate the data of the sub-form components to obtain the data of the form.

[0144] In this embodiment of the invention, the device further includes:

[0145] The status parameter acquisition module is used to call the preset integration component to obtain status parameters when the user closes the form page. The status parameters are used to indicate whether the form data has changed.

[0146] The reminder module is used to send a reminder message to the user if the status parameter indicates that the data in the form has changed. The reminder message is used to prompt the user that there are unsaved modifications.

[0147] In this embodiment of the invention, the development requirements include functional requirements and layout requirements, and the sub-form requirement determination module further includes:

[0148] The sub-form requirement determination sub-module generates multiple sub-form requirements based on one of the functional requirements or the layout requirements.

[0149] As the device embodiment is basically similar to the method embodiment, the description is relatively simple, and relevant parts can be found in the description of the method embodiment.

[0150] This invention also provides a form page processing system, characterized in that the system is used to obtain form development requirements; split the form development requirements into multiple sub-form requirements; obtain the sub-form components corresponding to the sub-form requirements; obtain the main form page; create reference variables for the sub-form components; call a preset integration component and pass the reference variables of the sub-form components to the preset integration component, and call the sub-form components on the main form page according to the reference variables of the sub-form components.

[0151] This invention also provides an electronic device, comprising:

[0152] It includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, it implements the various processes of the above-described form page processing method embodiment and achieves the same technical effect. To avoid repetition, it will not be described again here.

[0153] This invention also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the various processes of the above-described form page processing method embodiments and achieves the same technical effect. To avoid repetition, it will not be described again here.

[0154] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0155] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, apparatus, or computer program products. Therefore, embodiments of the present invention can take the form of entirely hardware embodiments, entirely software embodiments, or embodiments combining software and hardware aspects. Furthermore, embodiments of the present invention can take the form of computer program products implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0156] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing terminal device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal device, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0157] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0158] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal equipment, causing a series of operational steps to be performed on the computer or other programmable terminal equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable terminal equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0159] Although preferred embodiments of the present invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the embodiments of the present invention.

[0160] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or terminal device that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or terminal device. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or terminal device that includes said element.

[0161] The present invention has provided a detailed description of a form page processing method, apparatus, system, electronic device, and storage medium. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, those skilled in the art will recognize that, based on the ideas of the present invention, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of the present invention.

Claims

1. A method for processing forms on a webpage, characterized in that, The method includes: Obtain form development requirements; Based on the form development requirements, multiple sub-form requirements are obtained; Retrieve the subform component corresponding to the subform requirement; Get the main form page; Create a reference variable for the subform component; Invoke a preset integrated component, pass a reference variable of the sub-form component to the preset integrated component, and invoke the sub-form component on the main form page according to the reference variable of the sub-form component; The method further includes: Call the preset integration component to obtain the form initialization method of the form; When the form is initialized by calling the initialization form method, the preset integrated component is called to obtain the initialization subform method, and the data of the subform component is initialized by the initialization subform method; Integrate the data from the initialized sub-form components to obtain the data for the initialized form.

2. The method according to claim 1, characterized in that, The method further includes: After obtaining the data entered by the user on the form, the preset integrated component is called to obtain the form validation method of the form; When the form validation method is called to validate the form data, the preset integrated component is called to obtain the sub-form validation method of the sub-form component, and the data of the sub-form component is validated through the sub-form validation method. The validation results of the data from the sub-form components are integrated to obtain the validation result of the form data.

3. The method according to claim 1, characterized in that, The method further includes: When obtaining the data entered by the user on the form, the preset integration component is called to obtain the data corresponding to the binding value variable of the sub-form component. The binding value variable is used to realize the two-way binding of the data of the sub-form component. The data of the sub-form components are integrated to obtain the data of the form.

4. The method according to claim 1, characterized in that, The method further includes: When the user closes the form page, the preset integration component is invoked to obtain the status parameters, which are used to indicate whether the form data has changed; If the status parameter indicates that the data in the form has changed, a reminder message is sent to the user to notify the user that there are unsaved modifications.

5. The method according to claim 1, characterized in that, The development requirements include functional requirements and layout requirements. Based on these form development requirements, multiple sub-form requirements are derived, including: Based on either the functional requirements or the layout requirements, generate multiple sub-form requirements.

6. A form page processing device, characterized in that, The device includes: The development requirements acquisition module is used to acquire the development requirements of the form. The sub-form requirement determination module is used to break down the form development requirements into multiple sub-form requirements. The subform component acquisition module is used to acquire the subform component corresponding to the subform requirement. The main form page retrieval module is used to retrieve the main form page; The reference variable creation module is used to create reference variables for the subform component; An integration module is used to call a preset integration component, pass a reference variable of the sub-form component to the preset integration component, and call the sub-form component on the main form page according to the reference variable of the sub-form component; The initialization form method retrieval module is used to call the preset integrated component to retrieve the initialization form method of the form; An initialization module is used to call the preset integrated component to obtain the initialization sub-form method when the initialization form method is called to initialize the form, and to initialize the data of the sub-form component through the initialization sub-form method; The integration initialization data module is used to integrate the data of the initialized sub-form components to obtain the data of the initialized form.

7. A form page processing system, characterized in that, The system is used to: obtain form development requirements; break down the form development requirements into multiple sub-form requirements; obtain the sub-form components corresponding to the sub-form requirements; obtain the main form page; create reference variables for the sub-form components; call a preset integration component and pass the reference variables of the sub-form components to the preset integration component, and call the sub-form components on the main form page according to the reference variables of the sub-form components; call the preset integration component to obtain the form initialization method of the form; when initializing the form by calling the form initialization method, call the preset integration component to obtain the sub-form initialization method, and initialize the data of the sub-form components through the sub-form initialization method; integrate the data of the initialized sub-form components to obtain the initialized form data.

8. An electronic device, characterized in that, include: A processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program, when executed by the processor, implements the steps of the page processing method for the form as described in any one of claims 1-5.

9. A computer-readable storage medium, characterized in that, A computer program is stored on the computer-readable storage medium, which, when executed by a processor, implements the steps of the page processing method for the form as described in any one of claims 1 to 5.

Images