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

Abstract

The embodiment of the invention provides a page processing method, device and system for a form, electronic equipment and a storage medium, and the method comprises the steps: obtaining a development demand of the form, then dividing the development demand to obtain a plurality of sub-form demands, then obtaining sub-form components corresponding to the sub-form demands, and obtaining a main form page, and finally, integrating the main form page and the sub-form component to obtain the page of the form. By dividing development requirements, obtaining multiple sub-form requirements and splitting a form into the multiple sub-form requirements, modularized development can make a code structure clearer and a sub-form component function clear, and by integrating the sub-form component corresponding to the sub-form requirements and a main form page, a form page is obtained, so that code modularization is realized, and the development efficiency is improved. And the readability and maintainability of the code are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of page development, and in particular to a form page processing method, device, system, electronic equipment and storage medium. Background Art

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

[0003] However, this approach does not fully consider long-term maintainability and scalability when it is designed. Especially when faced with the management needs of large forms, developing the entire form as a separate component will 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, device, system, electronic device and storage medium that overcome the above problems or at least partially solve the above problems.

[0005] In order to solve the above problem, an embodiment of the present invention discloses a form page processing method, the method comprising:

[0006] Obtaining development requirements for the form;

[0007] According to the form development requirements, multiple sub-form requirements are obtained;

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

[0009] Get the main form page;

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

[0011] The preset integration component is called, and the reference variable of the sub-form component is passed to the preset integration component, and the sub-form component is called 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 initialization form method of the form;

[0014] When the form initialization method is called to initialize the form, the preset integration component is called to obtain the sub-form initialization method, and the data of the sub-form component is initialized by the sub-form initialization 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 input by the user on the page of the form, calling the preset integration component to obtain the form verification method of the form;

[0018] When calling the form verification method to verify the data of the form, calling the preset integration component to obtain the sub-form verification method of the sub-form component, and verifying the data of the sub-form component through the sub-form verification method;

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

[0020] Optionally, the method further includes:

[0021] When obtaining the data input by the user on the page of the form, calling the preset integration component 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 subform components are integrated to obtain the data of the form.

[0023] Optionally, the method further includes:

[0024] When the user closes the page of the form, the preset integration component is called to obtain a state parameter, where the state parameter is used to indicate whether the form data has changed;

[0025] If the state parameter indicates that the data of the form has changed, a reminder message is sent to the user, where the reminder message is used to prompt the user that there are unsaved modifications.

[0026] Optionally, the development requirements include functional requirements and layout requirements, and the form development requirements are split into multiple sub-form requirements, including:

[0027] According to one of the functional requirement and the layout requirement, a plurality of sub-form requirements are generated.

[0028] Accordingly, an embodiment of the present invention discloses a form page processing device, the device comprising:

[0029] A development requirement acquisition module, used to acquire the development requirements of the form;

[0030] A sub-form requirement determination module is used to split the form development requirements into multiple sub-form requirements;

[0031] A subform component acquisition module, used to acquire the subform component corresponding to the subform requirement;

[0032] Main form page acquisition module, used to obtain the main form page;

[0033] An integration module, used for integrating the main form page and the sub-form components to obtain the form page;

[0034] A reference variable creation module, used for creating a reference variable for the subform component;

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

[0036] Optionally, the device further comprises:

[0037] An initialization form method acquisition module, used for calling the preset integration component to acquire the initialization form method of the form;

[0038] An initialization module, used for calling the preset integration component to obtain the initialization sub-form method when calling the initialization form method to initialize the form, and initializing the data of the sub-form component through the initialization sub-form method;

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

[0040] Optionally, the device further comprises:

[0041] A form verification method acquisition module, used to call the preset integration component to obtain the form verification method of the form after obtaining the data input by the user on the page of the form;

[0042] A verification module, configured to call the preset integration component to obtain the sub-form verification method of the sub-form component when calling the form verification method to verify the data of the form, and verify the data of the sub-form component through the sub-form verification method;

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

[0044] Optionally, the device further comprises:

[0045] A data acquisition module, used to call the preset integration component to acquire data corresponding to the binding value variable of the sub-form component when acquiring data input by the user on the page of the form, wherein the binding value variable is used to realize 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 comprises:

[0048] A state parameter acquisition module, used for calling the preset integration component to acquire a state parameter when the user closes the page of the form, wherein the state parameter is 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 state parameter indicates that the data of the form has changed, and 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 subform requirement determination module further includes:

[0051] The sub-form requirement determination sub-module generates a plurality of sub-form requirements according to one of the functional requirement and the typesetting requirement.

[0052] Correspondingly, an embodiment of the present invention discloses a form page processing system, characterized in that the system is used to obtain form development requirements; split a plurality of sub-form requirements according to the form development requirements; obtain a sub-form component corresponding to the sub-form requirement; obtain a main form page; create a reference variable for the sub-form component; call a preset integration component, and pass the 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.

[0053] Accordingly, an embodiment of the present invention discloses an electronic device, comprising: a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program implements the various steps of the above-mentioned form page processing method embodiment when executed by the processor.

[0054] Accordingly, an embodiment of the present invention discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, each step of the above-mentioned form page processing method embodiment is implemented.

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

[0056] The embodiment of the present invention obtains the form development requirements, and then splits to obtain multiple sub-form requirements according to the form development 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, calls the preset integration component, and 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 according to the reference variables of the sub-form components, thereby integrating the main form page and the sub-form components to obtain the form page. By dividing the development requirements, multiple sub-form requirements are obtained, and the form is split into multiple sub-form components. Component-based development can make the code structure clearer and the functions of the sub-form components clear. By integrating the sub-form components corresponding to the sub-form requirements and the main form page, the form page is obtained, thereby realizing the modularization of the code and improving the readability and maintainability of the code. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0058] Figure 2 It is a structural block diagram of a page processing device of a form according to an embodiment of the present invention. DETAILED DESCRIPTION

[0059] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.

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

[0061] However, this approach does not fully consider long-term maintainability and scalability when it is designed. Especially when faced with the management needs of large forms, developing the entire form as a separate component will significantly increase the amount of code, thereby reducing the readability and maintainability of the code.

[0062] One of the core concepts of the embodiments of the present invention is to divide the development requirements, obtain multiple sub-form requirements, and split the form into multiple sub-form components. Component-based development can make the code structure clearer and the functions of the sub-form components clearer. By integrating the sub-form components corresponding to the sub-form requirements and the main form page, a form page is obtained, thereby realizing the modularization of the code and improving the readability and maintainability of the code.

[0063] Reference Figure 1 , shows a flow chart of a method for processing a form page according to an embodiment of the present invention, which may specifically include the following steps:

[0064] Step 101, obtaining development requirements of the form.

[0065] Specifically, the development requirements of the form can be obtained by obtaining the requirements document for developing the form. The requirements document may include the main purpose of the form, functional requirements, design requirements, data processing and storage, etc. The functional requirements may include fields and inputs: list all required fields and their types (such as text, numbers, dates, selections, etc.) in detail; data validation: specify the data validation rules for each field, such as required items, format checks, length limits, etc.; user interaction: describe the way users interact with the form, including buttons, links, prompt information, etc.; special functions: if there are special functional requirements (such as file upload, map integration, payment processing, etc.), describe them in detail. Design requirements may include visual design: provide or describe the required visual elements, such as color schemes, font selection, icons and images, etc.; layout and responsiveness: describe the layout requirements of the form, and whether a responsive design is required to adapt to different devices. Data processing and storage may include data collection: describe how form data is collected, stored and processed; data security: if there is sensitive data, describe security measures, such as encryption, access control, etc.; data export and report: if there is a need, describe the data export format and the way to generate reports. Of course, the embodiment of the present invention does not limit the way to obtain the development requirements of the form.

[0066] Step 102: split the form development requirement 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, work can be allocated more efficiently and parallel development can be achieved, thereby improving development efficiency, making the code structure clear, and improving code maintainability and extensibility.

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

[0069] Specifically, after dividing the development requirements to obtain 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, which is not limited in this embodiment of the present invention.

