CN113849165A

CN113849165A - 基于可视化拖拉且可定制的低代码前端开发框架及方法

Info

Publication number: CN113849165A
Application number: CN202111145979.8A
Authority: CN
Inventors: 张洪光; 王楠; 刘金钟
Original assignee: Aerospace Science And Technology Network Information Development Co ltd
Current assignee: Aerospace Science And Technology Network Information Development Co ltd
Priority date: 2021-09-28
Filing date: 2021-09-28
Publication date: 2021-12-28

Abstract

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

Description

基于可视化拖拉且可定制的低代码前端开发框架及方法

技术领域

本发明属于程序开发领域，具体涉及一种基于可视化拖拉且可定制的低代码前端开发框架及方法。

背景技术

多年来，软件开发领域特别是应用类软件开发领域的软件工程主要包括需求分析、架构设计、详细设计、编码开发、测试验证、安装部署、实施运维等活动，当然在不同的软件生命周期模型，活动顺序和活动切分厚度存在一定差别，但总体来说，这个过程是一个比较重的软件开发过程。这样的软件开发过程大体存在如下几方面问题：1、开发周期长，因为无论采用什么样的软件生命周期模型，软件最终交付到用户的时间没有很大差别。在长周期的软件过程中，除了执行软件活动，还有很关键的一点是否能够有效的进行需求管理，如果出现需求变更或蔓延，交付时间更难以控制。2、维护成本高，应用程序的业务代码量很大且都是通过手工编码实现，任何需求变化都需要修改代码，修改维护的复杂度比较高；同时由于开发周期长的原因，开发人员难免发生变动，接手人完全掌握代码需要较长时间，在这期间修改代码时很容易引入bug。3、软件成熟度低，应用类软件主要用于某些特定的业务背景，业务逻辑代码比重很高，复用率低，***成熟稳定需要一定的周期，同时这类应用又容易发生需求变更，如此就又进入到下一轮不稳定中。

近年来，随着企业数字化转型的深入，应用类软件对于敏捷开发、快速交付的要求越来越高，很多组织的软件开发模式从采用纯编码开发方式转向采用更高效的低代码开发平台来进行软件开发。在能够提升软件开发效率的同时，也降低了软件开发的门槛，即使是没有开发经验的业务人员也可以通过拖拉方式“搭建”出应用软件。然而，这类“低代码开发平台”也存在表现形式单一、可用于拖拉的组件有限、难以实现复杂功能等问题，进而造成只能“搭建”出功能简单、样式单一的应用软件，这对于使用“低代码开发平台”的用户产生一定的顾虑，这也是低代码开发平台(早期叫过快速开发平台)产品出现多年未能真正推广开来的一个主要原因之一。因此针对这个问题，提供一种在组件可视化拖拉基础上的可定制化的低代码前端开发框架及方法具有重要意义。

发明内容

(一)要解决的技术问题

本发明要解决的技术问题是如何提供一种基于可视化拖拉且可定制的低代码前端开发框架及方法，以解决“低代码开发平台”也存在表现形式单一、可用于拖拉的组件有限、难以实现复杂功能等问题。

(二)技术方案

为了解决上述技术问题，本发明提出一种基于可视化拖拉且可定制的低代码前端开发框架，该框架包括组件设计器、组件库、表单设计器、页面渲染器、列表设计器、页面设计器、代码生成器、代码仓库、应用发布器、应用运行环境；

组件设计器：用于可视化设计自定义组件，上传组件图标、组件代码，定义组件事件基本属性以及预览组件；

组件库：用于管理组织框架内置组件及自定义组件，组件信息存储到数据库；

表单设计器：基于组件库，通过可视化拖拉方式设计表单，表单包含的组件、组件属性信息存储到数据库；

列表设计器：用于设计表单对应的数据表格所显示的数据列及布局信息，设计信息存储到数据库；

页面渲染器：用于为页面及页面上组件创建渲染器，实现页面效果可定制；

页面设计器：页面设计器包括单页面设计器和多页面设计器；单页面设计器用于将前面所设计的表单、列表及页面渲染器组合起来形成可视化页面；多页面设计器通过菜单、按钮形成页面操作的跳转，将单页面进行组装完成应用***整体功能布局的设计，页面设计数据存储到数据库；

代码生成器：将页面设计器产生的页面设计数据生成实际可运行代码及相关静态资源文件并提交到代码仓库；

发布服务器：接收发布指令，从代码仓库下载代码，构建编译环境，并执行编译及部署；

应用运行环境：发布服务器将编译后的可部署程序包部署到运行环境，运行环境包含应用运行所需的中间件。

进一步地，该框架通过表单设计完成业务对象的建模，业务对象建模分为三个大的分类：组件在线维护；组件事件自定义，用户在既有规范语法基础上，自行编写JS事件，以在线的方式辅助以代码提示，完成点击、双击、装载函数编写；组件库，用户能够在现有组件库中，根据业务需求将组件拖到设计区，并配置组件相关属性、校验规则。

进一步地，组件在线维护支持高级用户根据自身需要，按照既有接口调整现有组件，包括增加、修改、删除、启用和停用组件响应设置。

进一步地，低代码前端开发框架，支持单页面和多页面两种模式，其中单页面用于静态资源可视化呈现，多页面用于动态应用网站可视化构建。

进一步地，框架布局选择提供若干模板，便于用户形成应用网站的雏形，页头、页尾支持完全自定义；组件/属性/事件，在常规文本、图片、表格、按钮基础上，支持自定义数据绑定，自定义业务事件关联；模板包括了应用整站模板和应用页面模块级模板，从不同维度加速应用前端开发，实现拖拉式应用开发。

本发明还提供一种基于可视化拖拉且可定制的低代码前端开发方法，该方法包括如下步骤；

S01、组件设计器按需自定义前端组件并提交到组件库；

S02、表单设计器基于组件库中的组件，通过可视化拖拉方式进行页面设计及组件的属性设置、组件事件定义；

S03、列表设计器基于前述表单设计列表的显示字段、样式、位置；

S04、页面设计器基于前述表单和列表进行页面的组合配置，完成基本页面设计；

S05、页面渲染器针对页面以及页面上的组件进行可定制的页面效果渲染；

S06、多页面设计器基于前述设计的单页面进行页面组合设计，实现复杂的页面交互操作及应用***整体交互风格；

S07、通过动作触发代码生成器按前述页面设计生成对应的代码并提交到代码仓库；

S08、通过动作触发发布服务器从代码仓库拉取代码按代码语言进行编译并发布到指定的运行环境中。

进一步地，所述步骤S02具体包括：用户基于组件库中组件，通过拖拉的方式将所需组件放置到表单布局界面中，逻辑上将表单的组件对应业务对象一个字段，并设置组件属性，同时可设置组件事件操作，进而完成表单的设计。

进一步地，组件属性包括名称、默认值、数据类型和校验规则，组件事件操作包括单击、双击和修改值。

进一步地，多页面设计器用于应用整体布局和组织方式的设计，多页面设计器内置页面组合模板，包含页头和页尾的选择和设计，并对单页面进行组合。

进一步地，所述步骤S08后还包括：S09、当通过拖拉设计的页面无法满足复杂的应用场景时，开发人员基于代码进行二次开发。

(三)有益效果

本发明提出一种基于可视化拖拉且可定制的低代码前端开发框架及方法，对于现有技术本发明具有包括但不限于如下有益效果：

1、开发过程中可以对内置组件库进行扩展，通过组件模板和组件代码结合的方式生成新的组件，进而丰富表单表现能力；

2、通过对页面和组件定义渲染器代码，实现页面和组件表现形式可定制；

3、代码生成器基于页面设计器设计出的页面生成前端代码，如果对页面表现仍然不满意，可以基于前端代码进行开发。

附图说明

图1为基于可视化拖拉且可定制的低代码前端开发框架结构示意图；

图2为基于可视化拖拉且可定制的低代码前端开发框架的开发步骤；

图3为表单设计器功能示意图；

图4为页面设计器功能示意图。

具体实施方式

为使本发明的目的、内容和优点更加清楚，下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。

为此我们采用一种基于可视化拖拉且可定制的低代码前端开发框架解决上述问题。

本发明涉及一种基于可视化拖拉且可定制的低代码前端开发框架，包括表单设计器、页面设计器、表格设计器、组件设计器、页面渲染器、代码生成器、发布服务器。低代码前端开发框架能够为业务人员/开发人员提供前端页面设计、表单设计、组件设计、列表设计、代码生成，实现所见即所得的web页面实现。本发明是对当前企业数字化转型背景下，再次流行的低代码开发平台进行技术改进。除了包含一般低代码开发平台的通过简单“拖、拉、拽”快速搭建应用***，实现“可视化”编程，实现对业务的敏捷响应。同时，对于低代码开发过程增加可定制元素，包括面向开发人员的组件定制开放、页面和组件渲染设计，以及生成代码的二次开发。如此，既可以面向业务人员实现零代码的搭建应用***方式，也可以面向开发人员提供在拖拉基础上的代码级定制能力，实现更好的应用表现。

