CN115291869A - Zero-code form generation method and system based on vue custom component - Google Patents
Zero-code form generation method and system based on vue custom component Download PDFInfo
- Publication number
- CN115291869A CN115291869A CN202210929064.4A CN202210929064A CN115291869A CN 115291869 A CN115291869 A CN 115291869A CN 202210929064 A CN202210929064 A CN 202210929064A CN 115291869 A CN115291869 A CN 115291869A
- Authority
- CN
- China
- Prior art keywords
- designer
- vue
- zero
- classification
- template
- 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
- 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
-
- 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/26—Visual data mining; Browsing structured data
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/174—Form filling; Merging
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
-
- 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/34—Graphical or visual programming
Abstract
The invention discloses a zero-code form generation method and a zero-code form generation system based on vue custom components.A form designer logs in a front-end management end, creates form classifications based on a service scene, designs a form template under the specific form classification, and selects the form template to complete the creation of a form instance; the front end management end calls a system back end program interface and writes the form configuration information into a server database; a form designer calls a form preview function through a front-end management end to preview the form; the front-end management end calls a back-end program interface and reads corresponding form configuration data from a server database; the front end management end calls the vue custom form component, and a visual form is rendered through the form configuration data obtained in the seventh step; the form designer previews the effect according to the form, and if the effect is expected, the form design is finished; if the effect is not ideal, continuing the next step; and the form designer modifies the form configuration data and loops the steps until the form preview effect is expected.
Description
Technical Field
The invention belongs to the field of software development, and particularly relates to a zero-code form generation method and system based on a vue custom component.
Background
With the development of internet and mobile internet technologies, intelligent office and paperless office of enterprises and public institutions becomes the first choice in big data and artificial intelligence era, and informatization of paper data has become a necessary trend. However, the traditional manual data entry method has the disadvantages of low efficiency, high error probability, high cost and the like, and a dynamic smart form system is needed.
Currently, some schemes for dynamic form generation building have emerged in the field. For example, chinese patent application No. CN202010620054.3 discloses a low code development form method and system based on VUE technology, the main steps of the method are as follows:
1. the method comprises the steps of visually creating a form, providing a form creating control based on a webpage draggable technology, and completing form creation through simple dragging by a user;
2. persisting form configuration information;
3. setting a form data model, extracting available data model information from a database, and setting a database list name corresponding to each control of the form on a form configuration page;
4. setting form access authority;
5. a form filling user accesses a page;
6. reading database data, and dynamically rendering the form;
7. the form filler fills out a form;
8. and saving the form data.
The method and the system can meet some simple service scenes, but in the aspect of form configuration, because the form configuration is carried out based on the draggable form creation control, the high self definition of the form by a user cannot be realized, for example, the user cannot define the field type, the length, the check rule, the prompt information and the like in a database table corresponding to the form. The freedom degree of form developers is low, and complex business scenes are difficult to meet.
Disclosure of Invention
In order to overcome the technical problems, the invention provides a zero-code form generation method and a zero-code form generation system based on a vue custom component.
In order to achieve the purpose, the invention adopts the following technical scheme:
a zero code form generation system based on vue self-defined components is realized based on a web development technology with front and back ends separated and comprises a system front end and a system back end, wherein the form components depended on by the system front end are realized based on the front end vue self-defined components, and the system front end comprises a front end management end and a front end client;
front-end management end: the visual page is used for providing interaction with a back end for a form designer, and the designer finishes the design and the creation of the form through a front end management end;
a front-end client: the system comprises a front-end client, a back-end client and a form writer, wherein the front-end client is used for providing a visual page interacted with the back end for a form writer, and the writer finishes data writing of the form through the front-end client;
the system back end: the system is used for providing data persistence capability for the whole system, is responsible for storing form configuration data created by a form designer and form data filled by a form filler into a database, and provides form configuration data and form data when a front end of the system renders a page.
A zero-code form generation method based on vue custom components comprises the following steps:
the method comprises the following steps: the form designer logs on the front end management end;
step two: the form designer creates a form classification based on the business scenario;
step three: a form designer designs a form template under specific form classification;
step four: the form designer selects a form template to complete the creation of the form example;
step five: the front-end management end generates form configuration information according to the form classification, the form template and the form example;
step six: the front end management end calls a system back end program interface and writes the form configuration information into a server database;
step seven: a form designer calls a form preview function through a front-end management end to preview the form; the front-end management end calls a back-end program interface and reads corresponding form configuration data from a server database; the front-end management end calls a vue custom form component, and a visual form is rendered through the acquired form configuration data;
step eight: the form designer previews the effect according to the form, and if the effect is expected, the form design is finished; if the effect is not ideal, continuing the next step;
step nine: and the form designer modifies the form configuration data on the page corresponding to the second step to the fourth step according to the requirement, and the seventh step to the eighth step are circulated until the form preview effect is expected.
Further, in the first step, after the form designer logs in by using the corresponding role account, the front-end management end provides a visual page interacted with the system back end for the form designer.
Furthermore, in the step two, the form classification adopts multilayer nesting to realize the coverage of the subdivision service scene.
Further, the form classification includes the following classification attributes: the classification name, the superior classification name, whether the superior classification name is default or not, and the classification and the sorting are carried out; the level of the multilayer nesting is less than or equal to 3.
Further, the form template in step three is a description of the form data attribute.
Further, the form data attributes include form template attributes and form field attributes.
Further, the form template attribute is a description of a form name, and includes two fields: template codes and template names; the form field attribute is a description of associated data in the template, and comprises: field name, field description, encoding, attribute type, length, option, control type.
Further, in step four, when creating the form instance, the designer defines the form style and defines the name and description information of the form instance.
Further, the creating the form instance in the fourth step specifically includes:
1) Filling in form attributes;
2) Selecting a form style;
3) And (6) form preview.
Compared with the prior art, the invention has the following beneficial effects:
according to the invention, through unified form configuration data specification and unified visual front-end configuration page, a form designer can create a form with rich presentation styles and complex data interaction characteristics in a zero code manner, and various complex service scenes are satisfied.
The invention is realized based on a vue front-end development framework. The core module is realized in a vue self-defined assembly mode, the service logic is simple and clear, the code is simple and reliable to realize, the updating and upgrading are convenient and quick, and the method is very suitable for agile development.
Drawings
FIG. 1 is a block diagram of a zero code form generation system based on a vue custom component of an embodiment of the present invention.
FIG. 2 is a form creation flow diagram of a vue custom component based zero code form generation method of an example of the present invention.
FIG. 3 is a flow diagram of custom component rendering for a vue custom component based zero code form generation method of an embodiment of the present invention.
Detailed Description
The invention is explained in more detail below with reference to the figures and examples:
a zero code form generating system based on vue self-defined components is realized based on a web development technology with front and back ends separated, wherein the front end is divided into a management end and a client end, so the system comprises three parts of a front end management end, a front end client end and a system back end;
front-end management end: and providing a visual page interacting with the back end for a form designer, wherein the designer can complete the design and creation of the form through a front end management end.
A front-end client: and providing a visual page interacted with the back end for a form filler, wherein the filler can complete the data filling of the form through the front end client.
The back end of the system: the system provides data persistence capability for the whole system, is responsible for storing form configuration data created by a form designer and form data filled by a form filler into a database, and provides the form configuration data and the form data when a page is rendered at the front end.
The invention also discloses a zero-code form generation method based on the vue custom assembly, which comprises the following steps:
1. the form designer logs in the front end management end;
2. a form classification is created. The form designer creates a form classification based on the service scene, and the form classification can be nested in multiple layers to realize the coverage of the subdivided service scene;
3. a form template is created. A form designer designs a form template under specific form classification, wherein the form template is description of form data attributes;
4. a form is created. The form designer selects a form template to complete the creation of the form example, and the designer needs to complete the definition of the form style during the creation and define the name, description and other information of the form example;
5. and (5) form persistence. And the front-end management end calls a back-end program interface to write the form configuration information into the server database.
6. And (6) form preview. And the form designer calls a form preview function through the front-end management end.
7. And reading the form configuration data. And the front-end management end calls a back-end program interface and reads the corresponding form configuration data from the database of the server.
8. And (5) rendering a form component. And the front-end management end calls the vue self-defined form component, and a visual form is rendered through the form configuration data acquired in the last step.
9. And verifying the design effect. And the form designer previews the effect according to the form, and if the effect is expected, the form design is finished. If the effect is not ideal, continue to the next step.
10. And modifying the configuration of the form. The form designer modifies the form configuration data, including form fields, form styles, and the like.
11. And returning to the step 5.
Examples
As shown in fig. 1, this embodiment provides a zero-code form generation system based on a vue custom component, which is implemented based on a web development technology with front and back ends separated, where the front end is divided into a management end and a client end, so that the system includes three parts, namely a front-end management end, a front-end client end and a system back end;
front-end management end: and providing a visual page interacting with the back end for a form designer, wherein the designer can complete the design and creation of the form through a front end management end.
A front-end client: and providing a visual page interacted with the back end for a form filler, wherein the filler can complete the data filling of the form through the front end client.
The back end of the system: the system provides data persistence capability for the whole system, is responsible for storing form configuration data created by a form designer and form data filled by a form filler into a database, and provides the form configuration data and the form data when a front-end renders a page.
The invention also discloses a zero-code form generation method based on the vue custom assembly, which comprises the following steps as shown in FIG. 2:
1. a form designer (hereinafter, designer) logs in a front-end management end; the front end of the system is divided into a front end management end and a front end client end, and the front end management end and the front end client end are distinguished by the role attributes of the front end login account. When the designer logs in by using the corresponding role account, the front-end management end provides a visual page for the designer to interact with the system back end.
2. A form classification is created. The form designer creates a form classification based on the service scene, and the form classification can be nested in multiple layers to realize the coverage of the subdivided service scene; when the designer creates the classification, the following classification attributes need to be filled in: "class name", "upper class name", "default or not", "class order". After filling and storing, the system establishes a top-bottom level relation by taking the 'top-level classification name' as the current classification. The maximum classification nesting level is 3 levels. The system sets default used form classification of the front-end client through the default value, and sorts each form classification according to the field value of sort sorting. It should be noted that only the bottom class can be used as the form class, and when a new sub-class B is created under a class a, then a will no longer appear as the form class in the front-end client, and the front-end client can see the class B. Similarly, when a new sub-classification C is created under the classification B, the classification B will not be classified as a form any more, and the front-end client can see the classification C.
3. A form template is created. A form designer creates a form template under a specific form classification, wherein the form template is description of form data attributes; the form data attributes include form template attributes and form field attributes, wherein the form template attributes are descriptions of form names and include two fields, "template codes" and "template names", and the form field attributes are descriptions of associated data in the templates and include "field names", "field descriptions", "codes", "attribute types", "lengths", "options", "control types", and the like, and the specific descriptions are shown in table 1.
Table 1 form template field description
4. A form is created. The form designer selects a form template to complete the creation of the form example, and the designer needs to complete the definition of the form style and define the name, description and other information of the form example during the creation; the form creation mainly comprises the following steps:
a) Fill in form attributes including "form category", "form title", "form alias", "form description";
b) A form style is selected. The system presets the style of partial form styles in advance for designers to select;
c) And (5) submitting.
5. And the front end management end generates a configuration file in a json format according to the form classification, the form template and the form instance attribute in the previous step.
6. And (5) form persistence. And the front-end management end calls a back-end program interface to write the form configuration information into the server database.
7. And the designer calls the form preview function through the front-end management end. The system obtains field data according to a form template associated with the current form, and renders and displays the field data through a custom vue form component (hereinafter referred to as a form component) according to the style of the current form. The specific principle is shown in fig. 3:
a) A designer clicks the form preview, and the preview page starts to be loaded;
b) The method comprises the steps that a page reads configuration information of a current form, including field information contained in a form template and style information of the form, after a back end receives a data request of a front end, the back end firstly requests from a local redis cache, if the data request is not hit, a database request is initiated, and obtained data are fed back to a front end page;
c) The form component loads form configuration information, renders through a vue frame, and displays through a page;
d) The designer fills in or modifies the form values, triggers an input or change event of the component and updates the value. And the update of value will trigger the $ watch method of the component, so the component deletes the cache and re-renders the form.
8. And (4) the designer previews the effect according to the form, if the effect is expected, the form design is finished, and if the effect is not ideal, the next step is continued.
9. The form designer modifies the form configuration data on the page corresponding to the step 2 to the step 4 according to the requirement, and the step 7 to the step 8 are circulated (in the process, the steps 5 and 6 are automatically executed by the system) until the form preview effect reaches the expectation.
10. The user logs in the front-end client to access the use form.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
Finally, it should be noted that: although the present invention has been described in detail with reference to the above embodiments, those skilled in the art will appreciate that various changes, modifications and equivalents can be made in the embodiments of the invention without departing from the scope of the invention as defined by the appended claims.
Claims (10)
1. A zero-code form generation system based on vue custom components is characterized in that the system is realized based on a front-end and back-end separated web development technology and comprises a system front end and a system back end, wherein the form components depended on by the system front end are realized based on the front-end vue custom components, and the system front end comprises a front end management end and a front end client;
front-end management end: the system comprises a front-end management end, a back-end management end and a form designer, wherein the front-end management end is used for managing the form designer;
a front-end client: the system comprises a front-end client, a back-end client, a form writer and a data processing server, wherein the front-end client is used for providing a visual page interacted with the back end for the form writer, and the writer completes data writing of the form through the front-end client;
the back end of the system: the system is used for providing data persistence capability for the whole system, is responsible for storing form configuration data created by a form designer and form data filled by a form filler into a database, and provides form configuration data and form data when a front end of the system renders a page.
2. A zero-code form generation method based on a vue custom component is based on the zero-code form generation system based on the vue custom component in claim 1, and is characterized by comprising the following steps of:
the method comprises the following steps: the form designer logs in the front end management end;
step two: the form designer creates a form classification based on the business scenario;
step three: a form designer designs a form template under specific form classification;
step four: the form designer selects a form template to complete the creation of the form example;
step five: the front-end management end generates form configuration information according to the form classification, the form template and the form example;
step six: the front end management end calls a system back end program interface and writes the form configuration information into a server database;
step seven: a form designer calls a form preview function through a front-end management end to preview the form; the front-end management end calls a back-end program interface and reads corresponding form configuration data from a server database; the front-end management end calls a vue self-defined form component, and a visual form is rendered through the acquired form configuration data;
step eight: the form designer previews the effect according to the form, and if the effect is expected, the form design is finished; if the effect is not ideal, continuing the next step;
step nine: and the form designer modifies the form configuration data on the page corresponding to the second step to the fourth step according to the requirement, and the seventh step to the eighth step are circulated until the form preview effect is expected.
3. The zero-code form generation method based on the vue custom component as claimed in claim 2, wherein in the first step, after the form designer logs in with the corresponding role account, the front-end management end provides a visual page for the form designer to interact with the system back-end.
4. The zero-code form generation method based on vue custom components according to claim 2, wherein in the step two, the form classification adopts multilayer nesting to realize coverage of subdivided service scenes.
5. The vue-custom-component-based zero-code form generation method of claim 4, wherein the form classification comprises the following classification attributes: the classification name, the superior classification name, whether the superior classification name is default or not, and the classification and the sorting are carried out; the level of the multilayer nesting is less than or equal to 3.
6. The vue custom component-based zero-code form generation method according to claim 2, wherein the form template in step three is a description of the form data attributes.
7. The vue-custom-component-based zero-code form generation method according to claim 6, wherein the form data attributes comprise form template attributes and form field attributes.
8. The zero-code form generation method based on vue custom components according to claim 7, wherein the form template attribute is description of form name, and comprises two fields: template codes and template names; the form field attribute is a description of associated data in the template, and comprises: field name, field description, encoding, attribute type, length, option, control type.
9. The zero-code form generation method based on vue custom components according to claim 2, characterized in that in step four, when creating the form instance, the designer defines the form style and defines the name and description information of the form instance.
10. The zero-code form generation method based on vue custom components according to claim 8, wherein the creating of the form instance in step four specifically comprises:
1) Filling in form attributes;
2) Selecting a form style;
3) And (6) form preview.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210929064.4A CN115291869A (en) | 2022-08-03 | 2022-08-03 | Zero-code form generation method and system based on vue custom component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210929064.4A CN115291869A (en) | 2022-08-03 | 2022-08-03 | Zero-code form generation method and system based on vue custom component |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115291869A true CN115291869A (en) | 2022-11-04 |
Family
ID=83826862
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210929064.4A Pending CN115291869A (en) | 2022-08-03 | 2022-08-03 | Zero-code form generation method and system based on vue custom component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115291869A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116610889A (en) * | 2023-07-17 | 2023-08-18 | 合肥青谷信息科技有限公司 | WEB page creation method and visualized software designer |
-
2022
- 2022-08-03 CN CN202210929064.4A patent/CN115291869A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116610889A (en) * | 2023-07-17 | 2023-08-18 | 合肥青谷信息科技有限公司 | WEB page creation method and visualized software designer |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9146955B2 (en) | In-memory, columnar database multidimensional analytical view integration | |
| US7721205B2 (en) | Integration of composite objects in host applications | |
| CN105511873B (en) | User interface control display method and device | |
| US8635253B2 (en) | Decorated model architecture for efficient model-driven application development | |
| US10318126B2 (en) | Data-driven schema for describing and executing management tasks in a graphical user interface | |
| US20220197969A1 (en) | System and method for integrating user feedback into website building system services | |
| CN106843844B (en) | Display device of custom view | |
| CN110825388B (en) | Method for directly converting SQL statement into corresponding REST interface | |
| CN105487864A (en) | Method and device for automatically generating code | |
| CN115617327A (en) | Low code page building system, method and computer readable storage medium | |
| CN103020158A (en) | Report form creation method, device and system | |
| CN105205071A (en) | Method and system for showing data table | |
| US20110225484A1 (en) | Cloud based modeling for enhancing spreadsheets | |
| US9760552B2 (en) | Document renewal and translation | |
| CN111984176A (en) | Software online development platform and development method | |
| US20230134235A1 (en) | Applying a Visual Analytics Intent Language to Generate Data Visualizations | |
| CN110232178A (en) | Report generation method and device | |
| CN115291869A (en) | Zero-code form generation method and system based on vue custom component | |
| CN111367514B (en) | Page card development method and device, computing device and storage medium | |
| CN110929494A (en) | Method for generating report drop-down box based on hierarchical tree | |
| CN116627418B (en) | Multi-level form interface visual generation method and device based on recursion algorithm | |
| CN112711414B (en) | Form interface adaptation display method and device and storage medium | |
| CN113535177A (en) | Form generation method, device and equipment | |
| US11561998B2 (en) | Implementing a visual analytics intent language across multiple devices | |
| CN114356403A (en) | Configuration data processing method, device and system based on low-code application development |
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 |