Movatterモバイル変換


[0]ホーム

URL:


CN113849165A - A low-code front-end development framework and method based on visual drag and drop and customizable - Google Patents

A low-code front-end development framework and method based on visual drag and drop and customizable
Download PDF

Info

Publication number
CN113849165A
CN113849165ACN202111145979.8ACN202111145979ACN113849165ACN 113849165 ACN113849165 ACN 113849165ACN 202111145979 ACN202111145979 ACN 202111145979ACN 113849165 ACN113849165 ACN 113849165A
Authority
CN
China
Prior art keywords
page
code
component
designer
design
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
Application number
CN202111145979.8A
Other languages
Chinese (zh)
Inventor
张洪光
王楠
刘金钟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Aerospace Science And Technology Network Information Development Co ltd
Original Assignee
Aerospace Science And Technology Network Information Development Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Aerospace Science And Technology Network Information Development Co ltdfiledCriticalAerospace Science And Technology Network Information Development Co ltd
Priority to CN202111145979.8ApriorityCriticalpatent/CN113849165A/en
Publication of CN113849165ApublicationCriticalpatent/CN113849165A/en
Pendinglegal-statusCriticalCurrent

Links

Images

Classifications

Landscapes

Abstract

Translated fromChinese

本发明涉及一种基于可视化拖拉且可定制的低代码前端开发框架及方法,属于程序开发领域。本发明的框架包括表单设计器、页面设计器、表格设计器、组件设计器、页面渲染器、代码生成器、发布服务器。低代码前端开发框架能够为业务人员/开发人员提供前端页面设计、表单设计、组件设计、列表设计、代码生成,实现所见即所得的web页面实现。本发明除了包含一般低代码开发平台的通过简单“拖、拉、拽”快速搭建应用系统,实现“可视化”编程,实现对业务的敏捷响应。同时,对于低代码开发过程增加可定制元素,包括面向开发人员的组件定制开放、页面和组件渲染设计,以及生成代码的二次开发。本发明具有丰富的表单表现能力,页面和组件表现形式可定制。

Figure 202111145979

The invention relates to a customizable low-code front-end development framework and method based on visual dragging and belongs to the field of program development. The framework of the present invention includes a form designer, a page designer, a table 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 to realize WYSIWYG web page implementation. In addition to including a general low-code development platform, the invention can quickly build an application system through simple "drag, pull, and drag", realize "visualization" programming, and realize agile response to business. At the same time, customizable elements are added to the low-code development process, including open component customization for developers, page and component rendering design, and secondary development of generated code. The present invention has rich form expressing capabilities, and the expressive forms of pages and components can be customized.

Figure 202111145979

Description

Customizable low-code front-end development framework and method based on visual dragging
Technical Field
The invention belongs to the field of program development, and particularly relates to a low-code front-end development framework and a method based on visual dragging and capable of being customized.
Background
For many years, software engineering in the field of software development, particularly in the field of application software development, mainly includes activities such as demand analysis, architecture design, detailed design, code development, test verification, installation and deployment, implementation, operation and maintenance, and certainly, in different software lifecycle models, the activity sequence and the activity segmentation thickness have certain differences, but generally, the process is a heavier software development process. Such software development processes generally suffer from several problems: 1. the development cycle is long because the time that the software is ultimately delivered to the user does not differ significantly, regardless of the software lifecycle model used. In addition to performing software activities during long periods of software, it is also critical whether demand management can be performed efficiently, and if demand changes or spreads occur, lead time is more difficult to control. 2. The maintenance cost is high, the service code amount of the application program is large and is realized by manual coding, the code needs to be modified when any requirement changes, and the complexity of modification and maintenance is high; meanwhile, due to the long development period, a developer is difficult to change, and a catcher needs a long time to completely master the code, and during the period, a bug is easily introduced when the code is modified. 3. The software maturity is low, the application software is mainly used for certain specific service backgrounds, the proportion of service logic codes is high, the reuse rate is low, a certain period is needed for the system to be mature and stable, and meanwhile, the application is easy to change in demand, so that the next round of instability is entered.
In recent years, with the deep digitalization and transformation of enterprises, the requirements of application software on agile development and rapid delivery are higher and higher, and the software development mode of many organizations is shifted from a pure code development mode to a more efficient low-code development platform for software development. The software development efficiency can be improved, the threshold of software development is reduced, and even business personnel without development experience can build application software in a dragging mode. However, such a "low-code development platform" also has the problems of single expression form, limited components available for dragging, difficulty in realizing complex functions, and the like, and further causes that only application software with simple functions and single style can be "built", which brings certain concerns to users using the "low-code development platform", and is one of the main reasons that a low-code development platform (called an early-stage rapid development platform) product cannot be really popularized and developed for many years. Therefore, in order to solve the problem, it is important to provide a customizable low-code front-end development framework and method based on component visual dragging.
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.
Drawings
FIG. 1 is a schematic diagram of a low-code front-end development framework architecture based on visual drag and customizable;
FIG. 2 is a development step of a visualization-based drag and customizable low-code front-end development framework;
FIG. 3 is a functional diagram of a form designer;
FIG. 4 is a functional diagram of a page designer.
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.

Claims (10)