为解决上述问题，本发明通过以下技术方案实现：

一种基于可视化拖拉且可定制的低代码前端开发框架，包括组件设计器、组件库、表单设计器、页面渲染器、列表设计器、页面设计器、代码生成器、代码仓库、应用发布器、应用运行环境；

其中，组件设计器：用于可视化设计自定义组件，可上传组件图标、组件代码，定义组件事件基本属性以及预览组件；

其中，组件库：用于管理组织框架内置组件及自定义组件，组件信息存储到数据库；

其中，表单设计器：基于组件库，通过可视化拖拉方式设计表单，表单包含的组件、组件属性等相关信息存储到数据库；

其中，列表设计器：用于设计表单对应的数据表格所显示的数据列及布局信息，设计信息存储到数据库；

其中，页面渲染器：用于为页面及页面上组件创建渲染器，实现页面效果可定制；

其中，页面设计器：页面设计器包含单页面设计器和多页面设计器。其中，单页面设计器用于将前面所设计的表单、列表及页面渲染器组合起来形成可视化页面；多页面设计器通过菜单、按钮形成页面操作的跳转，将单页面进行组装完成应用***整体功能布局的设计，页面设计数据存储到数据库；

其中，代码生成器：将页面设计器产生的页面设计数据生成实际可运行代码及相关静态资源文件并提交到代码仓库；

其中，发布服务器：接收发布指令，负责将代码下载，构建编译环境，并执行编译及部署；

其中，应用运行环境：发布服务器将编译后的可部署程序包部署到运行环境，运行环境包含应用运行所需的中间件，宿主环境可以是物理服务器、虚拟服务器及容器。

基于一种可定制化拖拉且可定制的低代码前端开发框架，包括如下步骤：

S01、组件设计器按需自定义前端组件并提交到组件库(可选)；

S08、通过动作触发发布服务器从代码仓库拉取代码按代码语言进行编译并发布到指定的运行环境中。此时，可以通过浏览器访问应用页面。

S09、当通过拖拉设计的页面无法满足复杂的应用场景时，开发人员可以基于代码进行二次开发。

对于现有技术本发明具有包括但不限于如下有益效果：

请参阅图1，一种基于可视化拖拉且可定制的低代码前端开发框架，包括组件设计器、组件库、表单设计器、页面渲染器、列表设计器、页面设计器、代码生成器、代码仓库、应用发布器、应用运行环境；

其中，代码生成器：将页面设计器产生的页面数据生成实际可运行代码及相关静态资源文件并提交到代码仓库；

进行应用***的开发设计，首先是对业务对象的建模，在低代码前端开发框架环境下，可通过表单(字段)的设计完成业务对象的建模；其次是页面对象的构建与串联，通过布局、页头、页尾完成整体风格设计，同时将已完成的业务对象建模与页面组件、路由组合，并辅助以数据配置、事件配置，形成独立可访问应用。

如图3所示，业务对象建模分为三个大的分类，组件在线维护(支持高级用户根据自身需要，按照既有接口调整现有组件，包括增加、修改、删除、启用和停用组件响应设置)；组件事件自定义，用户在既有规范语法基础上，可以自行编写JS事件，以在线的方式辅助以代码提示，完成点击、双击、装载等函数编写；组件库，用户能够在现有组件库中，根据业务需求将组件拖到设计区，并配置组件相关属性、校验规则等。

如图4所示，低代码前端开发框架，支持单页面和多页面两种模式，其中单页面用于静态资源可视化呈现，多页面用于动态应用网站可视化构建。框架布局选择提供若干模板，便于用户形成应用网站的雏形，页头、页尾支持完全自定义，便于满足多样化用户业务***需求；组件/属性/事件，在常规文本、图片、表格、按钮等基础上，支持自定义数据绑定，自定义业务事件关联；模板包括了应用整站模板和应用页面模块级模板，从不同维度加速应用前端开发，为业务人员赋能，实现拖拉式应用开发。

如图2所示，基于一种可定制化拖拉且可定制的低代码前端开发框架，包括如下步骤：

基于低代码开发应用***，一般是先进行表单的设计，在进行表单设计时，若发现当前组件库不能满足需要，可按组件设计器的约束，进行组件设计，包括组件名称、标识、图标的填写以及组件代码的上传，通过预览达到预期后保存到组件库中。

