CN111708529A - Implementation method for generating form through dragging based on angular - Google Patents
Implementation method for generating form through dragging based on angular Download PDFInfo
- Publication number
- CN111708529A CN111708529A CN202010577666.9A CN202010577666A CN111708529A CN 111708529 A CN111708529 A CN 111708529A CN 202010577666 A CN202010577666 A CN 202010577666A CN 111708529 A CN111708529 A CN 111708529A
- Authority
- CN
- China
- Prior art keywords
- generating
- field
- dragging
- mouse
- regular
- 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.)
- Granted
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/34—Graphical or visual programming
-
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The invention particularly relates to an angular-based implementation method for generating a form through dragging. The implementation method for generating the form through dragging based on the regular uses an regular framework integrated by a hypertext typescript language of javascript to develop the project, the typescript uses ECMAScript 6.0, and project codes are optimized by virtue of modularization, componentization, object-oriented programming and MVVM ideas. According to the implementation method for generating the form through dragging based on the regular, the MVVM idea is applied to the management of the codes through the regular framework development, the codes are modularized, the reusability of the codes is improved, redundant codes are reduced, and the development efficiency is improved. By dragging to generate the form, different forms can be edited, the interactivity is improved, and therefore the experience effect of a user is greatly improved.
Description
Technical Field
The invention relates to the technical field of form design, in particular to an angular-based implementation method for generating a form through dragging.
Background
The existing method for dynamically generating the form is realized by mouse events and creation elements based on native javascript, or realized by using html5, or vue, and the like. The implementation methods have the problems of multiple redundant codes, poor reusability, poor compatibility, high coupling, low development efficiency and the like.
In order to solve the problems, the invention provides an angular-based implementation method for generating a form through dragging.
Disclosure of Invention
In order to make up for the defects of the prior art, the invention provides a simple and efficient implementation method for generating the form through dragging based on angular.
The invention is realized by the following technical scheme:
an implementation method for generating a form through dragging based on angular is characterized in that: the project is developed by using an angularframework integrated by a super typescript language of javascript, the typescript uses ECMAScript 6.0, and project codes are optimized by virtue of modularization, componentization, object-oriented programming and MVVM ideas;
the method comprises the following steps:
the method comprises the following steps: newly adding various label field template components;
step two: adding a tag field template component field attribute component;
step three: newly adding a form design window component;
step four: adding a form attribute component of a form design window;
step five: integrating various label field template components, configuring a draggable toolbar of a form designer, and generating form elements of corresponding label fields by dragging the label fields in the toolbar to a form design window by a user;
step six: the integrated label field attribute component and the form attribute component are configured into an attribute edit bar, and a user can set element attributes and form attributes corresponding to each label field in the form;
step seven: the method for generating the form elements by encapsulation comprises the steps of triggering a mouse pressing event, a mouse moving event and a mouse removing event of a mouse by dragging, and developing a method for generating the form elements by dragging a label field to a form design window;
whether table elements of corresponding fields need to be generated or not is achieved as follows:
(1) clicking a field of the toolbar by a mouse, and recording a field text, the position of the field text and the position clicked by the mouse;
(2) dragging the field, and simultaneously creating a layer of a temporary field to move along with the mouse;
(3) when the mouse is lifted, recording the current position of the mouse, and judging whether the mouse is in a form design window or not;
if the form is in the form design form, removing the temporary field layer, creating a form element corresponding to the field, and setting the position of the created form element;
and if the temporary field layer is not in the form design form, clearing the temporary field layer.
Step eight: the method for generating the form by packaging and previewing comprises the steps of transmitting a form in a form design form to a popup form assembly through entity parameters by the popup form assembly of the angular to realize previewing of the form;
step nine: the method for generating the form by packaging and storing comprises the steps of performing serialization processing on the form in a form design form and storing the form in a database;
step ten: and providing an interface using the generated form, acquiring the generated form data by requesting to use the interface, and rendering the form data to a target page.
In the first step, each type of label field comprises a text box, an input box, a button, a date, a drop-down box, a file upload and a file download;
in the second step, the field attribute comprises the title, the width, the style class name and the check rule of the table element corresponding to the label field.
In the third step, the dragged form elements comprise titles and elements, and the dragged form elements are vertically arranged in the form design window and completely fully occupied by the horizontal arrangement.
In the fourth step, the form attributes comprise a label alignment mode, the width of the form field, the width of the form popup in the preview, the top distance and the inner edge distance of the form.
In the fifth step, the integration method is to arrange the label fields in an ordered list, and arrange the label fields in a toolbar in order by setting and positioning the list elements.
In the sixth step, the integration method organizes the attributes of the generated elements and the attributes of the form by switching the tags.
In the seventh step, the method for generating the table element comprises the events of the mouse, the positioning of the element and the method for creating the element.
In order to simplify the code and improve reusability of the code, in the step eight, the preview method is implemented by using an standardized popup component, and replaces the create method in javascript.
In the ninth step, the generated form is serialized in such a manner that the form is converted into a character string with a specific mark, and when the form template is used again, the specific mark is recognized and the form is rendered into the generated form.
In the step ten, the generated form is obtained through an asynchronous request method, and the obtained character string of the generated form is read and loaded into a webpage in a form of a template.
The invention has the beneficial effects that: according to the implementation method for generating the form through dragging based on the regular, the MVVM idea is applied to the management of the codes through the regular framework development, the codes are modularized, the reusability of the codes is improved, redundant codes are reduced, and the development efficiency is improved. By dragging to generate the form, different forms can be edited, the interactivity is improved, and therefore the experience effect of a user is greatly improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
Fig. 1 is a schematic diagram of an implementation method for generating a form through dragging based on angular.
FIG. 2 is a logic diagram of the process of generating a form by dragging according to the present invention.
Detailed Description
In order to make those skilled in the art better understand the technical solution of the present invention, the technical solution in the embodiment of the present invention will be clearly and completely described below with reference to the embodiment of the present invention. 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 embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Regular is one of the development frameworks popular at the front end, and from birth to the present, regular is continuously optimized and upgraded, is downward compatible with different browsers, has a layered structure, and is developed into code modularization, so that the coupling of codes is reduced, and the reusability of the codes is improved. By utilizing the regular bidirectional data binding and typescript object-oriented programming, direct operation on dom can be reduced, and the response efficiency of the form generator is improved.
The implementation method for generating the form through dragging based on the regular uses an regular framework integrated by a hypertext typescript language of javascript to develop the project, the typescript uses ECMAScript 6.0, and project codes are optimized by virtue of modularization, componentization, object-oriented programming and MVVM ideas;
the method comprises the following steps:
the method comprises the following steps: newly adding various label field template components;
step two: adding a tag field template component field attribute component;
step three: newly adding a form design window component;
step four: adding a form attribute component of a form design window;
step five: integrating various label field template components, configuring a draggable toolbar of a form designer, and generating form elements of corresponding label fields by dragging the label fields in the toolbar to a form design window by a user;
step six: the integrated label field attribute component and the form attribute component are configured into an attribute edit bar, and a user can set element attributes and form attributes corresponding to each label field in the form;
step seven: the method for generating the form elements by encapsulation comprises the steps of triggering a mouse pressing event, a mouse moving event and a mouse removing event of a mouse by dragging, and developing a method for generating the form elements by dragging a label field to a form design window;
as shown in fig. 2, if a table element of a corresponding field is to be generated, the implementation flow is as follows:
(1) clicking a field of the toolbar by a mouse, and recording a field text, the position of the field text and the position clicked by the mouse;
(2) dragging the field, and simultaneously creating a layer of a temporary field to move along with the mouse;
(3) when the mouse is lifted, recording the current position of the mouse, and judging whether the mouse is in a form design window or not;
if the form is in the form design form, removing the temporary field layer, creating a form element corresponding to the field, and setting the position of the created form element;
and if the temporary field layer is not in the form design form, clearing the temporary field layer.
Step eight: the method for generating the form by packaging and previewing comprises the steps of transmitting a form in a form design form to a popup form assembly through entity parameters by the popup form assembly of the angular to realize previewing of the form;
step nine: the method for generating the form by packaging and storing comprises the steps of performing serialization processing on the form in a form design form and storing the form in a database;
step ten: and providing an interface using the generated form, acquiring the generated form data by requesting to use the interface, and rendering the form data to a target page.
In the first step, each type of label field comprises a text box, an input box, a button, a date, a drop-down box, a file upload and a file download;
in the second step, the field attribute comprises the title, the width, the style class name and the check rule of the table element corresponding to the label field.
In the third step, the dragged form elements comprise titles and elements, and the dragged form elements are vertically arranged in the form design window and completely fully occupied by the horizontal arrangement.
In the fourth step, the form attributes comprise a label alignment mode, the width of the form field, the width of the form popup in the preview, the top distance and the inner edge distance of the form.
In the fifth step, the integration method is to arrange the label fields in an ordered list, and arrange the label fields in a toolbar in order by setting and positioning the list elements.
In the sixth step, the integration method organizes the attributes of the generated elements and the attributes of the form by switching the tags.
In the seventh step, the method for generating the table element comprises the events of the mouse, the positioning of the element and the method for creating the element.
In order to simplify the code and improve reusability of the code, in the step eight, the preview method is implemented by using an standardized popup component, and replaces the create method in javascript.
In the ninth step, the generated form is serialized in such a manner that the form is converted into a character string with a specific mark, and when the form template is used again, the specific mark is recognized and the form is rendered into the generated form.
In the step ten, the generated form is obtained through an asynchronous request method, and the obtained character string of the generated form is read and loaded into a webpage in a form of a template.
Compared with the prior art, the implementation method for generating the form through dragging based on angular has the following characteristics:
firstly, dragging a label through a mouse, moving the label, generating table elements of corresponding label contents at a foot drop position, and combining the table elements into a complete form code;
secondly, by using the angular frame and utilizing the modular components, the module splitting of the table elements is realized, the coupling of codes is reduced, the reusability of the codes is improved, the project compatibility is improved, the development efficiency is greatly improved, and the defect of the existing table elements is overcome;
and thirdly, by using the draggable node component, the tab element is dragged from the form designer to any position point of the form to create the form element, the interactivity of the form designer is enhanced, and the experience effect of a user is improved.
The above-described embodiment is only one specific embodiment of the present invention, and general changes and substitutions by those skilled in the art within the technical scope of the present invention are included in the protection scope of the present invention.
Claims (10)
1. An implementation method for generating a form through dragging based on angular is characterized in that: the project is developed by using an angularframework integrated by a super typescript language of javascript, the typescript uses ECMAScript 6.0, and project codes are optimized by virtue of modularization, componentization, object-oriented programming and MVVM ideas;
the method comprises the following steps:
the method comprises the following steps: newly adding various label field template components;
step two: adding a tag field template component field attribute component;
step three: newly adding a form design window component;
step four: adding a form attribute component of a form design window;
step five: integrating various label field template components, configuring a draggable toolbar of a form designer, and generating form elements of corresponding label fields by dragging the label fields in the toolbar to a form design window by a user;
step six: the integrated label field attribute component and the form attribute component are configured into an attribute edit bar, and a user can set element attributes and form attributes corresponding to each label field in the form;
step seven: the method for generating the form elements by encapsulation comprises the steps of triggering a mouse pressing event, a mouse moving event and a mouse removing event of a mouse by dragging, and developing a method for generating the form elements by dragging a label field to a form design window;
step eight: the method for generating the form by packaging and previewing comprises the steps of transmitting a form in a form design form to a popup form assembly through entity parameters by the popup form assembly of the angular to realize previewing of the form;
step nine: the method for generating the form by packaging and storing comprises the steps of performing serialization processing on the form in a form design form and storing the form in a database;
step ten: and providing an interface using the generated form, acquiring the generated form data by requesting to use the interface, and rendering the form data to a target page.
2. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in the first step, each type of label field comprises a text box, an input box, a button, a date, a drop-down box, a file upload and a file download;
in the second step, the field attribute comprises the title, the width, the style class name and the check rule of the table element corresponding to the label field.
3. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in the third step, the dragged form elements comprise titles and elements, and the dragged form elements are vertically arranged in the form design window and completely fully occupied by the horizontal arrangement.
4. The regular-based implementation method for generating a form through dragging according to claim 3, wherein: in the fourth step, the form attributes comprise a label alignment mode, the width of the form field, the width of the form popup in the preview, the top distance and the inner edge distance of the form.
5. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in the fifth step, the integration method is to arrange the label fields in an ordered list, and arrange the label fields in a toolbar in order by setting and positioning the list elements.
6. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in the sixth step, the integration method organizes the attributes of the generated elements and the attributes of the form by switching the tags.
7. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in the seventh step, the method for generating the table element comprises the events of a mouse, the positioning of the element and the method for creating the element;
whether table elements of corresponding fields need to be generated or not is achieved as follows:
(1) clicking a field of the toolbar by a mouse, and recording a field text, the position of the field text and the position clicked by the mouse;
(2) dragging the field, and simultaneously creating a layer of a temporary field to move along with the mouse;
(3) when the mouse is lifted, recording the current position of the mouse, and judging whether the mouse is in a form design window or not;
if the form is in the form design form, removing the temporary field layer, creating a form element corresponding to the field, and setting the position of the created form element;
and if the temporary field layer is not in the form design form, clearing the temporary field layer.
8. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in order to simplify the code and improve reusability of the code, in the step eight, the preview method is implemented by using an standardized popup component, and replaces the create method in javascript.
9. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in the ninth step, the generated form is serialized in such a manner that the form is converted into a character string with a specific mark, and when the form template is used again, the specific mark is recognized and the form is rendered into the generated form.
10. The regular-based implementation method for generating a form through dragging according to claim 1, wherein: in the step ten, the generated form is obtained through an asynchronous request method, and the obtained character string of the generated form is read and loaded into a webpage in a form of a template.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010577666.9A CN111708529B (en) | 2020-06-23 | 2020-06-23 | Method for generating form through dragging based on angular |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010577666.9A CN111708529B (en) | 2020-06-23 | 2020-06-23 | Method for generating form through dragging based on angular |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111708529A true CN111708529A (en) | 2020-09-25 |
| CN111708529B CN111708529B (en) | 2023-06-16 |
Family
ID=72541465
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010577666.9A Active CN111708529B (en) | 2020-06-23 | 2020-06-23 | Method for generating form through dragging based on angular |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111708529B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117252180A (en) * | 2023-11-16 | 2023-12-19 | 太平金融科技服务（上海）有限公司 | Report generation method and device, electronic equipment and storage medium |
| CN117331560A (en) * | 2023-11-24 | 2024-01-02 | 杭银消费金融股份有限公司 | Front-end form page generation method and system |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103559184A (en) * | 2013-07-29 | 2014-02-05 | 北京九恒星科技股份有限公司 | Form page display method and device |
| CN104267949A (en) * | 2014-09-25 | 2015-01-07 | 成都国科海博信息技术股份有限公司 | Form designer and form design method |
| CN106484393A (en) * | 2016-09-13 | 2017-03-08 | 厦门兆慧网络科技有限公司 | A kind of visualization view method for designing |
| CN108073435A (en) * | 2016-11-18 | 2018-05-25 | 中国电子科技集团公司第十五研究所 | A kind of multi information integrative display method and system |
| CN109375919A (en) * | 2018-11-30 | 2019-02-22 | 成都知道创宇信息技术有限公司 | A method of generating and send marketing Mail Contents page |
| CN110750254A (en) * | 2019-10-18 | 2020-02-04 | 浪潮云信息技术有限公司 | Flowchart editor implementation method based on Angular |
| CN110825367A (en) * | 2019-10-15 | 2020-02-21 | 思创数码科技股份有限公司 | Design method of form designer suitable for Loongson CPU environment |
| CN110889270A (en) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | Form page document generation method and form page rendering method and device |
| US20200125337A1 (en) * | 2017-04-24 | 2020-04-23 | South China University Of Technology | Automatic compiling method for use in graphical programming |
| CN111090421A (en) * | 2020-03-25 | 2020-05-01 | 绿漫科技有限公司 | System for realizing user-defined form based on visual dragging |
| CN111221522A (en) * | 2020-01-13 | 2020-06-02 | 大汉软件股份有限公司 | Automatic code generation method of front-end and back-end separation architecture for government intensive application development |
-
2020
- 2020-06-23 CN CN202010577666.9A patent/CN111708529B/en active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103559184A (en) * | 2013-07-29 | 2014-02-05 | 北京九恒星科技股份有限公司 | Form page display method and device |
| CN104267949A (en) * | 2014-09-25 | 2015-01-07 | 成都国科海博信息技术股份有限公司 | Form designer and form design method |
| CN106484393A (en) * | 2016-09-13 | 2017-03-08 | 厦门兆慧网络科技有限公司 | A kind of visualization view method for designing |
| CN108073435A (en) * | 2016-11-18 | 2018-05-25 | 中国电子科技集团公司第十五研究所 | A kind of multi information integrative display method and system |
| US20200125337A1 (en) * | 2017-04-24 | 2020-04-23 | South China University Of Technology | Automatic compiling method for use in graphical programming |
| CN110889270A (en) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | Form page document generation method and form page rendering method and device |
| CN109375919A (en) * | 2018-11-30 | 2019-02-22 | 成都知道创宇信息技术有限公司 | A method of generating and send marketing Mail Contents page |
| CN110825367A (en) * | 2019-10-15 | 2020-02-21 | 思创数码科技股份有限公司 | Design method of form designer suitable for Loongson CPU environment |
| CN110750254A (en) * | 2019-10-18 | 2020-02-04 | 浪潮云信息技术有限公司 | Flowchart editor implementation method based on Angular |
| CN111221522A (en) * | 2020-01-13 | 2020-06-02 | 大汉软件股份有限公司 | Automatic code generation method of front-end and back-end separation architecture for government intensive application development |
| CN111090421A (en) * | 2020-03-25 | 2020-05-01 | 绿漫科技有限公司 | System for realizing user-defined form based on visual dragging |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117252180A (en) * | 2023-11-16 | 2023-12-19 | 太平金融科技服务（上海）有限公司 | Report generation method and device, electronic equipment and storage medium |
| CN117252180B (en) * | 2023-11-16 | 2024-02-23 | 太平金融科技服务（上海）有限公司 | Report generation method and device, electronic equipment and storage medium |
| 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111708529B (en) | 2023-06-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108491205B (en) | Front-end webpage development method and system based on component tree | |
| CN106484393B (en) | Visual view design method | |
| CN101976235B (en) | Extensible Word report automatically-generating method based on dynamic web page | |
| CN109062567B (en) | B/S structure-based information management system rapid development platform | |
| US20140006913A1 (en) | Visual template extraction | |
| CN101714133A (en) | WEB-based mathematical formula editing system and method | |
| CN105843787B (en) | A kind of RichText Edition method and system | |
| CN101393519A (en) | Web station rapid development technique based on component and drag and drop design | |
| CN111708529B (en) | Method for generating form through dragging based on angular | |
| WO2006051958A1 (en) | Information distribution system | |
| CN110297636A (en) | A kind of automatic production of HTML page and parameter management method based on page configuration file, system and device | |
| CN110750254A (en) | Flowchart editor implementation method based on Angular | |
| Jiang et al. | Towards reengineering web sites to web-services providers | |
| CN108268260A (en) | It is a kind of quick micro- using assemble method based on integrated support technology | |
| CN111158687B (en) | Interface generation method and device of JAVA plugin, computer equipment and storage medium | |
| CN102521008B (en) | Program compiling device and method for compiling program | |
| CN102830974A (en) | Visual auxiliary development tool for rapid generation of JAVA codes | |
| Rahman | Jump Start Bootstrap: Get Up to Speed with Bootstrap in a Weekend | |
| KR101798475B1 (en) | Multilingual Web documents publishing System for Heterogeneous Platforms Supporting | |
| KR100522186B1 (en) | Methods for dynamically building the home page and Apparatus embodied on the web therefor | |
| JP6022964B2 (en) | Homepage creation method and homepage creation system | |
| Jelliffe | The XML and SGML Cookbook: recipes for structured information | |
| Lincke et al. | Lively fabrik a web-based end-user programming environment | |
| CN112199966B (en) | Translation method, translation device, electronic device and storage medium | |
| CN115309476A (en) | Browser-based ofd file display and editing method |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |