CN112464070A - Vue-based form configuration method, system, computer equipment and storage medium - Google Patents
Vue-based form configuration method, system, computer equipment and storage medium Download PDFInfo
- Publication number
- CN112464070A CN112464070A CN202011337485.5A CN202011337485A CN112464070A CN 112464070 A CN112464070 A CN 112464070A CN 202011337485 A CN202011337485 A CN 202011337485A CN 112464070 A CN112464070 A CN 112464070A
- Authority
- CN
- China
- Prior art keywords
- vue
- end page
- page
- configuration information
- type
- 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/953—Querying, e.g. by the use of web search engines
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/245—Query processing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/245—Query processing
- G06F16/2455—Query execution
- G06F16/24564—Applying rules; Deductive queries
-
- 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/957—Browsing optimisation, e.g. caching or content distillation
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computational Linguistics (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a form configuration method, a system, computer equipment and a storage medium based on Vue; the method comprises the following steps: s1, entering the basic structure of the front-end page rendering front-end page, including the steps of inquiring form configuration information, judging and processing the form parameters which can be viewed and displayed by the current user by the back-end server, and returning to the front-end page for processing; s2, the front page processes the form parameters returned by the back server, including the step of the front Vue obtaining the form configuration information, the step of decoding the parameters according to the defined rules and the step of forming the basic structure of the form and displaying on the front page; s3, submitting a form by a front end page; the invention has the beneficial effects that: form data can be conveniently and quickly generated according to configuration.
Description
Technical Field
The invention relates to the technical field of form processing, in particular to a form configuration method based on Vue.
Background
There are many methods for form configuration management in the industry, and there are many technical problems and use problems in the process of implementing and using the methods by users.
Specifically, these problems mainly include: 1. there are often input content and parameters to query or process data; 2. writing a form front-end page aiming at the input of a user for the user to fill in; 3. the form repeatability is very high, and a plurality of front-end pages can use the same form, so that the resource waste is caused; 4. too many forms, the amount of code becomes large, and waste of time and energy is caused to personnel.
Disclosure of Invention
In order to overcome the defects of the prior art, the invention provides a form configuration method, a form configuration system, a computer device and a storage medium based on Vue, and form data can be generated conveniently and rapidly according to configuration.
The technical scheme adopted by the invention for solving the technical problems is as follows: in a Vue-based form layout method, the improvement comprising the steps of:
s1, entering the basic structure of the front-end page rendering front-end page, including the steps of inquiring form configuration information, judging and processing the form parameters which can be viewed and displayed by the current user by the back-end server, and returning to the front-end page for processing;
s2, the front page processes the form parameters returned by the back server, including the step of the front Vue obtaining the form configuration information, the step of decoding the parameters according to the defined rules and the step of forming the basic structure of the form and displaying on the front page;
and S3, submitting the form by the front end page.
Further, in step S1, the step of querying the form configuration information includes:
and transmitting the current front-end page ID and the request parameter to the Web server by entering the front-end page, and acquiring the configuration information of the current front-end page by the Web server by inquiring the configuration information of the database.
Further, the database is a Mysql database or a DB database.
Further, in step S1, the step of the back-end server determining to process the currently user viewable and displayed form parameters includes:
the rule query module of the Web server returns the basic structure of the front-end page through processing the configuration information, wherein the basic structure comprises the query conditions of the form and the options of the query conditions;
further, in step S1, the step of returning to the front page for processing includes:
and returning to the front-end page after the rule query module of the Web server completes the processing.
Further, in step S2, the step of the front end Vue obtaining the form configuration information includes:
the form configuration information comprises a list and url, wherein the list comprises a plurality of json objects, each json object comprises a type and a config, and the type is classified into a form specification type or a custom named type of Input, textarea, radio, select and checkbox; the config corresponds to the attribute configuration of the current type, and comprises a default value default _ value, an input box prompt text placeholder and an error prompt error _ msg.
Further, in step S2, the step of decoding the parameters according to the defined rule includes:
the front end Vue comprises a Vue analysis module, the Vue analysis module performs circular traversal analysis after acquiring the configured list object, acquires a type for each traversal, and displays a corresponding table element according to the corresponding type; if the element is a self-defined table element, rendering a specified corresponding component element;
and rendering the table single elements, acquiring corresponding configs, and endowing corresponding attributes according to the configuration of the configs.
Further, when the type is an input type, value and placeholder attributes are given; when the type is date type, attribute of time range is given.
Further, in step S2, the step of forming the basic structure of the form to be displayed on the front page includes:
and after the basic structure of the form is displayed on the front-end page, the form is interacted according to the configuration, and the interactive content comprises a display default value and a display error prompt.
In another aspect, the present invention further provides a configuration system for Vue-based forms, wherein the improvement comprises a front-end page, a Web server, a back-end server and a database;
the front-end page is used for initiating a request to the Web server, and the Web server acquires the configuration parameters of the current front-end page by inquiring the configuration information of the database;
the Web server comprises a rule query module, and returns a basic structure of a front-end page after processing configuration information;
and the back-end server is connected with the Web server and is used for judging and processing the form parameters which can be checked and displayed by the current user and returning the form parameters to the front-end page for processing.
In the above structure, the database is a Mysql database or a DB database.
In another aspect, the invention also provides a computer apparatus comprising a memory and a processor, the memory having a computer program stored therein, the improvement wherein the processor implements the steps of the above method when executing the computer program.
In another aspect, a computer storage medium having a computer program stored thereon, the improvement wherein the computer program when executed by a processor implements the steps of the above-described method.
The invention has the beneficial effects that: the invention provides a Vue-based form configuration method, which is a template rendering method in a vue.js frame, can conveniently and quickly generate form data according to configuration, and can well separate the work of front-end personnel and back-end personnel; and moreover, the front-end page of the form of a general type can be well generated, and the logic interaction of the front end and the back end is friendly.
Drawings
Fig. 1 is a flowchart illustrating a form configuration method based on Vue according to the present invention.
FIG. 2 is a diagram of an embodiment of a form configuration method based on Vue according to the invention.
Detailed Description
The invention is further illustrated with reference to the following figures and examples.
The conception, the specific structure, and the technical effects produced by the present invention will be clearly and completely described below in conjunction with the embodiments and the accompanying drawings to fully understand the objects, the features, and the effects of the present invention. It is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all embodiments, and those skilled in the art can obtain other embodiments without inventive effort based on the embodiments of the present invention, and all embodiments are within the protection scope of the present invention. In addition, all the connection/connection relations referred to in the patent do not mean that the components are directly connected, but mean that a better connection structure can be formed by adding or reducing connection auxiliary components according to specific implementation conditions. All technical characteristics in the invention can be interactively combined on the premise of not conflicting with each other.
Referring to fig. 1 and fig. 2, the present invention provides a Vue-based form configuration method, which in this embodiment includes the following steps:
s1, entering the basic structure of the front-end page rendering front-end page, including the steps of inquiring form configuration information, judging and processing the form parameters which can be viewed and displayed by the current user by the back-end server, and returning to the front-end page for processing;
in step S1, the step of querying the form configuration information includes:
the method comprises the steps that a current front-end page ID and request parameters are transmitted to a Web server through entering a front-end page, and the Web server acquires configuration information of the current front-end page through inquiring configuration information of a database; in this embodiment, the database is a DB database; of course, the database may also be a Mysql database;
in step S1, the step of the back-end server determining and processing the currently displayed form parameters that can be viewed by the user includes:
the rule query module of the Web server returns the basic structure of the front-end page through processing the configuration information, wherein the basic structure comprises the query conditions of the form and the options of the query conditions;
in step S1, the step of returning to the front page for processing includes:
and returning to the front-end page after the rule query module of the Web server completes the processing.
S2, the front page processes the form parameters returned by the back server, including the step of the front Vue obtaining the form configuration information, the step of decoding the parameters according to the defined rules and the step of forming the basic structure of the form and displaying on the front page;
in this embodiment, in step S2, the step of the front end Vue obtaining the form configuration information includes:
the form configuration information comprises a list and url, wherein the list comprises a plurality of json objects, each json object comprises a type and a config, and the type is classified into a form specification type or a custom named type of Input, textarea, radio, select and checkbox; the config corresponds to the attribute configuration of the current type, and comprises a default value default _ value, an input box prompt text placeholder and an error prompt error _ msg.
Further, in step S2, the step of decoding the parameters according to the defined rule includes:
the front end Vue comprises a Vue analysis module, the Vue analysis module performs circular traversal analysis after acquiring the configured list object, acquires a type for each traversal, and displays a corresponding table element according to the corresponding type; if the element is a self-defined table element, rendering a specified corresponding component element; and rendering the table single elements, acquiring corresponding configs, and endowing corresponding attributes according to the configuration of the configs. And when the type is an input type, giving value and placeholder attributes; when the type is date type, attribute of time range is given.
Further, in step S2, the step of forming the basic structure of the form to be displayed on the front page includes:
and after the basic structure of the form is displayed on the front-end page, the form is interacted according to the configuration, and the interactive content comprises a display default value and a display error prompt.
And S3, submitting the form by the front end page.
Forms are typically used as a submission function to interact with data from a back-end server. At this time, the form configuration url can function, which is defined as the url for data access submitted by the form, binding the parameters into the corresponding url by using ajax or other submission methods, sending the request, and then the back-end server can receive the sent request to process the data and also return some data structures to tell whether the request is successful or not. This is done by vue interacting with the back-end server to configure the form. The main principle is that the data is processed through a data structure and a type specification which are defined by a back-end server, the back-end server mainly has a data storage function, the front end generates and displays a corresponding front-end page according to a specified specification, and then the data is processed through a defined submission mode.
Furthermore, the invention also provides a configuration system of the form based on Vue, which comprises a front-end page, a Web server, a back-end server and a database; the front-end page is used for initiating a request to the Web server, and the Web server acquires the configuration parameters of the current front-end page by inquiring the configuration information of the database; the Web server comprises a rule query module, and returns a basic structure of a front-end page after processing configuration information; and the back-end server is connected with the Web server and is used for judging and processing the form parameters which can be checked and displayed by the current user and returning the form parameters to the front-end page for processing. In this embodiment, as shown in fig. 2, the database is a DB database.
In addition, the embodiment of the present invention further provides a computer device, which includes a memory and a processor, where the memory stores a computer program, and the processor implements the Vue-based form configuration method when executing the computer program.
Embodiments of the present invention also provide a computer storage medium having a computer program stored thereon, where the computer program, when executed by a processor, implements an Vue-based form configuration method as described above.
Based on the above, the invention provides a form configuration method based on Vue, which is a template rendering method in a vue.js frame, can conveniently and quickly generate form data according to configuration, and can well separate the work of front-end personnel and back-end personnel; and moreover, the front-end page of the form of a general type can be well generated, and the logic interaction of the front end and the back end is friendly.
While the preferred embodiments of the present invention have been illustrated and described, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.
Claims (13)
1. A Vue-based form configuration method, comprising the steps of:
s1, entering the basic structure of the front-end page rendering front-end page, including the steps of inquiring form configuration information, judging and processing the form parameters which can be viewed and displayed by the current user by the back-end server, and returning to the front-end page for processing;
s2, the front page processes the form parameters returned by the back server, including the step of the front Vue obtaining the form configuration information, the step of decoding the parameters according to the defined rules and the step of forming the basic structure of the form and displaying on the front page;
and S3, submitting the form by the front end page.
2. The Vue-based form configuration method according to claim 1, wherein the step of querying form configuration information in step S1 includes:
and transmitting the current front-end page ID and the request parameter to the Web server by entering the front-end page, and acquiring the configuration information of the current front-end page by the Web server by inquiring the configuration information of the database.
3. The Vue-based form configuration method of claim 2, wherein the database is a Mysql database or a DB database.
4. The Vue-based form configuration method according to claim 2, wherein the step of the backend server determining to process the currently user-viewable displayed form parameters in step S1 includes:
and the rule query module of the Web server returns the basic structure of the front-end page through processing the configuration information, wherein the basic structure comprises the query conditions of the form and the options of the query conditions.
5. The Vue-based form arrangement method of claim 4, wherein the step of returning to the front end page for processing in step S1 includes:
and returning to the front-end page after the rule query module of the Web server completes the processing.
6. The Vue-based form configuration method of claim 1, wherein in step S2, the step of the front end Vue obtaining form configuration information includes:
the form configuration information comprises a list and url, wherein the list comprises a plurality of json objects, each json object comprises a type and a config, and the type is classified into a form specification type or a custom named type of Input, textarea, radio, select and checkbox; the config corresponds to the attribute configuration of the current type, and comprises a default value default _ value, an input box prompt text placeholder and an error prompt error _ msg.
7. The Vue-based form configuration method of claim 6, wherein in step S2, the step of decoding the parameters according to defined rules comprises:
the front end Vue comprises a Vue analysis module, the Vue analysis module performs circular traversal analysis after acquiring the configured list object, acquires a type for each traversal, and displays a corresponding table element according to the corresponding type; if the element is a self-defined table element, rendering a specified corresponding component element;
and rendering the table single elements, acquiring corresponding configs, and endowing corresponding attributes according to the configuration of the configs.
8. The Vue-based form configuration method according to claim 7, wherein when type is input type, value and placeholder attributes are assigned; when the type is date type, attribute of time range is given.
9. The Vue-based form arrangement method according to claim 1, wherein in step S2, the step of forming the basic structure of the form to be displayed on the front page is:
and after the basic structure of the form is displayed on the front-end page, the form is interacted according to the configuration, and the interactive content comprises a display default value and a display error prompt.
10. The Vue-based form configuration system is characterized by comprising a front-end page, a Web server, a back-end server and a database;
the front-end page is used for initiating a request to the Web server, and the Web server acquires the configuration parameters of the current front-end page by inquiring the configuration information of the database;
the Web server comprises a rule query module, and returns a basic structure of a front-end page after processing configuration information;
and the back-end server is connected with the Web server and is used for judging and processing the form parameters which can be checked and displayed by the current user and returning the form parameters to the front-end page for processing.
11. The Vue-based form configuration system according to claim 10, wherein the database is a Mysql database or a DB database.
12. A computer device comprising a memory and a processor, the memory having stored therein a computer program, characterized in that the processor, when executing the computer program, implements the steps of the method according to any of claims 1 to 9.
13. A computer storage medium on which a computer program is stored, characterized in that the computer program, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011337485.5A CN112464070A (en) | 2020-11-25 | 2020-11-25 | Vue-based form configuration method, system, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011337485.5A CN112464070A (en) | 2020-11-25 | 2020-11-25 | Vue-based form configuration method, system, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112464070A true CN112464070A (en) | 2021-03-09 |
Family
ID=74798681
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011337485.5A Pending CN112464070A (en) | 2020-11-25 | 2020-11-25 | Vue-based form configuration method, system, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112464070A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114327605A (en) * | 2022-03-08 | 2022-04-12 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114860239A (en) * | 2022-05-07 | 2022-08-05 | 福州爱国者之星光电科技有限公司 | Rapid development method and terminal |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102122281A (en) * | 2010-01-11 | 2011-07-13 | 腾讯科技（北京）有限公司 | Method, device and system for generating page form |
| CN110889270A (en) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | Form page document generation method and form page rendering method and device |
| CN111259303A (en) * | 2020-01-20 | 2020-06-09 | 西安百想科技有限公司 | System and method for automatically generating front-end page of WEB information system |
| CN111859236A (en) * | 2020-06-19 | 2020-10-30 | 苏州浪潮智能科技有限公司 | Server rendering page generation method and system based on dynamic form verification |
-
2020
- 2020-11-25 CN CN202011337485.5A patent/CN112464070A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102122281A (en) * | 2010-01-11 | 2011-07-13 | 腾讯科技（北京）有限公司 | Method, device and system for generating page form |
| CN110889270A (en) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | Form page document generation method and form page rendering method and device |
| CN111259303A (en) * | 2020-01-20 | 2020-06-09 | 西安百想科技有限公司 | System and method for automatically generating front-end page of WEB information system |
| CN111859236A (en) * | 2020-06-19 | 2020-10-30 | 苏州浪潮智能科技有限公司 | Server rendering page generation method and system based on dynamic form verification |
Non-Patent Citations (1)
| Title |
|---|
| 百姓网技术团队: "前端表单进阶之路：通过 Vue.js 实现表单可配置化", 《HTTPS://ZHUANLAN.ZHIHU.COM/P/30167697》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114327605A (en) * | 2022-03-08 | 2022-04-12 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114327605B (en) * | 2022-03-08 | 2022-08-23 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114860239A (en) * | 2022-05-07 | 2022-08-05 | 福州爱国者之星光电科技有限公司 | Rapid development method and terminal |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20140380178A1 (en) | Displaying interactive charts on devices with limited resources | |
| CN112464070A (en) | Vue-based form configuration method, system, computer equipment and storage medium | |
| CN109213480B (en) | Method, storage medium, equipment and system for developing background management page | |
| CN111414727B (en) | Editing method and device for PDF document header footer and electronic equipment | |
| CN114168853A (en) | Data visualization display method, device, medium and electronic equipment | |
| CN109783097A (en) | Draw the implementation method of web frequency diagram plug-in unit | |
| CN112650492A (en) | Rendering method, system and related device of Web page | |
| CN107977459B (en) | Report generation method and device | |
| CN115543324B (en) | Method, device, equipment and medium for generating interactive interface | |
| CN112597036B (en) | Universal baffle plate testing method and device | |
| CN111737784B (en) | Board card type selection configuration method and equipment based on digital three-dimensional ZXMP S385 subframe | |
| CN113971251A (en) | Webpage output method, system and computer readable storage medium | |
| CN112417832B (en) | Method and device for converting format of electronic form document and electronic equipment | |
| CN110147477B (en) | Data resource modeling extraction method, device and equipment of Web system | |
| CN110045961B (en) | Management method and management platform of business rules | |
| CN111125605A (en) | Page element acquisition method and device | |
| CN112417817A (en) | PDF document format conversion method and device and electronic equipment | |
| CN112784195A (en) | Page data publishing method and system | |
| CN112052418B (en) | Data configuration method and device | |
| CN117270838B (en) | Method, device, equipment and medium for generating universal formula script | |
| CN111338941B (en) | Information processing method and device, electronic equipment and storage medium | |
| US9672294B2 (en) | Partial data report generation with data costing notification | |
| CN114090523B (en) | Electronic device, and node parsing method and medium for XML file thereof | |
| CN114491191A (en) | Interface document generation method and device, electronic equipment and storage medium | |
| CN114780580A (en) | SQL statement generation method, device, equipment, storage medium and product |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210309 |
|
| RJ01 | Rejection of invention patent application after publication |