CN106909361B - 基于模版引擎的web开发方法和装置 - Google Patents

Abstract

本发明公开了一种基于模版引擎的web开发方法和装置，属于软件开发技术领域。所述方法包括：从第三方框架或者组件库中获取所需组件；对获取的组件及按照预设格式进行封装，形成组件模板；根据组件模板的标签，引入所需的组件模板，并形成相应的网页模板；通过预设的模板解析引擎，对网页模板和网页模板对应的组件模板进行解析并形成相应的页面。本发明通过对所需组件进行封装成具有统一格式的组件模板，可以屏蔽不同框架的组件之间因编写风格差异带来的使用差异和使用冲突，减少程序员对组件的使用上耗费的时间；而且采用组件模板标签的方式来编写网页模板，编写方式简洁高效、编写的代码简洁且易于维护，进而增加了web开发效率。

Description

基于模版引擎的web开发方法和装置

技术领域

本发明涉及软件开发技术领域，特别涉及一种基于模版引擎的web开发集成方法和装置。

背景技术

当前，随着互联网技术的快速发展，基于浏览器/服务器(Browser/Server，简称“B/S”)模式web软件开发由于自身优势得到了广泛应用。具体地，这种模式统一了客户端，将***功能实现的核心部分集中到服务器上，简化了***的开发、维护和使用。

现有的web开关过程中，程序员需要准备许多基础组件，这些基础组件很可能来自不同的开源框架，例如：Mybatis框架、Spring框架、Dom4j工具包、JqueryUI前端框架等，不同框架中的组件的使用方式不完全相同，因此，在对这些基础组件进行调用时，程序员需要先识别这些基础组件，并采用相应的方式，这样耗费了程序员大量的时间，严重影响了web开发的效率。

发明内容

本发明针对现有的web开发过程中需要消耗大量的时间来识别来自不同框架的组件，以采用相应的使用方法，进而严重影响web开发效率的问题，提供了一种基于模版引擎的web开发方法和装置。

本发明就上述技术问题而提出的技术方案如下：

一方面，提供了一种基于模版引擎的web开发方法，所述方法包括：

从第三方框架或者组件库中获取所需组件；

对获取的所述组件按照预设格式进行封装，形成组件模板，所述组件模板包括为所述组件添加的标签；

根据所述组件模板的标签，引入所需的组件模板，并形成相应的网页模板；

通过预设的模板解析引擎，对所述网页模板和所述网页模板对应的所述组件模板进行解析并形成相应的页面。

本发明上述的基于模版引擎的web开发方法中，所述对获取的所述组件按照预设格式进行封装，形成组件模板，包括：

将获取的组件所依赖资源的引入方式、配置方式、以及使用方法，通过JavaScript脚本方式与对应的所述组件封装在一起，并添加统一规则的标签，形成组件模板。

本发明上述的基于模版引擎的web开发方法中，所述根据所述组件模板的标签，引入所需的组件模板，并形成网页模板，包括：

采用标签的方式，引入所需组件对应的组件模板并形成网页模板。

本发明上述的基于模版引擎的web开发方法中，所述通过预设的模板解析引擎，实现对所述网页模板进行解析并形成相应的页面，包括：

通过预设的所述模板解析引擎解析所述网页模板来获取所述网页模板引入的组件模板；

通过预设的所述模板解析引擎解析引入的组件模板，得到引入的组件模板中封装好的JavaScript脚本代码；

对解析出的JavaScript脚本代码进行渲染并形成页面代码；

将形成的所述页面代码返回到相应的客户端，并通过所述客户端中的浏览器解析，形成相应的页面。

本发明上述的基于模版引擎的web开发方法中，所述方法还包括：

将形成的组件模板储存在组件模板库中；

从所述组件模板库中获取所需组件对应的组件模板。

另一方面，提供了一种基于模版引擎的web开发装置，所述装置包括：

获取模块，用于从第三方框架或者组件库中获取所需组件；

封装模块，用于对获取的所述组件按照预设格式进行封装，形成组件模板，所述组件模板包括为所述组件添加的标签；

处理模块，用于根据所述组件模板的标签，引入所需的组件模板，并形成相应的网页模板；

所述处理模块，还用于通过预设的模板解析引擎，对所述网页模板和所述网页模板对应的所述组件模板进行解析并形成相应的页面。

本发明上述的基于模版引擎的web开发装置中，所述封装模块，包括：

封装单元，用于将获取的组件所依赖资源的引入方式、配置方式、以及使用方法，通过JavaScript脚本方式与对应的所述组件封装在一起，并添加统一规则的标签，形成组件模板。

本发明上述的基于模版引擎的web开发装置中，所述处理模块，包括：

第一处理单元，用于采用标签的方式，引入所需组件对应的组件模板并形成网页模板

本发明上述的基于模版引擎的web开发装置中，所述处理模块，还包括：

解析单元，用于通过预设的所述模板解析引擎解析所述网页模板来获取所述网页模板引入的组件模板；

所述解析单元，还用于通过预设的所述模板解析引擎解析引入的组件模板，得到引入的组件模板中封装好的JavaScript脚本代码；

渲染单元，用于对解析出的JavaScript脚本代码进行渲染并形成页面代码；

第二处理单元，用于将形成的所述页面代码返回到相应的客户端，并通过所述客户端中的浏览器解析，形成相应的页面。

本发明上述的基于模版引擎的web开发装置中，所述装置还包括：

存储模块，用于将形成的组件模板储存在组件模板库中；

所述获取模块，还用于从所述组件模板库中获取所需组件对应的组件模板。

本发明实施例提供的技术方案带来的有益效果是：

通过从第三方框架或者组件库中获取所需组件，然后对获取的组件按照预设格式进行封装，形成组件模板，其次根据组件模板的标签，引入所需的组件模板，并形成相应的网页模板；最后通过预设的模板解析引擎，对网页模板和网页模板对应的组件模板进行解析并形成相应的页面。这样对所需组件进行封装成具有统一格式的组件模板，可以屏蔽不同框架的组件之间因编写风格差异带来的使用差异和使用冲突，减少程序员对组件的使用上耗费的时间，加快了web开发速度；而且采用组件模板标签的方式来编写网页模板，编写方式简洁高效、编写的代码简洁且易于维护，进而可以进一步减少web开发过程中的工作量，增加web开发效率。

附图说明

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

图1是本发明实施例一提供的一种基于模版引擎的web开发方法流程图；

图2是本发明实施例一提供的一种对网页模板和组件模板进行解析并形成相应的页面的方法流程图；

图3是本发明实施例一提供的一种通过模板解析引擎来解析网页模板和组件模板的流程示意图；

图4是本发明实施例一提供的一种基于模版引擎的web开发方法流程图；

图5是本发明实施例二提供的一种基于模版引擎的web开发装置结构示意图；

图6是本发明实施例二提供的一种基于模版引擎的web开发装置结构示意图；

图7是本发明实施例二提供的一种基于模版引擎的web开发装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

实施例一

本发明实施例提供了一种基于模版引擎的web开发方法，参见图1，该方法包括：

步骤S11，从第三方框架或者组件库中获取所需组件。

在本实施例中，web开发需要数量众多的基础组件，这些组件可以引用第三方开源框架或者组件库中的组件，例如：Mybatis框架、Spring框架、Dom4j工具包、JqueryUI前端框架等中的组件。在实际应用中，在获取了随需组件的同时，也会获取组件对应的依赖资源，如JavaScript脚本、css样式表、图片等，这些资源用于后续步骤中对组件中代码的渲染。

步骤S12，对获取的组件按照预设格式进行封装，形成组件模板，该组件模板包括为组件添加的标签。

在本实施例中，上述步骤S12可以通过如下方式实现：

将获取的组件所依赖资源的引入方式、配置方式、以及使用方法，通过JavaScript脚本方式与对应的组件封装在一起，并添加统一规则的标签，形成组件模板。

在本实施例中，将获取的组件所依赖资源的引入方式、配置方式、以及使用方法，通过JavaScript脚本方式与对应的组件封装在一起，在后续解析组件模板时，可以根据封装的资源引入方式、配置方式、以及使用方法，来自动引用依赖的资源，以用于对组件代码的渲染，这样既简化了程序员对组件的调用方式，节省了web开发时间，又避免了资源引用的混乱。

在本实施例中，可以通过如下方式来对获取的组件进行封装：

1，定义组件命名空间及组件标签名：<comp namespace＝”xxx”name＝”grid”></comp>；

2，定义组件引入的资源：<resources><resource type＝”js”name＝”xxx”value＝””/></resources>；

3，定义组件属性：<attributes><attribute readonly＝”true”name＝”xxx”default＝””></attribute></attributes>；

4，定义组件事件：<events><event name＝”xxx”/></events>；

5，定义组件方法：<methods><method name＝”xx”></method></methods>；

6，定义组件封装过程脚本：<script src＝”xxxx”>脚本内容</script>，在脚本内容部分须实现以上定义的属性、事件、方法。

具体地，例如如下方式：

在本实施例中，对获取的所需组件按照预设格式进行封装，使得形成的组件模板拥有统一的格式、使用方式、以及标准化的标签，这样可以免除了不同框架的组件之间的使用差异和使用冲突，简化了使用过程，在供程序员使用时，组件的调用方式更加简洁高效。

步骤S13，根据组件模板的标签，引入所需的组件模板，并形成相应的网页模板。

在本实施例中，上述步骤S13可以通过如下方式实现：

采用标签的方式，引入所需组件对应的组件模板并形成网页模板。

在本实施例中，在编写web时(即进行web开发时)，以标签方式引入所需组件对应的组件模板，形成网页模板。在实际应用中，引入组件模板的标签方式可以为：<命名空间:组件标签名>。在实际应用中，采用组件模板标签的方式来编写网页模板，编写方式简洁高效、编写的代码简洁且易于维护。

步骤S14，通过预设的模板解析引擎，对网页模板和网页模板对应的组件模板进行解析并形成相应的页面。

在本实施例中，预设的模板解析引擎可以用于解析网页模板和网页模板对应的组件模板，得到组件模板中的代码。预设的模板解析引擎在解析出组件中的代码后，会自动加载组件所依赖的资源，并对解析出的代码进行渲染，可以防止web开发过程中引用资源出现混乱。

具体地，参见图2，上述步骤S14可以通过如下方式实现：

步骤S141，通过预设的模板解析引擎解析网页模板来获取网页模板引入的组件模板。

在本实施例中，网页模板采用标签的方式来引入组件模板，预设的模板解析引擎可以解析标签来识别引入的组件模板。

步骤S142，通过预设的模板解析引擎解析引入的组件模板，得到引入的组件模板中封装好的JavaScript脚本代码。

在本实施例中，组件模板按照预设格式将组件的JavaScript脚本代码进行了封装，预设的模板解析引擎可以对组件模板进行解析，以获取出组件模板中组件的JavaScript脚本代码。

步骤S143，对解析出的JavaScript脚本代码进行渲染并形成页面代码。

在本实施例中，将解析出的JavaScript脚本代码进行渲染并形成页面代码，该页面代码不会显示出web开发的技术实现细节，即不会显示出网页模板和组件模板的技术细节，有利于对web开发过程中技术细节的保密。

步骤S144，将形成的页面代码返回到相应的客户端，并通过客户端中的浏览器解析，形成相应的页面。

在本实施例中，页面代码的形成可以在服务器中实现，然后返回到相应的客户端，由客户端中的浏览器(浏览器中包含有自身的解析引擎，可以用于对页面代码进行解析)进行解析，形成相应的页面，以完成web开发工作。

具体地，参见图3，在实际应用中，通过模板解析引擎来解析网页模板和组件模板的流程可以为如下所示：

当接收到(可以为服务器)网页访问请求指令(例如：target.html)时，先检索是否存在相应的网页模板(例如：target.page)，如果不存在则返回无法访问的响应信息(例如：404page)；如果存在该网页模板，则先遍历该网页模板，以获取网页模板中各个组件模板的标签，然后通过这些标签来调用并解析这些组件模板。具体地，先判断该组件模板是否已存在，如果不存在，则返回组件解析错误，页面空白占位的响应信息；如果存在，则读取该组件模板，并引入该组件模板依赖的资源，然后，执行解析该组件模板得到该组件的JavaScript脚本代码并通过组件所依赖的资源对代码进行渲染，返回渲染后的代码。判断是否所用的组件模板都返回了相应的渲染代码，如果没有则继续执行组件模板解析过程；如果都返回了渲染代码，则整合所有的渲染代码，形成网页代码，并返回响应信息(即target.html)。

参见图4，该方法还包括：

步骤S15，将形成的组件模板储存在组件模板库中。

在本实施例中，可以在每次执行完上述步骤S12时，将形成的组件模板储存在组件模板库中，时刻更新和积累组件模板库中的组件模板，这样当程序员再次进行web开发时，可以优先从组件模板库中获取已经封装好的组件模板，进一步加快web开发过程，节省开发时间，增强开发效率。

步骤S16，从组件模板库中获取所需组件对应的组件模板。

在本实施例中，上述步骤S16可以和上述步骤S11同步进行，或者，优先执行步骤S16，当在执行完步骤S16后仍未获取到足够的所需组件时，在执行S11。

本发明实施例通过从第三方框架或者组件库中获取所需组件，然后对获取的组件按照预设格式进行封装，形成组件模板，其次根据组件模板的标签，引入所需的组件模板，并形成相应的网页模板；最后通过预设的模板解析引擎，对网页模板和网页模板对应的组件模板进行解析并形成相应的页面。这样对所需组件进行封装成具有统一格式的组件模板，可以屏蔽不同框架的组件之间因编写风格差异带来的使用差异和使用冲突，减少程序员对组件的使用上耗费的时间，加快了web开发速度；而且采用组件模板标签的方式来编写网页模板，编写方式简洁高效、编写的代码简洁且易于维护，进而可以进一步减少web开发过程中的工作量，增加web开发效率。

实施例二

本发明实施例提供了一种基于模版引擎的web开发装置，参见图5，该装置包括：获取模块201、封装模块202、以及处理模块203。

获取模块201，用于从第三方框架或者组件库中获取所需组件。

在本实施例中，web开发需要数量众多的基础组件，这些组件可以引用第三方开源框架或者组件库中的组件，例如：Mybatis框架、Spring框架、Dom4j工具包、JqueryUI前端框架等中的组件。在实际应用中，在获取了随需组件的同时，也会获取组件对应的依赖资源，如JavaScript脚本、css样式表、图片等。

封装模块202，用于对获取的组件按照预设格式进行封装，形成组件模板，组件模板包括为组件添加的标签。

在本实施例中，具体的预设格式前文已经说明，这里不再赘述。

处理模块203，用于根据组件模板的标签，引入所需的组件模板，并形成相应的网页模板。

处理模块203，还用于通过预设的模板解析引擎，对网页模板和网页模板对应的组件模板进行解析并形成相应的页面。

在本实施例中，预设的模板解析引擎可以用于解析网页模板和网页模板对应的组件模板，得到组件模板中的代码。预设的模板解析引擎在解析出组件中的代码后，会自动加载组件所依赖的资源，并对解析出的代码进行渲染，可以防止web开发过程中引用资源出现混乱。

具体地，参见图6，封装模块202，包括：

封装单元212，用于将获取的组件所依赖资源的引入方式、配置方式、以及使用方法，通过JavaScript脚本方式与对应的组件封装在一起，并添加统一规则的标签，形成组件模板。

在本实施例中，对获取的所需组件按照预设格式进行封装，使得形成的组件模板拥有统一的格式、使用方式、以及标准化的标签，这样可以免除了不同框架的组件之间的使用差异和使用冲突，简化了使用过程，在供程序员使用时，组件的调用方式更加简洁高效。

具体地，参见图6，处理模块203，包括：

第一处理单元213，用于采用标签的方式，引入所需组件对应的组件模板并形成网页模板。

在本实施例中，在编写web时(即进行web开发时)，以标签方式引入所需组件对应的组件模板，形成网页模板。在实际应用中，引入组件模板的标签方式可以为：<命名空间:组件标签名>。在实际应用中，采用组件模板标签的方式来编写网页模板，编写方式简洁高效、编写的代码简洁且易于维护。

具体地，参见图6，处理模块203，还包括：

解析单元223，用于通过预设的模板解析引擎解析网页模板来获取网页模板引入的组件模板。

在本实施例中，网页模板采用标签的方式来引入组件模板，预设的模板解析引擎可以解析标签来识别引入的组件模板。

解析单元223，还用于通过预设的模板解析引擎解析引入的组件模板，得到引入的组件模板中封装好的JavaScript脚本代码。

在本实施例中，组件模板按照预设格式将组件的JavaScript脚本代码进行了封装，预设的模板解析引擎可以对组件模板进行解析，以获取出组件模板中组件的JavaScript脚本代码。

渲染单元233，用于对解析出的JavaScript脚本代码进行渲染并形成页面代码。

在本实施例中，将解析出的JavaScript脚本代码进行渲染并形成页面代码，该页面代码不会显示出web开发的技术实现细节，即不会显示出网页模板和组件模板的技术细节，有利于对web开发过程中技术细节的保密。

第二处理单元243，用于将形成的页面代码返回到相应的客户端，并通过客户端中的浏览器解析，形成相应的页面。

在本实施例中，页面代码的形成可以在服务器中实现，然后返回到相应的客户端，由客户端中的浏览器(浏览器中包含有自身的解析引擎，可以用于对页面代码进行解析)进行解析，形成相应的页面，以完成web开发工作。

参见图7，该装置还可以包括：存储模块204。

存储模块204，用于将形成的组件模板储存在组件模板库中。

在本实施例中，可以将形成的组件模板储存在组件模板库中，时刻更新和积累组件模板库中的组件模板，这样当程序员再次进行web开发时，可以优先从组件模板库中获取已经封装好的组件模板，进一步加快web开发过程，节省开发时间，增强开发效率。

