CN115438291A - Method for generating form - Google Patents
Method for generating form Download PDFInfo
- Publication number
- CN115438291A CN115438291A CN202211240026.4A CN202211240026A CN115438291A CN 115438291 A CN115438291 A CN 115438291A CN 202211240026 A CN202211240026 A CN 202211240026A CN 115438291 A CN115438291 A CN 115438291A
- Authority
- CN
- China
- Prior art keywords
- interface
- data
- page
- elements
- generating
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a method for generating a form, which is characterized in that the form is generated based on Springboot and VUE front-end and back-end technical configuration, different form elements are created through a back-end interface and comprise information such as element classification and element dereferencing, the elements are instantiated into a database, the elements are obtained after the back-end interface is requested through a front end in the form creation, a front-end page sets different elements including query elements and form structure display elements to the form to form different forms, a user-defined form structure is instantiated into the database through front-back interaction, and finally the page is rendered through a management system page request back-end form structure interface to form a user-defined form; the invention can quickly generate the dynamic form, reduce the project development amount, improve the project development efficiency, have high customized development degree and reduce the development cost, thereby helping the management system to process data more quickly and better.
Description
Technical Field
The invention relates to the technical field of web development, in particular to a form generating method.
Background
The web technology has become a main PC end software technology, the management system class in the web system is an important component, the birth of the management system of the web greatly improves the content management efficiency of various websites and greatly reduces the website management and maintenance cost. The content management solution mainly solves the collection, management and use of various unstructured or semi-structured digital resources, and can be organically integrated into a website of structured data.
Currently, most existing content management systems are customized and are directed to specific aspects of the service, such as: the website management system and the service management system cannot be repeatedly used and modify the change form in real time, and the development period and the development cost are increased. In order to solve the problems that the form page of the management system is flexible and diverse and cannot be configured, a response solution is needed.
Disclosure of Invention
The method aims to solve the problems that the development cost is increased and the like due to the fact that the diversity of various forms of the web management system cannot be matched. The invention provides a scheme for generating a form by front and back end configuration, which solves the form diversity of the existing management system, can quickly generate a dynamic form, reduces the project development amount, improves the project development efficiency, has high customized development degree, and reduces the development cost, thereby helping the management system to process data more quickly and better.
The invention achieves the above purpose through the following technical scheme:
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.
Further, in the step 1, the data table created by using the mysql relational database includes a form element table, a form structure main table, and a form element value table, and is used for storing the related information of the form.
In the step 2, a Springboot back-end technology is used for compiling configuration form definition logic including related query, editing, adding, deleting and the like of different types and attributes of elements, a back-end technology is used for compiling form element custom element value interface logic to provide a custom element system data query function, and then a vue front-end technology is used for compiling form page element combination logic to form a configuration page structure.
In the step 3, the front-end page renders the database element data on the page through the back-end interface, the service operator selects the corresponding elements to form a self-defined form, and the front-end calls the back-end code to instantiate the data structure to the database to form a specific form.
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, acquires the corresponding form example data through calling the form example data interface, and performs filling rendering to the corresponding form to form a complete form.
The method further comprises the steps that the proportion of the area in the total area is scraped by a user through the path recording function added in the step 1 in real time, in order to improve user experience, in the real-time calculation process of the path recording function, a 'throttling' operation is carried out on a mouse dragging event of the user, and when the area proportion reaches a threshold value, a returned verification code is obtained and automatically filled into a verification code frame.
The invention has the beneficial effects that:
the invention discloses a method for generating a form, which is based on the front-end and back-end technical configuration of Springboot and VUE to generate the form, different form elements are created through a back-end interface and comprise information of element classification, element value and the like, the elements are instantiated into a database, the elements are obtained after the back-end interface is requested through the front end in the form creation, different elements including query elements and form structure display elements are set on the form through a front-end page to form different forms, a user-defined form structure is instantiated into the database through front-back interaction, and finally the page is rendered through a management system page request back-end form structure interface to form the user-defined form.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the embodiments or the drawings needed to be practical in the prior art description, and obviously, the drawings in the following description are only some embodiments of the present invention, and other drawings can be obtained by those skilled in the art without creative efforts.
FIG. 1 is a schematic diagram of front and back end form interaction according to the present invention.
FIG. 2 is a relational diagram of a form configuration database relational table according to the present invention.
FIG. 3 is a diagram showing the effect of the elements of the present invention.
FIG. 4 is a diagram of the form structure creation of the present invention.
FIG. 5 is a diagram illustrating the effect of the form in the management system according to the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the technical solutions of the present invention will be described in detail below. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the examples given herein without any inventive step, are within the scope of the present invention.
In any embodiment, as shown in fig. 1-5, a method of generating a form of the present invention includes:
step 1, establishing a required data table by using a mysql relational database;
the database creation includes a form element table, a form structure master table, a form element value table and other main data tables, such as a form element table, which is used for storing created form column fields, query fields and the like, and in the form element, the element characteristics include the value type of the element, the element value acquisition path (which may be from a system interface to acquire data, or may be a custom input value such as an input box), the element cascade relationship, the element name and the like.
The form structure main table data mainly stores the constituent elements of the form, including column elements and query elements.
The table unit element value table stores data in a key-value form so as to meet the storage condition of the configurable data of the form; in the traditional form storage, most form value designs adopt fixed columns, so that the configurable form data storage scene cannot be met.
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;
element processing logic is written by using a back-end technology, and comprises related inquiry, editing, adding, deleting and the like of different types and different attributes of elements. If the element type is a pull-down type, the pull-down data is returned by adopting an interface form, and at the moment, a corresponding pull-down data value-taking interface needs to be compiled and configured on the current element.
Compiling table element custom element value interface logic by using a back-end technology; when the front end performs operations such as adding, deleting, modifying, checking and the like on form values in a user-defined form, corresponding form identifications such as form ids and form element values are transmitted to the rear end through a json format, and the structure is as follows:
{ "instantDataDto" [ { "configId": "157", "modifyNm": "-," addDto ": {" configId ":"157"," dates ": {" child EleID ":2," eleValue ": 1000", "instanceId": "", "{" child EleEleID ":1," eleValue ":" -, "instanceId": } ], "updateDto" [ ], "deleteDto": and [ ], "verifDto": }; the configId represents the id of the form, the pass value is the element id plus the corresponding value of the element, a list is formed, and each list represents the data of the same row form.
In addition, in the data structure, different operations of adding, deleting, modifying and checking the form data are split, different numerical values are transmitted by different operations, and the processing efficiency is greatly increased by carrying out blocking processing on different operations.
And compiling form page element combination logic by using vue front-end technology, and compiling corresponding page rendering form logic and structure by the front end through a form data style returned by the back end to render the form data.
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;
the front end interacts with the back end by converting the form structure into a json format, and saves the form structure and the element creation; by splitting the form into element granularity, the form column can be customized, the form query can also be customized, the form customization and expansibility are higher, and the use scene of the customized form is enlarged.
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.
In one embodiment, as shown in fig. 1-5, a method of generating a form of the present invention comprises the steps of:
FIG. 2 is a diagram illustrating a method for configurable dynamic generation of a form page according to an embodiment of the present invention, including first using a mysql relational database to build various data tables required by the present solution; includes creating an element table:
and matching the attribute values of the fields of the elements in the element table with the front-end and back-end form codes, and executing corresponding values and related data interaction logics.
And compiling element processing logic by using a Springboot back-end technology, wherein the element processing logic comprises related inquiry, edition, addition and deletion of different types and different attributes of elements. For example: the element types are classified into pull-down elements and text elements; in the pull-down elements, values of the pull-down elements are valued and displayed through a rear-end interface defined by the elements, and the method can return data values built in the system to a user through an interface mode, so that data confusion is avoided, and the effect is shown in fig. 3.
The front-end VUE technology compiles a form structure construction interface, and corresponding elements are selected through the form interface to form the functions of the query conditions, the form display fields, the addition, the editing, the deletion, the export and the like of the form. For example, a form structure is created as shown in fig. 4, in which the query condition pull-down value in the query condition element can be queried through a backend interface and supports fuzzy matching queries and multiple selection options.
After the form structure is created, the form structure data is packaged into a JSON format, the form data structure is transmitted into the back end by calling a back end interface, and the form structure is stored into a mysql database by the back end through a Springboot back end technology. For example, the json format:
<xnotran> { "configs": [ { "configId":167, "configName": " 1", "sortId":0, "formElements": [ { "childEleId":2, "parentEleId":1, "eleName": " ", "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": " ", "queryDataName": "coCode", "eleType":1, "ctroUrl": "/kpi/dimcompany/list", "sort":0, "queryEleId":2, "key": "coCode", "value": "coName" } ] } ] } </xnotran>
Wherein configs identifies the form name, formElements identifies the form display column, and queryleelements identifies the form query condition.
The front end codes acquire form structure data and content value data by calling a rear end interface, and the front end renders the form structure data into a page according to element fields such as formElements and queryElements and the form content data by a self-research method to finish form rendering display; the page effect is shown in fig. 5.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims. It should be noted that the various technical features described in the above embodiments can be combined in any suitable manner without contradiction, and the invention is not described in any way for the possible combinations in order to avoid unnecessary repetition. In addition, any combination of the various embodiments of the present invention is also possible, and the same should be considered as the disclosure of the present invention as long as it does not depart from the spirit 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.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211240026.4A CN115438291A (en) | 2022-10-11 | 2022-10-11 | Method for generating form |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211240026.4A CN115438291A (en) | 2022-10-11 | 2022-10-11 | Method for generating form |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115438291A true CN115438291A (en) | 2022-12-06 |
Family
ID=84250348
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211240026.4A Pending CN115438291A (en) | 2022-10-11 | 2022-10-11 | Method for generating form |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115438291A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117331560A (en) * | 2023-11-24 | 2024-01-02 | 杭银消费金融股份有限公司 | Front-end form page generation method and system |
-
2022
- 2022-10-11 CN CN202211240026.4A patent/CN115438291A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117331560A (en) * | 2023-11-24 | 2024-01-02 | 杭银消费金融股份有限公司 | Front-end form page generation method and system |
| CN117331560B (en) * | 2023-11-24 | 2024-02-23 | 杭银消费金融股份有限公司 | Front-end form page generation method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108038222B (en) | System of entity-attribute framework for information system modeling and data access | |
| CN109101652B (en) | Label creating and managing system | |
| CN106095862B (en) | Storage method of centralized extensible fusion type multi-dimensional complex structure relation data | |
| US8510261B1 (en) | System and method of generating in-memory models from data warehouse models | |
| CN110673848B (en) | Enterprise information management system configuration device based on JavaWeb | |
| CN101686146B (en) | Method and equipment for fuzzy query, query result processing and filtering condition processing | |
| US20080059449A1 (en) | Apparatus and method for processing queries against combinations of data sources | |
| CN106649225A (en) | JSON self-definition-based report generation system and method | |
| CN115617327A (en) | Low code page building system, method and computer readable storage medium | |
| CN112328212A (en) | Rapid development platform based on separation of front end and rear end of engine mode and use method thereof | |
| CN101788994A (en) | Method for constructing data display model and method and device for displaying data | |
| CA2519001A1 (en) | System and method of data agnostic business intelligence query | |
| US20070067323A1 (en) | Fast file shredder system and method | |
| CN105653755B (en) | A kind of auto navigation interface instrument based on the exploitation of SGE shape library | |
| CN101408909B (en) | Method for describing product information model | |
| CN112035197B (en) | Configuration method and device of front-end page | |
| KR20160053933A (en) | Smart search refinement | |
| CN111984176A (en) | Software online development platform and development method | |
| WO2020223997A1 (en) | Data analysis software architecture design method capable of implementing global configuration of storage, calculation and display | |
| CN101122915A (en) | Search engine based on parameter | |
| CN115438291A (en) | Method for generating form | |
| US10776351B2 (en) | Automatic core data service view generator | |
| Blankenberg et al. | Using a graph database for the ontology-based information integration of business objects from heterogenous Business Information Systems | |
| CN115291869A (en) | Zero-code form generation method and system based on vue custom component | |
| US20180157731A1 (en) | Hierarchy member selections in queries based on relational databases |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |