一种组件和模板的可视化开发方法及系统与流程

本发明涉及电信移动业务开发技术领域，并且更具体地，涉及一种组件和模板的可视化开发方法及系统。

背景技术：

随着信息时代的快速发展，电信移动业务的部署越来越复杂。为了满足复杂多变的电信移动业务，需要开发各种定制化的组件来支撑电信移动业务的可视化编排。而现有技术中的定制化的组件和模板开发，会耗费大量的工作量，而且入门门槛也比较高。

技术实现要素：

本发明实施例提供一种组件和模板的可视化开发方法及系统，以解决现有组件和模板开发方法工作量较大，且入门门槛较高的问题。

根据本发明的第一方面，提供了一种组件和模板的可视化开发方法，该方法包括：注册数据源；创建组件，并根据数据源，配置组件的属性；根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板；注册模板，并选择该模板的模板类型和数据源，根据该模板的模板类型、数据源以及代码模板，生成对应的源码。

可选地，注册数据源的步骤包括：注册在线数据源、离线数据源和javascript对象表示法json数据源中的至少一种。

可选地，创建组件，并根据数据源，配置组件的属性的步骤包括：创建组件，并设置组件的属性页的页面类型，在属性页中添加属性，设置属性的显示方式；根据数据源，为组件的属性配置数据，设置属性的校验规则和校验提示。

可选地，根据该模板的模板类型、数据源以及代码模板，生成对应的源码包括：根据该模板的模板类型和数据源，为该模板配置组件以及代码模板；对 该模板中的组件进行编排，设置组件的属性，并根据编排结果以及代码模板，生成对应的源码。

可选地，代码模板包括：另一种标记语言yaml模板、可扩展标记语言xml模板以及结构化查询语言sql模板中的至少一种。

根据本发明的第二方面，还提供了一种组件和模板的可视化开发系统，该系统包括：注册模块，用于注册数据源；组件创建模块，用于创建组件，并根据数据源，配置组件的属性；模板类型生成模块，用于根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板；模板注册模块，用于注册模板，并选择该模板的模板类型和数据源，根据该模板的模板类型、数据源以及代码模板，生成对应的源码。

可选地，注册模块用于：注册在线数据源、离线数据源和json数据源中的至少一种。

可选地，组件创建模块包括：创建单元，用于创建组件，并设置组件的属性页的页面类型，在属性页中添加属性，设置属性的显示方式；属性配置单元，用于根据数据源，为组件的属性配置数据，设置属性的校验规则和校验提示。

可选地，模板注册模块包括：模板配置单元，用于根据该模板的模板类型和数据源，为该模板配置组件以及代码模板；编排单元，用于对该模板中的组件进行编排，设置组件的属性，并根据编排结果以及代码模板，生成对应的源码。

可选地，代码模板包括：yaml模板、xml模板以及sql模板中的至少一种。

本发明的上述一个或多个技术方案包括以下有益效果：

本发明实施例中，通过注册数据源；创建组件，并根据数据源，配置组件的属性；根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板；注册模板，并选择该模板的模板类型和数据源，根据该模板的模板类型、数据源以及代码模板，生成对应的源码。降低了对开发人员java、html5开发能力的要求，使得开发人员可以更多的关注于业务逻辑，并且降低了开发过程中语法错误出现的机率，提高了开发效率。

附图说明

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

图1为本发明的第一实施例的组件和模板的可视化开发方法的流程图；

图2为本发明的第二实施例的组件和模板的可视化开发方法的流程图；

图3a为本发明的第三实施例的组件和模板的可视化开发系统的结构图；

图3b为本发明的第三实施例的组件和模板的可视化开发系统的另一结构图。

具体实施方式

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

第一实施例

请参阅图1，图1示出了本发明的第一实施例的组件和模板的可视化开发方法的流程图，具体步骤如下：

步骤101，注册数据源。

