一种基于组件化模板的web快速开发方法及系统与流程

本发明涉及web(worldwideweb，全球广域网)快速开发技术领域，尤其涉及一种基于组件化模板的web快速开发方法及系统。

背景技术：

目前在web开发过程中，在做配置时，主要是基于固定逻辑，然后进行编排，没有对前端的组件抽象。比如，配置一个表单的增删改功能，现有技术基本是基于固定模式进行类似代码生成的方法，这种方法无法满足用户的复杂需求，比如按钮摆放位置，添加额外的功能，对页面复杂的关系也无法配置。

因此，如何实现web的快速开发是一项亟待解决的问题。

技术实现要素：

有鉴于此，本发明提供了一种基于组件化模板的web快速开发方法，能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

本发明提供了一种基于组件化模板的web快速开发方法，包括：

通过拖拽式设计页面，配置各组件的关系及事件；

对控件片段进行渲染，并基于控件生命周期进行初始化。

优选地，所述通过拖拽式设计页面，配置各组件的关系及事件，包括：

管理数据实体，以及生成相应的调用接口；

通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；

管理维护控件基本信息。

优选地，所述对控件片段进行渲染，并基于控件生命周期进行初始化，包括：

基于页面拖拽配置的可扩展标记语言组件关系查找到相应的控件片段进行渲染，并基于控件生命周期进行初始化。

优选地，所述控件基本信息包括：渲染模板、控件脚本、控件属性以及插件安装。

一种基于组件化模板的web快速开发系统，包括：

设计器，用于通过拖拽式设计页面，配置各组件的关系及事件；

运行时，用于对控件片段进行渲染，并基于控件生命周期进行初始化。

优选地，所述设计器包括：数据源、界面设计器和控件模板，其中：

所述数据源，用于管理数据实体，以及生成相应的调用接口；

所述界面设计器，用于通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；

所述控件模板，用于管理维护控件基本信息。

优选地，所述运行时具体用于：

基于页面拖拽配置的可扩展标记语言组件关系查找到相应的控件片段进行渲染，并基于控件生命周期进行初始化。

优选地，所述控件基本信息包括：渲染模板、控件脚本、控件属性以及插件安装。

综上所述，本发明公开了一种基于组件化模板的web快速开发方法，当需要对web进行开发时，首先通过拖拽式设计页面，配置各组件的关系及事件，然后对控件片段进行渲染，并基于控件生命周期进行初始化。本发明能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明公开的一种基于组件化模板的web快速开发方法实施例1的方法流程图；

图2为本发明公开的一种基于组件化模板的web快速开发方法实施例2的方法流程图；

图3为本发明公开的一种基于组件化模板的web快速开发方法实施例3的方法流程图；

图4为本发明公开的一种基于组件化模板的web快速开发系统实施例1的结构示意图；

图5为本发明公开的一种基于组件化模板的web快速开发系统实施例2的结构示意图；

图6为本发明公开的一种基于组件化模板的web快速开发系统实施例3的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，为本发明公开的一种基于组件化模板的web快速开发方法实施例1的方法流程图，所述方法可以包括以下步骤：

s101、通过拖拽式设计页面，配置各组件的关系及事件；

当需要实现web开发时，首先进行组件配置、数据源配置，并通过拖拽完成页面设计，绑定数据源以及对页面关系进行设置。

s102、对控件片段进行渲染，并基于控件生命周期进行初始化。

然后，对控件片段进行渲染，并根据控件生命周期进行初始化，完成整个页面渲染过程。

综上所述，在上述实施例中，当需要对web进行开发时，首先通过拖拽式设计页面，配置各组件的关系及事件，然后对控件片段进行渲染，并基于控件生命周期进行初始化。本发明能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

如图2所示，为本发明公开的一种基于组件化模板的web快速开发方法实施例2的方法流程图，所述方法可以包括以下步骤：

s201、管理数据实体，以及生成相应的调用接口；

当需要实现web开发时，首先进行组件配置、数据源配置，并通过拖拽完成页面设计，绑定数据源以及对页面关系进行设置。

具体的，首先通过数据源管理数据实体，以及通过设计器配置自动生成相应的调用接口。其中，在数据实体管理时，主要是管理抽象的数据。例如，如是数据库，对应的是数据库的字段信息；如是excel，对应的是excel列信息。在实体配置完之后，会提供实体的操作接口，所述接口为逻辑接口。

s202、通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；

