Data form generation method, device, equipment and storage medium
The method addresses inefficiencies in traditional form development by decomposing data structures into layers, integrating logical dependencies, and assembling components in a layered manner, enhancing efficiency and reusability.
Patent Information
- Application Number
- CN202210513750.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-05-12
- Publication Date
- 2025-07-15
- Estimated Expiration
- 2042-05-12
AI Technical Summary
In the face of the deep data structure level and complex linkage relationships, traditional front-end form development workload and low efficiency.
By splitting the data structure levels, determining the components at each level, and injecting linkage logic when needed, assemble components in hierarchical order and rendering and processing to form a target data form.
Improves form development efficiency, reduces complexity, and improves component reuse rate.
Smart Images

Figure CN114880304B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the technical field of form development, and particularly to a method, apparatus, device, and storage medium for generating data forms. Background Art
[0002] With the popularization of network applications and the increase in network users, the amount of data that needs to be processed is also increasing. Usually, data processing is generally implemented based on forms. For example, data entry, data display, etc. are implemented based on forms.
[0003] In traditional front-end form development, data entry is generally performed through form tools provided by existing component libraries. However, when using the form tools provided by component libraries for data entry, it is relatively weak in some complex scenarios (such as certain internal operation configuration platforms of some companies). The complexity of these scenarios is usually relatively high, the data structure level is relatively deep, and the linkage relationship is very complex. Developing forms using the form solutions provided by some existing component libraries is rather cumbersome, thus resulting in low form development efficiency. Summary of the Invention
[0004] In view of this, this application provides a method, apparatus, device, and storage medium for generating data forms, mainly aiming to solve the technical problems of large development workload and low work efficiency in traditional front-end form development when facing form solutions with relatively deep data structure levels and relatively complex linkage relationships.
[0005] According to one aspect of this application, a method for generating a data form is provided. The method includes:
[0006] Obtain the data structure of the target data form to be generated, where the data structure includes at least two data structure levels, and there is a hierarchical order between the at least two data structure levels;
[0007] Determine the first-level components corresponding to each of the data structure levels;
[0008] Judge whether there is a target data structure level including linkage logic in the at least two data structure levels. If so, inject the linkage logic into the first-level components under the target data structure level to obtain second-level components with a linkage relationship;
[0009] Assemble the first-level components and / or the second-level components according to the hierarchical order, and perform rendering processing on the assembled target form components to obtain the target data form.
[0010] Optionally, the first-level components include preset slots for creating mounting connections between the first-level components. The mounting connections are used to transfer the component data generated by the first-level components in the current data structure level to the previous data structure level. If it is determined that there is no target data structure level containing linkage logic in the at least two data structure levels, the method further includes:
[0011] Determine the component levels to which the respective first-level components belong according to the level order between the at least two data structure levels;
[0012] According to the order from low to high of the component levels, update each of the component levels to the current component level in turn, determine the previous component level of the current component level, and insert the first-level component corresponding to the current component level into the preset slot of the first-level component corresponding to the previous component level;
[0013] Repeat the above process until it is determined that the current component level corresponds to the highest component level, then complete the assembly of the first-level components in each of the component levels to obtain the target form component, and perform rendering processing on the target form component to obtain the target data form.
[0014] Optionally, if it is determined that there is a target data structure level containing linkage logic in the at least two data structure levels, inject the linkage logic into the first-level components under the target data structure level to obtain second-level components with a linkage relationship, including:
[0015] Write the linkage logic into a higher-order component, and use the higher-order component to wrap the first-level components under the target data structure level to obtain second-level components with a linkage relationship.
[0016] Optionally, assembling the first-level components and / or the second-level components according to the level order, and performing rendering processing on the assembled target form component to obtain the target data form, includes:
[0017] Determine the component levels to which the first-level components and / or the second-level components belong according to the level order of the at least two data structure levels;
[0018] Use a higher-order component to sequentially determine the first-level components or second-level components under each component level as the target level components under the current component level according to the order from low to high of the component levels, and pass the target level components into the first-level components or second-level components corresponding to the previous component level of the current component level to obtain updated target level components;
[0019] Repeat the above update process for the target hierarchical component until it is determined that the target hierarchical component is passed into the first-level component or the second-level component corresponding to the highest component level, and it is determined that the assembly of the first-level component or the second-level component in each component level is completed, obtaining the target form component;
[0020] By rendering the target form component, the target data form is obtained.
[0021] Optionally, the assembling the first-level component and / or the second-level component according to the hierarchical order and performing a rendering process on the assembled target form component to obtain the target data form includes:
[0022] According to the hierarchical order between the at least two data structure levels, input the hierarchical component parameters of each data structure level into the createForm function, and use the createForm function to generate a target form component based on the hierarchical component parameters of each data structure level, where the hierarchical component parameters include the component level, the first-level component or the second-level component corresponding to the component level;
[0023] By rendering the target form component, the target data form is obtained.
[0024] Optionally, the method further includes:
[0025] Real-time monitor the change situation of the value of each first-level component or second-level component in the target data form;
[0026] According to the linkage logic injected by the second-level component, adjust the values of other hierarchical components that have a linkage relationship with the second-level component whose value changes in real time.
[0027] Optionally, a first hook function is configured in the target form component, and the real-time monitoring of the change situation of the value of each first-level component or second-level component in the target data form includes:
[0028] Call the first hook function to monitor the change situation of the value of each first-level component or second-level component in the target data form in real time; or,
[0029] By using a listener to monitor the change of the tree node corresponding to the first-level component or the second-level component in a preset dictionary tree, determine the change situation of the value of the first-level component or the second-level component, where the preset dictionary tree is pre-generated according to the data structure of the target data form, and the tree nodes in the dictionary tree correspond to the first-level component or the second-level component.
[0030] Optionally, according to the linkage logic injected by the second-level component, the values of other-level components that have a linkage relationship with the second-level component whose value changes are adjusted in real time, including:
[0031] When it is monitored that the value of any second-level component changes, according to the linkage logic, determine other-level components that have a linkage relationship with the second-level component whose value changes and whose component level is lower than the corresponding component level of the second-level component;
[0032] Perform linkage adjustment on the values of the other-level components.
[0033] Optionally, a second hook function is configured in the target form component, and the method further includes:
[0034] Receive an incremental operation request sent by the user by calling the second hook function, where the incremental operation request carries the target operation component level;
[0035] In response to the incremental operation request, output a form operation object at the target operation component level, and perform incremental control on the form operation object according to the user operation.
[0036] According to another aspect of the present application, a data form generation device is provided, and the device includes:
[0037] An acquisition module, configured to acquire the data structure of the target data form to be generated, where the data structure includes at least two data structure levels, and there is a level order between the at least two data structure levels;
[0038] A determination module, configured to determine the first-level components corresponding to each of the data structure levels;
[0039] A judgment module, configured to judge whether there is a target data structure level including linkage logic in the at least two data structure levels. If so, inject the linkage logic into the first-level components under the target data structure level to obtain second-level components with a linkage relationship;
[0040] A first processing module, configured to assemble the first-level components and / or the second-level components according to the level order, and perform rendering processing on the assembled target form component to obtain the target data form.
[0041] Optionally, the first-level components include preset slots for creating mounting connections between the first-level components. The mounting connections are used to transmit the component data generated by the first-level components under the current data structure level to the previous data structure level. If it is determined that there is no target data structure level including linkage logic in the at least two data structure levels, and if the determination module determines that there is no target data structure level including linkage logic in the at least two data structure levels, the device further includes: a second processing unit;
[0042] The second processing unit is configured to determine the component levels to which the first-level components belong according to the level order between the at least two data structure levels; update each of the component levels to the current component level in ascending order of the component levels, determine the previous component level of the current component level, and insert the first-level component corresponding to the current component level into the preset slot of the first-level component corresponding to the previous component level; repeat the above process until it is determined that the current component level corresponds to the highest component level, then complete the assembly of the first-level components in each of the component levels to obtain a target form component, and perform rendering processing on the target form component to obtain the target data form.
[0043] Optionally, if it is determined that there is a target data structure level including linkage logic in the at least two data structure levels, the determination module is specifically configured to write the linkage logic into a higher-order component, and use the higher-order component to wrap the first-level components under the target data structure level to obtain second-level components with a linkage relationship.
[0044] Optionally, the first processing module includes: a first determination unit, a second determination unit, an assembly unit, and a rendering unit;
[0045] The first determination unit is configured to determine the component levels to which the first-level components and / or the second-level components belong according to the level order of the at least two data structure levels;
[0046] The second determination unit is configured to use a higher-order component to sequentially determine the first-level components or second-level components at each component level as the target-level components at the current component level in ascending order of the component levels, and pass the target-level components into the first-level components or second-level components corresponding to the previous component level of the current component level to obtain updated target-level components;
[0047] The assembled unit can be used to repeat the above process of updating the target hierarchical component until it is determined that the target hierarchical component is passed into the first-level component or the second-level component corresponding to the highest component level, and it is determined that the assembly of the first-level component or the second-level component in each component level is completed to obtain the target form component;
[0048] The rendering unit can be used to obtain the target data form by rendering the target form component.
[0049] Optionally, the first processing module further includes: an input module;
[0050] The input module can be used to input the hierarchical component parameters at each data structure level into the createForm function according to the hierarchical order between the at least two data structure levels, and use the createForm function to generate a target form component based on the hierarchical component parameters at each data structure level. The hierarchical component parameters include the component level, the first-level component or the second-level component corresponding to the component level;
[0051] The rendering unit can be used to obtain the target data form by rendering the target form component.
[0052] Optionally, the device further includes: a monitoring module and an adjustment module;
[0053] The monitoring module is used to monitor in real time the change situation of the value of each first-level component or second-level component in the target data form;
[0054] The adjustment module is used to adjust in real time the values of other hierarchical components that have a linkage relationship with the second-level component whose value changes according to the linkage logic injected by the second-level component.
[0055] Optionally, a first hook function is configured in the target form component. Specifically, the monitoring module is used to: call the first hook function to monitor in real time the change situation of the value of each first-level component or second-level component in the target data form; or, determine the change situation of the value of the first-level component or the second-level component by using a monitor to monitor the change of the tree node corresponding to the first-level component or the second-level component in a preset dictionary tree, where the preset dictionary tree is pre-generated according to the data structure of the target data form, and the tree nodes in the dictionary tree correspond to the first-level component or the second-level component.
[0056] Optionally, the adjustment module is specifically configured to: when it is monitored that the value of any second-level component changes, determine, according to the linkage logic, other-level components that have a linkage relationship with the second-level component whose value changes and whose component level is lower than the component level corresponding to the second-level component; and perform linkage adjustment on the values of the other-level components.
[0057] Optionally, a second hook function is configured in the target form component, and the device further includes: a receiving module and a control module;
[0058] The receiving module is configured to receive an incremental operation request sent by a user by invoking the second hook function, where the incremental operation request carries a target operation component level;
[0059] The control module is configured to, in response to the incremental operation request, output a form operation object at the target operation component level, and perform incremental control on the form operation object according to user operations.
[0060] According to another aspect of the present application, a storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the above data form generation method is implemented.
[0061] According to still another aspect of the present application, a computer device is provided, including a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, and when the processor executes the computer program, the above data form generation method is implemented.
[0062] By means of the above technical solutions, a data form generation method, device, equipment, and storage medium provided by the present application can, after obtaining the data structure of the target data form to be generated, split the data structure to obtain at least two data structure levels with a hierarchical order, and then determine the first-level components corresponding to each data structure level. After that, linkage logic injection is performed on the target data structure levels determined to have an inclusion linkage logic among the at least two data structure levels to obtain second-level components with a linkage relationship; finally, the first-level components and / or second-level components are assembled in hierarchical order, and the target form components generated by the assembly are rendered to obtain the target data form. Through the technical solutions in the present application, for form development with deep hierarchical nesting or complex linkage logic, the data form can be developed in a layered form. During development, only the structure and logic of a specific layer need to be concerned about, and the components of a certain layer can be developed independently without considering the relationships between layers. After the development of the components related to each layer is completed, a complete form is formed by assembling and combining each layer. In this way, no matter how many layers the actual structure has, the data structure faced each time is only one layer, and the complexity no longer exists, greatly improving the development efficiency. And decoupling the linkage logic from the component itself can greatly improve the reuse rate of the components.
[0063] The above description is only an overview of the technical solution of this application. In order to understand the technical means of this application more clearly, it can be implemented according to the content of the specification. And in order to make the above and other purposes, features and advantages of this application more obvious and understandable, the following specific embodiments of this application are specifically exemplified. BRIEF DESCRIPTION OF THE DRAWINGS
[0064] The drawings described herein are used to provide a further understanding of this application and form a part of this application. The illustrative embodiments of this application and their descriptions are used to explain this application and do not constitute an improper limitation of this local application. In the drawings:
[0065] Figure 1 A flowchart showing a method for generating a data form provided by an embodiment of this application is shown;
[0066] Figure 2 A flowchart showing another method for generating a data form provided by an embodiment of this application is shown;
[0067] Figure 3 A flowchart showing yet another method for generating a data form provided by an embodiment of this application is shown;
[0068] Figure 4 An example diagram showing a data form generation provided by an embodiment of this application is shown;
[0069] Figure 5 A structural diagram showing a data form generation device provided by an embodiment of this application is shown;
[0070] Figure 6 A structural diagram showing another data form generation device provided by an embodiment of this application is shown;
[0071] Figure 7 A schematic diagram of the physical structure of a computer device provided by an embodiment of this invention is shown. DETAILED DESCRIPTION OF THE EMBODIMENTS
[0072] The following will describe this application in detail with reference to the drawings and in combination with the embodiments. It should be noted that, without conflict, the embodiments in this application and the features in the embodiments can be combined with each other.
[0073] Aiming at the technical problems of large development workload and low work efficiency in traditional front-end form development when facing form solutions with deep data structure levels and complex linkage relationships, this application provides a method for generating a data form, as Figure 1 shown, the method includes:
[0074] 101. Obtain a data structure of a target data form to be generated, wherein the data structure includes at least two data structure levels, and there is a hierarchical order between the at least two data structure levels.
[0075] Among them, the target data form is a common data entry method for the front-end page (such as a web page, APP), which may include a form with a simple data structure (such as entering a user name and password when logging in), or a form with a complex data structure having more data entry items, a more complex data structure, and more data associations (also known as linkage relationships). The technical solution in this application is intended to enable the rapid generation of simple forms, while also enabling rapid generation for complex forms, thereby ensuring the development efficiency of complex forms. For data structures, for example, in the login scenario, the data structure is {user name, password, verification code}, which corresponds to a single-layer structure and a relatively simple data structure; for other scenarios, such as resumes, the data structure is relatively complex, and the data structure may be {name, phone number, project experience [project 1, project 2, project 3…], work experience [experience 1, experience 2, experience 3…], …}, as can be seen, at this time it is a double-layer structure; in more complex application scenarios, the data structure may also correspond to a data structure of more than two layers. For this application, it is preferred to generate a data form based on a data structure comprising at least two data structure levels (of course, the same applies to a data structure comprising one data structure level). Among them, for the data structure level, illustratively, when a list (array) appears in the data structure, it is first called the first layer. If a list appears in the list, it is the second layer, and so on.
[0076] The execution subject of the present application can be a data form generation system, which can be configured on the client side or the server side. After obtaining the data structure of the target data form to be generated, it can split the data structure to obtain at least two data structure levels with a hierarchical order, and then determine the first-level components corresponding to each data structure level. After that, the linkage logic is injected into the target data structure level containing the linkage logic in the at least two data structure levels to obtain the second-level components with the linkage relationship; finally, the first-level components and / or the second-level components are assembled in the hierarchical order, and the assembled target form components are rendered to obtain the target data form.
[0077] 102. Determine the first-level components corresponding to each data structure level.
[0078] Among them, a component can represent a view in a page and some related functions. For example, a login box can be a component that has the view and ability to enter a username and password, and also has the ability to call the backend interface after clicking login. Specifically, the component granularity is defined by the developer according to the actual application scenario, and is not specifically limited here.
[0079] In a specific application scenario, after obtaining the data structure of the target data form to be generated, the data structure can be split at the data structure level to obtain at least two data structure levels. Correspondingly, for this embodiment, corresponding first-level components can be screened for each data structure level. The first-level components refer to components that can implement the form functions at the corresponding data structure level. If there is a large amount of data corresponding to a certain data structure level, this level can also be split into several hierarchical sub-components, but the last few hierarchical sub-components must form a first-level component to represent the data structure of this level. Among them, when determining the first-level components corresponding to each data structure level, to achieve the reuse of hierarchical components, the data types corresponding to each data structure level can be determined first, and then at least two sub-components or a complete component matching the data type can be screened from the preset component library. Further, the combined component corresponding to the at least two sub-components or the complete component is determined as the first-level component corresponding to the data structure level; if no sub-components and complete components matching the data type are screened in the preset component library, the corresponding first-level component needs to be developed for this data structure level. After completion of the development, the developed first-level component can be updated and stored in the preset component library according to the data type corresponding to the data structure level for subsequent reuse of the component.
[0080] 103. Determine whether there is a target data structure level containing linkage logic among at least two data structure levels. If so, inject the linkage logic into the first-level components under the target data structure level to obtain second-level components with a linkage relationship.
[0081] Among them, for the linkage logic, by way of example, when modifying a password, there is generally a new password input box and a re-confirm password input box. The content in the second input box must be the same as the content in the first input box to pass the verification. Obviously, the content of these two input boxes is in an associated relationship, and this associated relationship corresponds to the linkage logic. In a specific application scenario, the linkage logic can include multiple types, such as data-to-data linkage (the above example is), data-to-view linkage (data change causes view change), view-to-data linkage (view change causes data change), and so on. The second-level component is an incremental component after adding the linkage logic on the basis of the first-level component. In this application, by decoupling the linkage logic and the component itself, the first-level component can be updated secondarily according to the required linkage relationship during specific application, while meeting the personalized needs of users and improving the reuse rate of the original component.
[0082] In a specific application scenario, if it is determined that there is no target data structure level containing linkage logic among at least two data structure levels, it indicates that the target data form to be generated is a form with a relatively simple data structure. At this time, the following steps 203 to 205 of the embodiment can be further executed. By assembling the first-level components corresponding to each data structure level, the target form component is obtained, and the target form component is rendered to obtain the target data form. If it is determined that there is a target data structure level containing linkage logic among at least two data structure levels, that is, the target data form to be generated is a form with a relatively complex data structure, then the following step 103 of this embodiment and the subsequent step 104 of the embodiment can be further executed to obtain the target data form. As an extended content, if it is determined that there is a target data structure level containing linkage logic among at least two data structure levels, the following steps 303 to 306a of the embodiment, or steps 303 to 304b of the embodiment can also be further executed. By assembling the first-level components and the second-level components, or assembling the second-level components, and rendering the generated target form component, the target data form is obtained.
[0083] 104. Assemble the first-level components and / or the second-level components in the hierarchical order, and render the generated target form component to obtain the target data form.
[0084] For this embodiment, continuing from the content in the above embodiment, when assembling the first-level components and / or the second-level components to obtain the target form component, it may specifically include the following three preferred implementation scenarios: First, when it is determined that there is no target data structure level containing linkage logic among at least two data structure levels, no injection of linkage logic is required. At this time, the first-level components can be directly assembled in the hierarchical order to obtain the target form component. Second, when it is determined that there are some target data structure levels containing linkage logic among at least two data structure levels, it means that some first-level components need to be incrementally injected with linkage logic. In this way, each data structure level can correspond to a first-level component or a second-level component. Further, the first-level components and the second-level components in all data structure levels can be assembled in the hierarchical order to obtain the target form component. Third, when it is determined that all of the at least two data structure levels are target data structure levels containing linkage logic, that is, each first-level component needs to be incrementally injected with linkage logic. In this way, each data structure level corresponds to a second-level component. Further, the second-level components can be assembled in the hierarchical order to obtain the target form component.
[0085] Through the data form generation method in this embodiment, after obtaining the data structure of the target data form to be generated, the data structure can be split to obtain at least two data structure levels with a hierarchical order, and then the first-level components corresponding to each data structure level can be determined. After that, linkage logic injection is performed on the target data structure levels determined to have inclusion linkage logic among the at least two data structure levels to obtain second-level components with a linkage relationship; finally, the first-level components and / or the second-level components are assembled in the hierarchical order, and the target form components generated by the assembly are rendered to obtain the target data form. Through the technical solution in this application, for form development with deep hierarchical nesting or complex linkage logic, the data form can be developed in a layered form. During development, only the structure and logic of a specific layer need to be concerned about, and the components of a specific layer can be developed independently without considering the relationships between the layers. After the development of the components related to each layer is completed, a complete form is formed by assembling the layers. In this way, no matter how many layers the actual structure has, the data structure faced during each development is only one layer, and the complexity is eliminated, greatly improving the development efficiency. And decoupling the linkage logic from the component itself can greatly improve the reuse rate of the components.
[0086] Further, as a refinement and extension of the specific implementation manner of the above embodiment, in order to fully illustrate the specific implementation process in this embodiment, another processing method for resource sharing is provided, as Figure 2 shown. This method includes:
[0087] 201. Obtain the data structure of the target data form to be generated, where the data structure includes at least two data structure levels, and there is a hierarchical order between the at least two data structure levels.
[0088] For a multi-layer data structure, in the existing technical implementation solutions, mainly the ability of the existing component library is directly used to generate the data form. This will result in the need to write a large amount of additional code, which is not intuitive to understand, and may also lead to a low reuse rate of components. The multi-layer data structure will bring additional complexity, and this complexity is a thorny problem in the traditional solution. The deeper the layer, the bigger the problem, and there is no very good solution. In view of this, for this embodiment, after obtaining the data structure of the target data form to be generated, the data structure can be split to obtain at least two data structure levels with a hierarchical order. Through the layered development method of splitting the data structure, only the structure and logic of a specific layer need to be concerned about during development, and the components of a specific layer can be developed independently without considering the relationships between the layers. After the development of the components related to each layer is completed, a complete form is formed by assembling them. In this way, no matter how many layers the actual structure has, the data structure faced during each development is only one layer, which can eliminate the complexity brought by the multi-layer data structure and greatly improve the development efficiency.
[0089] 202. Determine the first-level components corresponding to each data structure level.
[0090] For this embodiment, for the specific implementation process of determining the first-level components corresponding to each data structure level, reference can be made to the description in step 102 of the embodiment, which will not be elaborated here.
[0091] 203. If it is determined that there is no target data structure level containing linkage logic among at least two data structure levels, then according to the hierarchical order among the at least two data structure levels, determine the component levels to which each first-level component belongs.
[0092] As Figure 4 shown, the data structure is hierarchically split to obtain five data structure levels, and the five data structure levels are, from high to low in hierarchical order: the first level, the second level, the third level, the fourth level, and the fifth level; further, according to the hierarchical order among the data structure levels, the component levels to which each first-level component belongs are, from high to low: the first component level N1, the second component level N2, the third component level N3, the fourth component level N4, and the fifth component level N5, that is, the first-level component n1 in the first component level N1 nests all the content of the first-level component n2 in the second component level N2, and the first-level component n1 can control the first-level component n2; the first-level component n2 in the second component level N2 nests all the content of the first-level component n3 in the third component level N3, and the first-level component n2 can control the first-level component n3; the first-level component n3 in the third component level N3 nests all the content of the first-level component n4 in the fourth component level N4, and the first-level component n3 can control the first-level component n4; the first-level component n4 in the fourth component level N4 nests all the content of the first-level component n5 in the fifth component level N5, and the first-level component n4 can control the first-level component n5.
[0093] 204. According to the order from low to high of the component levels, update each component level to the current component level in turn, determine the previous component level of the current component level, and insert the first-level component corresponding to the current component level into the preset slot of the first-level component corresponding to the previous component level.
[0094] In a specific application scenario, preset slots can be configured in the first-level components. The preset slots are used to create mounting connections between the first-level components. The mounting connections are used to transfer the component data generated by the first-level components under the current data structure level to the previous data structure level. In a specific application scenario, a fixed position is reserved in each first-level component for inserting the next-level component, and the next-level component is passed into the previous-level component as a variable. In this way, each level of component does not know what the structure of the lower level is, but there is one or more preset slots where the next-level component can be inserted, and the specific data structure of the lower level is the responsibility of the next-level component. In this way, each level of component is decoupled from other levels of components and can be reused anywhere else. For this embodiment, when inserting the first-level component corresponding to the current component level into the preset slot of the first-level component corresponding to the previous component level, the position where the next-level component is inserted can be wrapped with another component FormAccess provided by this solution. FormAccess is used to provide a mounting point for the lower-level data structure. For example, if the FormAccess component is given an attribute name = "address", the data generated by the next-level component will be mounted under the address field of the current-level data.
[0095] 205. Repeat the above process until it is determined that the current component level corresponds to the highest component level. Then, the assembly of the first-level components in each component level is completed to obtain the target form component, and the target form component is rendered to obtain the target data form.
[0096] For example, taking the example of step 203 of the embodiment, for steps 204 and 205 of the embodiment, in the order from the lowest to the highest component level, first update the fifth component level N5 to the current component level, determine the fourth component level N4 as the previous component level of the fifth component level N5, and insert the first-level component n5 corresponding to the fifth component level N5 into the preset slot of the first-level component n4 corresponding to the previous component level; after the above component insertion is completed, further update the fourth component level N4 to the current component level, determine the third component level N3 as the previous component level of the fourth component level N4, and insert the first-level component n4 corresponding to the fourth component level N4 into the preset slot of the first-level component n3 corresponding to the previous component level; after the above component insertion is completed, further update the third component level N3 to the current component level, determine the second component level N2 as the previous component level of the third component level N3, and insert the first-level component n3 corresponding to the third component level N3 into the preset slot of the first-level component n2 corresponding to the previous component level; after the above component insertion is completed, further update the second component level N2 to the current component level, determine the first component level N1 as the previous component level of the second component level N2, and insert the first-level component n2 corresponding to the second component level N2 into the preset slot of the first-level component n1 corresponding to the previous component level; after the above component insertion is completed, further update the first component level N1 to the current component level. Since the first component level N1 has no previous component level, that is, the current component level corresponds to the highest component level, it can be determined at this time that the assembly of the first-level components in each component level is completed to obtain the target form component. Further, by performing a rendering process on the target form component, the target data form can be obtained.
[0097] Further, as a refinement and extension of the specific implementation manner of the above embodiment, in order to fully illustrate the specific implementation process in this embodiment, another processing method for resource sharing is provided, as Figure 3 shown. This method includes:
[0098] 301. Obtain the data structure of the target data form to be generated. The data structure includes at least two data structure levels, and there is a hierarchical order between the at least two data structure levels.
[0099] 302. Determine the first-level components corresponding to each data structure level.
[0100] For this embodiment, the specific implementation process of determining the first-level components corresponding to each data structure level can refer to the description in step 102 of the embodiment, which will not be elaborated here.
[0101] 303. If it is determined that there is a target data structure level containing linkage logic among at least two data structure levels, write the linkage logic into a higher-order component, and use the higher-order component to wrap the first-level components under the target data structure level to obtain second-level components with a linkage relationship.
[0102] Among them, a higher-order component (Higher Order Component, HOC) is a function that receives a component and then returns a new component, that is, wraps one component with another component to obtain a new component.
[0103] For this embodiment, the target data structure level containing the linkage logic can be extracted from at least two data structure levels, and further write each linkage logic into a higher-order component, complete this logic in the higher-order component, and then use this higher-order component to wrap the first-level components under the target data structure level to obtain the second-level components under the target data structure level. It should be noted that when injecting the linkage logic into the first-level components using the higher-order component, it is best to write the linkage logic of each data structure level separately and then wrap them outside the first-level components of each data structure level respectively. This is beneficial for reuse and convenient for positioning when problems need to be troubleshot.
[0104] 304a. Determine the component level to which the first-level components and / or the second-level components belong according to the hierarchical order of at least two data structure levels.
[0105] Such as Figure 4As shown, the data structure is hierarchically split to obtain five data structure levels, and the five data structure levels are, from highest to lowest in hierarchical order: the first level, the second level, the third level, the fourth level, and the fifth level; if it is determined based on step 303 of the embodiment that the target data structure levels containing linkage logic are the second level and the fourth level, that is, when determining the corresponding hierarchical components for each data structure level, the first level, the third level, and the fifth level can correspond to the first hierarchical components without a linkage relationship, and the second level and the fourth level can correspond to the second hierarchical components with a linkage relationship. For this embodiment, the component levels to which each of the first hierarchical components and / or the second hierarchical components belong can be further determined in the hierarchical order between the data structure levels, from highest to lowest: the first component level N1, the second component level N2, the third component level N3, the fourth component level N4, and the fifth component level N5. That is, the first hierarchical component n1 in the first component level N1 nests all the content of the second hierarchical component n2 in the second component level N2, and the first hierarchical component n1 can control the second hierarchical component n2; the second hierarchical component n2 in the second component level N2 nests all the content of the first hierarchical component n3 in the third component level N3, and the second hierarchical component n2 can control the first hierarchical component n3; the first hierarchical component n3 in the third component level N3 nests all the content of the second hierarchical component n4 in the fourth component level N4, and the first hierarchical component n3 can control the second hierarchical component n4; the second hierarchical component n4 in the fourth component level N4 nests all the content of the first hierarchical component n5 in the fifth component level N5, and the second hierarchical component n4 can control the first hierarchical component n5.
[0106] 305a. Use high-order components to sequentially determine the target hierarchical components at each component level as the target hierarchical components at the current component level in the order from lowest to highest component level, and pass the target hierarchical components into the first hierarchical component or the second hierarchical component at the previous component level corresponding to the current component level to obtain the updated target hierarchical components.
[0107] 306a. Repeat the above update process for the target hierarchical components until it is determined that the target hierarchical components are passed into the first hierarchical component or the second hierarchical component corresponding to the highest component level, determine that the assembly of the first hierarchical components or the second hierarchical components in each component level is completed, obtain the target form component, and obtain the target data form by rendering the target form component.
[0108] For example, taking the example of step 304a of the embodiment, for steps 305a and 306a of the embodiment, in the order from the lowest to the highest component level, first update the fifth component level N5 to the current component level, determine the fourth component level N4 as the previous component level of the fifth component level N5, and determine the first-level component n5 corresponding to the fifth component level N5 as the target-level component. Further, pass the target-level component into the second-level component n4 corresponding to the fourth component level N4 to obtain the updated target-level component; then update the fourth component level N4 to the current component level, determine the third component level N3 as the previous component level of the fourth component level N4, and pass the updated target-level component in the fourth component level N4 into the first-level component n3 corresponding to the third component level N3 to obtain the target-level component updated again; then update the third component level N3 to the current component level, determine the second component level N2 as the previous component level of the third component level N3, and pass the updated target-level component in the third component level N3 into the second-level component n2 corresponding to the second component level N2 to obtain the target-level component updated once again; finally, update the second component level N2 to the current component level, determine the first component level N1 as the previous component level of the second component level N2, and pass the updated target-level component in the second component level N2 into the first-level component n1 corresponding to the first component level N1 to obtain the target-level component updated again. Since the first component level N1 has no previous component level, that is, the current component level corresponds to the highest component level, it can be determined at this time that the target-level component has been passed into the first-level component or the second-level component corresponding to the highest component level. Further, determine the finally updated target-level component as the target form component, and further, by performing a rendering process on the target form component, the target data form can be obtained.
[0109] For the embodiment step 304b corresponding to the embodiment step 304a, input the hierarchical component parameters at each data structure level into the createForm function in the hierarchical order between at least two data structure levels. Use the createForm function to generate the target form component according to the hierarchical component parameters at each data structure level. The hierarchical component parameters include the component level, the first-level component or the second-level component corresponding to the component level, and the hierarchical dependency of the component. By rendering the target form component, the target data form is obtained.
[0110] After determining that there is a target data structure level containing linkage logic among at least two data structure levels, and after injecting the linkage logic into the first-level components under the target data structure level using high-order components in step 303 of the embodiment to obtain the second-level components with a linkage relationship, when assembling the first-level components and the second-level components using the methods described in steps 304a to 306a of the embodiment, the method is relatively complex. In view of this, the createForm function can be used to generate a quick entry for component assembly. Specifically, each component level, the corresponding first-level component or second-level component can be directly input into the createForm function in the hierarchical order, and the createForm function will directly output the assembled target form component. Through the createForm function, it is very convenient and fast to perform hierarchical component combination and linkage logic injection.
[0111] Such as Figure 4As shown, the data structure is hierarchically split to obtain five data structure levels, and the five data structure levels are, from highest to lowest in hierarchical order: the first level, the second level, the third level, the fourth level, and the fifth level. If it is determined based on step 303 of the embodiment that the target data structure levels containing linkage logic are the second level and the fourth level, that is, when determining the corresponding hierarchical components for each data structure level, the first level, the third level, and the fifth level can correspond to the first hierarchical components without linkage relationships, and the second level and the fourth level can correspond to the second hierarchical components with linkage relationships. For this embodiment, further, according to the hierarchical order between the data structure levels, the component levels to which the respective first hierarchical components and / or second hierarchical components belong are, from highest to lowest: the first component level N1, the second component level N2, the third component level N3, the fourth component level N4, and the fifth component level N5. Further, the hierarchical component parameters of each data structure level can be sequentially input into the create form function, including: the fifth component level N5, the first hierarchical component n5 corresponding to the fifth component level N5; the fourth component level N4, the second hierarchical component n4 corresponding to the fourth component level N4 (with a linkage relationship); the third component level N3, the first hierarchical component n3 corresponding to the third component level N3; the second hierarchical component n2 corresponding to the second component level N2 (with a linkage relationship); the first hierarchical component n1 corresponding to the first component level N1. It should be noted that when inputting the hierarchical component parameters of each data structure level into the create form function, the hierarchical order of the respective first hierarchical components and / or second hierarchical components from lowest to highest can also be followed, and it can be specifically determined according to the actual application scenario, and no specific limitation is made here. Among them, the hierarchical order is used to represent the hierarchical dependency relationship between hierarchical components, that is, the fifth level depends on the fourth level, the fourth level depends on the third level, the third level depends on the second level, and the second level depends on the first level. As an alternative, when inputting the hierarchical component parameters of each data structure level into the createForm function, the hierarchical order can also not be followed, and a parameter of hierarchical dependency relationship can be added to the hierarchical component parameters, that is, at this time, the hierarchical component parameters include each component level, the first hierarchical component or the second hierarchical component corresponding to each component level, and the hierarchical dependency relationship of each component level.
[0112] In a specific application scenario, to enable dynamic linkage application of the target data form after generating the target data form, as a preferred method, the steps of the embodiment can specifically further include: real-time monitoring of the value change situation of each first hierarchical component or second hierarchical component in the target data form; and based on the linkage logic injected by the second hierarchical component, adjusting in real time the values of other hierarchical components that have a linkage relationship with the second hierarchical component whose value has changed.
[0113] Correspondingly, a first hook function (such as react hooks useFieldsChange and useFieldsValue) is configured in the target form component. When monitoring the value changes of each first-level component or second-level component in the target data form in real time, the steps of the embodiment may specifically further include: calling the first hook function to monitor the value changes of each first-level component or second-level component in the target data form in real time; or, determining the value changes of the first-level component or second-level component by using a listener to monitor the changes of the tree nodes corresponding to the first-level component or second-level component in the preset trie tree, where the preset trie tree is pre-generated according to the data structure of the target data form, and the tree nodes in the trie tree correspond to the first-level component or second-level component.
[0114] Among them, the change monitoring based on the trie tree automatically generates a trie tree that can represent the form structure (which can also be said to be the data structure) written by the developer. For example: a data structure is {name: string, address: {country: string, street: string}}, then a corresponding trie tree {name: watchers[], address: {children: {country: watchers[], street: watchers[]}}} will be automatically generated. Watchers is one or more watchers that monitor changes. When the country changes, we get the change path ["address", "country"], so that we can find the corresponding tree node along the trie tree, take out watchers[], and this search process is very fast because we already have the target path. Finally, call the method of the watcher instance to notify the listener watcher.
[0115] The traditional solution is that when the form content changes, it is broadcast to each component, and each component determines what to do by itself. However, as the form scale grows, this method will inevitably consume more performance. That is, the time complexity of a single broadcast is O(n), where n represents the form scale. The form content change monitoring based on the trie tree provided in this application is not a broadcast but more like a search tree. In this way, the processing time of each change has nothing to do with the form scale and only depends on the height of the tree. However, in actual situations, the form cannot have too many levels. According to historical development experience, the maximum is no more than 6 levels. It is also very complicated for operators to operate more than 6 levels. Therefore, in product design, too many levels of forms will be avoided as much as possible. That is, it can be considered that the height of the tree is limited, and it can also be considered that the time complexity of each change processing is O(1), which is one order of magnitude lower than O(n).
[0116] Correspondingly, when adjusting the values of other-level components that have a linkage relationship with the second-level components whose values change in real time according to the linkage logic injected by the second-level components, the specific steps of the embodiment may include: when it is monitored that the value of any second-level component changes, determine, according to the linkage logic, other-level components that have a linkage relationship with the second-level component whose value changes and whose component levels are lower than the corresponding component level of the second-level component; perform linkage adjustment on the values of other-level components.
[0117] For example, there is a linkage relationship among the second-level component n1, the second-level component n2, and the second-level component n4. When it is monitored that the value of the second-level component n2 changes, determine, according to the linkage logic, other-level components that have a linkage relationship with the second-level component whose value changes and whose component levels are lower than the corresponding component level of the second-level component n2, which is the second-level component n4. Since the component level of the second-level component n2 is higher than that of the second-level component n4, when the value of the second-level component n2 changes, the value of the second-level component n4 can be further adjusted in a linked manner. For example, if the data content corresponding to the second-level component n2 is "city" and the data content corresponding to the second-level component n4 is "school list", when the value of the second-level component n2 is updated from city C to city D, the value of the second-level component n4 should also be updated in a linked manner to the school list corresponding to city D.
[0118] In a specific application scenario, to handle complex linkage logic, the traditional solution often listens for changes inside the form at the outermost layer of the form and performs corresponding actions based on these changes. This solution has many problems. First, when listening and processing logic at the outermost layer, the control over the underlying components is relatively weak, and a lot of additional code needs to be written to control them. Second, this method can only listen for data changes, but cannot listen for changes such as user button click events. If it is to be implemented, additional code needs to be written. Third, in a form with a multi-layer data structure, it is troublesome to accurately know which layer has changed, and a lot of judgment code needs to be written. Also, in the traditional solution, if a developer wants to change the form data, there is only one way, which is to use a tool provided by antd. For example, by calling form.setFieldsValue({...}), the data in the form can be changed. However, this method has many drawbacks when dealing with a form with a multi-layer data structure. First, for example, if you want to change a piece of data at a relatively low level in the data structure, then you need to completely copy the entire data, then modify a piece of data at the lower level, and finally call form.setFieldsValue({complete data}) to make the modification. It can be seen that the cost of changing a small place is very high. Second, after changing the data as above, the entire component tree will be updated once, and the performance is very poor.
[0119] In view of this, in the present application, a second hook function (such as the react hook useLocalForm) is further configured in the target form component. When operating on the form (such as obtaining or setting the values of the form), by calling the react hook useLocalForm, a form operation object can be obtained. Most conveniently, the operation object corresponding to the data structure of the corresponding layer can be obtained at which layer it is called. Therefore, when operating on a certain layer of data, there is no need to consider what the data of other layers looks like, just consider this layer. The same is true for listening to data changes. By calling the first hook functions (such as the react hooks useFieldsChange and useFieldsValue) in the target form component, the changes of the data of this layer (or across layers) can be listened to, and the linkage logic can be completed when the data changes. Through the technical solution in the present application, aiming at the technical problems of the above traditional solution, the present application can simplify the difficulty of form data operation. Specifically, an incremental operation can be realized. For example, for a three-layer data structure, a form controller that can only operate on the data of the third layer can be obtained through the tool (react hook useLocalForm) provided by this solution. All such operations start from the third layer without copying the complete data. In addition, the extraction of the linkage logic can also be realized. The means provided by the traditional solution for listening to data changes are few and very rigid. On the premise of eliminating the increase in complexity brought by the multi-layer data structure, this solution provides two react hooks, useFieldsChange and useFieldsValue, which can be used in combination with the data structure levels. For example, for a three-layer data structure, when developing the third layer, this tool can be used to listen to the data changes related to the third layer, and these listening and related processing logics can be isolated from the third-layer components, which means that the linkage logic and the component itself are decoupled, greatly improving the reuse rate.
[0120] Correspondingly, in order to implement the incremental adjustment of the target data form, the steps of the embodiment may further specifically include: receiving an incremental operation request sent by the user by calling the second hook function, where the incremental operation request carries the target operation component level; in response to the incremental operation request, outputting a form operation object at the target operation component level, and performing incremental control on the form operation object according to the user operation.
[0121] By the above data form generation method, after obtaining the data structure of the target data form to be generated, the data structure can be split to obtain at least two data structure levels with a hierarchical order, and then the first-level components corresponding to each data structure level can be determined. After that, for the target data structure level determined to contain linkage logic among at least two data structure levels, linkage logic injection is performed to obtain second-level components with a linkage relationship. Finally, the first-level components and / or the second-level components are assembled in the hierarchical order, and the target form components generated by the assembly are rendered to obtain the target data form. Through the technical solution in this application, for form development with deep hierarchical nesting or complex linkage logic, the data form can be developed in a layered form. During development, only the structure and logic of a specific layer need to be concerned about, and the components of a certain layer can be developed independently without considering the relationship between layers. After the development of the components related to each layer is completed, a complete form is formed by assembling and combining each layer. In this way, no matter how many layers the actual structure has, the data structure faced each time is only one layer, and the complexity no longer exists, greatly improving the development efficiency. And decoupling the linkage logic from the component itself can greatly improve the reuse rate of the components.
[0122] Further, as Figure 1 and Figure 2 a specific implementation of the method shown, an embodiment of this application provides a data form generation device, as Figure 5 shown. The device includes: an acquisition module 41, a determination module 42, a judgment module 43, and a first processing module 44;
[0123] The acquisition module 41 is configured to acquire the data structure of the target data form to be generated. The data structure includes at least two data structure levels, and there is a hierarchical order between the at least two data structure levels;
[0124] The determination module 42 is configured to determine the first-level components corresponding to each data structure level;
[0125] The judgment module 43 is configured to judge whether there is a target data structure level containing linkage logic among at least two data structure levels. If so, inject the linkage logic into the first-level components under the target data structure level to obtain second-level components with a linkage relationship;
[0126] The first processing module 44 is configured to assemble the first-level components and / or the second-level components in the hierarchical order, and perform rendering processing on the target form components generated by the assembly to obtain the target data form.
[0127] In a specific application scenario, the first-level components include preset slots. The preset slots are used to create mounting connections between the first-level components. The mounting connections are used to transfer the component data generated by the first-level components under the current data structure level to the previous data structure level. If it is determined that there is no target data structure level containing linkage logic in at least two data structure levels, and if the determination module determines that there is no target data structure level containing linkage logic in at least two data structure levels, as Figure 6 shown, the apparatus further includes: a second processing module 45;
[0128] The second processing module 45 can be used to determine the component levels to which each first-level component belongs according to the hierarchical order between at least two data structure levels; update each component level to the current component level in ascending order of the component levels, determine the previous component level of the current component level, and insert the first-level component corresponding to the current component level into the preset slot of the first-level component corresponding to the previous component level; repeat the above process until it is determined that the current component level corresponds to the highest component level, then complete the assembly of the first-level components in each component level to obtain the target form component, and perform rendering processing on the target form component to obtain the target data form.
[0129] In a specific application scenario, if it is determined that there is a target data structure level containing linkage logic in at least two data structure levels, the determination module 43 can specifically be used to write the linkage logic into a higher-order component, and use the higher-order component to wrap the first-level components under the target data structure level to obtain second-level components with a linkage relationship.
[0130] In a specific application scenario, as Figure 6 shown, the first processing module 44 includes: a first determination unit 441, a second determination unit 442, an assembly unit 443, and a rendering unit 444;
[0131] The first determination unit 441 can be used to determine the component levels to which the first-level components and / or the second-level components belong according to the hierarchical order of at least two data structure levels;
[0132] The second determination unit 442 can be used to use the higher-order component to sequentially determine the first-level components or the second-level components at each component level as the target-level components at the current component level in ascending order of the component levels, and pass the target-level components into the first-level components or the second-level components of the previous component level corresponding to the current component level to obtain the updated target-level components;
[0133] The assembly unit 443 can be used to repeat the above process of updating the target hierarchical component until it is determined that the target hierarchical component is passed into the first-level component or the second-level component corresponding to the highest component level, and it is determined that the assembly of the first-level component or the second-level component in each component level is completed, obtaining the target form component;
[0134] The rendering unit 444 can be used to obtain the target data form by rendering the target form component.
[0135] Correspondingly, as Figure 6 shown, the first processing module 44 further includes: an input unit 445;
[0136] The input unit 445 can be used to input the hierarchical component parameters at each data structure level to the createForm function according to the hierarchical order between at least two data structure levels, and use the createForm function to generate the target form component based on the hierarchical component parameters at each data structure level. The hierarchical component parameters include the component level, and the first-level component or the second-level component corresponding to the component level;
[0137] The rendering unit 444 can be used to obtain the target data form by rendering the target form component.
[0138] In a specific application scenario, as Figure 6 shown, the device further includes: a monitoring module 46 and an adjustment module 47;
[0139] The monitoring module 46 can be used to monitor the change situation of the value of each first-level component or second-level component in the target data form in real time;
[0140] The adjustment module 47 can be used to adjust the values of other hierarchical components that have a linkage relationship with the second-level component whose value changes in real time according to the linkage logic injected by the second-level component.
[0141] In a specific application scenario, a first hook function is configured in the target form component. The monitoring module 46 can specifically be used to: call the first hook function to monitor the change situation of the value of each first-level component or second-level component in the target data form in real time; or, determine the change situation of the value of the first-level component or the second-level component by using a listener to monitor the change of the tree node corresponding to the first-level component or the second-level component in the preset trie tree, where the preset trie tree is pre-generated according to the data structure of the target data form, and the tree nodes in the trie tree correspond to the first-level component or the second-level component.
[0142] In a specific application scenario, the adjustment module 47 can be specifically used for: when it is monitored that the value of any second-level component changes, determining, according to the linkage logic, other hierarchical components that have a linkage relationship with the second-level component whose value changes and whose component hierarchy is less than that of the corresponding component of the second-level component; and making a linkage adjustment to the values of other hierarchical components.
[0143] In a specific application scenario, a second hook function is configured in the target form component, and the device further includes: a receiving module 48 and a control module 49;
[0144] The receiving module 48 can be used to receive an incremental operation request sent by the user by calling the second hook function, and the incremental operation request carries the target operation component hierarchy;
[0145] The control module 49 can be used to respond to the incremental operation request, output a form operation object at the target operation component hierarchy, and perform incremental control on the form operation object according to the user operation.
[0146] It should be noted that for other corresponding descriptions of each functional unit involved in a data form generation device provided in this embodiment, reference can be made to Figures 1 to 3 the corresponding description, which will not be elaborated here.
[0147] Based on the method as described above Figures 1 to 3 shown, correspondingly, this embodiment also provides a non-volatile storage medium, on which computer-readable instructions are stored, and when the readable instructions are executed by a processor, the data form generation method as described above Figures 1 to 3 shown is implemented.
[0148] Based on such an understanding, the technical solution of this application can be embodied in the form of a software product, and the software product can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.), including several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods in various implementation scenarios of this application.
[0149] Based on the method and Figures 1 to 3 shown above Figure 5 、 Figure 6 shown in the virtual device embodiment, in order to achieve the above purpose, this embodiment also provides a computer device, as Figure 7As shown in the figure, the computer device includes a processor 51, a communications interface 52, a memory 53, and a communication bus 54. Among them: The processor 51, the communications interface 52, and the memory 53 communicate with each other through the communication bus 54. The communication interface 54 is used to communicate with network elements of other devices such as clients or other servers. The processor 51 is used to execute a program, specifically, it can execute the relevant steps in the method embodiment for processing the front-end interface request described above. Specifically, the program may include program code, and the program code includes computer operation instructions. The processor 51 may be a processor CPU, or a specific integrated circuit ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present invention.
[0150] Optionally, the computer device may further include a user interface, a network interface, a camera, a radio frequency (RF) circuit, sensors, an audio circuit, a WI-FI module, etc. The user interface may include a display screen, an input unit such as a keyboard, etc. Optionally, the user interface may further include a USB interface, a card reader interface, etc. The network interface may optionally include a standard wired interface, a wireless interface (such as a WI-FI interface), etc.
[0151] Those skilled in the art can understand that the structure of a computer device provided in this embodiment does not constitute a limitation on the entity device, and may include more or fewer components, or combine certain components, or have different component arrangements.
[0152] The non-volatile storage medium may further include an operating system and a network communication module. The operating system is a program for managing the hardware and software resources of the above computer device, and supports the operation of an information processing program and other software and / or programs. The network communication module is used to implement communication between components inside the non-volatile storage medium, and communication between other hardware and software in the information processing entity device.
[0153] Through the description of the above embodiments, those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform, or can be implemented by hardware.
[0154] By applying the technical solution of the present application, compared with the current existing technologies, after obtaining the data structure of the target data form to be generated, the present application can split the data structure to obtain at least two data structure levels with a hierarchical order, and then determine the first-level components corresponding to each data structure level. After that, the linkage logic injection is performed on the target data structure level determined to have the inclusion linkage logic among the at least two data structure levels to obtain the second-level components with a linkage relationship; finally, the first-level components and / or the second-level components are assembled in the hierarchical order, and the rendering process is performed on the assembled target form components to obtain the target data form. Through the technical solution in the present application, for the form development with deep hierarchical nesting or complex linkage logic, the data form can be developed in a layered form. During the development, only the structure and logic of a specific layer need to be concerned about, and the components of a certain layer can be developed independently without considering the relationship between the layers. After the development of the components related to each layer is completed, the complete form is formed by assembling and combining each layer. In this way, no matter how many layers the actual structure has, the data structure faced each time is only one layer, and the complexity no longer exists, greatly improving the development efficiency. And decoupling the linkage logic from the component itself can greatly improve the reuse rate of the components.
[0155] Those skilled in the art can understand that the drawings are only schematic diagrams of a preferred implementation scenario, and the modules or processes in the drawings are not necessarily essential for implementing the present application. Those skilled in the art can understand that the modules in the device in the implementation scenario can be distributed in the device in the implementation scenario according to the description of the implementation scenario, or can be correspondingly changed to be located in one or more devices different from the present implementation scenario. The modules in the above implementation scenario can be combined into one module, or further split into multiple sub-modules.
[0156] The serial numbers of the present application above are only for description and do not represent the advantages or disadvantages of the implementation scenarios. The above disclosure is only several specific implementation scenarios of the present application. However, the present application is not limited thereto, and any change that can be thought of by those skilled in the art should fall within the protection scope of the present application.
Claims
1. A method for generating a data form, characterized in that, Including: Obtain the data structure of the target data form to be generated, where the data structure includes at least two data structure levels, and there is a hierarchical order between the at least two data structure levels; Determine the first-level components corresponding to each of the data structure levels; Judge whether there is a target data structure level including linkage logic among the at least two data structure levels. If so, write the linkage logic into a high-order component, and use the high-order component to wrap the first-level components under the target data structure level to obtain second-level components with a linkage relationship; Assemble the first-level components and / or the second-level components according to the hierarchical order, and perform rendering processing on the assembled target form components to obtain the target data form; If not, determine the component levels to which each of the first-level components belongs according to the hierarchical order between the at least two data structure levels; According to the order from low to high of the component levels, sequentially update each of the component levels to the current component level, determine the previous component level of the current component level, and insert the first-level component corresponding to the current component level into a preset slot of the first-level component corresponding to the previous component level; Repeat the above process until it is determined that the current component level corresponds to the highest component level, then complete the assembly of the first-level components in each of the component levels to obtain target form components, and perform rendering processing on the target form components to obtain the target data form.
2. The method according to claim 1, characterized in that The assembling the first-level components and / or the second-level components according to the hierarchical order, and performing rendering processing on the assembled target form components to obtain the target data form includes: Determine the component levels to which the first-level components and / or the second-level components belong according to the hierarchical order of at least two of the data structure levels; Use a high-order component to sequentially determine the first-level components or second-level components under each component level as target-level components under the current component level according to the order from low to high of the component levels, and pass the target-level components into the first-level components or second-level components corresponding to the previous component level of the current component level to obtain updated target-level components; Repeat the above update process for the target-level components until it is determined that the target-level components are passed into the first-level components or second-level components corresponding to the highest component level, and it is determined that the assembly of the first-level components or second-level components in each of the component levels is completed to obtain target form components; Obtain the target data form by rendering the target form components.
3. The method according to claim 1, wherein The assembling the first-level components and / or the second-level components according to the hierarchical order, and performing rendering processing on the assembled target form components to obtain the target data form includes: Input the hierarchical component parameters at each data structure level into the createForm function according to the hierarchical order between the at least two data structure levels, and use the createForm function to generate a target form component based on the hierarchical component parameters at each data structure level. The hierarchical component parameters include the component level, the first-level component or the second-level component corresponding to the component level. Render the target form component to obtain the target data form.
4. The method according to claim 1, wherein The method further includes: Real-time monitor the value changes of each first-level component or second-level component in the target data form. According to the linkage logic injected by the second-level component, adjust the values of other hierarchical components that have a linkage relationship with the second-level component whose value changes in real time.
5. The method according to claim 4, wherein A first hook function is configured in the target form component. The real-time monitoring of the value changes of each first-level component or second-level component in the target data form includes: Call the first hook function to monitor the value changes of each first-level component or second-level component in the target data form in real time; or, By using a listener to monitor the changes of the tree nodes corresponding to the first-level component or the second-level component in a preset trie tree, determine the value changes of the first-level component or the second-level component, where the preset trie tree is pre-generated according to the data structure of the target data form, and the tree nodes in the trie tree correspond to the first-level component or the second-level component.
6. The method according to claim 4, wherein The adjusting, according to the linkage logic injected by the second-level component, the values of other hierarchical components that have a linkage relationship with the second-level component whose value changes in real time includes: When it is monitored that the value of any second-level component changes, determine, according to the linkage logic, other hierarchical components that have a linkage relationship with the second-level component whose value changes and whose component level is less than the component level corresponding to the second-level component; Perform linkage adjustment on the values of the other hierarchical components.
7. The method according to claim 1, wherein A second hook function is configured in the target form component. The method further includes: Receive an incremental operation request sent by the user by calling the second hook function. The incremental operation request carries a target operation component level. In response to the incremental operation request, output a form operation object at the target operation component level and perform incremental control on the form operation object according to the user operation.
8. A data form generation device, characterized in that, Includes: An acquisition module for acquiring the data structure of the target data form to be generated. The data structure includes at least two data structure levels, and there is a hierarchical order between the at least two data structure levels. A determination module for determining the first-level components corresponding to each of the data structure levels. A determination module, configured to determine whether there is a target data structure level including linkage logic among the at least two data structure levels. If so, write the linkage logic into a higher-order component, and use the higher-order component to wrap the first-level components under the target data structure level to obtain second-level components with a linkage relationship; if not, determine the component levels to which the respective first-level components belong according to the hierarchical order among the at least two data structure levels; According to the order from low to high of the component levels, update each of the component levels to the current component level in sequence, determine the previous component level of the current component level, and insert the first-level component corresponding to the current component level into a preset slot of the first-level component corresponding to the previous component level; Repeat the above process until it is determined that the current component level corresponds to the highest component level, then complete the assembly of the first-level components in each of the component levels to obtain a target form component, and perform a rendering process on the target form component to obtain the target data form; A first processing module, configured to assemble the first-level components and / or the second-level components according to the hierarchical order, and perform a rendering process on the assembled target form component to obtain the target data form.
9. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the data form generation method according to any one of claims 1 to 7.
10. A computer device, comprising a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, characterized in that, When the processor executes the computer program, it implements the data form generation method according to any one of claims 1 to 7.
Citation Information
Patent Citations
Multi-part front-end interface layout method and device, electronic equipment and storage medium
CN112711418A
Page processing method and device, electronic equipment and readable storage medium
CN112965716A
Component publishing method and device
CN113626067A