CN115438291A - A way to generate a form - Google Patents

Abstract

The invention discloses a method for generating a form, which generates a form based on Springboot and VUE front-end and back-end technology configurations, creates different form elements through the back-end interface, and includes information such as element classification and element value, and instantiates the elements into the database In the form creation, after requesting the back-end interface through the front-end, the elements are obtained, and the front-end page sets different elements on the form, including query elements and form structure display elements to form different tables, and instantiates the custom table structure to the database through front-to-back interaction , and finally through the management system page to request the back-end form structure interface to render the page to form a custom form; the invention can quickly generate a dynamic form, reduce the amount of project development, improve project development efficiency, have a high degree of customized development, and reduce development costs, thus helping The management system processes data faster and better.

Description

A way to generate a form

technical field

The invention relates to the technical field of web development, in particular to a method for generating a form.

Background technique

Web technology has become the main PC-side software technology. In the web system, the management system is an important part of it. The birth of the web management system has greatly improved the efficiency of various website content management, and greatly reduced the need for website management. maintenance costs. Content management solutions focus on the collection, management, and use of various unstructured or semi-structured digital resources, and can be organically integrated into websites with structured data.

At present, most of the existing content management systems are customized and aimed at specific aspects of business, such as: website management system, business management system, which cannot be reused and modified in real time, which increases the development cycle and development costs. In order to solve the problems of flexibility and diversity of the form page of the management system, it cannot be configured, etc., and a responsive solution is needed.

Contents of the invention

In order to solve the problems that the variety of various form pages of the above-mentioned web management system cannot be configured, which leads to an increase in development costs. The present invention provides a scheme for solving form diversity and front-end configurable form generation. Based on this scheme, the form diversity of the current management system can be solved, dynamic forms can be quickly generated, project development amount is reduced, project development efficiency is improved, and the degree of customized development is high. , reduce development costs, thereby helping the management system to process data faster and better.

The present invention achieves the above object through the following technical solutions:

A method for generating a form, comprising the steps of:

Step 1, use the mysql relational database to create the required data tables;

Step 2, use the Springboot back-end technology to write the configuration form definition logic, and use the VUE front-end technology to write the page rendering UI form definition logic;

Step 3, create a front-end form configuration interface, select the corresponding form elements through the front-end interface, generate a custom form, and save the page form structure and element creation;

Step 4: On the management system interface, the front end calls the back-end interface, the back-end returns the front-end custom form element structure, and the front-end obtains the form element structure to render the corresponding form and display it in the management system.

A further solution is that in the step 1, the data table created by using the mysql relational database includes a form element table, a form structure master table, and a form element value table for storing form-related information.

A further solution is that in the step 2, use the Springboot back-end technology to write configuration form definition logic, including different types of elements, different attribute related queries, edits, additions, deletions, etc., and use the back-end technology to write custom elements of form elements The value interface logic provides the custom element system data query function, and then uses the vue front-end technology to write the form page element combination logic to form the configuration page structure.

A further solution is that in step 3, the front-end page renders the database element data on the page through the back-end interface, the business operator selects the corresponding elements to form a custom form, and the front-end invokes the back-end code to instantiate the data structure into the database, forming a specific form.

A further solution is that in the step 4, in the web management interface, the front end renders the form structured data through the backend form structure query interface, and obtains the corresponding form example data by calling the form instance data interface, and fills and renders it to In the corresponding form, a complete form is formed.

A further solution is to calculate in real time the proportion of the verification code area scraped off by the user in the total area through the path record function added in step 1. In order to improve user experience, during the real-time calculation process of the path record function, the user's mouse Drag and drop events to perform "throttling" operations. When the area ratio reaches the threshold, the returned verification code is obtained and automatically filled in the verification code box.

The beneficial effects of the present invention are:

