CN114281323A - Front-end form generation method and system - Google Patents
Front-end form generation method and system Download PDFInfo
- Publication number
- CN114281323A CN114281323A CN202110341650.2A CN202110341650A CN114281323A CN 114281323 A CN114281323 A CN 114281323A CN 202110341650 A CN202110341650 A CN 202110341650A CN 114281323 A CN114281323 A CN 114281323A
- Authority
- CN
- China
- Prior art keywords
- page
- control
- controls
- development
- visual
- 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
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000011161 development Methods 0.000 claims abstract description 35
- 238000009877 rendering Methods 0.000 claims abstract description 33
- 230000000007 visual effect Effects 0.000 claims abstract description 29
- 230000008569 process Effects 0.000 claims description 16
- 238000004891 communication Methods 0.000 claims description 12
- 230000003993 interaction Effects 0.000 claims description 5
- 238000013461 design Methods 0.000 abstract description 8
- 230000007547 defect Effects 0.000 abstract description 6
- 238000012549 training Methods 0.000 abstract description 4
- 230000000694 effects Effects 0.000 abstract 1
- 230000006399 behavior Effects 0.000 description 4
- 239000000243 solution Substances 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000005484 gravity Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The invention discloses a method and a system for generating a front-end form, wherein the method comprises the following steps: selecting a required service model from a database at the back end; providing a visual form page at the front end, wherein the visual form page comprises a control library; adding required controls in a visual form page in a dragging mode and carrying out page layout; setting the control and associating the control with the business model; rendering and publishing the page according to the setting through a rendering engine in the front end; the effect is as follows: through providing visual form page at the front end, can directly carry out the design development of page through visual pulling, the realization mode is simple, and the user through simple training can operate, and the work of front end development personnel programming development page in the alternative can partly past, and front end development personnel can shift the focus of work to the development realization of complicated logic, and then overcome the defect that development efficiency is low among the prior art.
Description
Technical Field
The invention belongs to the technical field of front-end pages, and particularly relates to a front-end form generation method and a front-end form generation system.
Background
With the rapid development of the internet, various informatization requirements of organizations such as enterprises and governments are increasing day by day, the requirements of front-end page development are increasing, and corresponding front-end pages and rear-end interfaces need to be developed by submitting contents aiming at different forms. In the process from design to release of the product, designers need to design style diagrams according to communication, relatively limited development resources of software companies and informatization departments cannot meet the requirements more and more, the working pressure of developers is huge, and the business development of the companies is limited.
In order to reduce the construction cost of an information-based system and improve the software delivery efficiency, developers make various attempts, for example, developers gradually provide some packaged front-end component libraries in the market, common Ant Design and Element exist, the developers can directly call when developing front-end pages, and control styles do not need to be written from 0, so that the development efficiency of the front-end pages is greatly improved, but the component libraries have limited capacity, the developers still need to develop and process one by one facing each page, the condition of insufficient development resources still exists in large quantity, and the defect of insufficient efficiency still exists.
Disclosure of Invention
In view of the above disadvantages in the prior art, the present invention aims to provide a method and a system for generating a front-end form for a user, so as to overcome the defect of low development efficiency in the prior art.
In a first aspect: a method of front-end form generation, the method comprising:
selecting a required service model from a database at the back end; wherein, the business model corresponds to a corresponding business process;
providing a visual form page at the front end, wherein the visual form page comprises a control library;
adding required controls in a visual form page in a dragging mode and carrying out page layout;
setting the control and associating the control with the business model;
and then, rendering and publishing the page according to the setting through a rendering engine in the front end.
As an optional implementation manner of the present application, the method further includes:
on top of existing controls, a secondary development is performed to add specific properties or events to the rendering engine's specified lifecycle.
As an alternative embodiment of the present application, each control runs independently on the engine and is not coupled to other parts.
As an optional implementation manner of the present application, at the front end, communications between the widgets need to be performed in the form of an adapter or an interface, and all the communications are summarized to the unified interface of the parent component.
As an alternative embodiment of the present application, the data to be presented needs to interact with the backend in the AJAX manner.
In a second aspect: a front-end form generation system, the system comprising:
the interaction layer is used for providing a visual form page at the front end, and the visual form page comprises a control library;
an application layer, including a form designer, to:
adding required controls in a visual form page in a dragging mode and carrying out page layout;
setting the control and associating the control with a business model; the business model is obtained by selecting from a database at the back end, and the business model corresponds to a corresponding business process;
and the service layer comprises a rendering engine and is used for realizing the rendering and the publishing of the page according to the setting through the rendering engine.
As an optional implementation manner of the present application, the service layer is further configured to:
over existing controls, a secondary development is performed to add specific properties or events to the rendering engine's specified lifecycle.
As an alternative embodiment of the present application, each control runs independently on the engine and is not coupled to the rest of the system.
As an optional implementation manner of the present application, at the front end, communications between the widgets need to be performed in the form of an adapter or an interface, and all the communications are summarized to the unified interface of the parent component.
As an optional implementation manner of the present application, the rendering engine renders a page according to the Schema defined in the form designer, so as to drive the whole page data loading process, and control the presentation and default behavior of the control, and the multi-level linkage operation.
By adopting the technical scheme, the method has the following advantages: according to the front-end form generation method and system provided by the invention, the visual form page is provided at the front end, the design and development of the page can be directly carried out through visual dragging, the realization mode is simple, the user after simple training can operate, a part of the past work of front-end developers for programming and developing the page can be replaced, the front-end developers do not need to repeatedly build wheels, the work gravity center can be transferred to the development and realization of complex logic, and the defect of low development efficiency in the prior art is further overcome.
Drawings
Fig. 1 is a flowchart of a front-end form generating method according to an embodiment of the present invention;
fig. 2 is a structural diagram of a front-end form generating system according to an embodiment of the present invention.
Detailed Description
In order to make the technical problems, technical solutions and advantages of the present invention more apparent, the following detailed description is given with reference to the accompanying drawings and specific embodiments. It should be noted that the embodiments described herein are only for illustration and are not intended to limit the invention. In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present invention. However, it will be apparent to one of ordinary skill in the art that: it is not necessary to employ these specific details to practice the present invention.
It is to be noted that, unless otherwise specified, technical or scientific terms used herein shall have the ordinary meaning as understood by those skilled in the art to which the invention pertains.
Referring to fig. 1, a front-end form generation method includes:
s101, selecting a required service model from a database at the back end; and the business model corresponds to a corresponding business process.
Specifically, since the front end has no database, the back end serves as an external service support of the front end, and the external service support comprises a business model support and a process engine support;
the database comprises a plurality of service models, and each service model comprises a corresponding field; the business process comprises a corresponding approval process, processing logic and the like.
S102, providing a visual form page at the front end, wherein the visual form page comprises a control library.
Specifically, the control library comprises basic controls, layout controls and business controls according to the classification of the control library; wherein, each control is defined and developed according to the uniform standard; and is pre-constructed.
S103, adding the required control in a dragging mode in the visual form page and carrying out page layout.
Specifically, the latest H5 dragging technology and CSS3 technology are used, the line-by-line and column-by-column layout can be simply and conveniently realized on the basis of flex layout, and when components are dragged, outer layer layout components are automatically added, so that automatic layout is realized;
and S104, setting the control and associating the control with the business model.
Specifically, the data interaction of the front end and the back end is realized by binding the control with the service model field of the back end interface; the control setting comprises setting the attribute and the event of the control and setting a simple component data format;
the attributes of the control comprise the storage value, title, layout and verification rule of the component in the database, and Schema in a specified format is generated.
And S105, rendering and publishing the page according to the setting through a rendering engine in the front end.
Specifically, the rendering engine renders a page according to Schema defined in a form designer, drives the whole page data loading process, and controls component presentation and default behaviors and multi-level linkage operation;
the final result of the publishing is to output a link, and the personnel with the authority carries out corresponding form filling.
Furthermore, during communication, each control independently runs on the engine and is not coupled with other parts, and the controls can be expanded at any time according to business requirements.
Specifically, at the front end, the controls need to communicate in the form of an adapter or an interface, and all are gathered to a parent control unified interface;
the data to be displayed needs to be interacted with the back end in an AJAX mode;
each control can acquire the attributes of all the controls of the whole page, so that the communication convenience is realized.
Further, the data interface request data is defined according to the RESTful API format, and the data requested by the interface is a complete page MODEL. And the rendering engine analyzes and shows the corresponding component. Each component has a corresponding unique UUId, so that the corresponding component instance can be conveniently inquired by multi-level linkage operation to fill a corresponding default value, and specified fields can be filtered out in a filtering scene. Editing the property of the component, notifying by a user-defined event, unifying all editing behaviors, controlling and tracking modification, keeping the rendering engine and the event uncoupled from the component in principle, and showing the component independently. At the front end, the method is developed by a VUE mode, communication among components can be achieved by injecting a Context of a rendering engine in an object mode, a global component instance is obtained, and a data call interface is obtained in an object injection mode.
When the method is applied, data is transmitted between an engine and a component in a one-way data flow mode, the engine is transmitted to the component through attributes, and the component is transmitted to the engine through events;
the engine interacts with the back end in an AJAX mode to manage the whole data of the page, including main table data and associated detailed table data;
the component interactively manages the data related to the component by means of AJAX with the back end, such as alternate items, uploading/downloading files and the like; in the present application, the components and the controls have the same meaning.
By the scheme, the visual form page is provided at the front end, the design and development of the page can be directly carried out through visual dragging, the front end drives according to events, data acquired at the rear end is presented at the front end, and the page development which is what you see is what you get can be completed; the method is simple to realize, a user after simple training can operate the method, a part of past work of programming and developing pages of front-end developers can be replaced, the front-end developers do not need to repeatedly build wheels, the work gravity center can be transferred to the development and realization of complex logic, and the defect of low development efficiency in the prior art is overcome.
Furthermore, in order to handle the requirements in special scenes, high-performance scalability is realized; on the basis of the foregoing scheme, the method further comprises:
on top of existing controls, a secondary development is performed to add specific properties or events to the rendering engine's specified lifecycle.
Specifically, a special scene is met by adding a JS code and a CSS, for example, the JS code can be completely realized by a native code in an instantiation part, and finally, a JS object is generated, and then the codes are compatible to a control system through assignment of attributes and calling of events.
Referring to fig. 2, an embodiment of the present invention further provides a front-end form generating system, where the system includes:
and the interaction layer is used for providing a visual form page at the front end, and the visual form page comprises a control library.
Specifically, the visual form page comprises a PC/mobile end form page and a PC/mobile end list page;
when the system is implemented, the control library is constructed in advance, and the controls in the control library are an independent and complete front-end UI control system which is constructed in advance.
An application layer, including a form designer, to:
adding required controls in a visual form page in a dragging mode and carrying out page layout;
setting the control and associating the control with a business model; the business model is obtained by selecting from a database at the back end, and the business model corresponds to a corresponding business process.
Specifically, the form designer comprises an input control, a selection control, a sub-form control and a layout control; it should be noted that the present invention is only exemplary and not limited thereto;
and the service layer comprises a rendering engine and is used for realizing the rendering and the publishing of the page according to the setting through the rendering engine.
Specifically, the rendering engine renders a page according to a Schema defined in the form designer to drive the whole page data loading process, and controls the presentation and default behavior of a control and multi-level linkage operation;
the final result is to output a standard JSON text format, describe the properties and attributes of the components, and display through a rendering engine.
The rendering engine comprises functions of a control, a canvas, attributes and secondary development;
wherein the secondary development is as follows: over existing controls, a secondary development is performed to add specific properties or events to the rendering engine's specified lifecycle.
It should be noted that the system is deployed at the front end, and also needs external service support, where the external service support is derived from the back end, and includes business model support and process engine support.
During communication, each control independently runs on the engine and is not coupled with other parts of the system, and the controls can be expanded at any time according to business requirements.
Specifically, at the front end, the controls need to communicate in the form of an adapter or an interface, and all are gathered to a parent control unified interface;
the data to be displayed needs to be interacted with the back end in an AJAX mode;
each control can acquire the attributes of all the controls of the whole page, so that the communication convenience is realized.
It should be noted that, the above more detailed description may refer to the description of the method embodiment, and is not repeated herein.
Further, the secondary development of the control needs three files, namely index-setting, index-design and index-render, wherein the index-setting is responsible for setting the property of the component, and lists all the property settings, events, default values and events, the index-design is the display form of the component on the designer, and the index-render is the display of the component in the running state. When the designer is used for dragging the component to the canvas, the designer can add a row component or a column component to the corresponding MODEL by self-definition on the outer layer of the component, and the rendering is the layout showing component. The run state may execute logic added at the time of secondary development before submission, such as some of the operational logic executed before form submission.
Through the system, an independent and complete front-end UI component system is constructed firstly and is fused with a visual page and form designer, and developers can complete the development of the page which is obtained by what you see is through visually dragging a control and adjusting the layout; each control can bind a service model field of a back-end interface to realize data interaction of the front end and the back end, and a front-end page realized under the scheme is as follows: the control is strong, rich in layout, strong in expansibility, simple and easy to use;
the user who passes through simple training can operate, can replace a part of the work of front end developer programming development page in the past, and the front end developer can shift the work focus to the development realization of complicated logic, and then overcomes the defect that development efficiency is low that development personnel still need to develop one by one in the prior art to every page.
Finally, it is to be noted that: the above embodiments are only used to illustrate the technical solution of the present invention, and not to limit the same; while the invention has been described in detail and with reference to the foregoing embodiments, it will be understood by those skilled in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; such modifications and substitutions do not depart from the spirit and scope of the present invention, and they should be construed as being included in the following claims and description.
Claims (10)
1. A method for front-end form generation, the method comprising:
selecting a required service model from a database at the back end; wherein, the business model corresponds to a corresponding business process;
providing a visual form page at the front end, wherein the visual form page comprises a control library;
adding required controls in a visual form page in a dragging mode and carrying out page layout;
setting the control and associating the control with the business model;
and then, rendering and publishing the page according to the setting through a rendering engine in the front end.
2. The method of claim 1, wherein the method further comprises:
on top of existing controls, a secondary development is performed to add specific properties or events to the rendering engine's specified lifecycle.
3. The method of claim 2, wherein each control runs independently on the engine and is not coupled to other components.
4. The front-end form generation method according to any one of claims 1 to 3, characterized in that, at the front end, communication needs to be performed between the controls in the form of adapters or interfaces, and all the communication needs to be summarized to the unified interface of the parent component.
5. The front-end form generation method of claim 4, wherein the data to be presented needs to interact with the back-end in an AJAX manner.
6. A front-end form generation system, the system comprising:
the interaction layer is used for providing a visual form page at the front end, and the visual form page comprises a control library;
an application layer, including a form designer, to:
adding required controls in a visual form page in a dragging mode and carrying out page layout;
setting the control and associating the control with a business model; the business model is obtained by selecting from a database at the back end, and the business model corresponds to a corresponding business process;
and the service layer comprises a rendering engine and is used for realizing the rendering and the publishing of the page according to the setting through the rendering engine.
7. The front-end form generation system of claim 6, wherein the service layer is further configured to:
over existing controls, a secondary development is performed to add specific properties or events to the rendering engine's specified lifecycle.
8. The front-end form generation system of claim 6, wherein the controls run independently on the engine and are not coupled to other parts of the system.
9. The front-end form generation system of any one of claims 6 to 8, wherein at the front end, the controls need to communicate with each other in the form of adapters or interfaces and all are summarized to the parent component unified interface.
10. The front-end form generation system of claim 9, wherein the rendering engine renders pages according to a Schema defined in the form designer to drive the entire page data loading process and control presentation and default behavior, as well as multi-level linkage operations.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110341650.2A CN114281323A (en) | 2021-03-30 | 2021-03-30 | Front-end form generation method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110341650.2A CN114281323A (en) | 2021-03-30 | 2021-03-30 | Front-end form generation method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114281323A true CN114281323A (en) | 2022-04-05 |
Family
ID=80868201
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110341650.2A Pending CN114281323A (en) | 2021-03-30 | 2021-03-30 | Front-end form generation method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114281323A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115079902A (en) * | 2022-06-09 | 2022-09-20 | 安徽同徽信息技术有限公司 | Front-end packaging self-grinding component library |
| CN115221178A (en) * | 2022-08-10 | 2022-10-21 | 北京国电通网络技术有限公司 | Data table binding method and device, electronic equipment and computer readable medium |
| CN115268916A (en) * | 2022-09-29 | 2022-11-01 | 泰豪软件股份有限公司 | Dynamic form implementation method and system based on low-code development platform |
| CN115390840A (en) * | 2022-08-01 | 2022-11-25 | 广州市齐明软件科技有限公司 | Visual page generation method, device and system |
| CN116301856A (en) * | 2023-03-07 | 2023-06-23 | 浪潮智慧科技有限公司 | Design method, device, equipment and medium of visual form designer |
| CN117331551A (en) * | 2022-06-27 | 2024-01-02 | 国家电投集团数字科技有限公司 | Large-screen data visualization system and method |
| CN117573121A (en) * | 2023-11-20 | 2024-02-20 | 中国人寿保险股份有限公司上海数据中心 | Graphical custom insurance document template generation method |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063306A (en) * | 2011-01-06 | 2011-05-18 | 夏春秋 | Technical implementation method for application development through electronic form |
| CN102495735A (en) * | 2011-12-14 | 2012-06-13 | 方正国际软件有限公司 | Web end UI (user interface) component application frame system |
| CN107203626A (en) * | 2017-05-27 | 2017-09-26 | 网宿科技股份有限公司 | A kind of BPM method and system |
| CN110825362A (en) * | 2019-11-04 | 2020-02-21 | 广东道一信息技术股份有限公司 | Low-code application software development system and method |
| CN111930370A (en) * | 2020-06-17 | 2020-11-13 | 石化盈科信息技术有限责任公司 | Visualized page processing method and device, computer equipment and storage medium |
-
2021
- 2021-03-30 CN CN202110341650.2A patent/CN114281323A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063306A (en) * | 2011-01-06 | 2011-05-18 | 夏春秋 | Technical implementation method for application development through electronic form |
| CN102495735A (en) * | 2011-12-14 | 2012-06-13 | 方正国际软件有限公司 | Web end UI (user interface) component application frame system |
| CN107203626A (en) * | 2017-05-27 | 2017-09-26 | 网宿科技股份有限公司 | A kind of BPM method and system |
| CN110825362A (en) * | 2019-11-04 | 2020-02-21 | 广东道一信息技术股份有限公司 | Low-code application software development system and method |
| CN111930370A (en) * | 2020-06-17 | 2020-11-13 | 石化盈科信息技术有限责任公司 | Visualized page processing method and device, computer equipment and storage medium |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115079902A (en) * | 2022-06-09 | 2022-09-20 | 安徽同徽信息技术有限公司 | Front-end packaging self-grinding component library |
| CN117331551A (en) * | 2022-06-27 | 2024-01-02 | 国家电投集团数字科技有限公司 | Large-screen data visualization system and method |
| CN115390840A (en) * | 2022-08-01 | 2022-11-25 | 广州市齐明软件科技有限公司 | Visual page generation method, device and system |
| CN115221178A (en) * | 2022-08-10 | 2022-10-21 | 北京国电通网络技术有限公司 | Data table binding method and device, electronic equipment and computer readable medium |
| CN115268916A (en) * | 2022-09-29 | 2022-11-01 | 泰豪软件股份有限公司 | Dynamic form implementation method and system based on low-code development platform |
| CN115268916B (en) * | 2022-09-29 | 2022-12-20 | 泰豪软件股份有限公司 | Dynamic form implementation method and system based on low-code development platform |
| CN116301856A (en) * | 2023-03-07 | 2023-06-23 | 浪潮智慧科技有限公司 | Design method, device, equipment and medium of visual form designer |
| CN116301856B (en) * | 2023-03-07 | 2023-08-29 | 浪潮智慧科技有限公司 | Design method, device, equipment and medium of visual form designer |
| CN117573121A (en) * | 2023-11-20 | 2024-02-20 | 中国人寿保险股份有限公司上海数据中心 | Graphical custom insurance document template generation method |
| CN117573121B (en) * | 2023-11-20 | 2024-05-17 | 中国人寿保险股份有限公司上海数据中心 | Graphical custom insurance document template generation method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114281323A (en) | Front-end form generation method and system | |
| CN109597814B (en) | Online rapid delivery system of background management information system | |
| US8707261B2 (en) | Service integration modeling and execution framework | |
| US11321057B2 (en) | Single-page web application builder system and method based on a finite-state machine | |
| US8712953B2 (en) | Data consumption framework for semantic objects | |
| CN102207872B (en) | Method and system for customizing Web UI (User Interface) control according to user requirements | |
| US8386996B2 (en) | Process extension wizard for coherent multi-dimensional business process models | |
| US8381180B2 (en) | Visually exposing data services to analysts | |
| AU2009314067B2 (en) | Managing and automatically linking data objects | |
| CN112328212A (en) | Rapid development platform based on separation of front end and rear end of engine mode and use method thereof | |
| US20100153150A1 (en) | Software for business adaptation catalog modeling | |
| US20090006150A1 (en) | Coherent multi-dimensional business process model | |
| US20140280484A1 (en) | Dynamic Service Extension Infrastructure For Cloud Platforms | |
| US20100153149A1 (en) | Software for model-based configuration constraint generation | |
| CN104484189A (en) | Construction and design method of application interface | |
| CN105607907A (en) | Model-driven control system with workflow engine dynamically switched | |
| WO2012069490A1 (en) | Template-based content creation | |
| CN114089958A (en) | Form visual configuration method and device | |
| US20120030612A1 (en) | Dynamic property attributes | |
| US20130185621A1 (en) | Document renewal and translation | |
| CN111984176A (en) | Software online development platform and development method | |
| CN115712413A (en) | Low code development method, device, equipment and storage medium | |
| CN114721630A (en) | Low-code development system and method | |
| CN110032717B (en) | One-stop process business standardization design method | |
| CN114610280A (en) | Visual form design method and system realized in low-code mode |
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 |