[0070] The development of small form components can be achieved through native, existing packaged component libraries, low-code and other methods. Using native technology to develop small form components means directly using HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) and JavaScript to build components. JavaScript is a widely used programming language, mainly used for web page development to make web pages interactive. This method provides maximum flexibility and control, but it may take more time and effort to implement complex functions. Using existing packaged component libraries can greatly simplify the development process. These libraries provide a wealth of pre-built components and styles, which can quickly implement complex form functions. The low-code platform provides a visual development method to build applications by dragging and dropping components and configuring properties. This method can significantly reduce the coding workload and is suitable for rapid prototyping and scenarios with simpler business logic. The implementation method of small form component development can be set according to actual needs in actual applications, and the embodiments of the present invention do not limit this.

[0071] After developing the subform component according to the subform requirement, obtain the subform component corresponding to the subform requirement.

[0072] Step 104, obtaining the main form page.

[0073] Specifically, the components of the main form page are developed according to the development requirements. The development of the main form page components only needs to focus on the overall logical process, such as the overall form style design and data verification and submission, form data request in view or edit mode, and interactive processing when leaving the page with edited form data. The style design needs to ensure that the form layout is clear and consistent, and can be well displayed on different devices and screen sizes. CSS or style libraries can be used to unify the visual style of the form. Data verification can implement client and server data verification to ensure data integrity and validity. Submission processing can handle form submission events, perform data processing and submission. Form data request in view or edit mode can include loading form data from the server and filling it into form fields in view or edit mode to achieve smooth mode switching, so that when users switch between different modes, the form state and data can be consistent. Interactive processing when leaving the page with edited form data can include popping up a prompt box when the user tries to leave the page and there is unsaved edited data, reminding the user to save or abandon the changes, and providing temporary save or automatic save functions to prevent users from losing data during the editing process.

[0074] After developing the components of the main form page according to 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 directly operated.

[0077] Step 106, calling the preset integration component, passing the reference variable of the sub-form component to the preset integration component, and calling 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 sub-form component, the preset integration component is called, and the reference variable of the sub-form component is passed to the preset integration component, and the sub-form component is called on the main form page according to the reference variable of the sub-form component. Exemplarily, the preset integration component can be a custom useForm hook, and the form hook can receive a set of ref variables of all sub-form components. The form hook is used in the main form page, and a refs array is passed to the form hook. The refs array contains the ref variables of all sub-form components. The form hook receives the refs array containing the ref variables of all sub-form components. The form hook can call the sub-form component through the ref variable of the sub-form component on the main form page, thereby realizing the integration of the main form page and the sub-form component and obtaining 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. Vue 3 introduces the Composition API, which allows developers to organize code based on logical functions rather than options. In Vue 3, the Composition API is used to encapsulate the initialization and validation logic of the form. In this way, developers only need to focus on the style and specific business rules of the form without having to repeatedly write general form logic. In this way, the form logic can be reused and modularized, making the code more concise and easy to maintain.

[0080] After obtaining the main form page and sub-form components, the sub-form components are introduced into the main form page one by one for integration to obtain the form page. The form page is obtained by integrating the main form page and the sub-form components. Component-based development makes the code structure clearer, and each component has a clear function, which realizes the modularization of the code and enhances the readability and maintainability of the code. In addition, component-based development can independently develop each sub-form component, and can achieve parallel development, thereby improving development efficiency. Moreover, as the project requirements change, we only need to modify the logic of the corresponding sub-form component without changing the entire form. This flexibility makes the development process more efficient and reduces the possibility of errors.

[0081] The page processing method of the form of the embodiment of the present invention first obtains the development requirements of the form, then divides the development requirements to obtain multiple sub-form requirements, then obtains the sub-form components corresponding to the sub-form requirements, obtains the main form page, and finally creates a reference variable for the sub-form component, calls a preset integration component, and passes the reference variable of the sub-form component to the preset integration component, and calls the sub-form component on the main form page according to the reference variable of the sub-form component, thereby integrating the main form page and the sub-form component to obtain the page of the form. By dividing the development requirements to obtain multiple sub-form requirements, the form is split into multiple sub-form components, and the componentized development can make the code structure clearer and the sub-form component functions clear. By integrating the sub-form components corresponding to the sub-form requirements and the main form page, the form page is obtained, thereby realizing the modularization of the code and improving the readability and maintainability of the code.

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

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