然后，用户基于组件库中组件，通过拖拉的方式将所需组件放置到表单布局界面中，逻辑上可以将表单的组件对应业务对象一个字段。并设置组件属性，如名称、默认值、数据类型、校验规则等；同时可设置组件事件操作，如单击、双击、修改值等；进而完成表单的设计。

表单设计完后，基于表单设计表单所对应的业务对象的列表显示方式，包括列表显示的样式、字段显示等。

有了表单和列表之后，就可以开始页面设计来实现一个业务对象新增、修改、删除、查询等基本操作。

对于一个应用***，会包含多个模块，一般通过菜单、按钮链接的方式进行组合，所以在构建了若干个单页面之后，需要设计整个***功能组织方式。多页面设计器用于应用整体布局和组织方式的设计，多页面设计器内置页面组合模板，包含页头和页尾的选择和设计，并对单页面进行组合。

通过多页面的设计，可以完成常规的应用***的开发，但是由于默认组件有限且其表现样式及风格相对单一，开发出的应用***会有千篇一律的外观，此时可以对组件和单页面以及多页面进行页面渲染的设计，以丰富页面和组件的表现形式，达到应用整体美观的效果。需要说明的是前面组件设计、表单设计、页面设计过程中都会将设计信息通过数据库存储起来。

在完成上述操作后，可以通过代码生成器进行代码生成并提交到代码仓库。

对于一般的应用***，生成代码之后就可以进行编译、部署等操作，经过必要的测试验证后交付给用户使用。至此，前述所有操作都不需要具有真正软件开发经验。当然，如果上述生成的代码仍然不能满足复杂的业务需求，可以基于生成的代码进行开发，此时需要具有开发能力的人员参与。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。

Claims

1.一种基于可视化拖拉且可定制的低代码前端开发框架，其特征在于，该框架包括组件设计器、组件库、表单设计器、页面渲染器、列表设计器、页面设计器、代码生成器、代码仓库、应用发布器、应用运行环境；

2.如权利要求1所述的基于可视化拖拉且可定制的低代码前端开发框架，其特征在于，该框架通过表单设计完成业务对象的建模，业务对象建模分为三个大的分类：组件在线维护；组件事件自定义，用户在既有规范语法基础上，自行编写JS事件，以在线的方式辅助以代码提示，完成点击、双击、装载函数编写；组件库，用户能够在现有组件库中，根据业务需求将组件拖到设计区，并配置组件相关属性、校验规则。

3.如权利要求2所述的基于可视化拖拉且可定制的低代码前端开发框架，其特征在于，组件在线维护支持高级用户根据自身需要，按照既有接口调整现有组件，包括增加、修改、删除、启用和停用组件响应设置。

4.如权利要求1所述的基于可视化拖拉且可定制的低代码前端开发框架，其特征在于，低代码前端开发框架，支持单页面和多页面两种模式，其中单页面用于静态资源可视化呈现，多页面用于动态应用网站可视化构建。

5.如权利要求4所述的基于可视化拖拉且可定制的低代码前端开发框架，其特征在于，框架布局选择提供若干模板，便于用户形成应用网站的雏形，页头、页尾支持完全自定义；组件/属性/事件，在常规文本、图片、表格、按钮基础上，支持自定义数据绑定，自定义业务事件关联；模板包括了应用整站模板和应用页面模块级模板，从不同维度加速应用前端开发，实现拖拉式应用开发。

6.一种基于可视化拖拉且可定制的低代码前端开发方法，其特征在于，该方法包括如下步骤；

S01、组件设计器按需自定义前端组件并提交到组件库；

7.如权利要求6所述的基于可视化拖拉且可定制的低代码前端开发方法，其特征在于，所述步骤S02具体包括：用户基于组件库中组件，通过拖拉的方式将所需组件放置到表单布局界面中，逻辑上将表单的组件对应业务对象一个字段，并设置组件属性，同时可设置组件事件操作，进而完成表单的设计。

8.如权利要求7所述的基于可视化拖拉且可定制的低代码前端开发方法，其特征在于，组件属性包括名称、默认值、数据类型和校验规则，组件事件操作包括单击、双击和修改值。

9.如权利要求1所述的基于可视化拖拉且可定制的低代码前端开发方法，其特征在于，多页面设计器用于应用整体布局和组织方式的设计，多页面设计器内置页面组合模板，包含页头和页尾的选择和设计，并对单页面进行组合。

10.如权利要求6-9任一项所述的基于可视化拖拉且可定制的低代码前端开发方法，其特征在于，所述步骤S08后还包括：S09、当通过拖拉设计的页面无法满足复杂的应用场景时，开发人员基于代码进行二次开发。