Disclosure of Invention
Technical problem to be solved
The invention provides a low-code front-end development framework and a method based on visual dragging and capable of being customized, and aims to solve the problems that a low-code development platform is single in expression form, limited in components capable of being used for dragging, difficult to realize complex functions and the like.
(II) technical scheme
In order to solve the technical problems, the invention provides a low-code front-end development framework which is based on visual dragging and can be customized, and the framework comprises a component designer, a component library, a form designer, a page renderer, a list designer, a page designer, a code generator, a code warehouse, an application publisher and an application running environment;
a component designer: the method is used for visually designing a custom component, uploading a component icon and a component code, and defining basic attributes of a component event and previewing the component;
a component library: the management organization framework is used for managing built-in components and custom components of the organization framework, and component information is stored in a database;
a form designer: designing a form in a visual dragging mode based on a component library, and storing component and component attribute information contained in the form into a database;
list designer: the data column and layout information are displayed on a data table corresponding to the design form, and the design information is stored in a database;
a page renderer: the system is used for creating a renderer for the page and the components on the page, and realizing customizable page effect;
a page designer: the page designer comprises a single-page designer and a multi-page designer; the single-page designer is used for combining the previously designed forms, lists and page renderers to form a visual page; the multi-page designer forms page operation jumps through menus and buttons, assembles a single page to complete the design of the overall functional layout of the application system, and stores page design data into a database;
a code generator: generating actual executable codes and related static resource files from the page design data generated by the page designer and submitting the actual executable codes and the related static resource files to a code warehouse;
the release server: receiving an issuing instruction, downloading codes from a code warehouse, constructing a compiling environment, and executing compiling and deploying;
an application running environment: and the release server deploys the compiled deployable program package to a running environment, and the running environment comprises middleware required by application running.
Further, the framework completes the modeling of the business object through form design, and the business object modeling is divided into three big categories: maintaining the components on line; self-defining component events, namely, a user self-writes a JS event on the basis of the existing canonical grammar, and finishes clicking, double clicking and loading function writing by using code prompting in an online mode; and in the component library, a user can drag the component to a design area according to the service requirement in the existing component library, and configure the related attribute and the verification rule of the component.
Further, online maintenance of components supports advanced users to adjust existing components according to their needs, including adding, modifying, deleting, enabling, and disabling component response settings, according to existing interfaces.
Furthermore, the low-code front-end development framework supports two modes of a single page and multiple pages, wherein the single page is used for visualization presentation of static resources, and the multiple pages are used for visualization construction of a dynamic application website.
Furthermore, a plurality of templates are provided for frame layout selection, so that a user can conveniently form a prototype of an application website, and the page head and the page tail support complete self-definition; the component/attribute/event supports custom data binding and custom service event association on the basis of conventional texts, pictures, tables and buttons; the templates comprise an application whole station template and an application page module level template, the development of the application front end is accelerated from different dimensions, and the dragging type application development is realized.
The invention also provides a low-code front-end development method which is based on visual dragging and can be customized, and the method comprises the following steps;
s01, customizing the front-end component by the component designer according to the requirement and submitting the front-end component to the component library;
s02, the form designer carries out page design, attribute setting of the components and component event definition in a visual dragging mode based on the components in the component library;
s03, designing the display field, style and position of the list based on the form by the list designer;
s04, the page designer performs page combination configuration based on the form and the list to complete basic page design;
s05, the page renderer performs customizable page effect rendering on the page and the components on the page;
s06, the multi-page designer carries out page combination design based on the designed single page, and complex page interaction operation and the overall interaction style of the application system are realized;
s07, triggering the code generator through the action to generate a corresponding code according to the page design and submitting the code to a code warehouse;
and S08, the release server is triggered by the action to pull the code from the code warehouse, compile the code according to the code language and release the code to the specified running environment.
Further, the step S02 specifically includes: a user places required components into a form layout interface in a dragging mode based on the components in the component library, logically corresponds the components of the form to a field of a business object, sets component attributes, and can set component event operation at the same time, so that the design of the form is completed.
Further, the component attributes include name, default value, data type and check rule, and the component event operation includes single click, double click and modified value.
Furthermore, the multi-page designer is used for designing the overall layout and organization mode, a page combination template is arranged in the multi-page designer, the selection and the design of a page head and a page tail are included, and a single page is combined.
Further, after the step S08, the method further includes: and S09, when the page designed by dragging cannot meet the complex application scene, performing secondary development by the developer based on the code.
(III) advantageous effects
The invention provides a low-code front-end development framework and a method based on visual dragging and capable of being customized, and the invention has the following beneficial effects for the prior art, including but not limited to:
1. in the development process, a built-in component library can be expanded, and a new component is generated in a mode of combining a component template and a component code, so that the form expression capability is enriched;
2. the page and component representation forms can be customized by defining a renderer code for the page and the component;
3. the code generator generates front-end code based on the page designed by the page designer, and if the page performance is still not satisfactory, the code generator can develop based on the front-end code.
Detailed Description
In order to make the objects, contents and advantages of the present invention clearer, the following detailed description of the embodiments of the present invention will be made in conjunction with the accompanying drawings and examples.
To this end we solve the above problem with a low-code front-end development framework that is based on visual drag and customizable.
The invention relates to a low-code front-end development framework which is based on visual dragging and can be customized, and the low-code front-end development framework comprises a form designer, a page designer, a form designer, a component designer, a page renderer, a code generator and a publishing server. The low-code front-end development framework can provide front-end page design, form design, component design, list design and code generation for business personnel/developers, and realizes what you see is what you get web page. The invention carries out technical improvement on a low-code development platform which is popular again under the background of the digital transformation of the current enterprise. Besides, the application system is built quickly by simply dragging, pulling and dragging and comprises a common low-code development platform, so that visual programming is realized, and quick response to services is realized. Meanwhile, customizable elements are added to the low-code development process, including developer-oriented component customization opening, page and component rendering design, and secondary development of generated code. Therefore, the method can realize the zero-code application system building mode for business personnel, and can also provide code level customization capacity on a dragging basis for developers, so as to realize better application performance.
In order to solve the problems, the invention is realized by the following technical scheme:
a low-code front-end development framework based on visual dragging and capable of being customized comprises a component designer, a component library, a form designer, a page renderer, a list designer, a page designer, a code generator, a code warehouse, an application publisher and an application running environment;
wherein, the component designer: the method is used for visually designing the custom assembly, uploading assembly icons and assembly codes, and defining basic attributes of assembly events and previewing the assembly;
wherein, the component library: the management organization framework is used for managing built-in components and custom components of the organization framework, and component information is stored in a database;
wherein, the form designer: designing a form in a visual dragging mode based on a component library, and storing relevant information such as components, component attributes and the like contained in the form into a database;
wherein the list designer: the data column and layout information are displayed on a data table corresponding to the design form, and the design information is stored in a database;
wherein the page renderer: the system is used for creating a renderer for the page and the components on the page, and realizing customizable page effect;
wherein, the page designer: page designers include single-page designers and multi-page designers. The single-page designer is used for combining the previously designed form, the list and the page renderer to form a visual page; the multi-page designer forms page operation jumps through menus and buttons, assembles a single page to complete the design of the overall functional layout of the application system, and stores page design data into a database;
wherein the code generator: generating actual executable codes and related static resource files from the page design data generated by the page designer and submitting the actual executable codes and the related static resource files to a code warehouse;
wherein, the publishing server: receiving an issuing instruction, downloading the code, constructing a compiling environment, and executing compiling and deploying;
wherein, the application running environment: the publishing server deploys the compiled deployable program package to a running environment, the running environment comprises middleware required by application running, and the host environment can be a physical server, a virtual server and a container.
Based on a customizable pull and customizable low-code front-end development framework, the method comprises the following steps:
s01, customizing the front-end component by the component designer according to the requirement and submitting the front-end component to the component library (optional);
s02, the form designer carries out page design, attribute setting of the components and component event definition in a visual dragging mode based on the components in the component library;
s03, designing the display field, style and position of the list based on the form by the list designer;
s04, the page designer performs page combination configuration based on the form and the list to complete basic page design;
s05, the page renderer performs customizable page effect rendering on the page and the components on the page;
s06, the multi-page designer carries out page combination design based on the designed single page, and complex page interaction operation and the overall interaction style of the application system are realized;
s07, triggering the code generator through the action to generate a corresponding code according to the page design and submitting the code to a code warehouse;
and S08, the release server is triggered by the action to pull the code from the code warehouse, compile the code according to the code language and release the code to the specified running environment. At this time, the application page may be accessed through the browser.
And S09, when the page designed by dragging cannot meet the complex application scene, the developer can perform secondary development based on the code.
The present invention has the following beneficial effects including but not limited to the following with respect to the prior art:
1. in the development process, a built-in component library can be expanded, and a new component is generated in a mode of combining a component template and a component code, so that the form expression capability is enriched;
2. the page and component representation forms can be customized by defining a renderer code for the page and the component;
3. the code generator generates front-end code based on the page designed by the page designer, and if the page performance is still not satisfactory, the code generator can develop based on the front-end code.
Referring to fig. 1, a low-code front-end development framework based on visual dragging and customizable comprises a component designer, a component library, a form designer, a page renderer, a list designer, a page designer, a code generator, a code warehouse, an application publisher and an application running environment;
wherein, the component designer: the method is used for visually designing the custom assembly, uploading assembly icons and assembly codes, and defining basic attributes of assembly events and previewing the assembly;
wherein, the component library: the management organization framework is used for managing built-in components and custom components of the organization framework, and component information is stored in a database;
wherein, the form designer: designing a form in a visual dragging mode based on a component library, and storing relevant information such as components, component attributes and the like contained in the form into a database;
wherein the list designer: the data column and layout information are displayed on a data table corresponding to the design form, and the design information is stored in a database;
wherein the page renderer: the system is used for creating a renderer for the page and the components on the page, and realizing customizable page effect;
wherein, the page designer: page designers include single-page designers and multi-page designers. The single-page designer is used for combining the previously designed form, the list and the page renderer to form a visual page; the multi-page designer forms page operation jumps through menus and buttons, assembles a single page to complete the design of the overall functional layout of the application system, and stores page design data into a database;
wherein the code generator: generating an actual executable code and a related static resource file from page data generated by a page designer and submitting the actual executable code and the related static resource file to a code warehouse;
wherein, the publishing server: receiving an issuing instruction, downloading the code, constructing a compiling environment, and executing compiling and deploying;
wherein, the application running environment: the publishing server deploys the compiled deployable program package to a running environment, the running environment comprises middleware required by application running, and the host environment can be a physical server, a virtual server and a container.
The development design of the application system is carried out, firstly, the modeling of the business object is carried out, and the modeling of the business object can be completed through the design of a form (field) in the low-code front-end development framework environment; and secondly, constructing and connecting page objects in series, completing the whole style design through layout, page head and page tail, simultaneously combining the completed business object modeling with page components and routes, and forming independently accessible application by assisting data configuration and event configuration.
As shown in fig. 3, the business object modeling is divided into three major categories, and the components are maintained online (supporting advanced users to adjust the existing components according to the existing interfaces, including adding, modifying, deleting, activating and deactivating component response settings, according to their own needs); the component events are self-defined, a user can write JS events by himself on the basis of the existing standard grammar, code prompting is assisted in an online mode, and function writing such as clicking, double clicking and loading is completed; and in the component library, a user can drag the component to a design area according to the service requirement in the existing component library, and configure the relevant attribute, the check rule and the like of the component.
As shown in FIG. 4, the low-code front-end development framework supports two modes, namely a single-page mode and a multi-page mode, wherein the single page is used for visualization presentation of static resources, and the multi-page mode is used for visualization construction of a dynamic application website. The frame layout is selected to provide a plurality of templates, so that a user can conveniently form a prototype of an application website, the page head and the page tail support complete self-definition, and the requirements of diversified user service systems can be conveniently met; the components/attributes/events support custom data binding and custom business event association on the basis of conventional texts, pictures, tables, buttons and the like; the templates comprise an application whole station template and an application page module level template, the front-end development of the application is accelerated from different dimensions, and the dragging type application development is realized by energizing business personnel.
As shown in fig. 2, based on a customizable pull and customizable low-code front-end development framework, the method comprises the following steps:
the method is characterized in that a form is generally designed firstly based on a low-code development application system, when the form is designed, if the current component library cannot meet the requirement, the component design including the filling of component names, marks and icons and the uploading of component codes can be carried out according to the constraint of a component designer, and the component is stored in the component library after the component library is expected through preview.
Then, the user places the required components into the form layout interface in a dragging mode based on the components in the component library, and logically enables the components of the form to correspond to one field of the business object. And setting component attributes such as name, default value, data type, check rule and the like; meanwhile, component event operations such as single click, double click, value modification and the like can be set; and then the design of the form is completed.
After the form is designed, the form is designed based on the list display mode of the business object corresponding to the form, including the style and field display of the list display.
After the form and the list exist, the page design can be started to realize basic operations of adding, modifying, deleting, inquiring and the like of a service object.
For an application system, a plurality of modules are included, and the modules are generally combined in a menu and button link mode, so that after a plurality of single pages are constructed, the functional organization mode of the whole system needs to be designed. The multi-page designer is used for designing the overall layout and organization mode, a page combination template is arranged in the multi-page designer, the selection and the design of a page head and a page tail are included, and a single page is combined.
The development of a conventional application system can be completed through the design of multiple pages, but the developed application system has a discordant appearance due to the limited default components and the relatively single expression style and style, and the page rendering design can be performed on the components, the single page and the multiple pages, so that the expression forms of the pages and the components are enriched, and the effect of the overall attractive application is achieved. It should be noted that the design information is stored in the database in the previous component design, form design and page design processes.
After the above operations are completed, code generation may be performed by a code generator and submitted to a code repository.
For a general application system, after the code is generated, operations such as compiling and deployment can be performed, and the code is delivered to a user for use after necessary test and verification. To this end, all of the foregoing operations need not have a true software development experience. Of course, if the generated code still cannot meet the complex business requirements, development can be performed based on the generated code, and at this time, personnel with development capability needs to participate.
The above description is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, several modifications and variations can be made without departing from the technical principle of the present invention, and these modifications and variations should also be regarded as the protection scope of the present invention.