Translated fromChinese
1.一种基于可视化拖拉且可定制的低代码前端开发框架,其特征在于,该框架包括组件设计器、组件库、表单设计器、页面渲染器、列表设计器、页面设计器、代码生成器、代码仓库、应用发布器、应用运行环境;1. a customizable low-code front-end development framework based on visual drag, is characterized in that, this framework comprises component designer, component library, form designer, page renderer, list designer, page designer, code generator , code repository, application publisher, application runtime environment;组件设计器:用于可视化设计自定义组件,上传组件图标、组件代码,定义组件事件基本属性以及预览组件;Component Designer: used to visually design custom components, upload component icons, component codes, define basic properties of component events, and preview components;组件库:用于管理组织框架内置组件及自定义组件,组件信息存储到数据库;Component library: used to manage the built-in components and custom components of the organizational framework, and the component information is stored in the database;表单设计器:基于组件库,通过可视化拖拉方式设计表单,表单包含的组件、组件属性信息存储到数据库;Form Designer: Based on the component library, the form is designed by visual drag and drop, and the components and component attribute information contained in the form are stored in the database;列表设计器:用于设计表单对应的数据表格所显示的数据列及布局信息,设计信息存储到数据库;List designer: used to design the data columns and layout information displayed by the data table corresponding to the form, and store the design information in the database;页面渲染器:用于为页面及页面上组件创建渲染器,实现页面效果可定制;Page renderer: used to create a renderer for the page and the components on the page, so that the page effect can be customized;页面设计器:页面设计器包括单页面设计器和多页面设计器;单页面设计器用于将前面所设计的表单、列表及页面渲染器组合起来形成可视化页面;多页面设计器通过菜单、按钮形成页面操作的跳转,将单页面进行组装完成应用系统整体功能布局的设计,页面设计数据存储到数据库;Page designer: The page designer includes a single-page designer and a multi-page designer; the single-page designer is used to combine the previously designed forms, lists and page renderers to form a visual page; the multi-page designer is formed by menus and buttons. Page operation jump, assemble a single page to complete the design of the overall functional layout of the application system, and store the page design data in the database;代码生成器:将页面设计器产生的页面设计数据生成实际可运行代码及相关静态资源文件并提交到代码仓库;Code generator: Generate the actual executable code and related static resource files from the page design data generated by the page designer and submit them to the code repository;发布服务器:接收发布指令,从代码仓库下载代码,构建编译环境,并执行编译及部署;Publishing server: Receive publishing instructions, download code from the code repository, build a compilation environment, and execute compilation and deployment;应用运行环境:发布服务器将编译后的可部署程序包部署到运行环境,运行环境包含应用运行所需的中间件。Application runtime environment: The publisher deploys the compiled deployable package to the runtime environment, which contains the middleware required for the application to run.2.如权利要求1所述的基于可视化拖拉且可定制的低代码前端开发框架,其特征在于,该框架通过表单设计完成业务对象的建模,业务对象建模分为三个大的分类:组件在线维护;组件事件自定义,用户在既有规范语法基础上,自行编写JS事件,以在线的方式辅助以代码提示,完成点击、双击、装载函数编写;组件库,用户能够在现有组件库中,根据业务需求将组件拖到设计区,并配置组件相关属性、校验规则。2. The customizable low-code front-end development framework based on visual drag as claimed in claim 1, wherein the framework completes the modeling of business objects through form design, and business object modeling is divided into three major categories: Component online maintenance; component event customization, users can write JS events by themselves on the basis of the existing standard syntax, and assist with code prompts in an online way to complete the writing of click, double-click, and loading functions; component library, users can write in existing components In the library, drag the component to the design area according to the business requirements, and configure the component-related properties and validation rules.3.如权利要求2所述的基于可视化拖拉且可定制的低代码前端开发框架,其特征在于,组件在线维护支持高级用户根据自身需要,按照既有接口调整现有组件,包括增加、修改、删除、启用和停用组件响应设置。3. The customizable low-code front-end development framework based on visual drag as claimed in claim 2, wherein the component online maintenance supports advanced users to adjust existing components according to their own needs, including adding, modifying, Remove, enable and disable component response settings.4.如权利要求1所述的基于可视化拖拉且可定制的低代码前端开发框架,其特征在于,低代码前端开发框架,支持单页面和多页面两种模式,其中单页面用于静态资源可视化呈现,多页面用于动态应用网站可视化构建。4. The customizable low-code front-end development framework based on visual drag and drop as claimed in claim 1, wherein the low-code front-end development framework supports single-page and multi-page modes, wherein a single page is used for static resource visualization Rendering, multi-page is used for dynamic application website visualization construction.5.如权利要求4所述的基于可视化拖拉且可定制的低代码前端开发框架,其特征在于,框架布局选择提供若干模板,便于用户形成应用网站的雏形,页头、页尾支持完全自定义;组件/属性/事件,在常规文本、图片、表格、按钮基础上,支持自定义数据绑定,自定义业务事件关联;模板包括了应用整站模板和应用页面模块级模板,从不同维度加速应用前端开发,实现拖拉式应用开发。5. The customizable low-code front-end development framework based on visual drag and drop as claimed in claim 4, wherein the frame layout is selected to provide several templates, which is convenient for users to form the prototype of the application website, and the page header and page footer support complete customization ;Components/attributes/events, based on regular text, pictures, tables, and buttons, support custom data binding and custom business event association; templates include application site templates and application page module-level templates, accelerating from different dimensions Application front-end development, to achieve drag-and-drop application development.6.一种基于可视化拖拉且可定制的低代码前端开发方法,其特征在于,该方法包括如下步骤;6. A customizable low-code front-end development method based on visual dragging, characterized in that the method comprises the following steps;S01、组件设计器按需自定义前端组件并提交到组件库;S01. The component designer customizes the front-end components as needed and submits them to the component library;S02、表单设计器基于组件库中的组件,通过可视化拖拉方式进行页面设计及组件的属性设置、组件事件定义;S02. Based on the components in the component library, the form designer performs page design and component attribute setting and component event definition through visual drag and drop;S03、列表设计器基于前述表单设计列表的显示字段、样式、位置;S03, the list designer designs the display fields, styles, and positions of the list based on the aforementioned form;S04、页面设计器基于前述表单和列表进行页面的组合配置,完成基本页面设计;S04, the page designer performs the combined configuration of the page based on the aforementioned form and list, and completes the basic page design;S05、页面渲染器针对页面以及页面上的组件进行可定制的页面效果渲染;S05. The page renderer performs customizable page effect rendering for the page and the components on the page;S06、多页面设计器基于前述设计的单页面进行页面组合设计,实现复杂的页面交互操作及应用系统整体交互风格;S06, the multi-page designer performs page combination design based on the single page designed above, and realizes complex page interaction operations and the overall interaction style of the application system;S07、通过动作触发代码生成器按前述页面设计生成对应的代码并提交到代码仓库;S07, trigger the code generator through the action to generate the corresponding code according to the aforementioned page design and submit it to the code warehouse;S08、通过动作触发发布服务器从代码仓库拉取代码按代码语言进行编译并发布到指定的运行环境中。S08 , triggering the publishing server to pull the code from the code repository through the action, compile the code according to the code language, and publish it to the specified running environment.7.如权利要求6所述的基于可视化拖拉且可定制的低代码前端开发方法,其特征在于,所述步骤S02具体包括:用户基于组件库中组件,通过拖拉的方式将所需组件放置到表单布局界面中,逻辑上将表单的组件对应业务对象一个字段,并设置组件属性,同时可设置组件事件操作,进而完成表单的设计。7. The customizable low-code front-end development method based on visual drag as claimed in claim 6, wherein the step S02 specifically comprises: the user places the required components in the component library by dragging and dropping the components. In the form layout interface, logically map the components of the form to a field of the business object, set component properties, and set component event operations to complete the form design.8.如权利要求7所述的基于可视化拖拉且可定制的低代码前端开发方法,其特征在于,组件属性包括名称、默认值、数据类型和校验规则,组件事件操作包括单击、双击和修改值。8. The customizable low-code front-end development method based on visual drag and drop as claimed in claim 7, wherein the component properties include name, default value, data type and verification rules, and the component event operations include single-click, double-click and Modify the value.9.如权利要求1所述的基于可视化拖拉且可定制的低代码前端开发方法,其特征在于,多页面设计器用于应用整体布局和组织方式的设计,多页面设计器内置页面组合模板,包含页头和页尾的选择和设计,并对单页面进行组合。9. The customizable low-code front-end development method based on visual drag and drop as claimed in claim 1, wherein the multi-page designer is used to apply the design of the overall layout and organization, and the multi-page designer has a built-in page combination template, comprising: Selection and design of headers and footers, and grouping of single pages.10.如权利要求6-9任一项所述的基于可视化拖拉且可定制的低代码前端开发方法,其特征在于,所述步骤S08后还包括:S09、当通过拖拉设计的页面无法满足复杂的应用场景时,开发人员基于代码进行二次开发。10. The customizable low-code front-end development method based on visual dragging according to any one of claims 6-9, characterized in that, after the step S08, the method further comprises: S09, when the page designed by dragging cannot meet the complex requirements. In the application scenario of , the developer conducts secondary development based on the code.
CN202111145979.8A2021-09-282021-09-28 A low-code front-end development framework and method based on visual drag and drop and customizablePendingCN113849165A (en)

Priority Applications (1)

Application NumberPriority DateFiling DateTitle
CN202111145979.8ACN113849165A (en)2021-09-282021-09-28 A low-code front-end development framework and method based on visual drag and drop and customizable

Applications Claiming Priority (1)

Application NumberPriority DateFiling DateTitle
CN202111145979.8ACN113849165A (en)2021-09-282021-09-28 A low-code front-end development framework and method based on visual drag and drop and customizable

Publications (1)

Publication NumberPublication Date
CN113849165Atrue CN113849165A (en)2021-12-28

Family

ID=78980522

Family Applications (1)

Application NumberTitlePriority DateFiling Date
CN202111145979.8APendingCN113849165A (en)2021-09-282021-09-28 A low-code front-end development framework and method based on visual drag and drop and customizable

Country Status (1)

CountryLink
CN (1)CN113849165A (en)

Cited By (27)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
CN114115883A (en)*2022-01-262022-03-01广州云徙科技有限公司 A method for quickly building front-end applications using mid-office business capabilities
CN114444458A (en)*2022-01-212022-05-06浪潮软件集团有限公司 Method of generating document scene template code with low code based on domestic CPU
CN114610280A (en)*2022-02-222022-06-10科大国创云网科技有限公司Visual form design method and system realized in low-code mode
CN114995803A (en)*2022-05-312022-09-02中国电信股份有限公司Development method of human-computer interface, low-code development platform, terminal and medium
CN115033235A (en)*2022-06-302022-09-09浙江瑞华康源科技有限公司System and method for flexibly multiplexing web page based on low-code development platform
CN115145561A (en)*2022-05-172022-10-04三峡高科信息技术有限责任公司 A Reusable Engineering Management Business Component Library
CN115202652A (en)*2022-06-242022-10-18济南浪潮数据技术有限公司Platform building method, system, equipment and medium for service application form on cloud
CN115237403A (en)*2022-08-102022-10-25江苏金农股份有限公司Data visualization processing system and method
CN115268884A (en)*2022-06-092022-11-01知学云(北京)科技股份有限公司Mobile terminal visual page configuration and rendering method based on aPaaS platform
CN115357239A (en)*2022-10-212022-11-18智者四海(北京)技术有限公司Method and device for quickly building operation activity page and electronic equipment
CN115373696A (en)*2022-10-262022-11-22宇动源(北京)信息技术有限公司Low code configuration method, system, equipment and storage medium for software resource generation
CN115422481A (en)*2022-07-292022-12-02中电莱斯信息系统有限公司Visual construction method based on component factory
CN115454411A (en)*2022-09-162022-12-09福建海峡基石科技集团有限公司 A low-code rapid development method based on template language
CN115509511A (en)*2022-10-202022-12-23上海豹云网络信息服务有限公司Low code development platform
CN115562652A (en)*2022-11-242023-01-03金现代信息产业股份有限公司Component style processing method and system for low-code development platform
CN115712413A (en)*2022-11-152023-02-24广东中设智控科技股份有限公司Low code development method, device, equipment and storage medium
CN115809059A (en)*2022-12-132023-03-17浩云科技股份有限公司 A low-code platform for page processing, page creation method and device
CN116028039A (en)*2023-03-292023-04-28杭州实在智能科技有限公司Method and system for rapidly producing front-end projects based on advanced component library
CN116301827A (en)*2023-02-082023-06-23深圳市思迪信息技术股份有限公司Configuration method, device, equipment and storage medium of financial system page
CN116301793A (en)*2022-12-262023-06-23长城信息股份有限公司Low-code secondary development method and system for self-service channel back-end micro-service
CN117032675A (en)*2023-10-082023-11-10深圳云图数智信息科技有限公司Dynamic form design method
CN117312324A (en)*2023-11-132023-12-29思创智汇(广州)科技有限公司Form model association query system and method based on low-code engine
CN117591117A (en)*2024-01-192024-02-23中建三局信息科技有限公司Page generation method, system, equipment and storage medium
CN118519622A (en)*2024-07-222024-08-20珠海金智维信息科技有限公司Low-code flow chart dynamic configuration and self-defined interaction system
CN118550572A (en)*2024-08-012024-08-27奇秦科技(北京)股份有限公司Page meta-model-based low-code platform secondary development method and system
CN118860370A (en)*2024-09-262024-10-29浙江辉驿网络科技有限公司 A visual zero-code custom form generation system and method
CN119597272A (en)*2024-11-202025-03-11中国大唐集团数字科技有限公司 A method and system for building single-page applications based on state-driven low-code

Citations (5)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
WO2008147616A1 (en)*2007-05-252008-12-04Zoot Enterprises, Inc.System and method for rapid development of software applications
CN110825362A (en)*2019-11-042020-02-21广东道一信息技术股份有限公司Low-code application software development system and method
CN111831276A (en)*2020-06-302020-10-27中国船舶重工集团公司第七一六研究所Software visualization rapid development system
CN111984235A (en)*2020-08-192020-11-24上海翘腾科技有限公司Customizable front-end low-code development system and method
CN112214214A (en)*2020-10-292021-01-12上海厦广科技有限公司Low code development system, device and medium for android native APP

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
WO2008147616A1 (en)*2007-05-252008-12-04Zoot Enterprises, Inc.System and method for rapid development of software applications
CN110825362A (en)*2019-11-042020-02-21广东道一信息技术股份有限公司Low-code application software development system and method
CN111831276A (en)*2020-06-302020-10-27中国船舶重工集团公司第七一六研究所Software visualization rapid development system
CN111984235A (en)*2020-08-192020-11-24上海翘腾科技有限公司Customizable front-end low-code development system and method
CN112214214A (en)*2020-10-292021-01-12上海厦广科技有限公司Low code development system, device and medium for android native APP

Cited By (35)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
CN114444458A (en)*2022-01-212022-05-06浪潮软件集团有限公司 Method of generating document scene template code with low code based on domestic CPU
CN114115883A (en)*2022-01-262022-03-01广州云徙科技有限公司 A method for quickly building front-end applications using mid-office business capabilities
CN114115883B (en)*2022-01-262022-06-03广州云徙科技有限公司Method for quickly constructing front-end application by using middle station service capability
CN114610280A (en)*2022-02-222022-06-10科大国创云网科技有限公司Visual form design method and system realized in low-code mode
CN115145561A (en)*2022-05-172022-10-04三峡高科信息技术有限责任公司 A Reusable Engineering Management Business Component Library
CN114995803A (en)*2022-05-312022-09-02中国电信股份有限公司Development method of human-computer interface, low-code development platform, terminal and medium
CN115268884A (en)*2022-06-092022-11-01知学云(北京)科技股份有限公司Mobile terminal visual page configuration and rendering method based on aPaaS platform
CN115202652A (en)*2022-06-242022-10-18济南浪潮数据技术有限公司Platform building method, system, equipment and medium for service application form on cloud
CN115033235A (en)*2022-06-302022-09-09浙江瑞华康源科技有限公司System and method for flexibly multiplexing web page based on low-code development platform
CN115422481B (en)*2022-07-292025-08-15中电莱斯信息系统有限公司Visual construction method based on component factory
CN115422481A (en)*2022-07-292022-12-02中电莱斯信息系统有限公司Visual construction method based on component factory
CN115237403B (en)*2022-08-102023-05-16江苏金农股份有限公司Data visualization processing system and method
CN115237403A (en)*2022-08-102022-10-25江苏金农股份有限公司Data visualization processing system and method
CN115454411A (en)*2022-09-162022-12-09福建海峡基石科技集团有限公司 A low-code rapid development method based on template language
CN115509511A (en)*2022-10-202022-12-23上海豹云网络信息服务有限公司Low code development platform
CN115357239A (en)*2022-10-212022-11-18智者四海(北京)技术有限公司Method and device for quickly building operation activity page and electronic equipment
CN115373696B (en)*2022-10-262022-12-23宇动源(北京)信息技术有限公司Low code configuration method, system, equipment and storage medium for software resource generation
CN115373696A (en)*2022-10-262022-11-22宇动源(北京)信息技术有限公司Low code configuration method, system, equipment and storage medium for software resource generation
CN115712413A (en)*2022-11-152023-02-24广东中设智控科技股份有限公司Low code development method, device, equipment and storage medium
CN115712413B (en)*2022-11-152024-04-19广东中设智控科技股份有限公司Low code development method, device, equipment and storage medium
CN115562652A (en)*2022-11-242023-01-03金现代信息产业股份有限公司Component style processing method and system for low-code development platform
CN115562652B (en)*2022-11-242023-08-15金现代信息产业股份有限公司Component style processing method and system for low-code development platform
CN115809059A (en)*2022-12-132023-03-17浩云科技股份有限公司 A low-code platform for page processing, page creation method and device
CN116301793A (en)*2022-12-262023-06-23长城信息股份有限公司Low-code secondary development method and system for self-service channel back-end micro-service
CN116301827A (en)*2023-02-082023-06-23深圳市思迪信息技术股份有限公司Configuration method, device, equipment and storage medium of financial system page
CN116028039A (en)*2023-03-292023-04-28杭州实在智能科技有限公司Method and system for rapidly producing front-end projects based on advanced component library
CN117032675A (en)*2023-10-082023-11-10深圳云图数智信息科技有限公司Dynamic form design method
CN117032675B (en)*2023-10-082024-01-30深圳云图数智信息科技有限公司Dynamic form design method
CN117312324A (en)*2023-11-132023-12-29思创智汇(广州)科技有限公司Form model association query system and method based on low-code engine
CN117591117A (en)*2024-01-192024-02-23中建三局信息科技有限公司Page generation method, system, equipment and storage medium
CN117591117B (en)*2024-01-192024-04-23中建三局信息科技有限公司Page generation method, system, equipment and storage medium
CN118519622A (en)*2024-07-222024-08-20珠海金智维信息科技有限公司Low-code flow chart dynamic configuration and self-defined interaction system
CN118550572A (en)*2024-08-012024-08-27奇秦科技(北京)股份有限公司Page meta-model-based low-code platform secondary development method and system
CN118860370A (en)*2024-09-262024-10-29浙江辉驿网络科技有限公司 A visual zero-code custom form generation system and method
CN119597272A (en)*2024-11-202025-03-11中国大唐集团数字科技有限公司 A method and system for building single-page applications based on state-driven low-code

Similar Documents

PublicationPublication DateTitle
CN113849165A (en) A low-code front-end development framework and method based on visual drag and drop and customizable
JP5651121B2 (en) Data object management and automatic linking
US8296665B2 (en)Developing and executing applications with configurable patterns
CN111522552B (en)Sub-application generation method and device, computer equipment and storage medium
US7761865B2 (en)Upgrading pattern configurations
US7913231B2 (en)Testing pattern-based applications
US7434203B2 (en)Software logistics for pattern-based applications
CN113900636B (en) A self-service channel business process development system and development method thereof
JP2006107478A (en)Extensible flamework for designing work flow
CN105739983A (en)Script program edition device and realization method thereof
CN113010168B (en) A method for generating user interface based on scene tree
Da Silva et al.Integration of RE and MDE paradigms: the ProjectIT approach and tools
US20250291613A1 (en)Method for assisting select of screen components and collect of coordinate information
Sukaviriya et al.User-centered design and business process modeling: cross road in rapid prototyping tools
Ernsting et al.Refining a Reference Architecture for Model-Driven Business Apps.
KR20180135654A (en)Intuitive method of making a program
GhitaKickstart Modern Android Development with Jetpack and Kotlin: Enhance your applications by integrating Jetpack and applying modern app architectural concepts
CN112181483A (en)Plasma control system software development platform and method
CN118838587B (en)Visual assembly service functional unit assembly method and system
Milosavljević et al.Kroki: A mockup-based tool for participatory development of business applications
SaintyBlazor in action
CN117707530A (en)Application program page generation method and device, storage medium and electronic equipment
ShavinLearning Vue: Core Concepts and Practical Patterns for Reusable, Composable, and Scalable User Interfaces
CN117573100A (en)Service logic generation method and device for application program and readable storage medium
SinnigThe complicity of patterns and model-based UI development

Legal Events

DateCodeTitleDescription
PB01Publication
PB01Publication
SE01Entry into force of request for substantive examination
SE01Entry into force of request for substantive examination
RJ01Rejection of invention patent application after publication

Application publication date:20211228


[8]ページ先頭

©2009-2025 Movatter.jp