Data-driven form application method and system
Through the data-driven form application method, the problems of slow and low form rendering speed in the banking system are solved, efficient rendering and flexible configuration are achieved, maintenance costs are reduced, and user experience and system reusability are improved.
Patent Information
- Application Number
- CN202510723315.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-30
- Publication Date
- 2025-09-05
AI Technical Summary
The form system of the existing banking system has problems such as slow rendering speed, low efficiency, poor user experience, high maintenance costs, and poor reusability. Especially when large-scale data collection is not efficient, and the code is redundant, complex development, and high maintenance costs.
Using the data-driven form application method, the page is rendered by generating form structure data, custom or default page style code, rendering the page with the rendering engine algorithm, and dynamic analysis and component loading are combined with the Vue framework to achieve flexible configuration and efficient rendering of form data.
It improves form rendering efficiency, reduces technical threshold, reduces labor costs, improves system reusability and maintainability, has better user experience, lightweight code, and faster loading speed.
Smart Images
Figure CN120596092A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of form application, and in particular to a data-driven form application method and system. Background Art
[0002] With the increasing number of business projects and management systems in the current banking industry, the form systems used to interact with and collect data from users are becoming increasingly important. However, many banks face challenges such as large and complex business systems, redundant functionality, and complex operational development. Some systems' form systems still rely on outdated or inefficient technical architectures, resulting in low efficiency, low security, high maintenance costs, and slow R&D efficiency. These constraints make it difficult for existing form technologies to support the rapidly growing business needs of banks.
[0003] Existing methods, such as node rendering, are currently common solutions in the industry. However, these solutions are inefficient for large-scale data collection, resulting in slow page rendering, frequent lags in customer interactions, and heavy reliance on the customer's own equipment. Furthermore, these solutions require high labor costs, and if development and maintenance are poorly managed, they can easily lead to increasingly bloated projects and excessively redundant code. Furthermore, as demand increases, personnel at all levels must constantly process and develop, performing repetitive tasks and building systems.
[0004] Specifically, the problems of existing methods are as follows:
[0005] 1. A form with strong coupling between code and data, where the entire form is implemented by writing a Dom node in code;
[0006] 2. The form is strongly tied to the business. The system's form applications require repetitive development and logic processing. Changes in requirements and interactions require additional development, resulting in a lack of flexibility and ease of use.
[0007] 3. Slow rendering speed, poor user experience, low data collection efficiency, poor business scenario reusability, and high maintenance costs. Summary of the Invention
[0008] In order to solve the above problems in the prior art, the present invention provides a data-driven form application method and system to solve the technical problems of slow rendering speed and low efficiency of the form system in the prior art.
[0009] A data-driven form application method, comprising:
[0010] Step 1: Based on the requirements and product documentation, communicate with relevant business and technical personnel to determine the scope of requirements and generate form structure data;
[0011] Step 2: Determine whether a customized page style is required. If so, generate a customized page style code based on the visualization tool combined with the form data structure. If not, use the default page style code.
[0012] Step 3: Compile the form structure data and the corresponding page code to obtain page data, and then render the page data according to the rendering engine algorithm to obtain the browser page;
[0013] Step 4: Collect user input data through the rendered browser page;
[0014] Step 5: After data collection is completed, submit the collected form data and interact with the back-end interface.
[0015] Furthermore, step 1 includes: developers or technology managers generate form data according to requirements, perform form configuration (configure the form page display content), form item configuration, i.e., basic form JsonSchema format data, which can configure the form display form, whether to display, verification rules, UI interaction, default data; set other configuration items; and integrate them into the code;
[0016] Furthermore, the page code generated in step 2 can be developed through a visual code generation tool or through a unified form interface document.
[0017] Furthermore, the step 3 includes:
[0018] Step 3.1: Parse and verify configuration items: Parse and verify the externally passed form basic configuration, form basic item data, and data source configuration to check whether the data is normal, the format is correct, and the data type is correct. If the verification fails, an error is thrown; if it passes, proceed to the next step.
[0019] Step 3.2: Add monitoring to the relevant configuration item data passed in step 3.1 and temporarily store them as system internal variables, and transfer them to the next step of the process;
[0020] Step 3.3: The system data processing layer receives the data transferred in 3.2, parses the configuration item data and configures it into the corresponding form attributes. It also parses and temporarily stores the rendering class configuration. It reads the form basic item configuration, compiles it, converts the form basic item JsonSchema data into a language recognizable by the Vue framework, and temporarily stores it.
[0021] Step 3.4: Encapsulate the temporary data (rendering class configuration and form basic item configuration data) in 3.3, dynamically parse the form basic data, and dynamically load basic components (such as text, numbers, dates, drop-down lists, etc.) to generate complete page data;
[0022] Step 3.5: Render the page data generated in step 3.4 through the Vue framework to obtain a browser page;
[0023] Step 3.6: If the incoming data changes, the system monitors the data internally, re-triggers the data flow, and processes and compiles the changed data until step 3.5 is completed.
[0024] Furthermore, the step 4 includes: collecting the user's input, and performing real-time verification according to the verification rules in the form structure data to ensure that the data input by the user meets the requirements.
[0025] Furthermore, the step 5 includes:
[0026] Step 5.1: When the user submits the form, the front-end triggers the submission verification according to the configuration rules. If the verification passes, the front-end sends the form data to the back-end interface, and the back-end processes the data and returns the result;
[0027] Step 5.2: After completing step 5.1, the backend processes the data and returns the result. The frontend receives the response returned by the backend and performs corresponding processing based on the response result, such as displaying a success or error message. At this point, the entire process is completed.
[0028] A data-driven form application system, including a form basic data configuration module, a data management module, a data processing module, a data rendering module and an application display module;
[0029] The form basic data configuration module is used to determine the demand range according to the demand and product documents to generate form structure data;
[0030] The data management module is used to verify the form structure data and add monitoring;
[0031] The data processing module is used to compile the form structure data to obtain page data;
[0032] The data rendering module is used to render the page data into a browser page according to the rendering engine algorithm;
[0033] The application display module is used to collect user interaction data and verify the feedback.
[0034] The beneficial effects of the present invention include:
[0035] The present invention adopts a new framework and self-developed data compilation algorithm to overcome the problems of slow form rendering speed, low efficiency, poor reusability, serious business coupling, high technical threshold, and high R&D efficiency and low cost in the existing technology. The technology has higher rendering efficiency and is more lightweight. The overall content is less than 80kb in size after packaging and compression, and the loading speed is faster. It solves the current immature form system and bloated and difficult-to-maintain forms in the industry. The system has no connection with the business and is independent of the business system, which increases the reusability and maintainability of the system. The new architecture and data-driven implementation method make rendering more efficient and provide a better user experience. The out-of-the-box usage method greatly reduces the threshold for cross-departmental communication, allowing non-professional technicians to easily get started, reducing labor costs and promoting the training and development of relevant talents. BRIEF DESCRIPTION OF THE DRAWINGS
[0036] Figure 1 This is a flowchart of a data-driven form application method involved in an embodiment of the present application.
[0037] Figure 2 This is a schematic diagram of the form data structure involved in the embodiment of this application.
[0038] Figure 3 This is a schematic diagram of a visual code generation tool involved in an embodiment of the present application.
[0039] Figure 4 This is a schematic diagram of the generated code page content involved in an embodiment of the present application.
[0040] Figure 5 This is an architecture diagram of a data-driven form application system involved in an embodiment of the present application. DETAILED DESCRIPTION
[0041] In order to make the purpose, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the application for protection, but merely represents the selected embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without making creative work are within the scope of protection of this application.
[0042] Example 1
[0043] A data-driven form application method, such as Figure 1 Shown, including:
[0044] Step 1: Based on the requirements and product documentation, communicate with relevant business and technical personnel to determine the scope of requirements and generate form structure data;
[0045] Development or technology generates form data, performs form configuration (configures the display content of the form page), form item configuration, that is, basic form JsonSchema format data, which can configure the form display format (such as text, numbers, dates, drop-down lists, etc.), whether to display, validation rules, UI interaction, default data, etc.; set other configuration items, such as data source, rendering template, etc.; integrate into the code, the data structure is as follows Figure 2 ; At the same time, this configuration item supports passing in custom form basic components and using the business's own interactions to achieve the desired effect.
[0046] Step 2: Determine whether a custom page style is required. If so, generate a custom page style code based on the visualization tool combined with the form data structure. If not, use the default page style code.
[0047] Using a unified visual form page generation tool, you can directly drag and drop to generate and preview the effect in real time, and finally generate a complete code page. The design tool is as follows Figure 3 , the generated content is as follows Figure 4 . Figure 3 In the , the left side is the basic component types, including text input, drop-down selector, tree selector, date component, etc., as well as some special types of display components, such as verification code, text combined with input components, etc.; the types and number of components are still being enriched, and more basic components will be supported in the future. There are also templates to choose from on the left. By selecting the corresponding template, you can generate form pages of different styles according to the template type with one click. It is convenient and fast. You only need to make simple adjustments to output the form page. The middle is the form page preview and display area. Drag the component on the left into the middle area to display the corresponding component content. You can also drag up and down to adjust the display order and style. On the right is the form basic item data configuration and form style configuration tool, which can be used to make more detailed configurations for each display component to meet the needs of various businesses.
[0048] If development is performed through a unified form interface document and the system developer generates the form JSON data, it is necessary to independently develop the form page and use the uniformly provided form system components for debugging and development to meet the business system requirements.
[0049] Step 3: Compile the form structure data and the corresponding page code to obtain page data, and then render the page data according to the rendering engine algorithm to obtain the browser page;
[0050] Step 3.1: Parse and verify configuration items: Parse and verify the externally passed form basic configuration, form basic item data, and data source configuration to check whether the data is normal, the format is correct, and the data type is correct. If the verification fails, an error is thrown; if it passes, proceed to the next step.
[0051] Step 3.2: Add monitoring to the relevant configuration item data passed in step 3.1 and temporarily store them as system internal variables, and transfer them to the next step of the process;
[0052] Step 3.3: The system data processing layer receives the data transferred in 3.2, parses the configuration item data and configures it into the corresponding form attributes. It also parses and temporarily stores the rendering class configuration. It reads the form basic item configuration, compiles it, converts the form basic item JsonSchema data into a language recognizable by the Vue framework, and temporarily stores it.
[0053] Step 3.4: Encapsulate the temporary data (rendering class configuration and form basic item configuration data) in 3.3, dynamically parse the form basic data, and dynamically load basic components (such as text, numbers, dates, drop-down lists, etc.) to generate complete page data;
[0054] Step 3.5: Render the page data generated in step 3.4 through the Vue framework to obtain a browser page;
[0055] Step 3.6: If the incoming data changes, the system monitors the data internally, re-triggers the data flow, and processes and compiles the changed data until step 3.5 is completed.
[0056] Step 4: Collect user input data through the rendered browser page;
[0057] Collect user input and perform real-time verification based on the validation rules in the form structure data to ensure that the data entered by the user meets the requirements.
[0058] Step 5: After data collection is completed, submit the collected form data and interact with the back-end interface.
[0059] Step 5.1: When the user submits the form, the front-end triggers the submission verification according to the configuration rules. If the verification passes, the front-end sends the form data to the back-end interface, and the back-end processes the data and returns the result;
[0060] Step 5.2: After completing step 5.1, the backend processes the data and returns the result. The frontend receives the response returned by the backend and performs corresponding processing based on the response result, such as displaying a success or error message. At this point, the entire process is completed.
[0061] Example 2
[0062] Refer to the attached Figure 5 , a data driven form application system, it should be understood that the system is similar to the above-mentioned Figure 1 The method embodiment corresponds to the following Figure 1 The various steps involved in the method embodiment and the specific functions of the system can be found in the description above. To avoid repetition, detailed description is appropriately omitted here.
[0063] A data-driven form application system, including a form basic data configuration module, a data management module, a data processing module, a data rendering module and an application display module;
[0064] The form basic data configuration module is used to determine the demand range according to the demand and product documents to generate form structure data;
[0065] The data management module is used to verify the form structure data and add monitoring;
[0066] The data processing module is used to compile the form structure data to obtain page data;
[0067] The data rendering module is used to render the page data into a browser page according to the rendering engine algorithm;
[0068] The application display module is used to collect user interaction data and verify the feedback.
[0069] Specifically, the bottom layer is the foundation of the system. The system designs and provides a set of standard data structure languages. The data formats of various channels are unified and integrated, and unified interface documents are provided to each channel and platform. The platform and channel return data to us based on the documents, and the system performs unified data processing and verification at the data receiving layer.
[0070] At the same time, data is monitored and stored to prevent data from being exposed in the browser, causing data pollution and leakage, and causing security issues;
[0071] Next, the data will be compiled and processed. According to the data transferred in the previous step, it will be compiled and converted into a language that can be recognized by the computer framework;
[0072] After the compilation is complete, the next step is to assemble the compilation framework with the basic components to generate tree-structured data that can be rendered by the browser. The basic form components (such as text, numbers, dates, drop-down lists, etc.) are uniformly encapsulated by the system and dynamically loaded on demand to improve the loading speed. Finally, the browser page is rendered.
[0073] After rendering is completed, if there is a change in the data, the data will be re-circulated and processed according to the monitoring situation, and only the changed part will be updated in the end, which greatly saves browser resources and improves rendering efficiency.
[0074] The above-described embodiments merely represent specific implementation methods of the present application. While the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of protection of the present application. It should be noted that a person skilled in the art would be able to make numerous variations and improvements without departing from the technical concept of the present application, and all such variations and improvements fall within the scope of protection of the present application.
Claims
1. A data-driven form application method, characterized in that: The following steps are involved: Step 1: Determine the scope of requirements and generate form structure data based on requirements and product documents; Step 2: Determine whether a custom page style is required. If so, generate a custom page style code based on the visualization tool combined with the form data structure. If not, use the default page style code. Step 3: Compile the form structure data and the corresponding page code to obtain the page data, and then render the page data to the browser page according to the rendering engine algorithm; Step 4: Collect user input data through the rendered browser page; Step 5: After data collection is completed, submit the collected form data and interact with the back-end interface.
2. A data-driven form application method according to claim 1, characterized in that: The step 1 includes: generating form data according to form requirements, configuring the form, and then integrating it into the code; the form configuration includes form item configuration and other setting item configuration, and the form item configuration includes configuring the form display format, whether to display, verification rules, UI interaction, and default data.
3. A data-driven form application method according to claim 1, characterized in that: The page code in step 2 is developed by a visual code generation tool or a unified form interface document.
4. The data-driven form application method according to claim 1, characterized in that: The step 3 includes: Step 3.1: Parse and verify configuration items: Parse and verify the externally passed form basic configuration, form basic item data, and data source configuration to check whether the data is normal, the format is correct, and the data type is correct. If the verification fails, an error is thrown; if it passes, proceed to the next step. Step 3.2: Add monitoring to the relevant configuration item data passed in step 3.1 and temporarily store them as system internal variables, and transfer them to the next step of the process; Step 3.3: The system data processing layer receives the data transferred in 3.2, parses the configuration item data and configures it into the corresponding form attributes. It also parses and temporarily stores the rendering class configuration. It reads the form basic item configuration, compiles it, converts the form basic item JsonSchema data into a language recognizable by the Vue framework, and temporarily stores it. Step 3.4: Encapsulate the temporarily stored data in 3.3, dynamically parse the basic form data, and dynamically load the basic components to generate complete page data; Step 3.5: Render the page data generated in step 3.4 through the Vue framework to obtain a browser page; Step 3.6: If the incoming data changes, the system monitors the data internally, re-triggers the data flow, and processes and compiles the changed data until step 3.5 is completed.
5. The data-driven form application method according to claim 1, characterized in that: The step 4 includes: collecting the user's input, and performing real-time verification according to the verification rules in the form structure data to ensure that the data entered by the user meets the requirements.
6. A data-driven form application method according to claim 1, characterized in that: The step 5 comprises: Step 5.1: When the user submits the form, the front-end triggers the submission verification according to the configuration rules. If the verification passes, the front-end sends the form data to the back-end interface, and the back-end processes the data and returns the result; Step 5.2: After completing step 5.1, the front-end receives the response returned by the back-end and performs corresponding processing based on the response result.
7. A data-driven form application system, characterized in that: Including form basic data configuration module, data management module, data processing module, data rendering module and application display module; The form basic data configuration module is used to determine the demand range according to the demand and product documents to generate form structure data; The data management module is used to verify the form structure data and add monitoring; The data processing module is used to compile the form structure data to obtain page data; The data rendering module is used to render the page data into a browser page according to the rendering engine algorithm; The application display module is used to collect user interaction data and verify the feedback.