然后，通过界面设计器通过拖拽组件模板组装界面、绑定数据源以及页面逻辑。其中，组件抽象有自己的属性及生命周期，如表格控件的属性就有初始化数据源，数据源依赖参数、分页信息等。其中，页面逻辑包括控件的显隐、级联、按钮事件、文本事件、表格联动等。

s203、管理维护控件基本信息；

然后，管理维护控件基本信息，其中，控件基本信息有：渲染模板、控件脚本、控件属性以及插件安装。

具体的，渲染模板是由代码片段构成，并能通过参数配置生成最终效果；控件脚本是对控件的生命周期进行的抽象，并可在运行时执行的脚本，如控件的初始化、销毁、值变化事件等，这些抽象的动作可由设计界面进行关系串联，以达到页面交互的目的；控件属性是维护各个组件的特有属性，如宽，高，数据源等；插件安装是配置控件所依赖的三方组件。

s204、对控件片段进行渲染，并基于控件生命周期进行初始化。

然后，对控件片段进行渲染，并根据控件生命周期进行初始化，完成整个页面渲染过程。

综上所述，在上述实施例中，当需要对web进行开发时，首先管理数据实体，以及生成相应的调用接口；通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；管理维护控件基本信息，然后对控件片段进行渲染，并基于控件生命周期进行初始化。本发明能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

如图3所示，为本发明公开的一种基于组件化模板的web快速开发方法实施例3的方法流程图，所述方法可以包括以下步骤：

s301、管理数据实体，以及生成相应的调用接口；

当需要实现web开发时，首先进行组件配置、数据源配置，并通过拖拽完成页面设计，绑定数据源以及对页面关系进行设置。

具体的，首先通过数据源管理数据实体，以及通过设计器配置自动生成相应的调用接口。其中，在数据实体管理时，主要是管理抽象的数据。例如，如是数据库，对应的是数据库的字段信息；如是excel，对应的是excel列信息。在实体配置完之后，会提供实体的操作接口，所述接口为逻辑接口。

s302、通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；

然后，通过界面设计器通过拖拽组件模板组装界面、绑定数据源以及页面逻辑。其中，组件抽象有自己的属性及生命周期，如表格控件的属性就有初始化数据源，数据源依赖参数、分页信息等。其中，页面逻辑包括控件的显隐、级联、按钮事件、文本事件、表格联动等。

s303、管理维护控件基本信息；

然后，管理维护控件基本信息，其中，控件基本信息有：渲染模板、控件脚本、控件属性以及插件安装。

具体的，渲染模板是由代码片段构成，并能通过参数配置生成最终效果；控件脚本是对控件的生命周期进行的抽象，并可在运行时执行的脚本，如控件的初始化、销毁、值变化事件等，这些抽象的动作可由设计界面进行关系串联，以达到页面交互的目的；控件属性是维护各个组件的特有属性，如宽，高，数据源等；插件安装是配置控件所依赖的三方组件。

s304、基于页面拖拽配置的可扩展标记语言组件关系查找到相应的控件片段进行渲染，并基于控件生命周期进行初始。

然后，运行时根据界面拖拽配置的xml(extensiblemarkuplanguage，可扩展标记语言)组件关系找到相应的控件片段进行渲染。并根据控件生命周期进行初始化，完成整个页面渲染过程。

综上所述，在上述实施例中，当需要对web进行开发时，首先管理数据实体，以及生成相应的调用接口；通过拖拽组件模板组装页面、绑定数据源以及页面逻辑，管理维护控件基本信息；然后基于页面拖拽配置的可扩展标记语言组件关系查找到相应的控件片段进行渲染，并基于控件生命周期进行初始。本发明能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

如图4所示，为本发明公开的一种基于组件化模板的web快速开发系统实施例1的结构示意图，所述系统可以包括：

设计器401，用于通过拖拽式设计页面，配置各组件的关系及事件；

当需要实现web开发时，首先进行组件配置、数据源配置，并通过拖拽完成页面设计，绑定数据源以及对页面关系进行设置。

运行时402，用于对控件片段进行渲染，并基于控件生命周期进行初始化。

然后，对控件片段进行渲染，并根据控件生命周期进行初始化，完成整个页面渲染过程。

综上所述，在上述实施例中，当需要对web进行开发时，首先通过拖拽式设计页面，配置各组件的关系及事件，然后对控件片段进行渲染，并基于控件生命周期进行初始化。本发明能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

如图5所示，为本发明公开的一种基于组件化模板的web快速开发系统实施例2的结构示意图，所述系统可以包括：