需要说明的是，步骤101中，用户可以根据业务需要注册各种不同类型的数据源。可以是注册在线数据源，也可以是注册离线数据源，还可以是注册json数据源。数据源中的数据可以在后续配置组件属性时使用。

步骤102，创建组件，并根据数据源，配置组件的属性。

需要说明的是，组件是具有属性的，因此需要为组件的属性配置相应的数据，可以通过引用步骤101中注册的数据源中的数据，为组件中的属性配置相应的数据。

步骤103，根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板。

需要说明的是，通过根据业务需要，注册对应的模板类型，能够使得系统 可以支持多个产品模板，并支持模板可扩展性。每一模板类型可以根据业务需要加载不同组件。而模板类型的代码模板则可以根据业务需要设置为各种不同规范的模板。

步骤104，注册模板，并选择该模板的模板类型和数据源，根据该模板的模板类型、数据源以及代码模板，生成对应的源码。

需要说明的是，由于模板类型具有对应的组件以及代码模板，因此当模板的模板类型以及数据源确定时，系统就可以准确地为该模板配置组件以及代码模板，并为组件的属性配置数据。然后经过系统对该模板的编排，就可以生成与代码模板相对应的源码。

本实施例，通过注册数据源；创建组件，并根据数据源，配置组件的属性；根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板；注册模板，并选择该模板的模板类型和数据源，根据该模板的模板类型、数据源以及代码模板，生成对应的源码。降低了对开发人员java、html5开发能力的要求，使得开发人员可以更多的关注于业务逻辑，并且降低了开发过程中语法错误出现的机率，提高了开发效率。

第二实施例

请参阅图2，图2示出了本发明的第二实施例的组件和模板的可视化开发方法的流程图，具体步骤如下：

步骤201，注册数据源。

需要说明的是，用户可以根据业务需要注册各种不同类型的数据源。可以注册在线数据源，可以通过url、用户名和密码建立连接关系，通过接口读取数据并展现，例如从某个外部环境上获取的元数据信息集合，包含目标环境上的各种信息。也可以注册离线数据源，可以在系统中手动添加离线数据。还可以注册json数据源，可以直接输入json代码格式的数据。数据源中的数据可以在后续配置组件属性时使用，即数据源提供数据字典的功能。

步骤202，创建组件，并设置组件的属性页的页面类型，在属性页中添加属性，设置属性的显示方式。

需要说明的是，步骤202中可以基于html5的web框架创建组件。创建的组件一般具有唯一标识，系统根据这个标识来识别组件。组件是具有属性的， 而属性是分类的。因此可以对组件的每个属性页设置相应的页面类型，例如可以将属性页设置为普通页、tab页或者是复合表格页中的一种。

设置完组件的属性页的页面类型后，就可以在属性页中添加相应的属性，并设置属性的显示方式，例如可以将属性的显示方式设置为单复选框、下拉列表、文本框或输入框中一种。

步骤203，根据数据源，为组件的属性配置数据，设置属性的校验规则和校验提示。

需要说明的是，步骤203中，为组件的属性配置数据时，可以引用上述数据源中的数据为组件的属性配置数据，并且为组件的属性设置校验规则和校验提示。

步骤204，根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板。

需要说明的是，通过根据业务需要，注册对应的模板类型，使得系统可以支持多个产品模板，并支持模板可扩展性，通过不同的模板类型对应不同的产品，实现模板设计器可扩展。可以基于html5的web框架注册模板类型。模板类型可以根据业务需要加载不同组件。即模板类型是一个结构，组件和数据则是结构的内容。而把结构和内容联结起来就是代码模板。而且模板类型对应的代码模板可以根据业务需要，设置为各种规范的模板，如yaml模板、xml模板以及sql模板。

步骤205，注册模板，并选择该模板的模板类型和数据源。

