CN116483841B - Form data management method and device based on compact framework - Google Patents
Form data management method and device based on compact framework Download PDFInfo
- Publication number
- CN116483841B CN116483841B CN202310751857.6A CN202310751857A CN116483841B CN 116483841 B CN116483841 B CN 116483841B CN 202310751857 A CN202310751857 A CN 202310751857A CN 116483841 B CN116483841 B CN 116483841B
- Authority
- CN
- China
- Prior art keywords
- form data
- subscription
- function
- value
- initial
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 63
- 238000013523 data management Methods 0.000 title claims abstract description 20
- 238000006243 chemical reaction Methods 0.000 claims description 14
- 230000003993 interaction Effects 0.000 claims description 6
- 238000012545 processing Methods 0.000 claims description 5
- 238000007726 management method Methods 0.000 abstract description 8
- 230000005540 biological transmission Effects 0.000 abstract description 7
- 238000012423 maintenance Methods 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 115
- 239000010410 layer Substances 0.000 description 16
- 238000010586 diagram Methods 0.000 description 7
- 230000008859 change Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 238000003491 array Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000008520 organization Effects 0.000 description 2
- 238000004806 packaging method and process Methods 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000002356 single layer Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/22—Indexing; Data structures therefor; Storage structures
- G06F16/2282—Tablespace storage structures; Management thereof
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Computing Systems (AREA)
- Stored Programmes (AREA)
Abstract
The embodiment of the application provides a form data management method and device based on a compact framework, which are characterized in that form data objects are created, and the form data objects are used for storing fields of forms and values of the fields; creating a form data subscription object, wherein the form data subscription object is used for storing a field path of the form and subscribing a subscription function array of the field path; the form data object and the useForm interface function of the form data subscription object are set, so that an external component of the form can operate the form data object and the form data subscription object through the useForm interface function, the problems that an existing form data state transmission path is complex and management and maintenance are not easy to perform can be solved, and the external component can manage the form data in a simple and easy-to-use calling mode.
Description
Technical Field
The embodiments of the application belong to the technical field of computers, and particularly relate to a form data management method and device based on a reaction frame.
Background
Data management is the process of efficiently collecting, storing, processing and applying data using computer hardware and software technology. The purpose is to fully and effectively play the role of data. The key to achieving effective management of data is data organization. Form data management refers to managing data collected by forms, such as collection, storage, application, and the like.
At present, a form component realized based on a reaction frame is used for maintaining the data state of the form through a Provider component provided by a createContext of the reaction frame, the data state in the form is required to be placed at the uppermost layer of the form component when the form component is used, and along with enrichment of UI interaction and business complexity, more and more complex application scenes appear, so that when the data in the form is used, the data state of the form component is required to be lifted to a position of a common father level with an external component, and a data state transmission path becomes more complex and is not easy to manage and maintain.
Disclosure of Invention
The embodiment provides a form data management method and device based on a compact framework, which can solve the problems that the existing form data state transmission path is complex and is not easy to manage and maintain.
In a first aspect, the present embodiment provides a form data management method based on a React frame, including:
creating a form data object, wherein fields of the form and values of the fields are stored in the form data object;
creating a form data subscription object, wherein a field path of the form is stored in the form data subscription object, and a function array of the field path is subscribed;
setting a useForm interface function of the form data object and the form data subscription object, so that an external component of the form operates the form data object and the form data subscription object through the useForm interface function.
As a preferred embodiment of the present application, the creation form data object includes:
creating a JavaScript object as an initial form data object;
adding a key and a value to the initial form data object, wherein the key is from a value of a name attribute transmitted by a form item component or a form list component, and the value is from a value returned by an onChange function of an interaction component in the form item component or the form list component.
As a preferred embodiment of the present application, the creating a form data subscription object includes:
creating a JavaScript object as an initial form data subscription object;
adding keys and values to the initial form data subscription object, wherein the keys come from a field path converted into character strings, and the values come from the subscription function array.
As a preferred embodiment of the present application, the field path is obtained by the following method, specifically including:
acquiring an initial empty array corresponding to a form item and/or a list item of the form based on a useContext hook function of the compact framework;
assigning the initial empty array to a variable path;
adding the name attribute value in the list item and/or list item tips to the initial empty array;
and converting the variable path into a character string to obtain the field path.
As a preferred embodiment of the present application, further comprising:
and processing the form item and/or a Provider component returned by using the createContext in the form list item, and transmitting the value of the Provider component into the variable path after assignment to obtain a sub-layer field path.
As a preferred embodiment of the present application, the subscription function array is obtained by the following manner, which specifically includes:
judging whether an initial subscription function array of the form item and/or the form item list exists or not;
if the initial subscription function array exists, updating a dispatch function returned by a useReducer hook function in a reaction frame into the initial subscription function array to obtain the subscription function array;
if the initial subscription function array does not exist, the initial subscription function array is created, and a dispatch function of a component needing to subscribe the field path is added into the initial subscription function array to obtain the subscription function array.
As a preferred embodiment of the present application, the setting a usef orm interface function of the form data object and the form data subscription object, so that an external component of the form operates the form data object and the form data subscription object through the usef form interface function includes:
calling a set useForm interface function, and returning to an operation method for operating the form data object and/or the form data subscription object;
setting and taking value for the form data object based on the setting and taking value method provided by the useForm interface function;
and carrying out subscription operation on the form subscription object based on the subscription method provided by the useF interface function.
As a preferred embodiment of the present application, the setting method and the value taking method based on the usef orm interface function perform setting and value taking operations on the form data object, specifically:
a target setting value field path of a required setting value and a target setting value are transmitted in;
searching a target setting value field corresponding to the target setting value field path in the field of the form data object based on the target setting value field path, and replacing the value of the target setting value field with the target setting value;
a target value field path needing to be valued is transmitted in;
searching a target value field corresponding to the target value field path in the field of the form data object based on the target value field path, and extracting the value of the target value field;
as a preferred embodiment of the present application, the subscribing method based on the useForm interface function performs a subscribing operation on the form subscription object, including:
a target subscription field path to be subscribed and an update function are transmitted;
and updating the target subscription field path into the form data subscription object as a key and an updating function as a value.
In a second aspect, the present embodiment provides a form data management device based on a React frame, including:
the object creation module is used for creating form data objects, wherein the form data objects are used for storing fields of forms and values of the fields; creating a form data subscription object, wherein the form data subscription object is used for storing a field path of the form and subscribing a subscription function array of the field path;
the data operation module is used for setting the form data object and the useForm interface function of the form data subscription object so that the external component of the form can operate the form data object and the form data subscription object through the useForm interface function.
The application provides a form data management method and device based on a compact framework, which are characterized in that form data objects are created, and the form data objects are used for storing fields of forms and values of the fields; creating a form data subscription object, wherein the form data subscription object is used for storing a field path of the form and subscribing a subscription function array of the field path; the form data object and the useForm interface function of the form data subscription object are set, so that an external component of the form can operate the form data object and the form data subscription object through the useForm interface function, the problems that an existing form data state transmission path is complex and management and maintenance are not easy to perform can be solved, and the external component can manage the form data in a simple and easy-to-use calling mode.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this specification, illustrate embodiments of the application and together with the description serve to explain the application and do not constitute a limitation on the application. Some specific embodiments of the application will be described in detail hereinafter by way of example and not by way of limitation with reference to the accompanying drawings. The same reference numbers in the drawings denote the same or similar parts or portions, and it will be understood by those skilled in the art that the drawings are not necessarily drawn to scale, in which:
fig. 1 is a flowchart of a form data management method based on a compact framework provided in an embodiment of the present disclosure;
FIG. 2 is a diagram showing the correspondence between form data, form JSX structures and form paths provided in the embodiment of the present disclosure;
FIG. 3 is a diagram illustrating the relationship between a current form component and form component data provided in an embodiment of the present disclosure;
FIG. 4 is a diagram illustrating the relationship between form components and form component data provided in an embodiment of the present disclosure;
FIG. 5 is a schematic diagram of a form data setting method according to an embodiment of the present disclosure;
fig. 6 is a schematic diagram of a form data subscription method provided in an embodiment of the present disclosure;
fig. 7 is a schematic diagram of a form data management device based on a compact framework according to an embodiment of the present disclosure;
fig. 8 is a schematic diagram of an electronic device according to an embodiment of the present disclosure.
Detailed Description
In order to enable those skilled in the art to better understand the present application, the following description will make clear and complete descriptions of the technical solutions according to the embodiments of the present application with reference to the accompanying drawings. It will be apparent that the described embodiments are merely some, but not all embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present application without making any inventive effort, shall fall within the scope of the present application.
The act framework is a JavaScript library for building user interfaces, suitable for building various types of applications, from small single page applications to large enterprise-level applications. It is a componentized library that can split the UI into multiple independent components and the components support nesting. For the real framework state management, following the unidirectional data flow mode, the communication of the deep-level and far-distance components depends on "state promotion" (i.e. promotion to the common parent level of the components requiring communication), and then passes through the tips layer until the target component.
Form data refers to that a user fills in content through a form and submits the content to a server; these data are referred to as form data, and data management is the process of efficiently collecting, storing, processing, and applying data using computer hardware and software techniques. The method aims to fully and effectively play the role of data, and the key for realizing effective management of the data is data organization.
At present, when form data collected at the front end is managed, a form component realized based on a reaction frame is generally used, the data state of the form component is maintained through a Provider component provided by a createContext function of the reaction frame, and the data state of the form component needs to be placed at the uppermost layer of the form component. Under the daily development scene, the simple application of the form can meet the development requirement based on the mode, but with rich UI interaction and complicated service, a more complex application scene can appear. For example, components outside the form need to undergo data or UI changes by changing a certain field value in the form. In such a scenario, due to the architecture characteristics (components, unidirectional response data flows) of the exact framework, the data state of the form component needs to be promoted to a position of a common parent level with the external component, so that the transmission path of the data state in the form component becomes more complex, and is not easy to manage and maintain.
In view of the above technical problems, as shown in fig. 1, this embodiment provides a form data management method based on a reaction framework, including:
s101: creating form data objects, wherein the form data objects are used for storing fields of forms and values of the fields;
the data state in the form component is in the same level as other components, and when the collected data is operated, the form data object can be directly operated, the data in the form component is not required to be transferred to the same level as the external component layer by layer, and the data transfer path is further shortened.
In some embodiments, the creating form data objects includes: creating a JavaScript object as an initial form data object; adding a key and a value to the initial form data object, wherein the key is from a value of a name attribute transmitted by a form item component or a form list component, and the value is from a value returned by an onChange function of an interaction component in the form item component or the form list component.
That is, the form data object stores the fields and the values of the fields in the form of key-value pairs; acquiring a field of the form, and setting the field as a key of the form data object; user information input by a user is acquired, and the user information is set as the value of the form data object.
It should be noted that, since the data collected through the form is generally one-to-one data, such as a name: thirdly, stretching; age: 23, etc., the form data object is stored in the form of key value pairs when storing data, so as to facilitate viewing and management.
It should be noted that, the field of the form data object may be input through the name attribute of the form. Item, and the value corresponding to the field may be obtained through user information input by the user, where the user information may be name, age, occupation, and the like.
It should be noted that, the keys (i.e., fields) of the form data object may be a hierarchical structure, i.e., constructed according to the hierarchical structure of the original data storage, similar to a tree-shaped branch structure, and when searching, the front end user can find the form data layer by layer, so that it is convenient for the front end user to clearly know and manage the collected form data; the fields of different levels can also be spliced (for example, mechanical engineers are also divided under the engineer fields, and can be spliced into the engineering mechanical engineers) so as to form a unique identifier for each field, namely a unique key, thus being convenient for subsequent searching.
S102: creating a form data subscription object, wherein the form data subscription object is used for storing a field path of the form and subscribing a subscription function array of the field path;
when form data state management is performed, there are many external components that need to perform data change or UI change according to the change of form data, so in order to shorten the data transmission path in the form component, the field path subscribed by the external component may be separately managed, that is, the form data subscription object is established, so that when the form data changes, the external component may be triggered to update in time.
In some embodiments, the creating the form data subscription object includes: creating a JavaScript object as an initial form data subscription object; adding keys and values to the initial form data subscription object, wherein the keys come from a field path converted into character strings, and the values come from the subscription function array.
That is, the form data subscription object stores the field path and a subscription function array subscribing to the field path in the form of key value pairs; acquiring the field path and setting the field path as a key of the form data subscription object; and acquiring a subscription function array, and setting the subscription function array as the value of the form data subscription object.
It should be noted that, the field path is unique, so as to clearly distinguish different information, and the subscription function array may include subscription functions of one or more components, that is, one field path may correspond to a subscription function of one or more components, so that when a value under the field path changes, the different components may be triggered to update according to the changed value.
In some embodiments, the field path is obtained by specifically including: acquiring an initial empty array corresponding to a form item and/or a list item of the form based on a useContext hook function of the compact framework; assigning the initial empty array to a variable path; adding the name attribute value in the list item and/or list item tips to the initial empty array; and converting the path into a character string to obtain the field path.
It should be noted that, initial values of the form item, the form list item, and the form list sub-item may be obtained based on the useContext hook function of the compact framework, and the initial values of the form item, the form list item, and the form list sub-item are null, so that the obtained initial values are a null array, that is, the initial null array.
It should be noted that, generally, the number of the initial empty arrays corresponds to the number of the form items, the form list items and the form list sub-items, in the reaction framework, the values are generally transferred through tips, the tips may transfer the parameters of the parent layer to the sub-layer, the values transferred by the tips include the name attribute value, and the name attribute value is generally associated with a name, such as a name, an age, etc., so that the name attribute value may be added to the initial empty arrays, that is, an array type field path may be obtained, and after the array type field path is obtained, the array type field path needs to be converted into a string type for easy viewing and searching.
As shown in fig. 2, it is a table data, JSX structure of the table in the exact frame, and table path correspondence relationship. The form data and the form are in one-to-one correspondence in a reaction frame, fields in the form data are consistent with name attributes in form (form. Item) tips, the hierarchical relationship in the form data is represented in the form JSX structure and also has the same hierarchical relationship, and for a form list item (form. List), circulation processing is performed according to the form data, (a dotted line part shown in the form JSX structure in the figure does not exist in the actual form JSX structure, and here, the purpose is to illustrate each form path in the circulation process). The form item path (i.e., field path) is the position of the record form item in the form, is used as the unique identification of the form item, and can find the value corresponding to the form item in the form according to the form item path.
It should be noted that, the field path of the form subscription object is of a single-layer structure, so that the subsequent searching operation is convenient, and if the field path is of a multi-layer structure, the searching operation consumes excessive computing resources.
In some embodiments, the form data management method based on the exact framework further includes: and packaging the Provider component returned by the createContext function in the form item and/or the form list item, and transmitting the value of the Provider component into the variable path after assignment to obtain a sub-layer field path.
It should be noted that, to satisfy the requirement that a new field path may need to be added later, a method for setting a field path needs to be provided for the newly added field path, when creating a context using a createContext function, a Provider component will be returned, where the Provider component will receive a value, which is typically the name or other name of the newly created context, and the value is passed to the assigned variable path by the Provider, so that a new sub-layer field path may be obtained.
In some embodiments, the subscription function array is obtained by the following method, specifically including: judging whether an initial subscription function array of the form item and/or the form item list exists or not; if the initial subscription function array exists, updating a dispatch function provided by a useReducer hook function in a reaction framework into the initial subscription function array to obtain the subscription function array; if the initial subscription function array does not exist, the initial subscription function array is created, and a dispatch function of a component needing to subscribe the field path is added into the initial subscription function array to obtain the subscription function array.
It should be noted that, the dispatch function is an update function of an external component, and when the dispatch function is placed under a corresponding field path, the corresponding external component may be triggered to be updated when the value of the corresponding field path changes, other update functions may be adopted besides the dispatch function, and the method is not particularly limited, the initial subscription function array created by itself is usually an empty array, and then the subscription function of the external component needing to subscribe to the field path is added into the empty array.
S103: setting a useForm interface function of the form data object and the form data subscription object, so that an external component of the form operates the form data object and the form data subscription object through the useForm interface function.
After the Form data object and the Form data subscription object are created, an external interface of the Form data object and the Form data subscription object is set, so that an external component operates the Form data object and the Form data subscription object through an interface, and the external component of the Form is an external component of the Form except for a Form component, a Form. Item component and a Form. List component provided by the Form.
In some embodiments, the setting the useForm interface function of the form data object and the form data subscription object, so that the external component of the form operates the form data object and the form data subscription object through the useForm interface function includes: calling the set useForm interface function, and returning to an operation method for operating the form data object and/or the form data subscription object; setting and taking value for the form data object based on the setting and taking value method provided by the useForm interface function; and carrying out subscription operation on the form subscription object based on the subscription method provided by the useF interface function.
In some embodiments, the setting and taking operations are performed on the form data object by the setting and taking method and the setting and taking method provided by the usef orm interface function, specifically: a target setting value field path of a required setting value and a target setting value are transmitted in; searching a target setting value field corresponding to the target setting value field path in the field of the form data object based on the target setting value field path, and replacing the value of the target setting value field with the target setting value; a target value field path needing to be valued is transmitted in; searching a target value field corresponding to the target value field path in the field of the form data object based on the target value field path, and extracting the value of the target value field; the subscribing method based on the useForm interface function carries out subscribing operation on the form subscribing object, and comprises the following steps: a target subscription field path to be subscribed and an update function are transmitted; and updating the target subscription field path into the form data subscription object as a key and the update function as a value.
It should be noted that, when the external component invokes the usef orm interface function, the usef form interface function returns a value setting method and a value taking method for the form data object, that is, a set method and a get method, and a subscore method for the form subscription object. When the set method is used, when the fields of the form data object are in a layered structure, the target value setting field path is searched layer by layer, and the value setting operation is performed after the target value setting field path is found.
It should be noted that, when the subscription operation is performed, the update function of the new external component may be added to the existing field path, or the update function in the existing field path may be deleted, so that the user may change the update function.
As shown in fig. 3, which is the relationship between the form component and the form component data at present, as shown in fig. 4, which is the relationship between the form component and the form component data, the form data object and the form data storage object of the present application form together to manage the form data, and independently maintain the form data outside the form component, so as to implement decoupling between the form data and the form component, and facilitate operations such as setting, taking, subscribing, etc. of the form data by the external component.
It should be noted that, as shown in fig. 5, when the external component of the form performs the value setting operation on the designated field of the form by using the value setting (set) method provided by the usef orm, the update function array under the path of the current field is traversed, so as to trigger the re-render operation on the form item, the list item or the list sub-item under the corresponding path.
It should be noted that, as shown in fig. 6, the external component of the form subscribes to the designated field path of the form by using the subscription method provided by the usef orm, when the value of the designated field path changes, the form item updates the data of the form, and at the same time, traverses the update (subscription) function array subscribing to the current field path, so that the external component subscribing to the field path performs re-render operation.
In summary, the present embodiment provides a form data management method based on a reaction framework, by creating form data objects, where the form data objects are used to store fields of a form and values of the fields; creating a form data subscription object, wherein the form data subscription object is used for storing a field path of the form and subscribing a subscription function array of the field path; the form data object and the useForm interface function of the form data subscription object are set, so that an external component of the form can operate the form data object and the form data subscription object through the useForm interface function, the problems that an existing form data state transmission path is complex and management and maintenance are not easy to perform can be solved, and the external component can manage the form data in a simple and easy-to-use calling mode.
In a second aspect, as shown in fig. 7, the present embodiment provides a form data management device based on a React frame, including:
the object creation module 210 is configured to create a form data object, where the form data object is used to store a field of a form and a value of the field; creating a form data subscription object, wherein the form data subscription object is used for storing a field path of the form and subscribing a subscription function array of the field path;
the data operation module 220 is configured to set a usef orm interface function of the form data object and the form data subscription object, so that an external component of the form operates on the form data object and the form data subscription object through the usef form interface function.
The creation form data object comprises: creating the form data object, wherein the form data object stores the fields and the values of the fields in the form of key value pairs; acquiring a field of the form, and setting the field as a key of the form data object; user information input by a user is acquired, and the user information is set as the value of the form data object.
In some embodiments, the creating the form data subscription object includes: creating the form data subscription object, wherein the form data subscription object stores the field path and a subscription function array subscribing the field path in a key value pair mode; acquiring the field path and setting the field path as a key of the form data subscription object; and acquiring a subscription function array, and setting the subscription function array as the value of the form data subscription object.
In some embodiments, the obtaining the field path includes: acquiring an initial empty array corresponding to a form item and/or a list item of the form based on useContext hooks of a compact framework; assigning the initial empty array to a variable path; adding the name attribute value in the list item and/or list item tips to the initial empty array; and converting the variable path into a character string to obtain the field path.
In some embodiments, the object creation module is further to: and packaging the Provider component returned by the createContext function in the form item and/or the form list item, and transmitting the value of the Provider component into the variable path after assignment to obtain a sub-layer field path.
In some embodiments, the obtaining the subscription function array includes: acquiring an initial subscription function array of the form item and/or the form item list; if the initial subscription function array exists, updating a dispatch function provided by a useReducer hook function in a reaction framework into the initial subscription function array to obtain the subscription function array; if the initial subscription function array does not exist, the initial subscription function array is created, and a dispatch function of a component needing to subscribe the field path is added into the initial subscription function array to obtain the subscription function array.
In some embodiments, the setting the useForm interface function of the form data object and the form data subscription object, so that the external component of the form operates the form data object and the form data subscription object through the useForm interface function includes: calling a set useForm interface function, and returning to an operation method for operating the form data object and/or the form data subscription object; setting and taking value for the form data object based on the setting and taking value method provided by the useForm interface function; and carrying out subscription operation on the form subscription object based on the subscription method provided by the useF interface function.
In some embodiments, the setting and taking operations are performed on the form data object by the setting and taking method and the setting and taking method provided by the usef orm interface function, specifically: a target setting value field path of a required setting value and a target setting value are transmitted in; searching a target setting value field corresponding to the target setting value field path in the field of the form data object based on the target setting value field path, and replacing the value of the target setting value field with the target setting value; a target value field path needing to be valued is transmitted in; searching a target value field corresponding to the target value field path in the field of the form data object based on the target value field path, and extracting the value of the target value field;
the subscribing method based on the useForm interface function carries out subscribing operation on the form subscribing object, and comprises the following steps: a target subscription field path to be subscribed and an update function are transmitted; and updating the target subscription field path into the form data subscription object as a key and the update function as a value.
In a third aspect, as shown in fig. 8, the present embodiment provides an electronic device 300, including a processor 320 and a memory 310;
the processor 320 is configured to perform the steps of the method according to any of the embodiments of the first aspect by invoking a program or instructions stored in the memory 310.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present application, and not for limiting the same; although the application has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some or all of the technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit of the application.
Claims (8)
1. The form data management method based on the reaction framework is characterized by comprising the following steps of:
creating a form data object, wherein fields of the form and values of the fields are stored in the form data object;
creating a form data subscription object, wherein a field path of the form is stored in the form data subscription object, and a function array of the field path is subscribed;
setting a useForm interface function of the form data object and the form data subscription object, so that an external component of the form operates the form data object and the form data subscription object through the useForm interface function;
the creation form data object comprises:
creating a JavaScript object as an initial form data object;
adding a key and a value to an initial form data object, wherein the key is from a value of a name attribute transmitted by a form item component or a form list component, and the value is from a value returned by an onChange function of an interaction component in the form item component or the form list component
The creation form data subscription object comprises:
creating a JavaScript object as an initial form data subscription object;
adding keys and values to the initial form data subscription object, wherein the keys come from a field path after being converted into character strings, and the values come from a subscription function array.
2. The method for managing form data based on a compact framework according to claim 1, wherein the field path is obtained by:
acquiring an initial empty array corresponding to a form item and/or a list item of the form based on a useContext hook function of the compact framework;
assigning the initial empty array to a variable path;
adding the name attribute value in the list item and/or list item tips to the initial empty array;
and converting the variable path into a character string to obtain the field path.
3. The exact framework-based form data management method according to claim 2, further comprising:
and processing the form item and/or a Provider component returned by using the createContext in the form list item, and transmitting the value of the Provider component into the variable path after assignment to obtain a sub-layer field path.
4. The method for managing form data based on the exact framework according to claim 1, wherein the subscription function array is obtained by the following method, specifically comprising:
judging whether an initial subscription function array of the form item and/or the form item list exists or not;
if the initial subscription function array exists, updating a dispatch function returned by a useReducer hook function in a reaction frame into the initial subscription function array to obtain the subscription function array;
if the initial subscription function array does not exist, the initial subscription function array is created, and a dispatch function of a component needing to subscribe the field path is added into the initial subscription function array to obtain the subscription function array.
5. The method for managing form data based on the compact framework according to claim 1, wherein the setting a usef orm interface function of the form data object and the form data subscription object to enable an external component of the form to operate the form data object and the form data subscription object through the usef form interface function includes:
calling a set useForm interface function, and returning to an operation method for operating the form data object and/or the form data subscription object;
setting and taking value for the form data object based on the setting and taking value method provided by the useForm interface function;
and carrying out subscription operation on the form subscription object based on the subscription method provided by the useF interface function.
6. The method for managing form data based on the compact framework according to claim 5, wherein the setting method and the taking method provided by the usef orm interface function are used for setting and taking the form data object, specifically:
a target setting value field path of a required setting value and a target setting value are transmitted in;
searching a target setting value field corresponding to the target setting value field path in the field of the form data object based on the target setting value field path, and replacing the value of the target setting value field with the target setting value;
a target value field path needing to be valued is transmitted in;
and searching a target value field corresponding to the target value field path in the field of the form data object based on the target value field path, and extracting the value of the target value field.
7. The method for managing form data based on the compact framework as claimed in claim 5, wherein said subscribing method based on the subscription method provided by the usef orm interface function performs a subscription operation on the form subscription object, including:
a target subscription field path to be subscribed and an update function are transmitted;
and updating the target subscription field path into the form data subscription object as a key and an updating function as a value.
8. Form data management device based on practice frame, characterized by comprising:
the object creation module is used for creating form data objects, wherein the form data objects are used for storing fields of forms and values of the fields; creating a form data subscription object, wherein the form data subscription object is used for storing a field path of the form and subscribing a subscription function array of the field path;
the data operation module is used for setting a useForm interface function of the form data object and the form data subscription object so that an external component of the form can operate the form data object and the form data subscription object through the useForm interface function;
the creation form data object comprises:
creating a JavaScript object as an initial form data object;
adding a key and a value to an initial form data object, wherein the key is from a value of a name attribute transmitted by a form item component or a form list component, and the value is from a value returned by an onChange function of an interaction component in the form item component or the form list component
The creation form data subscription object comprises:
creating a JavaScript object as an initial form data subscription object;
adding keys and values to the initial form data subscription object, wherein the keys come from a field path after being converted into character strings, and the values come from a subscription function array.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310751857.6A CN116483841B (en) | 2023-06-25 | 2023-06-25 | Form data management method and device based on compact framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310751857.6A CN116483841B (en) | 2023-06-25 | 2023-06-25 | Form data management method and device based on compact framework |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116483841A CN116483841A (en) | 2023-07-25 |
| CN116483841B true CN116483841B (en) | 2023-09-12 |
Family
ID=87218178
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310751857.6A Active CN116483841B (en) | 2023-06-25 | 2023-06-25 | Form data management method and device based on compact framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116483841B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112905183A (en) * | 2019-12-04 | 2021-06-04 | 广州凡科互联网科技股份有限公司 | External data conversion mapping method for flow form |
| CN114924733A (en) * | 2022-05-13 | 2022-08-19 | 南京大学 | Form dependency relationship management and form accurate rendering method and system |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7296226B2 (en) * | 2001-02-15 | 2007-11-13 | Accenture Gmbh | XML-based multi-format business services design pattern |
| WO2007086075A1 (en) * | 2006-01-30 | 2007-08-02 | Hewlett-Packard Development Company, L.P. | Forms management system |
-
2023
- 2023-06-25 CN CN202310751857.6A patent/CN116483841B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112905183A (en) * | 2019-12-04 | 2021-06-04 | 广州凡科互联网科技股份有限公司 | External data conversion mapping method for flow form |
| CN114924733A (en) * | 2022-05-13 | 2022-08-19 | 南京大学 | Form dependency relationship management and form accurate rendering method and system |
Non-Patent Citations (1)
| Title |
|---|
| 通用Web表单数据采集系统的设计与实现;程佳;陈涛;王成;;软件工程(第08期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116483841A (en) | 2023-07-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US12067007B1 (en) | Analyzing a pipelined search to determine data on which to execute the pipelined search | |
| US11394767B2 (en) | Central repository of configuration files and two-way replication of search node configuration files | |
| US9483257B2 (en) | Universal and adaptive software development platform for data-driven applications | |
| US11693871B1 (en) | Graphical user interface for dynamic elements of asset monitoring and reporting system | |
| US11809439B1 (en) | Updating client dashboarding component of an asset monitoring and reporting system | |
| US8560956B2 (en) | Processing model of an application wiki | |
| US10044522B1 (en) | Tree-oriented configuration management service | |
| EP2041673A1 (en) | Method for inheriting a wiki page layout for a wiki page | |
| WO2008003698A1 (en) | Method for defining a wiki page layout using a wiki page | |
| US11880740B2 (en) | Facilitating machine learning configuration | |
| US10572278B2 (en) | Smart controls for user interface design and implementation | |
| CN115934855B (en) | Full-link field-level blood margin analysis method, system, equipment and storage medium | |
| US11556702B2 (en) | Orchestration of crud operations for a hierarchical web service data model in a spreadsheet | |
| CN112115113A (en) | Data storage system, method, device, equipment and storage medium | |
| CN112015696A (en) | Data access method, data relationship setting method, data access device, data relationship setting device and storage medium | |
| CN111159207B (en) | Information processing method and device | |
| US20240037325A1 (en) | Ability to add non-direct ancestor columns in child spreadsheets | |
| CN116483841B (en) | Form data management method and device based on compact framework | |
| CN114756362A (en) | Resource quota management method and system, intelligent terminal and storage medium | |
| US10114864B1 (en) | List element query support and processing | |
| CN113424174A (en) | Recursive data traversal model | |
| CN112422668B (en) | Storage method and device for network community, electronic equipment and readable medium | |
| CN112925655B (en) | Decoupling system for dividing service and method thereof | |
| CN117170859A (en) | Resource management system and resource management method | |
| CN117632536A (en) | Message processing method, micro-service system and server |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |