A form processing method, device and storage medium

Abstract

The embodiment of the present application provides a method, device and storage medium for form processing, the method comprising: obtaining first input information, the first input information being information input by the user to the first form item in the target form in the presentation layer; inputting the first input information into the behavior layer through the target controlled component associated with the first form item; transmitting the first input information into the data layer through the behavior layer; and updating the target form in the data layer according to the first input information. This solution can reduce the complexity of coding, improve coding efficiency and be easy to maintain and expand.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of cloud technology, and in particular to a form processing method, device, and storage medium. Background Art

[0002] The form system usually involves scenarios such as form creation, update, registration, and login. Generally, the form system uses the MVVM framework to separate data and user interface (UI). Since the form data is stored in the HTML element of the form, the traditional method is still used at the level of processing the form, that is, encoding each item. At a higher level, only the presentation layer of the form is encapsulated to form a form generator.

[0003] In the process of research and practice of the prior art, the inventors of the embodiments of the present application found that when it comes to scenarios with large forms (such as large, step-by-step forms), the form system based on the MVVM framework still does not handle event processing and data transfer very well. As a result, in these large form scenarios, processing forms requires complex programming work, with more redundant code and greater limitations. Summary of the invention

[0004] The embodiments of the present application provide a form processing method, device and storage medium, which can reduce the complexity of encoding, improve encoding efficiency and facilitate maintenance and expansion.

[0005] In a first aspect, an embodiment of the present application provides a method for form processing, the method comprising:

[0006] Acquire first input information, where the first input information is information input by a user in a presentation layer for a first form item referenced in a target form;

[0007] Inputting the first input information into the behavior layer through the target controlled component associated with the first form item;

[0008] Transmitting the first input information to the data layer through the behavior layer;

[0009] At the data layer, the target form is updated according to the first input information.

[0010] In some implementations, before transmitting the first input information to the data layer through the behavior layer, the method further includes:

[0011] Determine at least one first form item in the presentation layer, where the first form item is at least one of a custom form item, a step-by-step form item, or a form item with a scale greater than a preset scale;

[0012] In the presentation layer, each first form item is converted into a corresponding controlled component.

[0013] In some implementation modes, in the presentation layer, converting each first form item into a corresponding controlled component includes:

[0014] Convert the first form item into a controlled component;

[0015] Rendering at least one web page element of a form operation through the controlled component, and setting a detection event of a callback function for the web page element;

[0016] setting an internal value in the controlled component;

[0017] An initial value is input into the controlled component, the internal value is updated according to a default value and the initial value, and at least one web page element of a form operation is rendered through the controlled component to make the controlled component effective.

[0018] In some implementation modes, after the detection event of setting the callback function for the web page element, the method further includes:

[0019] When the first input information triggers a first detection event of a web page element, the first input information obtained based on the detection event is updated to the internal value, and the callback function is triggered to output the updated internal value to the behavior layer as a parameter of the callback function.

[0020] In some implementations, when the target form in the data layer changes, the method further includes:

[0021] At the data layer, the first form item is updated according to the state value of the target form, and the target form is re-rendered to update the initial value in the target controlled component;

[0022] In the behavior layer, the re-rendered target form is obtained from the data layer, and is passed to the presentation layer through the target controlled component;

[0023] In the presentation layer, data of the re-rendered target form is displayed through the target controlled component.

[0024] In some implementations, before obtaining the first input information, the method further includes:

[0025] Get the initial form and the status value of the initial form;

[0026] After receiving the editing instruction for the initial form, at the data layer, inputting a first initial value to the Provide component;

[0027] Initializing the first initial value as the state value through the Provide component to obtain the target form, and transferring the target form to the behavior layer through the content instance;

[0028] The target form is transmitted to the presentation layer through the behavior layer so as to be visually displayed in the presentation layer.

[0029] In some implementations, at the behavior layer, first form data corresponding to the target controlled component name is obtained from the data layer, the first form data is used as a real-time value, and second form data of the target form is obtained from the presentation layer;

[0030] The real-time value, the default value and the second form data are added to an input parameter object, and the input parameter object is input into the presentation layer.

[0031] In some implementation modes, obtaining, at the behavior layer, first form data corresponding to the name of the target controlled component from the data layer includes:

[0032] Determine the name of the target controlled component according to the first input information;

[0033] Acquire the first form data corresponding to the target controlled component name from the data layer, and use the first form data as a real-time value;

[0034] If it is determined that the data of the target form in the data layer is inconsistent with the data of the target form in the presentation layer in terms of content, the data parsing component is called to perform data transformation on the real-time value corresponding to the target form to obtain the first form data.

[0035] In some implementation modes, obtaining the second form data from the presentation layer includes:

[0036] In the behavior layer, detecting data changes in the presentation layer through a behavior wrapper component;

[0037] If it is detected that the first form data changed in the target form of the presentation layer meets the preset detection event, intercepting the behavior meeting the preset detection event;

[0038] The second form data is obtained from the presentation layer, and an action of detecting an input event of a user at the presentation layer within a first duration is triggered.

[0039] In some implementations, the behavior layer includes a packaging component, the data layer includes a distribution component, and the method further includes:

[0040] In the behavior layer, at least one component in the presentation layer is encapsulated by the encapsulation component; and whether data changes occur in the form items in the target form;

[0041] When the first form item in which data changes in the target form meets at least one preset detection event, in the behavior layer, the first form item that changes in the presentation layer is intercepted by the distribution component and transmitted to the data layer to trigger an update of the status value of the target form.

[0042] In some embodiments, the method further comprises:

[0043] At the data layer, acquiring the form data of the target controlled component according to the component identifier of the target controlled component;

[0044] Passing the form data of the target controlled component as real-time values ​​and default values ​​to the behavior layer;

[0045] In the behavior layer, the form data of the target controlled component is transmitted to the presentation layer through the distribution component to update the target form in the presentation layer.

[0046] In some implementations, the data layer further includes a state component and a content component, and the method further includes:

[0047] In the data layer, the second form data is saved by the state component;

[0048] If the second form data changes in the data layer, then in the data layer, the changed second form data is input into the presentation layer through the behavior layer by the content component.

[0049] In a second aspect, an embodiment of the present application provides a form processing device having the function of implementing the form processing method provided in the first aspect. The function can be implemented by hardware, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above functions, and the modules can be software and / or hardware.

[0050] In one possible design, the form processing device includes:

[0051] An acquisition module, used to acquire first input information, where the first input information is information input by a user in a presentation layer for a first form item referenced in a target form;

[0052] An input-output module, configured to input the first input information into a behavior layer through a target controlled component associated with the first form item;

[0053] Transmitting the first input information to the data layer through the behavior layer;

[0054] A processing module is used to update the target form according to the first input information at the data layer.

[0055] Another aspect of an embodiment of the present application provides a form processing device, which includes at least one connected processor, memory and transceiver, wherein the memory is used to store a computer program, and the processor is used to call the computer program in the memory to execute the methods described in the above aspects.

[0056] Another aspect of the embodiments of the present application provides a computer-readable storage medium, which includes instructions, and when the instructions are executed on a computer, the computer executes the method described in the first aspect above.

[0057] According to one aspect of the present application, a computer program product or a computer program is provided, the computer program product or the computer program comprising computer instructions, the computer instructions being stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the method provided in various possible designs of the first aspect, the second aspect, or the third aspect.

[0058] Compared with the prior art, in the solution provided by the embodiment of the present application, since the first input information obtained is the information input by the user in the presentation layer for the first form item in the target form, and the first form item is associated with the target controlled component, the controlled characteristics of the target controlled component can be used to update the target form. Since the form system is logically divided into the presentation layer, the behavior layer and the logic layer, and the behavior layer bridges the data interaction between the presentation layer and the data layer, when different forms have different events to be processed or different data are passed in, these events or data can be processed only in the behavior layer without modifying the presentation layer. Therefore, the separation and decoupling of the behavior layer can be achieved, and the complexity of form writing can be effectively reduced, and it is simple and easy to maintain. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] Figure 1a A schematic diagram of an architecture of the React framework in an embodiment of the present application;

[0060] Figure 1b A schematic diagram of a code for a react hook package for obtaining data in an embodiment of the present application;

[0061] Figure 1c A schematic diagram of a code for obtaining a react hook encapsulation of a dispatch component in an embodiment of the present application;

[0062] Figure 2a A structural diagram of the encapsulated FormInput component in an embodiment of the present application;

[0063] Figure 2b A schematic diagram of a drop-down box in an embodiment of the present application;

[0064] Figure 3a A schematic diagram of a process of editing a data layer form in an embodiment of the present application;

[0065] Figure 3b A code schematic diagram of passing the initial value of the initial form into the Provider component in an embodiment of the present application;

[0066] Figure 4a A flowchart of a method for form processing in an embodiment of the present application;

[0067] Figure 4b A structural diagram of the BehaviorWrapper function in an embodiment of the present application;

[0068] Figure 4c A structural diagram of a BehaviorWrapper component in an embodiment of the present application;

[0069] Figure 5a This is a schematic diagram of an interface of a double drop-down box in an embodiment of the present application;

[0070] Figure 5b A schematic diagram of a code for realizing the display of an object in the presentation layer in an embodiment of the present application;

[0071] Figure 5c A schematic diagram of format conversion using valueFormat in an embodiment of the present application;

[0072] Figure 5d A schematic diagram of using valueParse to convert a string into an object in an embodiment of the present application;

[0073] Figure 6 A flowchart of a method for form processing in an embodiment of the present application;

[0074] Figure 7 A schematic diagram comparing the effects of traditional form processing and form processing in the embodiment of the present application;

[0075] Figure 8 A schematic diagram of the structure of a form processing device in an embodiment of the present application;

[0076] Fig. 9A schematic diagram of the structure of a physical device for executing the form processing method in an embodiment of the present application;

[0077] Fig.10 A schematic diagram of the structure of a server in an embodiment of the present application. DETAILED DESCRIPTION

[0078] The terms "first", "second", etc. in the specification and claims of the embodiments of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments described here can be implemented in an order other than the content illustrated or described here. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device including a series of steps or modules need not be limited to those steps or modules clearly listed, but may include other steps or modules that are not clearly listed or inherent to these processes, methods, products or devices. The division of the modules that appear in the embodiments of the present application is only a logical division. There may be other division modes when implemented in practical applications, such as multiple modules can be combined into or integrated in another system, or some features can be ignored, or not executed. In addition, the coupling or direct coupling or communication connection between each other shown or discussed can be through some interfaces, and the indirect coupling or communication connection between modules can be electrical or other similar forms, which are not limited in the embodiments of the present application. Furthermore, the modules or sub-modules described as separate components may or may not be physically separated, may or may not be physical modules, or may be distributed in multiple circuit modules, and some or all of the modules may be selected according to actual needs to achieve the purpose of the embodiment of the present application.

[0079] The embodiment of the present application provides a method, device and storage medium for form processing, which can be used in scenarios such as login forms and registration forms. The method can be used in a server or a terminal. The embodiment of the present application only takes the server as an example. The server side deploys a form processing device, which can realize all or part of the same or similar functions of the form processing device.

[0080] The form system in the embodiment of the present application can be implemented based on the React framework. Figure 1a This is an architectural diagram of the React framework. Figure 1aThe arrows in the figure represent the direction of data flow. First, the user enters content on the interface. After the content flows to the data layer, it is processed by the behavior layer and stored in the data layer. When the page is refreshed or other reasons cause the form to be re-rendered, the data flows from the data layer to the behavior layer, and then output to the presentation layer and displayed to the user. In some implementations, the form system can be logically layered, for example, into a presentation layer, a behavior layer, and a data layer. Each of these is explained below.

[0081] 1. Presentation Layer

[0082] The presentation layer is the form components presented to the user, and the user input is received in the presentation layer.

[0083] 2. Behavioral Layer

[0084] The behavior layer is used to connect the data layer and the presentation layer. The behavior layer obtains the data from the data layer and passes it to the presentation layer. At the same time, the behavior layer also receives the user input in the presentation layer and stores it in the data layer. The behavior layer consists of a HOC function, which can be implemented differently according to different scenarios. In some implementations, in the behavior layer, the HOC feature is used to enhance the various controlled components of the presentation layer. In the HOC function, the HOC function of the behavior layer can be named the BehaviorWrapper function. A new component (named: BehaviorWrapper) can be defined in the BehaviorWrapper function. The new BehaviorWrapper component intercepts and detects the events of the controlled components in the presentation layer (such as: onChange, onInput, etc., or custom events). When an event is detected, the data will be stored in the data layer, so that the data layer maintains the uniqueness of the data. At the same time, the BehaviorWrapper component also receives data from the data layer as input, and passes the data to the presentation layer according to different components (marked with name or key values). Figure 4b This is a structural diagram of the BehaviorWrapper function in an embodiment of the present application. Figure 4c This is a structural diagram of the BehaviorWrapper component in the embodiment of the present application. The embodiment of the present application does not limit the structural diagram of the BehaviorWrapper function and the BehaviorWrapper component.

[0085] 3. Data Layer

[0086] The data layer is used to store user input and ensure the uniqueness of data. The data layer receives data from the "behavior layer" and, when the data changes, promptly passes the data to the "presentation layer" through the "behavior layer" and displays it. The data layer uses the state of the React component to store data; Context is used to pass data. One advantage of Context in passing data is that data can be passed to subcomponents without being restricted by the component hierarchy.

[0087] (1) Use React.CreateContext() function to create a Context instance

[0088] (2) Define the Provider component

[0089] The Provider component uses state to store data, and then passes it to child components through Context. In addition, we also define the dispatch component that triggers state changes, and also passes it to child components through Context. In this way, the dispatch component can be obtained in the behavior layer to store the intercepted presentation layer data in the data layer. When using Provider, it needs to be placed at the top level of all presentation layer components to ensure that the behavior layer and presentation layer components will obtain data and dispatch components from the data layer.

[0090] The Provider component receives two parameters: children and initialValue:

[0091] Children: children are all the subcomponents it wraps.

[0092] initialValue: initialValue is the initial value of the form, which is used when editing the form. initialValue is the initial value of the form, which is passed in when editing the form and stored in the Provider of the "data layer". After receiving the initialValue, the Provider will initialize the initialValue as the state. After the state is initialized, the data will be passed to the "presentation layer" through the "behavior layer" to display the data.

[0093] In some implementations, for the data layer, the Provider component can be placed on top of the behavior layer component, and the behaviorWrapper component can be used to encapsulate the FormInput.

[0094] Before using the behaviorWrapper component to encapsulate FormInput, you need to introduce the FormInput component of the presentation layer and the behaviorWrapper component of the behavior layer, and then use behaviorWrapper to enhance the FormInput component to obtain a new component (named: BehaviorWrapper (FormInput)). In addition to the functions of the presentation layer, the new component also has the capabilities of the behavior layer. The enhanced new component can be directly rendered on the form interface.

[0095] (3) Dispatch component

[0096] The parameter of the dispatch component is an object with the key value of payload. The data that needs to be stored in the data layer is passed in the payload in the format of {name:'name1',value:'value1'}. The name may be separated by ".", which indicates the data level and needs to be segmented.

[0097] In addition, setStore uses callbacks to store data in order to ensure the uniqueness of the data when data storage is triggered intensively.

[0098] (4) React hook encapsulation for obtaining data

[0099] In some embodiments, the following may be used: Figure 1b The code shown is the react hook encapsulation for getting data.

[0100] (5) Get the react hook package of the dispatch component

[0101] In some embodiments, the following may be used: Figure 1c The code shown gets the react hook encapsulation of the dispatch component.

[0102] In the embodiment of the present application, the React framework has controlled characteristics and higher-order component (HOC) characteristics. Among them, HOC is an advanced technique for reusing component logic in React. HOC itself is not part of the React API, but a design pattern formed based on the compositional characteristics of React. HOC is a function whose parameter is a component and whose return value is a new component. A higher-order component converts a component into another component. HOC composes a new component by wrapping the component in a container component. HOC can also be regarded as a parameterized container component.

[0103] HOC can add features to components in the presentation layer, such as adding controlled features. The component returned by HOC maintains a similar interface to the original component. HOC can also transparently pass the input parameters (props), that is, the incoming data, to the wrapped component, that is, the controlled component, and pass the props to the user interface (UI) for processing and rendering.

[0104] Components convert props to UI. Components are the basic unit of code reuse in React. Components are composed of elements. Components accept any props and return React elements that describe the content displayed on the page. A React element represents the UI at a specific moment. Therefore, when you want to update the UI, you need to create a new element and then pass the new element to ReactDOM.render(). Call ReactDOM.render() through the callback function setInterval() to update the rendered React element. A React element can be rendered to DOM.

[0105] When the React element is a custom component, the attributes and children received by JSX are converted into a single object and passed to the component. This object is called props.

[0106] In React, mutable state is usually stored in the component's state property, due to the value property set on the form element, and can only be updated by using setState(). Therefore, the displayed value will always be this.state.value, making React's state the only data source. For example, every time a user enters something in the form, React's state is executed and updated, so the displayed value will update as the user enters. The React component that renders the form also controls what happens to the form during the user input process. Form input elements that are controlled by React in this way are called controlled components. For example, if you want the previous example to print out the name when submitted, you can write the form as a controlled component. Therefore, when the data source of the data layer changes, you can call the setState function to update the state. The setState function receives a new state value and queues a re-render of the component. State allows React components to dynamically change output content as user actions, network responses, or other changes occur.

[0107] For controlled components, the input value is always driven by React's state. The value can be passed to other UI elements or reset by other event handlers.

[0108] It should be noted that the embodiments of the present application relate to cloud computing, cloud storage, database, database management system and big data in cloud technology, which are specifically described by the following embodiments:

[0109] Among them, cloud technology is a general term for network technology, information technology, integration technology, management platform technology, application technology, etc. based on the cloud computing business model. It can form a resource pool, which is used on demand and flexible and convenient. Cloud computing technology will become an important support. The background services of the technical network system require a large amount of computing and storage resources, such as video websites, picture websites and more portal websites. With the rapid development and application of the Internet industry, in the future, each item may have its own identification mark, which needs to be transmitted to the background system for logical processing. Data of different levels will be processed separately. All kinds of industry data need strong system backing support, which can only be achieved through cloud computing.

[0110] Cloud computing refers to the delivery and use model of IT infrastructure, which means obtaining required resources through the network in an on-demand and easily scalable manner; in a broad sense, cloud computing refers to the delivery and use model of services, which means obtaining required services through the network in an on-demand and easily scalable manner. This service can be IT and software, Internet-related, or other services. Cloud computing is the product of the development and integration of traditional computer and network technologies such as grid computing, distributed computing, parallel computing, utility computing, network storage technologies, virtualization, and load balancing.

[0111] Cloud storage is a new concept that extends and develops from the concept of cloud computing. A distributed cloud storage system (hereinafter referred to as storage system) refers to a storage system that uses cluster applications, grid technology, and distributed storage file systems to bring together a large number of different types of storage devices (storage devices are also called storage nodes) in the network through application software or application interfaces to work together and provide data storage and business access functions to the outside world. For example, the second terminal can store the user data of the audience user and store the association relationship obtained from the server for cloud storage.

[0112] At present, the storage method of the storage system is: create a logical volume, and when creating a logical volume, allocate physical storage space for each logical volume. The physical storage space may be composed of disks of a storage device or several storage devices. The client stores data on a logical volume, that is, stores the data on the file system. The file system divides the data into many parts, each of which is an object. The object contains not only data but also additional information such as data identification (ID entity, ID). The file system writes each object into the physical storage space of the logical volume, and the file system records the storage location information of each object, so that when the client requests to access the data, the file system can allow the client to access the data according to the storage location information of each object.

[0113] In short, a database can be regarded as an electronic file cabinet - a place to store electronic files, where users can add, query, update, delete, and other operations on the data in the files. The so-called "database" is a collection of data that is stored together in a certain way, can be shared with multiple users, has as little redundancy as possible, and is independent of the application. For example, in the embodiment of the present application, the second terminal stores the user data of the viewer user and stores the association relationship obtained from the server.

[0114] A database management system (DBMS) is a computer software system designed for managing databases, and generally has basic functions such as storage, interception, security, and backup. The database management system can be classified according to the database model it supports, such as relational, Extensible Markup Language (XML); or according to the type of computer supported, such as server clusters, mobile phones; or according to the query language used, such as Structured Query Language (SQL), XQuery; or according to performance impulse focus, such as maximum scale, maximum operating speed; or other classification methods. Regardless of the classification method used, some DBMSs can cross categories, for example, support multiple query languages ​​at the same time. For example, in the embodiment of the present application, after receiving the instruction of the anchor user, the second terminal can query the user data of the audience user from the database management system, as well as the association relationship obtained from the server.

[0115] In addition, the server involved in the embodiments of the present application can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, as well as big data and artificial intelligence platforms.

[0116] The embodiments of the present application mainly provide the following technical solutions:

[0117] Since the UI of the application is dynamic and will change over time. Therefore, by dividing the form system into the presentation layer, behavior layer and data layer, and encapsulating the form items as controlled components, and enhancing the controlled components through HOC functions, the form is abstractly separated at the three levels of "data", "behavior" (or event) and "presentation" (i.e. UI). While ensuring the unity of the presentation layer, the data layer and the behavior layer can be freely expanded according to different scenarios through HOC functions. Therefore, by logically dividing the form system into the presentation layer, behavior layer and logic layer, the behavior layer bridges the data interaction between the presentation layer and the data layer. Therefore, when different forms have different events to be processed or different data are passed in, these events or data can be processed only in the behavior layer without modifying the presentation layer. Therefore, the separation and decoupling of the behavior layer can be achieved, and the complexity of form writing can be effectively reduced, and it is simple and easy to maintain.

[0118] Before introducing a form processing method provided by an embodiment of the present application, the process of encapsulating each form item in the presentation layer into a controlled component is first introduced. Specifically, the embodiment of the present application includes:

[0119] 101. Determine at least one first form item in the presentation layer.

[0120] The first form item is at least one of a custom form item, a step-by-step form item, or a form item with a size greater than a preset size. For example, the first form item may include single / multi-line input, a drop-down box, a radio button, a switch, and other form items.

[0121] 102. At the presentation layer, convert each first form item into a corresponding controlled component.

[0122] In some implementations, each first form item may be converted into a corresponding controlled component by encapsulation. Specifically, by utilizing the controlled characteristic to encapsulate the first form item into a controlled component, the first form item with the controlled characteristic can be extended at will. In this way, these first form items can be referenced in different forms, for example, forms in scenarios such as login forms and registration forms can all reference these first form items, that is, at least one of the first form items can be called in the target form.

[0123] In the embodiment of the present application, by encapsulating the first form item as a controlled component, the form data can be stored in the state component state in real time and the form data can be distributed to the behavior layer. The behavior layer will also pass the form data to the data layer for storage. In this way, the form data will change along with the data in the data layer, that is, it will be controlled by the data in the data layer.

[0124] In some implementations, each first form item may be converted into a corresponding controlled component by the following operations:

[0125] Convert the first form item into a controlled component;

[0126] Rendering at least one web page element of a form operation through the controlled component, and setting a detection event of a callback function for the web page element;

[0127] setting an internal value in the controlled component;

[0128] An initial value is input into the controlled component, the internal value is updated according to a default value and the initial value, and at least one web page element of a form operation is rendered through the controlled component to make the controlled component effective.

[0129] When the form operation is an input operation, the web page element may be an input element.

[0130] Take a single-line input box as an example to introduce the process of encapsulating a single-line input box as a controlled component. The encapsulated controlled component can be named: FormInput. The following is an introduction to the FormInput component:

[0131] (1) FormInput input:

[0132] defaultValue: The default value of the input box.

[0133] value: the real-time value of the input box.

[0134] onChange: callback function when the input box changes, used to pass the content of the input box.

[0135] (2) Output of FormInput:

[0136] value: The content entered by the user in the input box, which is passed using onChange.

[0137] (3)Controlled implementation of FormInput:

[0138] a. The FormInput component renders an input html element and adds an onChange detection event to the input html element;

[0139] b. Maintain an innerValue value inside the FormInput component.

[0140] When the onChange event of the input element is triggered, the user input content received by the onChange event is updated to innerValue, and the onChange function in the input of the FormInput component is triggered at the same time, and innerValue is passed as the parameter of the onChange function;

[0141] c. When the FormInput component is rendered for the first time, the innerValue value inside the FormInput component is updated according to the input value and defaultValue.

[0142] The above completes the encapsulation of the controlled characteristics of the single-line input box. For a specific structure diagram of the FormInput component obtained after encapsulation, please refer to Figure 2a All form items in the presentation layer that need to be encapsulated as controlled components can be processed as described above. For other first form items in the presentation layer that need to utilize controlled characteristics, reference can be made to the embodiment for the single-line input box, which will not be described in detail.

[0143] In the embodiment of the present application, the controlled components of the encapsulated presentation layer can be placed in different forms to form a unified presentation layer. For example, the use of the FormInput component mentioned in the above example can be used in the scenario of "filling in the user name on the login interface" and in the scenario of "filling in the user name, address and other information on the registration page". It only needs to pass different name parameters according to different scenarios.

[0144] It can be seen that by layering and encapsulating form items as controlled components, the form items can have the controlled characteristics of controlled components, which facilitates data interaction and data consistency between the presentation layer and the data layer, and completely isolates the presentation layer from the data layer.

[0145] In an embodiment of the present application, the controlled components obtained by encapsulation in the presentation layer can be placed in different forms to form a unified presentation layer. For example, after the above-mentioned FormInput component is encapsulated as a controlled component, it can be applied to scenarios such as filling in user names on the login interface and filling in user names or addresses on the registration page. It only needs to pass different name parameters according to different scenarios. Similarly, the drop-down box can also be encapsulated and named "FormSelect", which can also adapt to different form scenarios. A schematic diagram of the drop-down box can be referred to Figure 2b .

[0146] In some embodiments of the present application, a new form is first created in the data layer, and then the form is passed to the presentation layer through the behavior layer to visualize the form in the presentation layer. Since the form has an initial value and the form data is stored in the data layer, when the form needs to be edited later, the initial value initialValue can be passed in the Provider component to edit the form. The following describes the process of editing a form in the data layer, such as Figure 3a As shown, the embodiment of the present application includes:

[0147] 201. Get the status value of the initial form.

[0148] The initial form may be a blank form or a pre-set template form, which is not limited in the specific embodiments of the present application.

[0149] The state value refers to the form data currently stored in the state of the React component. The form data in the state is the data required to edit the form, that is, the state contains the data that has changed in the form in the data layer.

[0150] 202. After receiving the editing instruction for the initial form, at the data layer, input a first initial value to the Provide component.

[0151] The first initial value is the initial value of the initial form.

[0152] In some implementations, when editing the initial form at the data layer, the initial value (initialValue) of the initial form is passed to the Provider component. For details, see Figure 3b A code is shown to achieve this.

[0153] 203. Initialize the first initial value as a state value through the Provide component to obtain the target form, and transfer the target form to the behavior layer through the content instance.

[0154] When editing a form, the initialValue of the initial form is passed to the Provider component and stored in the Provider component. After receiving the initialValue, the Provider component initializes the initialValue to the state. After initialization to the state, the target form is obtained, and then the form data of the target form is passed to the presentation layer through the behavior layer to display the form data in the presentation layer.

[0155] 204. The target form is transmitted to the presentation layer through the behavior layer, so as to be visually displayed in the presentation layer.

[0156] In the embodiment of the present application, when editing a form, based on the embodiment of the present application, since each first form item is encapsulated as a controlled component, whether it is creating a new form or editing it, it can be processed uniformly without making any distinction, thereby effectively reducing the complexity of the form and achieving abstract separation of the data layer, behavior layer and presentation layer.

[0157] After the presentation layer visualizes the form, the user may enter some information into the form while browsing the form. Therefore, the present application also provides a form processing method, which is mainly introduced from scenario 1 and scenario 2. Scenario 1 mainly processes the data flow in the direction of presentation layer → behavior layer → data layer. Scenario 2 mainly processes the data flow in the direction of data layer → behavior layer → presentation layer.

[0158] In scenario 1, we take updating and synchronizing form data based on user input information as an example. Specifically, Figure 4a As shown, the embodiment of the present application includes:

[0159] 301. Obtain first input information.

[0160] The first input information is information input by the user in the presentation layer for the first form item referenced in the target form.

[0161] 302. Input the first input information into the behavior layer through the target controlled component associated with the first form item.

[0162] 303. Transmit the first input information to the data layer through the behavior layer.

[0163] In some implementations, the behavior layer includes a behavior wrapper component, and the data layer includes a dispatch component.

[0164] The behavior layer obtains the dispatch component of the data layer, and stores the first input information in the payload of the dispatch component, so as to store the first input information intercepted from the presentation layer in the data layer (i.e., trigger the update of the state through the dispatch component). The parameter of the dispatch component is an object, and the key value is payload. The data that needs to be stored in the data layer is placed in the payload and passed in. The format can be {name:'name1',value:'value1'}.

[0165] 304. At the data layer, update the target form according to the first input information.

[0166] In some implementations, when the data layer is implemented based on the React architecture, in order to pass data to the data layer, the behavior layer needs to use the dispatch component defined in the data layer to handle the interception behavior so as to dispatch the data to the data layer. In React, HTML form elements usually maintain internal state, so that the form has the default HTML form behavior, that is, browsing to a new page after the user submits the form. Therefore, executing the same code in React can facilitate the processing of form submissions and access to the form data filled in by the user. When implemented by a controlled component, when the dispatch component is introduced, the target form can be stored in the state stored in the data layer. If the first input information is passed based on the dispatch component, the update of the state can be triggered by the dispatch component. Specifically, the method also includes:

[0167] In the behavior layer, at least one component in the presentation layer is wrapped by the behavior wrapping component; and whether data changes occur in a form item in the target form;

[0168] When the first form item in which data changes in the target form meets at least one preset detection event, in the behavior layer, the first form item that changes in the presentation layer is intercepted by the dispatch component and passed to the data layer to trigger an update of the state value of the target form, that is, trigger an update of the state of the react component.

[0169] It can be seen that since a behavior layer is extracted between the data layer and the presentation layer, when different forms have different events to be processed or different data are passed in, only the behavior layer can be processed without modifying the presentation layer, thus achieving separation and decoupling.

[0170] In some implementations, when updating the target form, the difference in data format between the presentation layer and the data layer must also be considered. To improve the efficiency of data updating, a data formatting function valueFormat can be introduced. valueFormat is used to handle the difference between the data formats of the presentation layer and the data layer. valueFormat is defined by the user, the parameter is the data passed in by the presentation layer, and the return value is the data stored in the data layer. valueFormat can be empty, and the data of the presentation layer is stored in the data layer by default without any processing.

[0171] In general, if the data format of the data layer and the presentation layer is consistent, valueParse and valueFormat do not need to be set. However, in scenarios where the data format of the data layer and the presentation layer is inconsistent, valueParse and valueFormat need to be used. The following uses a double drop-down box as an example to introduce the usage scenarios of valueParse and valueFormat:

[0172] like Figure 5a The double drop-down box of the form item shown is composed of two drop-down boxes. The data stored in the data layer is a string, such as:

[0173] '{"key1":"value1","key2":"value2"}"';

[0174] In the presentation layer, for the convenience of display, it is an object (the value of key1 is displayed in the first drop-down box, and the value of key2 is displayed in the second drop-down box). The implementation code is as follows Figure 5b shown.

[0175] When the behavior layer receives data from the presentation layer, the data is an object, but the data stored in the data layer is a string. In this case, valueFormat is used for format conversion. Figure 5c The code shown here implements format conversion using valueFormat.

[0176] When the behavior layer automatically receives data from the data layer, it finds that the data is a string. Before passing it to the presentation layer, use valueParse to convert the string into an object. You can use the following method: Figure 5d The code shown here implements format conversion using valueFormat.

[0177] Compared with the prior art, in the embodiment of the present application, since the first input information obtained is the information input by the user in the presentation layer for the first form item in the target form, and the first form item is associated with the target controlled component, the controlled characteristics of the target controlled component can be used to update the target form. Since the form system is logically divided into the presentation layer, the behavior layer and the logic layer, and the behavior layer bridges the data interaction between the presentation layer and the data layer, when different forms have different events to be processed or different data are passed in, these events or data can be processed only in the behavior layer without modifying the presentation layer. Therefore, the separation and decoupling of the behavior layer can be achieved, and the complexity of form writing can be effectively reduced, and it is simple and easy to maintain.

[0178] Optionally, in some embodiments of the embodiments of the present application, after setting the detection event of the callback function for the web page element, the method further includes:

[0179] When the first input information triggers a first detection event of a web page element, the first input information obtained based on the detection event is updated into the internal value, and the callback function is triggered to output the updated internal value as a parameter of the callback function to the behavior layer

[0180] For example, since an internal value (innerValue) is maintained inside the FormInput component, when the onChange event of the input element is triggered, the user input content received by the onChange event (such as the first input information mentioned above) is updated to the innerValue, and the onChange function in the input of the FormInput component is triggered at the same time, and the innerValue is output to the behavior layer as a parameter of the onChange function.

[0181] In scenario 2, when the data in the data layer changes (for example, the page is refreshed or other reasons cause the form to be re-rendered), update and synchronize the form data as an example. Specifically, Figure 6 As shown, the embodiment of the present application includes:

[0182] 401. At the data layer, update the first form item according to the state value of the target form.

[0183] 402. Re-render the target form to update the initial value in the target controlled component.

[0184] 403. At the behavior layer, obtain the re-rendered target form from the data layer.

[0185] 404. The re-rendered target form is passed to the presentation layer through the target controlled component.

[0186] 405. In the presentation layer, data of the re-rendered target form is displayed through the target controlled component.

[0187] Optionally, in some embodiments of the present application, since the data is stored in an object using the name value as a unique identifier at the data layer, the data stored in the data layer can also be obtained according to the name. Specifically, the present application includes:

[0188] a. In the behavior layer, obtain the first form data corresponding to the target controlled component name from the data layer.

[0189] In some implementations, considering the scenario where the data in the data layer is different from the data in the presentation layer, a data parsing function valueParse can be introduced to convert the real-time value value and pass it to the component in the presentation layer. The first form data can be obtained by the following steps:

[0190] Determine the name of the target controlled component according to the first input information;

[0191] Acquire the first form data corresponding to the target controlled component name from the data layer, and use the first form data as a real-time value;

[0192] If it is determined that the data of the target form in the data layer is inconsistent with the data of the target form in the presentation layer in terms of content, the data parsing component is called to perform data transformation on the real-time value corresponding to the target form name to obtain the first form data.

[0193] In this implementation, the data parsing function is defined by the user, the parameter of the data parsing function is the value corresponding to the name in the data layer, and the return value of the data parsing function is the processed data (for example, the first form data obtained after data transformation); valueParse can be empty, and no data parsing processing will be performed when obtaining value.

[0194] In some other implementations, if the stored data structure has a deeper level, the name value can use "." as a separator to represent its level (such as: "name.subName"). When acquiring data, the deeper level data will also be acquired according to the ".". Accordingly, when acquiring the first form data, the first level of the first form data can be determined according to the target name, and then the first form data of the first level corresponding to the target name can be acquired from the data layer according to the first level.

[0195] b. Using the first form data as real-time values, and obtaining the second form data of the target form from the presentation layer.

[0196] In some implementation modes, obtaining the second form data from the presentation layer includes:

[0197] In the behavior layer, detecting data changes in the presentation layer through a behavior wrapper component;

[0198] If it is detected that the first form data changed in the target form in the presentation layer meets the preset detection event, intercepting the behavior meeting the preset detection event;

[0199] The second form data is obtained from the presentation layer, and an action of detecting an input event of a user at the presentation layer within a first duration is triggered.

[0200] c. Add the real-time value, the default value and the second form data to the input parameter object inputProps, and input the input parameter object into the presentation layer.

[0201] The input parameter object inputProps is the object passed by the data layer user to the controlled component in the presentation layer. The input parameter object inputProps is the parameter of the BehaviorWrapper component.

[0202] It can be seen that after encapsulating the first form item, both the creation and editing of the form can be handled uniformly without distinction, which effectively reduces the complexity of the form and achieves the separation of data, behavior and performance.

[0203] Optionally, in some embodiments of the present application, the behavior layer includes a packaging component, the data layer includes a distribution component, and the method further includes:

[0204] In the behavior layer, at least one component in the presentation layer is encapsulated by the encapsulation component; and whether data changes occur in the form items in the target form;

[0205] When the first form item in which data changes in the target form meets at least one preset detection event, in the behavior layer, the first form item that changes in the presentation layer is intercepted by the distribution component and transmitted to the data layer to trigger an update of the status value of the target form.

[0206] Optionally, in some embodiments of the present application, the data layer further includes a state component and a content component, and the method further includes:

[0207] In the data layer, the second form data is saved by the state component;

[0208] If the second form data changes in the data layer, then in the data layer, the changed second form data is input into the presentation layer through the behavior layer by the content component.

[0209] For easier understanding, take a website with 10 forms as an example. If the traditional coding method is used, two situations, namely, creating a new form and editing, need to be handled, which is equivalent to handling 20 situations. However, after using the solution of this application, 10 forms only need to handle 10 situations. For specific comparison charts, please refer to Figure 7 .

[0210] Figures 1a to 7 Any technical feature mentioned in any embodiment corresponding to any one of the items is also applicable to the embodiments of the present application. Figures 8 to 10 The corresponding embodiments will not be described in detail later.

[0211] A form processing method in an embodiment of the present application is described above, and a device for executing the form processing method is introduced below.

[0212] See also Figure 7 ,like Figure 7 The form processing device in the embodiment of the present application can realize the above-mentioned Figures 1a to 7 The steps of the form processing method executed in the embodiment corresponding to any one of the items. The functions implemented by the form processing device can be implemented by hardware, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above functions, and the modules can be software and / or hardware. The form processing device may include a processing module, an input-output module and an acquisition module. The functions of the processing module, the input-output module and the display module can be implemented by reference to Figures 1a to 7 Any operation of processing the form executed in the embodiment corresponding to any one of the items is not described in detail here. For example, the processing module can be used to control the input and output operations of the input and output module.

[0213] In some implementations, the acquisition module may be used to acquire first input information, where the first input information is information input by a user in a presentation layer for a first form item referenced in a target form;

[0214] The input-output module may be used to input the first input information into the behavior layer through the target controlled component associated with the first form item; and transmit the first input information into the data layer through the behavior layer;

[0215] The processing module can be used to update the target form at the data layer according to the first input information.

[0216] Before transmitting the first input information to the data layer through the behavior layer, the method further includes:

[0217] Determine at least one first form item in the presentation layer, where the first form item is at least one of a custom form item, a step-by-step form item, or a form item with a scale greater than a preset scale;