[0084] When the form initialization method is called to initialize the form, the preset integration component is called to obtain the sub-form initialization method, and the data of the sub-form component is initialized by the sub-form initialization method;

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

[0086] Specifically, the form hook can receive the ref collection of all sub-form components and return key variables and methods. Among them, the methods returned by the form hook include the initForm method (initialization form method). The initialization form method is used to reset the state of the form and restore it to the initial value or default state. The form hook can be used to call the initialization form method to initialize the form.

[0087] The subform component includes an initialize subform method, which is used to reset the state of the subform and restore it to the initial value or default state. It can be called when the subform component is mounted to ensure that the subform data is set correctly.

[0088] When the form hook is used to call the initialization form method to initialize the form, the initialization form method calls the initialization sub-form method of the sub-form component, so that the initialization sub-form method of the sub-form component initializes the data of the sub-form component. After the data of the sub-form component is initialized, the data of the initialized sub-form component is integrated to obtain the data of the initialized form.

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

[0090] After obtaining the data input by the user on the page of the form, calling the preset integration component to obtain the form verification method of the form;

[0091] When calling the form verification method to verify the data of the form, calling the preset integration component to obtain the sub-form verification method of the sub-form component, and verifying the data of the sub-form component through the sub-form verification method;

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

[0093] Specifically, the methods returned by the form hook also include the validate method (form validation method), which usually traverses 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, which is used to check whether each field of the subform component meets specific validation rules and returns a Boolean value to indicate 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] The user can enter data on the form page and submit the data. After obtaining the data entered by the user on the form page and receiving the user's data submission request, the form hook is used to call the form verification method. The form verification method traverses all sub-form component reference variables in the sub-form component reference variable ref collection, and calls the sub-form verification method of the sub-form component, so that the sub-form verification method checks the validity of the data of the sub-form component and returns the verification result of the sub-form component data. The verification result of the sub-form component data includes a Boolean value of whether the data of the sub-form component is valid.

[0096] The form verification method calls the sub-form verification method of the sub-form component. After the data verification of the sub-form component is completed, the verification results of the data of the sub-form component are integrated to obtain the verification results of the form data.

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

[0098] When obtaining the data input by the user on the page of the form, calling the preset integration component 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 subform components are integrated to obtain the data of the form.

[0100] Specifically, the subform component includes a modelValue variable (bound value variable) for implementing two-way data binding. Implementing two-way data binding usually involves synchronizing the value of the form field with the state or property of the component. The bound value variable can be used to represent the data of the subform component. This variable can be a state variable or a value passed down from the parent component through an attribute. In the subform component, the subform component receives the bound value variable and the callback function. The bound value variable represents the initial value of the input box of the subform component. The callback function is used to notify the parent component that the value of the input box has changed. Reference the subform component in the form page and pass the bound value variable and the callback function.

[0101] In Vue 3, bound value variables are often used in custom form components (such as custom input boxes, selection boxes, etc.) to perform two-way data binding with the parent component. This variable is passed to the child component through the v-model directive. "v-model" is a directive in Vue.js that is used to create a two-way data binding between a form input element and a component. The child component can receive and use it through props. Props are mainly used for component value transmission. Custom Input Box Component: In CustomInput.vue, CustomInput.vue represents a custom Vue.js component that receives the modelValue variable through props and binds it to the value property of the input box. When the value of the input box changes, the parent component's data is updated through the $emit event. Parent Component: In the parent component, the username and password variables are bound to the custom input box component through the v-model directive to achieve 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. In this way, two-way data binding between the custom form component and the parent component can be achieved, making the management of form data more convenient and efficient.

[0102] The key variables returned by the form hook include form (object). The key variable form is an object used to store the values ​​of all sub-form components. The key of this object is usually the name or identifier of the form field, and the value is the current value of the corresponding field. In this way, the form object variable provides a centralized place to manage and access the data of the entire form. The form variable is an object with an initial value of empty. When the subcomponent is mounted, the form hook will initialize the form object according to the ref in the refs array (a collection of reference variables of the subform), and update the form object when the form field value changes. The form hook will return the form variable, which is the form data obtained after integrating the data of the sub-form components. In this way, the form variable provides a centralized place to manage and access the data of the entire form, making form processing more modular and easy to maintain.

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

[0104] When the user closes the page of the form, the preset integration component is called to obtain a state parameter, where the state parameter is used to indicate whether the form data has changed;

[0105] If the state parameter indicates that the data of the form has changed, a reminder message is sent to the user, where the reminder message is used to prompt the user that there are unsaved modifications.

[0106] Specifically, the key variables returned by the form hook also include the state parameter formIsChanged, which is a Boolean value used to indicate whether the form data has changed. This variable is usually used to control the enabled state of the form submit button, or to prompt the user to save changes when the user tries 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 can ensure that the submit button is enabled only when the form data changes.

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

[0109] In this way, the state parameter formIsChanged provides an easy way to track changes in form data and take appropriate actions when necessary.

[0110] In the embodiment of the present invention, the development requirements include functional requirements and typesetting requirements, and the form development requirements are split to obtain multiple sub-form requirements, including:

[0111] According to one of the functional requirement and the layout requirement, a plurality of sub-form requirements are generated.

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

[0113] There are too many items to fill in a simple form requirement. At this time, the form requirement segmentation is mainly to develop the form in blocks according to a certain number of items, so that the number of lines of code in a single file is controlled within a certain range, which will be easier to develop and maintain.

[0114] There is a modular distinction in the form requirements themselves. Taking a simple requirement as an example, the form needs to enter the knowledge information of a knowledge base. The knowledge information that needs to be maintained may include basic information, permission information, related item information, etc. The above types of information are divided into corresponding sub-forms for development, which makes the development logic clearer and the development efficiency higher; and sometimes there may be mutual constraints between different information forms. For example, there are two types of knowledge properties, public and private. When it is public, there is no need to fill in the permission information, but it is required when it is private. At this time, when the form is initialized, the forms of different information items can be initialized according to the newly created knowledge properties.

[0115] The form is embedded with other business module items. Continuing with the previous example, when a piece of information called knowledge classification needs to be maintained in the knowledge information, and when the knowledge classification is selected as the product manual, the submission of the current form needs to be reviewed, that is, in addition to filling in the knowledge form, it is also necessary to call the review function to submit the review form information. The review function is generally an independent function. It does not belong to the current knowledge module requirements, but is an external call. Therefore, when all forms in the system are developed with standard form input and output, even forms of external modules can also perform similar form data integration and verification.

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

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

[0118] A subform can actually be understood as an independent form requirement. Form fields generally have data rules defined by the requirements. The form initialization method is the method for initializing this independent form, and the form data verification method is the method for verifying this independent form. The subform can also be used alone, because the initialization and verification methods of the subform and form definition are the same. If there is a need to integrate multiple subforms, the form initialization method and form data verification method of the subform are called using the form hook. If there is a need for only a single small form, the form initialization method and form data verification method of the subform can be used normally.

[0119] The form hook is a logic integration module that simplifies the form development process by encapsulating the form's state management, data validation, submission processing and other logic. The advantages of the form hook include: Code reuse: Encapsulate the form-related logic in a custom Hook, which can be reused in multiple components to reduce duplicate code. Simplify components: Components using form hooks only need to focus on UI display and user interaction, and do not need to deal with complex form state management. Improve maintainability: Centralize the management of form logic to make the code easier to understand and maintain. Flexibility: UseFormhook can be extended and customized as needed to add custom validation rules, asynchronous operations, etc. The functions of the form hook include: State management: Manage the value and state of form fields, such as form objects and formIsChanged states. Data validation: Provide validation logic for form fields to ensure data integrity and validity. Submission processing: Handle form submission events, perform data processing and submission. Reset function: Provide methods to reset the form state, such as initForm. Mode switching: Support switching between view and edit modes, as well as corresponding data loading and saving logic.