数据源501，用于管理数据实体，以及生成相应的调用接口；

当需要实现web开发时，首先进行组件配置、数据源配置，并通过拖拽完成页面设计，绑定数据源以及对页面关系进行设置。

具体的，首先通过数据源管理数据实体，以及通过设计器配置自动生成相应的调用接口。其中，在数据实体管理时，主要是管理抽象的数据。例如，如是数据库，对应的是数据库的字段信息；如是excel，对应的是excel列信息。在实体配置完之后，会提供实体的操作接口，所述接口为逻辑接口。

界面设计器502，用于通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；

然后，通过界面设计器通过拖拽组件模板组装界面、绑定数据源以及页面逻辑。其中，组件抽象有自己的属性及生命周期，如表格控件的属性就有初始化数据源，数据源依赖参数、分页信息等。其中，页面逻辑包括控件的显隐、级联、按钮事件、文本事件、表格联动等。

控件模板503，用于管理维护控件基本信息；

然后，管理维护控件基本信息，其中，控件基本信息有：渲染模板、控件脚本、控件属性以及插件安装。

具体的，渲染模板是由代码片段构成，并能通过参数配置生成最终效果；控件脚本是对控件的生命周期进行的抽象，并可在运行时执行的脚本，如控件的初始化、销毁、值变化事件等，这些抽象的动作可由设计界面进行关系串联，以达到页面交互的目的；控件属性是维护各个组件的特有属性，如宽，高，数据源等；插件安装是配置控件所依赖的三方组件。

运行时504，用于对控件片段进行渲染，并基于控件生命周期进行初始化。

然后，对控件片段进行渲染，并根据控件生命周期进行初始化，完成整个页面渲染过程。

综上所述，在上述实施例中，当需要对web进行开发时，首先管理数据实体，以及生成相应的调用接口；通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；管理维护控件基本信息，然后对控件片段进行渲染，并基于控件生命周期进行初始化。本发明能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

如图6所示，为本发明公开的一种基于组件化模板的web快速开发系统实施例3的结构示意图，所述系统可以包括：

数据源601，用于管理数据实体，以及生成相应的调用接口；

当需要实现web开发时，首先进行组件配置、数据源配置，并通过拖拽完成页面设计，绑定数据源以及对页面关系进行设置。

具体的，首先通过数据源管理数据实体，以及通过设计器配置自动生成相应的调用接口。其中，在数据实体管理时，主要是管理抽象的数据。例如，如是数据库，对应的是数据库的字段信息；如是excel，对应的是excel列信息。在实体配置完之后，会提供实体的操作接口，所述接口为逻辑接口。

界面设计器602，用于通过拖拽组件模板组装页面、绑定数据源以及页面逻辑；

然后，通过界面设计器通过拖拽组件模板组装界面、绑定数据源以及页面逻辑。其中，组件抽象有自己的属性及生命周期，如表格控件的属性就有初始化数据源，数据源依赖参数、分页信息等。其中，页面逻辑包括控件的显隐、级联、按钮事件、文本事件、表格联动等。

控件模板603，用于管理维护控件基本信息；

然后，管理维护控件基本信息，其中，控件基本信息有：渲染模板、控件脚本、控件属性以及插件安装。

具体的，渲染模板是由代码片段构成，并能通过参数配置生成最终效果；控件脚本是对控件的生命周期进行的抽象，并可在运行时执行的脚本，如控件的初始化、销毁、值变化事件等，这些抽象的动作可由设计界面进行关系串联，以达到页面交互的目的；控件属性是维护各个组件的特有属性，如宽，高，数据源等；插件安装是配置控件所依赖的三方组件。

运行时604，用于基于页面拖拽配置的可扩展标记语言组件关系查找到相应的控件片段进行渲染，并基于控件生命周期进行初始。

然后，运行时根据界面拖拽配置的xml(extensiblemarkuplanguage，可扩展标记语言)组件关系找到相应的控件片段进行渲染。并根据控件生命周期进行初始化，完成整个页面渲染过程。

综上所述，在上述实施例中，当需要对web进行开发时，首先管理数据实体，以及生成相应的调用接口；通过拖拽组件模板组装页面、绑定数据源以及页面逻辑，管理维护控件基本信息；然后基于页面拖拽配置的可扩展标记语言组件关系查找到相应的控件片段进行渲染，并基于控件生命周期进行初始。本发明能够基于组件化模板技术实现快速开发，可实现不断积累、最小粒度的复用、持续迭代升级，以及灵活组装。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。