[0218] In the presentation layer, each first form item is converted into a corresponding controlled component.

[0219] In some implementation modes, in the presentation layer, converting each first form item into a corresponding controlled component includes:

[0220] Convert the first form item into a controlled component;

[0221] Rendering at least one web page element of a form operation through the controlled component, and setting a detection event of a callback function for the web page element;

[0222] setting an internal value in the controlled component;

[0223] An initial value is input into the controlled component, the internal value is updated according to a default value and the initial value, and at least one web page element of a form operation is rendered through the controlled component to make the controlled component effective.

[0224] In some implementation modes, after the detection event of setting the callback function for the web page element, the method further includes:

[0225] When the first input information triggers a first detection event of a web page element, the first input information obtained based on the detection event is updated to the internal value, and the callback function is triggered to output the updated internal value to the behavior layer as a parameter of the callback function.

[0226] In some implementations, when the target form in the data layer changes, the method further includes:

[0227] At the data layer, the first form item is updated according to the state value of the target form, and the target form is re-rendered to update the initial value in the target controlled component;

[0228] In the behavior layer, the re-rendered target form is obtained from the data layer, and is passed to the presentation layer through the target controlled component;

[0229] In the presentation layer, data of the re-rendered target form is displayed through the target controlled component.

[0230] In some implementations, before obtaining the first input information, the method further includes:

[0231] Get the initial form and the status value of the initial form;

[0232] After receiving the editing instruction for the initial form, at the data layer, inputting a first initial value to the Provide component;

[0233] Initializing the first initial value as the state value through the Provide component to obtain the target form, and transferring the target form to the behavior layer through the content instance;

[0234] The target form is transmitted to the presentation layer through the behavior layer so as to be visually displayed in the presentation layer.

[0235] In some implementations, the acquisition module is further used to acquire, at the behavior layer, first form data corresponding to the target controlled component name from the data layer, use the first form data as a real-time value, and acquire second form data of the target form from the presentation layer;

[0236] The input-output module is also used to add the real-time value, the default value and the second form data to an input parameter object, and input the input parameter object into the presentation layer.

[0237] In some implementation modes, the acquisition module is specifically used for:

[0238] Determine the name of the target controlled component according to the first input information;

[0239] Acquire the first form data corresponding to the target controlled component name from the data layer, and use the first form data as a real-time value;

[0240] If it is determined that the data of the target form in the data layer is inconsistent with the data of the target form in the presentation layer in terms of content, the data parsing component is called to perform data transformation on the real-time value corresponding to the target form to obtain the first form data.

[0241] In some implementation modes, the acquisition module is specifically used for:

[0242] In the behavior layer, detecting data changes in the presentation layer through a behavior wrapper component;

[0243] If it is detected that the first form data changed in the target form of the presentation layer meets the preset detection event, intercepting the behavior meeting the preset detection event;

[0244] The second form data is obtained from the presentation layer, and an action of detecting an input event of a user at the presentation layer within a first duration is triggered.

[0245] In some implementations, the behavior layer includes a packaging component, the data layer includes a distribution component, and the processing module is further configured to:

[0246] In the behavior layer, at least one component in the presentation layer is encapsulated by the encapsulation component; and whether data changes occur in the form items in the target form;

[0247] When the first form item in which data changes occur in the target form meets at least one preset detection event, in the behavior layer, the first form item that changes in the presentation layer is intercepted by the distribution component and transmitted to the data layer through the input-output module to trigger an update of the state value of the target form.

[0248] In some implementation modes, the acquisition module is also used in the data layer to acquire the form data of the target controlled component according to the component identifier of the target controlled component;

[0249] Passing the form data of the target controlled component as real-time values ​​and default values ​​to the behavior layer;

[0250] The input-output module is also used to transfer the form data of the target controlled component to the presentation layer through the distribution component at the behavior layer, so as to update the target form in the presentation layer.

[0251] In some implementations, the data layer further includes a state component and a content component, and the processing module is further used to:

[0252] In the data layer, the second form data is saved by the state component;

[0253] If the second form data changes in the data layer, then in the data layer, the changed second form data is input into the presentation layer through the behavior layer by the content component.

[0254] The above describes the form processing device in the embodiment of the present application from the perspective of modular functional entities. The following describes the server for executing the form processing method in the embodiment of the present application from the perspective of hardware processing. Figure 8 The entity devices corresponding to the input / output modules in the illustrated embodiment may be input / output units, transceivers, radio frequency circuits, communication modules, output interfaces, etc., and the entity devices corresponding to the acquisition modules and processing modules may be processors. Figure 8 The device 80 shown may have Fig. 9 The structure shown, when Figure 8 The device 80 shown has the following features: Fig. 9 When the structure shown is Fig. 9 The processor and the input-output unit in the device can realize the same or similar functions as the processing module, the input-output module and the acquisition module provided in the device embodiment corresponding to the device, Fig. 9 The memory in the storage device stores a computer program that needs to be called when the processor executes the above-mentioned form processing method.

[0255] Fig.10 This is a schematic diagram of a server structure provided in an embodiment of the present application. The server 1020 may have relatively large differences due to different configurations or performances, and may include one or more central processing units (full name in English: central processing units, abbreviated in English: CPU) 1022 (for example, one or more processors) and a memory 1032, and one or more storage media 1030 (for example, one or more mass storage devices) storing application programs 1042 or data 1044. Among them, the memory 1032 and the storage medium 1030 can be short-term storage or persistent storage. The program stored in the storage medium 1030 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations on the server. Furthermore, the central processing unit 1022 can be configured to communicate with the storage medium 1030 and execute a series of instruction operations in the storage medium 1030 on the server 1020.

[0256] The server 1020 may also include one or more power supplies 1026, one or more wired or wireless network interfaces 1050, one or more input and output interfaces 1058, and / or one or more operating systems 1041, such as Windows Server, Mac OS X, Unix, Linux, FreeBSD, etc.

[0257] The steps performed by the server in the above embodiment can be based on the Fig.10 The structure of the server 1020 shown in FIG. Fig.10 The steps performed by the device 60 shown can be based on the Fig.10 For example, the processor 1022 performs the following operations by calling the instructions in the memory 1032:

[0258] Acquire first input information, where the first input information is information input by a user in a presentation layer for a first form item referenced in a target form;

[0259] The first input information is input into the behavior layer through the input-output interface 1058 via the target controlled component associated with the first form item;

[0260] At the behavior layer, the first input information is transmitted to the data layer through the input / output interface 1058;

[0261] At the data layer, the target form is updated according to the first input information.

[0262] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0263] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and modules described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0264] In the several embodiments provided in the embodiments of the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the modules is only a logical function division. There may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or modules, which can be electrical, mechanical or other forms.