[0120] The form hook receives a refs array, which contains the refs of all sub-form components. It returns the form object, formIsChanged status, and handleChange method, handleSubmit method, initForm method, and validate method. The handleChange method is called when the value of each sub-form component changes, and updates the form object and formIsChanged status. The handleSubmit method is used to handle form submission events, process and submit data, and the initForm method is used to reset the form status and restore it to the initial value or default state. Validate is used to implement form validation logic to ensure the integrity and validity of the data. In this way, the state and behavior of the form can be centrally managed, making the code more modular and easy to maintain.

[0121] By using form hooks to encapsulate the initialization, validation and other logic of the form, developers only need to focus on the form style and specific business rules without having to repeatedly write common form logic, which can improve development efficiency.

[0122] When the form is complex, we can split it into multiple small forms, which may be developed by different team members. Each small form is developed independently, and the logic is integrated by calling the encapsulated form hook. This not only improves development efficiency, but also component development makes the code structure clearer, each component has clear functions, and is easy to maintain and expand.

[0123] The small form component is independent and reusable, which is convenient for adjustment and optimization in different projects and can meet various business needs. Moreover, as the project requirements change, we only need to modify the logic of the corresponding small form without changing 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 described as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present invention are not limited by the order of the actions described, because according to the embodiments of the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

[0125] Reference Figure 2 , 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 requirement acquisition module 201 is used to acquire the development requirement of the form.

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

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

[0129] The main form page acquisition module 204 is used to acquire the main form page.

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

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

[0132] The invention embodiment of the form page processing device obtains the form development requirements, and then splits to obtain multiple sub-form requirements according to the form development requirements, then obtains the sub-form components corresponding to the sub-form requirements, obtains the main form page, and finally creates a reference variable for the sub-form component, calls the preset integration component, and passes the reference variable of the sub-form component to the preset integration component, and calls the sub-form component according to the reference variable of the sub-form component on the main form page, thereby integrating the main form page and the sub-form component to obtain the form page. By dividing the development requirements, multiple sub-form requirements are obtained, and the form is split into multiple sub-form components. The componentized development can make the code structure clearer and the sub-form component function clear. By integrating the sub-form components corresponding to the sub-form requirements and the main form page, the form page is obtained, thereby realizing the modularization of the code and improving the readability and maintainability of the code. The initialization, verification and other logics of the form are encapsulated by using the form hook. In this way, the developer only needs to pay attention to the style and specific business rules of the form, without having to repeatedly write the general form logic, which can improve the development efficiency. When the form is complex, we can split it into multiple small forms, which may be developed by different team members. Each small form is developed independently, and the logic is integrated by calling the encapsulated form hook. This not only improves development efficiency, but also component-based development makes the code structure clearer, each component has clear functions, and is easy to maintain and expand. The small form components are independent and reusable, which is convenient for adjustment and optimization in different projects and can meet various business needs. Moreover, as the project requirements change, we only need to modify the logic of the corresponding small form without changing the entire form. This flexibility makes the development process more efficient and reduces the possibility of errors.

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

[0134] An initialization form method acquisition module, used for calling the preset integration component to acquire the initialization form method of the form;

[0135] An initialization module, used for calling the preset integration component to obtain the initialization sub-form method when calling the initialization form method to initialize the form, and initializing the data of the sub-form component through the initialization sub-form method;

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

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

[0138] A form verification method acquisition module, used to call the preset integration component to obtain the form verification method of the form after obtaining the data input by the user on the page of the form;

[0139] A verification module, configured to call the preset integration component to obtain the sub-form verification method of the sub-form component when calling the form verification method to verify the data of the form, and verify the data of the sub-form component through the sub-form verification method;

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

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

[0142] A data acquisition module, used to call the preset integration component to acquire data corresponding to the binding value variable of the sub-form component when acquiring data input by the user on the page of the form, wherein the binding value variable is used to realize 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 an embodiment of the present invention, the device further includes:

[0145] A state parameter acquisition module, used for calling the preset integration component to acquire a state parameter when the user closes the page of the form, wherein the state parameter is 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 state parameter indicates that the data of the form has changed, and the reminder message is used to prompt the user that there are unsaved modifications.

[0147] In the embodiment of the present invention, the development requirements include functional requirements and layout requirements, and the subform requirement determination module further includes:

[0148] The sub-form requirement determination sub-module generates a plurality of sub-form requirements according to one of the functional requirement and the typesetting requirement.

[0149] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0150] An embodiment of the present 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 component corresponding to the sub-form requirement; obtain a main form page; create a reference variable for the sub-form component; call a preset integration component, and pass the 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.

[0151] An embodiment of the present invention further provides an electronic device, including:

[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, each process of the page processing method embodiment of the above-mentioned form is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0153] An embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the various processes of the above-mentioned form page processing method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

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

[0155] It will be appreciated by those skilled in the art that the embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the embodiments of the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the embodiments of the present invention may take the form of a computer program product 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 codes.

[0156] The embodiments of the present invention are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of the processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0157] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A 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 device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable terminal device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0159] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present invention.

[0160] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0161] The page processing method, device, system, electronic device and storage medium of a form provided by the present invention are introduced in detail above. Specific examples are used in this article to illustrate the principle and implementation mode of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation mode and application scope. In summary, the content of this specification should not be understood as limiting the present invention.

Claims

1. A page processing method of a form, characterized in that: The method comprises: Obtain form development requirements; According to the form development requirements, multiple sub-form requirements are obtained; Obtain the subform component corresponding to the subform requirement; Get the main form page; Create a reference variable for the subform component; The preset integration component is called, and the reference variable of the sub-form component is passed to the preset integration component, and the sub-form component is called on the main form page according to the reference variable of the sub-form component.

2. The method according to claim 1, characterized in that The method further comprises: Call the preset integration component to obtain the initialization form method of the form; When the form initialization method is called to initialize the form, the preset integration component is called to obtain the sub-form initialization method, and the data of the sub-form component is initialized by the sub-form initialization method; The data of the initialized sub-form components are integrated to obtain the data of the initialized form.

3. The method according to claim 1, characterized in that The method further comprises: After obtaining the data input by the user on the page of the form, calling the preset integration component to obtain the form verification method of the form; When calling the form verification method to verify the data of the form, calling the preset integration component to obtain the sub-form verification method of the sub-form component, and verifying the data of the sub-form component through the sub-form verification method; The verification results of the data of the sub-form components are integrated to obtain the verification results of the data of the form.

4. The method according to claim 1, characterized in that The method further comprises: When obtaining the data input by the user on the page of the form, calling the preset integration component 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 subform components are integrated to obtain the data of the form.

5. The method according to claim 1, characterized in that The method further comprises: When the user closes the page of the form, the preset integration component is called to obtain a state parameter, where the state parameter is used to indicate whether the form data has changed; If the state parameter indicates that the data of the form has changed, a reminder message is sent to the user, where the reminder message is used to prompt the user that there are unsaved modifications.

6. The method according to claim 1, characterized in that The development requirements include functional requirements and layout requirements. According to the form development requirements, multiple sub-form requirements are obtained by splitting, including: According to one of the functional requirement and the layout requirement, a plurality of sub-form requirements are generated.

7. A page processing device for a form, characterized in that: The device comprises: A development requirement acquisition module, used to acquire the development requirements of the form; A sub-form requirement determination module is used to split the form development requirements into multiple sub-form requirements; A subform component acquisition module, used to acquire the subform component corresponding to the subform requirement; Main form page acquisition module, used to obtain the main form page; A reference variable creation module, used for creating a reference variable for the subform component; The integration module is used to call the preset integration component, pass the reference variable of the sub-form component to the preset integration component, and call the sub-form component according to the reference variable of the sub-form component on the main form page.

8. 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 the 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.

9. 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 when the computer program is executed by the processor, the steps of the page processing method of the form as claimed in any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the page processing method of the form as claimed in any one of claims 1 to 6 are implemented.

Images