需要说明的是，步骤205中可以基于html5的web框架注册模板。注册模板时可以根据业务需求选择该模板的模板类型以及数据源。以便系统后续可以准确地为该模板配置组件以及代码模板，并为组件的属性配置数据。

步骤206，根据该模板的模板类型和数据源，为该模板配置组件以及代码模板。

需要说明的是，由于模板类型具有对应的组件以及代码模板，因此当模板的模板类型以及数据源确定时，系统就可以准确地为该模板配置组件以及代码模板，并为组件的属性配置数据。

步骤207，对该模板中的组件进行编排，设置组件的属性，并根据编排结 果以及代码模板，生成对应的源码。

需要说明的是，步骤207是在模板设计器中对该模板进行编排，设置组件的属性，其中组件在模板设计器中可视化部分体现为一个图标，一般对应为一个在下游环境中可执行的代码单元。编排完成后，模板包含了如下信息的综合体：由组件、连线等组成的图形信息；组件的属性数据；模板自身的参数信息。系统根据编排结果以及代码模板，就可以实时生成与代码模板相对应的源码供不同的下游系统环境调用运行。

本实施例，通过注册数据源；创建组件，并设置组件的属性页的页面类型，在属性页中添加属性，设置属性的显示方式；根据数据源，为组件的属性配置数据，设置属性的校验规则和校验提示；根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板；注册模板，并选择该模板的模板类型和数据源；根据该模板的模板类型和数据源，为该模板配置组件以及代码模板；对该模板中的组件进行编排，设置组件的属性，并根据编排结果以及代码模板，生成对应的源码。降低了对开发人员java、html5开发能力的要求，使得开发人员可以更多的关注于业务逻辑，并且降低了开发过程中语法错误出现的机率，提高了开发效率。

第三实施例

请参阅图3a，图3a示出了本发明的第三实施例的组件和模板的可视化开发系统的结构图，图3a所示的系统300包括：注册模块301，组件创建模块302，模板类型生成模块303以及模板注册模块304，其中：

注册模块301，用于注册数据源。

组件创建模块302，用于创建组件，并根据数据源，配置组件的属性。

模板类型生成模块303，用于根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板。

模板注册模块304，用于注册模板，并选择该模板的模板类型和数据源，根据该模板的模板类型、数据源以及代码模板，生成对应的源码。

在图3a的基础上，可选地，组件创建模块302包括：创建单元3021以及属性配置单元3022，模板注册模块304包括：模板配置单元3041以及编排单元3042，参见图3b，其中：

创建单元3021，用于创建组件，并设置组件的属性页的页面类型，在属性页中添加属性，设置属性的显示方式。

属性配置单元3022，用于根据数据源，为组件的属性配置数据，设置属性的校验规则和校验提示。

模板配置单元3041，用于根据该模板的模板类型和数据源，为该模板配置组件以及代码模板。

编排单元3042，用于对该模板中的组件进行编排，设置组件的属性，并根据编排结果以及代码模板，生成对应的源码。

上述系统300能够实现图1至图2的实施例中系统实现的各个过程，为避免重复，这里不再赘述。

本实施例，通过注册数据源；创建组件，并设置组件的属性页的页面类型，在属性页中添加属性，设置属性的显示方式；根据数据源，为组件的属性配置数据，设置属性的校验规则和校验提示；根据业务需要，注册对应的模板类型，并在模板类型中加载业务所需的组件，设置模板类型对应的代码模板；注册模板，并选择该模板的模板类型和数据源；根据该模板的模板类型和数据源，为该模板配置组件以及代码模板；对该模板中的组件进行编排，设置组件的属性，并根据编排结果以及代码模板，生成对应的源码。降低了对开发人员java、html5开发能力的要求，使得开发人员可以更多的关注于业务逻辑，并且降低了开发过程中语法错误出现的机率，提高了开发效率。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露的系统和方法，可以通过其它的方式实现。例如，以上所描述的系统实施例仅仅是示意性的，例如， 模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。