[0265] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical modules, that is, they may be located in one place or distributed on multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0266] In addition, each functional module in each embodiment of the present application can be integrated into a processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The above-mentioned integrated module can be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0267] In the above embodiments, all or part of the embodiments may be implemented by software, hardware, firmware or any combination thereof. When implemented by software, all or part of the embodiments may be implemented in the form of a computer program product.

[0268] The computer program product includes one or more computer instructions. When the computer program is loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium, or transmitted from a computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, a computer, a server, or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server, or data center. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a server or a data center that includes one or more available media integrations. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk Solid State Disk (SSD)), etc.

[0269] The technical solutions provided in the embodiments of the present application are introduced in detail above. The principles and implementation methods of the embodiments of the present application are explained by using specific examples in the embodiments of the present application. The description of the above embodiments is only used to help understand the methods and core ideas of the embodiments of the present application. At the same time, for those skilled in the art, according to the ideas of the embodiments of the present application, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the embodiments of the present application.

Claims

1. A form processing method, characterized in that: The method comprises: Acquire first input information, where the first input information is information input by a user in a presentation layer for a first form item referenced in a target form; Inputting the first input information into the behavior layer through the target controlled component associated with the first form item; Transmitting the first input information to the data layer through the behavior layer; At the data layer, updating the target form according to the first input information; When the target form in the data layer changes, the method further includes: At the data layer, the first form item is updated according to the state value of the target form, and the target form is re-rendered to update the initial value in the target controlled component; In the behavior layer, the re-rendered target form is obtained from the data layer, and is passed to the presentation layer through the target controlled component; In the presentation layer, data of the re-rendered target form is displayed through the target controlled component; The behavior layer includes a packaging component, the data layer includes a distribution component, and the method further includes: In the behavior layer, at least one component in the presentation layer is encapsulated by the encapsulation component; and whether data changes occur in a form item in the target form; When the first form item in which data changes in the target form meets at least one preset detection event, in the behavior layer, the first form item that changes in the presentation layer is intercepted by the distribution component and transmitted to the data layer to trigger an update of the status value of the target form.

2. The method according to claim 1, characterized in that Before transmitting the first input information to the data layer through the behavior layer, the method further includes: Determine at least one first form item in the presentation layer, where the first form item is at least one of a custom form item, a step-by-step form item, or a form item with a scale greater than a preset scale; In the presentation layer, each first form item is converted into a corresponding controlled component.

3. The method according to claim 2, characterized in that In the presentation layer, each first form item is converted into a corresponding controlled component, including: Convert the first form item into a controlled component; Rendering at least one web page element of a form operation through the controlled component, and setting a detection event of a callback function for the web page element; setting an internal value in the controlled component; An initial value is input into the controlled component, the internal value is updated according to a default value and the initial value, and at least one web page element of a form operation is rendered through the controlled component to make the controlled component effective.

4. The method according to claim 3, characterized in that After setting the detection event of the callback function for the web page element, the method further includes: When the first input information triggers a first detection event of a web page element, the first input information obtained based on the detection event is updated to the internal value, and the callback function is triggered to output the updated internal value to the behavior layer as a parameter of the callback function.

5. The method according to claim 4, characterized in that The data layer includes a Provide component; before obtaining the first input information, the method further includes: Get the initial form and the status value of the initial form; After receiving the editing instruction for the initial form, at the data layer, inputting a first initial value to the Provide component; Initializing the first initial value as the state value through the Provide component to obtain the target form, and transferring the target form to the behavior layer through the content instance; The target form is transmitted to the presentation layer through the behavior layer so as to be visually displayed in the presentation layer.

6. The method according to claim 1, characterized in that The method further comprises: At the behavior layer, obtaining first form data corresponding to the target controlled component name from the data layer, using the first form data as a real-time value, and obtaining second form data of the target form from the presentation layer; The real-time value, the default value and the second form data are added to an input parameter object, and the input parameter object is input into the presentation layer.

7. The method according to claim 6, characterized in that The step of obtaining, at the behavior layer, first form data corresponding to the name of the target controlled component from the data layer comprises: Determine the name of the target controlled component according to the first input information; Acquire the first form data corresponding to the target controlled component name from the data layer, and use the first form data as a real-time value; If it is determined that the data of the target form in the data layer is inconsistent with the data of the target form in the presentation layer in terms of content, the data parsing component is called to perform data transformation on the real-time value corresponding to the target form to obtain the first form data.

8. The method according to claim 7, characterized in that The step of obtaining the second form data of the target form from the presentation layer includes: In the behavior layer, detecting data changes in the presentation layer through a behavior wrapper component; If it is detected that the first form data changed in the target form of the presentation layer meets the preset detection event, intercepting the behavior meeting the preset detection event; The second form data is obtained from the presentation layer, and an action of detecting an input event of a user at the presentation layer within a first duration is triggered.

9. The method according to any one of claims 6 to 8, characterized in that: The data layer further includes a state component and a content component, and the method further includes: In the data layer, the second form data is saved by the state component; If the second form data changes in the data layer, then in the data layer, the changed second form data is input into the presentation layer through the behavior layer by the content component.

10. A form processing device, characterized in that: The form processing device comprises: An acquisition module, used to acquire first input information, where the first input information is information input by a user in a presentation layer for a first form item referenced in a target form; An input-output module, configured to input the first input information into a behavior layer through a target controlled component associated with the first form item; Transmitting the first input information to the data layer through the behavior layer; A processing module, configured to update the target form at the data layer according to the first input information; When the target form in the data layer changes, the form processing device is further used for: At the data layer, the first form item is updated according to the state value of the target form, and the target form is re-rendered to update the initial value in the target controlled component; In the behavior layer, the re-rendered target form is obtained from the data layer, and is passed to the presentation layer through the target controlled component; In the presentation layer, data of the re-rendered target form is displayed through the target controlled component; The behavior layer includes a packaging component, the data layer includes a distribution component, and the form processing device is further used for: In the behavior layer, at least one component in the presentation layer is encapsulated by the encapsulation component; and whether data changes occur in a form item in the target form; When the first form item in which data changes in the target form meets at least one preset detection event, in the behavior layer, the first form item that changes in the presentation layer is intercepted by the distribution component and transmitted to the data layer to trigger an update of the status value of the target form.

11. A form processing device, characterized in that: The form processing device comprises: at least one processor, memory, and input-output unit; The memory is used to store a computer program, and the processor is used to call the computer program stored in the memory to execute the method according to any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that: The method comprises instructions which, when executed on a computer, cause the computer to execute the method according to any one of claims 1 to 9.

Images