CN105022654A - 一种可视化页面制作方法和装置 - Google Patents

Abstract

本发明公开了一种可视化页面制作方法和装置，方法包括以下步骤：S1：根据主模板预定义的模板合并标识发起合并子模板的请求；S2：根据子模板预定义的匹配标识向数据源中发起匹配相应数据的请求；S3：匹配相应数据后结合子模板中的HTML格式生成正常数据子模板，并将正常数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。本发明解决现有技术对可视化页面制作中的个性化定制不足，无法方便地对同一类型页面定制不同的外观和交互行为的缺点。并且，在无匹配数据或者出现请求异常时还能调用相应的子模板与主模板合并，实现无数据和异常情况的HTML页面定制。

Description

一种可视化页面制作方法和装置

技术领域

本发明涉及可视化页面制作方法和装置。

背景技术

可视化页面制作就是指通过拖拽方式快速制作网页页面，所见即所得。互动电视应用页面制作是通过编写HTML、CSS、Javascript代码来定制开发，这就需要配备专业的设计和程序开发人员。程序开发时间周期长、成本高。

互动电视应用可视化页面制作，让一线编辑能够跨越技术障碍，随心随意，随时随地，自己就能够制作出专业的网页页面。我们把页面中的所有模块抽象成一个个的组件，页面中需要什么功能，直接把组件拖放到页面区域内即可。需要导航菜单，拖放一个导航菜单组件；需要一个幻灯片，拖放一个幻灯片，上传图片或者填写图片链接即可。整个过程都是可视化的，普通编辑即可完成，无需设计和技术参与。

目前，HTML结构一般都是固定好，改变HTML中的结构就需要修改代码，或者是通过制定大量的模板来对应不同的结构，造成效率不高，成本高的现象，特别是在整体框架相同而其中的细节需求不同时，通过人工修改就会使得效率低下，不能实现很好的个性化定制。

发明内容

为了克服现有技术的不足，本发明的目的在于提供一种可视化页面制作方法和装置，解决现有技术对可视化页面制作中的个性化定制不足，无法方便地对同一类型页面定制不同的外观和交互行为的缺点。

为解决上述问题，本发明所采用的技术方案如下：

方案一：

一种可视化页面制作方法，包括以下步骤：

S1：根据主模板预定义的模板合并标识发起合并子模板的请求；

S2：根据子模板预定义的匹配标识向数据源中发起匹配相应数据的请求；

S3：匹配相应数据后结合子模板中的HTML格式生成正常数据子模板，并将正常数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

优选的，在步骤S2中还包括：若匹配相应数据成功，则执行步骤S3，若数据源中没有相应数据，则执行步骤S4；

S4：调用预设的空数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

优选的，在步骤S1中还包括：若合并子模板的请求出错，则执行步骤S5；在步骤S2中还包括：若匹配相应数据的请求出错，则执行步骤S5；

S5：调用预设的异常子模板合并至主模板，结合主模板中的HTML格式生成完整页面。

优选的，在步骤S2中，数据源为JSON字符串。

方案二：

一种可视化页面制作装置，包括以下模块：

模板合并请求模块：用于根据主模板预定义的模板合并标识发起合并子模板的请求；

数据匹配请求模块：用于根据子模板预定义的匹配标识向数据源中发起匹配相应数据的请求；

第一合并模块：用于匹配相应数据后结合子模板中的HTML格式生成正常数据子模板，并将正常数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

优选的，在数据匹配请求模块中还包括：若匹配相应数据成功，则执行第一合并模块，若数据源中没有相应数据，则执行第二合并模块；

第二合并模块：用于调用预设的空数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

优选的，在模板合并请求模块中还包括：若合并子模板的请求出错，则执行第三合并模块；在数据匹配请求模块中还包括：若匹配相应数据的请求出错，则执行第三合并模块；

第三合并模块：用于调用预设的异常子模板合并至主模板，结合主模板中的HTML格式生成完整页面。

优选的，在数据匹配请求模块中，数据源为JSON字符串。

相比现有技术，本发明的有益效果在于：解决现有技术对可视化页面制作中的个性化定制不足，无法方便地对同一类型页面定制不同的外观和交互行为的缺点。并且，在无匹配数据或者出现请求异常时还能调用相应的子模板与主模板合并，实现无数据和异常情况的HTML页面定制。

附图说明

图1为本发明的可视化页面制作方法的流程图。

具体实施方式

下面，结合附图以及具体实施方式，对本发明做进一步描述：

参考图1为本发明的一种可视化页面制作方法，包括以下步骤：

S1：根据主模板预定义的模板合并标识发起合并子模板的请求，若合并子模板的请求出错，则执行步骤S5。

S2：根据子模板预定义的匹配标识向数据源中发起匹配相应数据的请求，若匹配相应数据成功，则执行步骤S3，若数据源中没有相应数据，则执行步骤S4，若匹配相应数据的请求出错，则执行步骤S5。

S3：匹配相应数据后结合子模板中的HTML格式生成正常数据子模板，并将正常数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

S4：调用预设的空数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

S5：调用预设的异常子模板合并至主模板，结合主模板中的HTML格式生成完整页面。

针对上述步骤进行进一步解释，在本发明中，一个组件的HTML模板由主模板和子模板组成，子模板又包括正常数据子模板、空数据子模板和异常子模板，每个模板均可单独进行配置，互不影响。主模板就是一个HTML页面的容器，将子模板合并至主模板后就生成了完整的HTML页面，其中，正常数据模板是通过匹配数据源中的数据后生成的，在数据源中匹配数据的方式是通过正则表达式遍历数据源中的数据，从而获取目标数据。因为数据源中的数据可能不断在变化，匹配数据的目的是为了根据数据源中变化的数据在页面中展示不同的内容，数据源优选为JSON字符串或者是JSON数据格式的文件。

为了更好地说明本发明的方案，下面通过具体例子进行说明：

组件1的模板配置为：

主模版：<div>{$items}</div>

正常数据子模版:<img src＝“$src}”/>

空数据子模版:<img src＝“empty.jpg”/>

异常子模版:<img src＝“error.jpg”/>

组件2的模板配置为：

主模版：<div>{$items}</div>

正常数据子模版:<img src＝“{$src}”/><span>平凡的世界</span>

空数据子模版:<img src＝“empty.jpg”/>

异常子模版:<img src＝“error.jpg”/>

根据组件1和组件2中的主模板，可以认为该HTML页面的整体框架是相同的，但是在细节需求上有所差异，具体在正常数据子模板中体现，组件1中的正常数据子模板没有“平凡的世界”文字说明，组件2中的正常数据子模板则有“平凡的世界”文字说明。

主模板中的{$items}是模版和程序约定的一个标识，即为步骤S1中的合并标识，当子模版的内容生成好后就把{$items}替换成子模板中的内容，因此，子模板中的内容和格式由用户自由定制，而不影响主模板的整体框架。而正常数据子模板中的{$src}则是步骤S2中的匹配标识。

以组件2为例，当正常数据子模板中匹配数据时匹配到了多条数据记录，例如：[{src:“1.jpg”}，{src:“1.jpg”}，{src:“2.jpg”}]，表示匹配到了三张图片，生成正常数据子模板后则得到以下内容：<img src＝“1.jpg”/><span>平凡的世界</span><imgsrc＝“2.jpg”/><span>平凡的世界</span><img src＝“3.jpg”/><span>平凡的世界</span>。再将正常数据子模板与主模板合并后就得到：<div><img src＝“1.jpg”/><span>平凡的世界</span><imgsrc＝“2.jpg”/><span>平凡的世界</span><img src＝“3.jpg”/><span>平凡的世界</span></div>。

而组件1中的正常数据子模板也匹配到[{src:“1.jpg”}，{src:“1.jpg”}，{src:“2.jpg”}]时，则与主模板合并后就得到：<div><img src＝“1.jpg”/><img src＝“2.jpg”/><img src＝“3.jpg”/></div>。

无论是组件1或者是组件2，如果在正常数据子模板中没有匹配大数据时，则会调用一个空数据子模板与主模板合并，得到<div><imgsrc＝“empty.jpg”/></div>；如果在请求合并或者在请求数据时出错，即出现异常情况，则会调用一个异常子模板与主模板合并，得到<div><img src＝“error.jpg”/></div>。

上述可视化页面制作方法的优点在于：解决现有技术对可视化页面制作中的个性化定制不足，无法方便地对同一类型页面定制不同的外观和交互行为的缺点。并且，在无匹配数据或者出现请求异常时还能调用相应的子模板与主模板合并，实现无数据和异常情况的HTML页面定制。

本发明还公开了一种可视化页面制作装置，包括以下模块：

模板合并请求模块：用于根据主模板预定义的模板合并标识发起合并子模板的请求；

数据匹配请求模块：用于根据子模板预定义的匹配标识向数据源中发起匹配相应数据的请求；

第一合并模块：用于匹配相应数据后结合子模板中的HTML格式生成正常数据子模板，并将正常数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

优选的，在数据匹配请求模块中还包括：若匹配相应数据成功，则执行第一合并模块，若数据源中没有相应数据，则执行第二合并模块；

第二合并模块：用于调用预设的空数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

优选的，在模板合并请求模块中还包括：若合并子模板的请求出错，则执行第三合并模块；在数据匹配请求模块中还包括：若匹配相应数据的请求出错，则执行第三合并模块；

第三合并模块：用于调用预设的异常子模板合并至主模板，结合主模板中的HTML格式生成完整页面。

优选的，在数据匹配请求模块中，数据源为JSON字符串。

对本领域的技术人员来说，可根据以上描述的技术方案以及构思，做出其它各种相应的改变以及形变，而所有的这些改变以及形变都应该属于本发明权利要求的保护范围之内。

Claims (8)

1.一种可视化页面制作方法，其特征在于，包括以下步骤：

S1：根据主模板预定义的模板合并标识发起合并子模板的请求；

S2：根据子模板预定义的匹配标识向数据源中发起匹配相应数据的请求；

S3：匹配相应数据后结合子模板中的HTML格式生成正常数据子模板，并将正常数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

2.根据权利要求1所述的可视化页面制作方法，其特征在于，在步骤S2中还包括：若匹配相应数据成功，则执行步骤S3，若数据源中没有相应数据，则执行步骤S4；

S4：调用预设的空数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

3.根据权利要求1所述的可视化页面制作方法，其特征在于，在步骤S1中还包括：若合并子模板的请求出错，则执行步骤S5；在步骤S2中还包括：若匹配相应数据的请求出错，则执行步骤S5；

S5：调用预设的异常子模板合并至主模板，结合主模板中的HTML格式生成完整页面。

4.根据权利要求1所述的可视化页面制作方法，其特征在于，在步骤S2中，数据源为JSON字符串。

5.一种可视化页面制作装置，其特征在于，包括以下模块：

模板合并请求模块：用于根据主模板预定义的模板合并标识发起合并子模板的请求；

数据匹配请求模块：用于根据子模板预定义的匹配标识向数据源中发起匹配相应数据的请求；

第一合并模块：用于匹配相应数据后结合子模板中的HTML格式生成正常数据子模板，并将正常数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

6.根据权利要求5所述的可视化页面制作装置，其特征在于，在数据匹配请求模块中还包括：若匹配相应数据成功，则执行第一合并模块，若数据源中没有相应数据，则执行第二合并模块；

第二合并模块：用于调用预设的空数据子模板合并至主模板中，结合主模板中的HTML格式生成完整页面。

7.根据权利要求5所述的可视化页面制作装置，其特征在于，在模板合并请求模块中还包括：若合并子模板的请求出错，则执行第三合并模块；在数据匹配请求模块中还包括：若匹配相应数据的请求出错，则执行第三合并模块；

第三合并模块：用于调用预设的异常子模板合并至主模板，结合主模板中的HTML格式生成完整页面。

8.根据权利要求5所述的可视化页面制作装置，其特征在于，在数据匹配请求模块中，数据源为JSON字符串。