A method for generating a form according to the present invention generates a form based on Springboot and VUE front-end and back-end technology configurations, creates different form elements through the back-end interface, and includes information such as element classification and element value, and instantiates the elements into the database In the form creation, after requesting the back-end interface through the front-end, the elements are obtained. The front-end page sets different elements on the form, including query elements and form structure display elements to form different tables, and instantiates the custom table structure to the database through front-to-back interaction. Finally, the page is rendered through the management system page to request the back-end form structure interface to form a custom form, which can quickly generate a dynamic form, reduce the amount of project development, improve project development efficiency, have a high degree of customized development, and reduce development costs, thereby helping the management system to be more efficient. Process data faster and better.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the practical drawings required in the embodiments or descriptions of the prior art. Obviously, the accompanying drawings in the following description are only for the present invention For some embodiments, those of ordinary skill in the art can also obtain other drawings based on these drawings without any creative effort.

Fig. 1 is a schematic diagram of front-end and back-end form interaction in the present invention.

Fig. 2 is a relationship diagram of related tables in the form configuration database of the present invention.

Fig. 3 is a diagram showing the effect of elements of the present invention.

Fig. 4 is a creation diagram of the form structure of the present invention.

Fig. 5 is a diagram showing the effect of the form in the management system of the present invention.

detailed description

In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be described in detail below. Apparently, the described embodiments are only some of the embodiments of the present invention, but not all of them. Based on the embodiments of the present invention, all other implementations obtained by persons of ordinary skill in the art without making creative efforts fall within the protection scope of the present invention.

In any embodiment, as shown in Figures 1-5, a method for generating a form of the present invention includes:

Step 1, use the mysql relational database to create the required data tables;

Database creation includes form element table, form structure main table, form element value table and other main data tables, such as form element table, which is used to store the created form column fields, query fields, etc. Features include the value type of the element, the way to obtain the element value (it can be from the system interface to obtain data, or it can be a custom input value such as an input input box), element cascading relationship, element name, etc.

The main table data of the form structure mainly stores the constituent elements of the form, including column elements and query elements.

The form element value table stores data in the form of key-value to meet the storage conditions of form configurable data; in traditional form storage, most form value designs use fixed columns, which makes it impossible to meet the storage scenarios of configurable form data.

Step 2, use the Springboot back-end technology to write the configuration form definition logic, and use the VUE front-end technology to write the page rendering UI form definition logic;

Use back-end technology to write element processing logic, including different types of elements, different attribute related queries, editing, adding, deleting, etc. If the pull-down data is returned in the form of an interface when the element type is a drop-down type, it is necessary to write the corresponding pull-down data value interface and configure the interface on the current element.

Use the back-end technology to write the interface logic of the custom element value of the form element; when the front-end performs operations such as adding, deleting, modifying and checking the form value in the custom form, the corresponding form identifier such as form id and form element value is passed to the back-end in json format , with the following structure:

{"instantDataDto":[{"configId":"157","modifyNm":"**","addDto":[{"configId":"157","datas":[{"childEleId":2, "eleValue":"1000","instanceId":""},{"childEleId":1,"eleValue":"**,"instanceId":""}}],"updateDto":[],"deleteDto ":[],"verifyDto":[]}}; where configId represents the id of the form, and the passed value is the element id plus the corresponding value of the element to form a list, and each list represents the same row of form data.

And in this data structure, different addition, deletion, modification and query operations of form data are split and processed. Different operations transmit different values, and different operations are processed in blocks, which greatly increases the processing efficiency.

Use the vue front-end technology to write the combination logic of form page elements. Through the form data style returned by the back-end, the front-end writes the corresponding page rendering form logic and structure, and renders the form data.

Step 3, create a front-end form configuration interface, select the corresponding form elements through the front-end interface, generate a custom form, and save the page form structure and element creation;

The front-end interacts with the back-end by converting the form structure into json format, saving and completing the page form structure and element creation; by splitting the form into element granularity, not only the columns of the form but also the query of the form can be customized, making the form It is more customizable and extensible, expanding the usage scenarios of custom forms.

Step 4: On the management system interface, the front end calls the back-end interface, the back-end returns the front-end custom form element structure, and the front-end obtains the form element structure to render the corresponding form and display it in the management system.

In a specific embodiment, as shown in Figures 1-5, a method for generating a form of the present invention includes the following steps:

Fig. 2 is the method for configurable and dynamically generating form pages according to an embodiment of the present invention, including first using a mysql relational database to establish various data tables required by the scheme; including creating element tables:

Match the front-end and back-end form codes through the attribute values of each field of the element in the element table, and execute the corresponding value and related data interaction logic.

Use Springboot back-end technology to write element processing logic, including different types of elements, different attribute related queries, editing, adding, and deleting. For example: element types are classified into drop-down elements and text elements; in the drop-down element, the value of the drop-down element is retrieved and displayed through the backend interface defined by the element. This method can return the built-in data value of the system to the user through the interface. To avoid data confusion, the effect is shown in Figure 3.

The front-end VUE technology writes the form structure construction interface, and selects the corresponding elements through the form interface to form the query conditions of the form, the display fields of the form, and the button functions such as adding, editing, deleting, and exporting the form. For example, create a form structure as shown in Figure 4, in which the query condition drop-down value in the query condition element can be queried through the back-end interface and supports fuzzy matching query and multiple selection options.

After the form structure is created, the form structure data is encapsulated into JSON format, and the form data structure is passed to the backend by calling the backend interface, and the backend saves the form structure to the mysql database through the Springboot backend technology. For example json format:

{"configs":[{"configId":167,"configName":"Test 1","sortId":0,"formElements":[{"childEleId":2,"parentEleId":1,"eleName": "Company Code","dataName":"coCode","eleType":1,"ctroUrl":"/kpi/dimcompany/list","sort":0,"key":"coCode","value": "coName","dataType":"String","dataLen":100,"fieldName":"coCode","subClassEleId":[3,5,41,46],"require":1}],"queryElements ":[{"eleId":1,"eleName":"Company Name","queryDataName":"coCode","eleType":1,"ctroUrl":"/kpi/dimcompany/list","sort": 0,"queryEleId":2,"key":"coCode","value":"coName"}]}]}

Among them, configs identifies the form name, formElements identifies the form display columns, and queryElements identifies the form query conditions.

On the web management system page, the front-end code obtains the form structure data and content value data by calling the back-end interface, and the front-end renders the form structure data into the page according to the formElements, queryElements and other element fields and form content data through a self-developed method to complete the form rendering Display; the page effect is shown in Figure 5.

The above is only a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Anyone skilled in the art can easily think of changes or substitutions within the technical scope disclosed in the present invention. Should be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be determined by the protection scope of the claims. In addition, it should be noted that the various specific technical features described in the above specific embodiments can be combined in any suitable way if there is no contradiction. The combination method will not be described separately. In addition, various combinations of different embodiments of the present invention can also be combined arbitrarily, as long as they do not violate the idea of the present invention, they should also be regarded as the disclosed content of the present invention.

Claims (5)

1. A method of generating a form, comprising the steps of:

step 1, establishing a required data table by using a mysql relational database;

step 2, compiling configuration form definition logic by using a Springboot back-end technology, and compiling page rendering UI form definition logic by using a VUE front-end technology;

step 3, creating a front-end form configuration interface, selecting a corresponding form element through the front-end interface, generating a self-defined form, and storing and finishing the page form structure and element creation;

and 4, in the management system interface, the front end calls the rear end interface, the rear end returns the front end custom table element structure, and the front end obtains the table element structure to render a corresponding form and display the form in the management system.

2. The method of generating forms of claim 1, wherein in step 1, the data tables created using the mysql relational database comprise form unit element tables, form structure main tables, and form unit element value tables for storing form related information.

3. The method for generating the form according to claim 1, wherein in the step 2, the Springboot backend technology is used to write the configuration form definition logic, including the element different types, the different attribute related query, edit, add, delete, etc., and the backend technology is used to write the form element custom element value interface logic, providing the custom element system data query function, and then the vue frontend technology is used to write the form element combination logic, forming the configuration page structure.

4. The method for generating a form of claim 1, wherein in step 3, the front-end page renders database element data on the page through the back-end interface, the business operator selects corresponding elements to form a custom form, and the front-end calls the back-end code to instantiate the data structure into the database to form a specific form.

5. The method for generating the form according to claim 1, wherein in the step 4, in the web management interface, the front end renders the form structured data through the back end form structure query interface, and obtains the corresponding form instance data by calling the form instance data interface, and fills and renders the form into the corresponding form, thereby forming the complete form.

Images