获取模块201，还用于从组件模板库中获取所需组件对应的组件模板。

本发明实施例通过从第三方框架或者组件库中获取所需组件，然后对获取的组件按照预设格式进行封装，形成组件模板，其次根据组件模板的标签，引入所需的组件模板，并形成相应的网页模板；最后通过预设的模板解析引擎，对网页模板和网页模板对应的组件模板进行解析并形成相应的页面。这样对所需组件进行封装成具有统一格式的组件模板，可以屏蔽不同框架的组件之间因编写风格差异带来的使用差异和使用冲突，减少程序员对组件的使用上耗费的时间，加快了web开发速度；而且采用组件模板标签的方式来编写网页模板，编写方式简洁高效、编写的代码简洁且易于维护，进而可以进一步减少web开发过程中的工作量，增加web开发效率。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

需要说明的是：上述实施例提供的基于模版引擎的web开发装置在实现基于模版引擎的web开发方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的基于模版引擎的web开发装置与基于模版引擎的web开发方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种基于模版引擎的web开发方法，其特征在于，所述方法包括：

从第三方框架或者组件库中获取所需组件；

对获取的所述组件按照预设格式进行封装，形成组件模板，所述组件模板包括为所述组件添加的标签；

根据所述组件模板的标签，引入所需的组件模板，并形成相应的网页模板；

通过预设的模板解析引擎，对所述网页模板和所述网页模板对应的所述组件模板进行解析并形成相应的页面；

其中，所述对获取的所述组件按照预设格式进行封装，形成组件模板，包括：

将获取的组件所依赖资源的引入方式、配置方式、以及使用方法，通过JavaScript脚本方式与对应的所述组件封装在一起，并添加统一规则的标签，形成组件模板。

2.根据权利要求1所述的方法，其特征在于，所述根据所述组件模板的标签，引入所需的组件模板，并形成网页模板，包括：

采用标签的方式，引入所需组件对应的组件模板并形成网页模板。

3.根据权利要求1所述的方法，其特征在于，所述通过预设的模板解析引擎，实现对所述网页模板进行解析并形成相应的页面，包括：

通过预设的所述模板解析引擎解析所述网页模板来获取所述网页模板引入的组件模板；

通过预设的所述模板解析引擎解析引入的组件模板，得到引入的组件模板中封装好的JavaScript脚本代码；

对解析出的JavaScript脚本代码进行渲染并形成页面代码；

将形成的所述页面代码返回到相应的客户端，并通过所述客户端中的浏览器解析，形成相应的页面。

4.根据权利要求1-3任一项所述的方法，其特征在于，所述方法还包括：

将形成的组件模板储存在组件模板库中；

从所述组件模板库中获取所需组件对应的组件模板。

5.一种基于模版引擎的web开发装置，其特征在于，所述装置包括：

获取模块，用于从第三方框架或者组件库中获取所需组件；

封装模块，用于对获取的所述组件按照预设格式进行封装，形成组件模板，所述组件模板包括为所述组件添加的标签；

处理模块，用于根据所述组件模板的标签，引入所需的组件模板，并形成相应的网页模板；

所述处理模块，还用于通过预设的模板解析引擎，对所述网页模板和所述网页模板对应的所述组件模板进行解析并形成相应的页面；

其中，所述封装模块，包括：

封装单元，用于将获取的组件所依赖资源的引入方式、配置方式、以及使用方法，通过JavaScript脚本方式与对应的所述组件封装在一起，并添加统一规则的标签，形成组件模板。

6.根据权利要求5所述的装置，其特征在于，所述处理模块，包括：

第一处理单元，用于采用标签的方式，引入所需组件对应的组件模板并形成网页模板。

7.根据权利要求5所述的装置，其特征在于，所述处理模块，还包括：

解析单元，用于通过预设的所述模板解析引擎解析所述网页模板来获取所述网页模板引入的组件模板；

所述解析单元，还用于通过预设的所述模板解析引擎解析引入的组件模板，得到引入的组件模板中封装好的JavaScript脚本代码；

渲染单元，用于对解析出的JavaScript脚本代码进行渲染并形成页面代码；

第二处理单元，用于将形成的所述页面代码返回到相应的客户端，并通过所述客户端中的浏览器解析，形成相应的页面。

8.根据权利要求5-7任一项所述的装置，其特征在于，所述装置还包括：

存储模块，用于将形成的组件模板储存在组件模板库中；

所述获取模块，还用于从所述组件模板库中获取所需组件对应的组件模板。

Images