一种HTML模板动态配置的控制方法及系统

(19)中华人民共和国国家知识产权局

(12)发明专利说明书

(21)申请号 CN2.X

(22)申请日 2016.03.15

(71)申请人 江苏中威科技软件系统有限公司

地址 226011 江苏省南通市崇川区工农路5号亚太大厦裙楼3层

(72)发明人 何中 陈甲伟 戴建峰 严伟 张龙 徐晓辉 薛炜 何登

(74)专利代理机构 北京驰纳智财知识产权代理事务所(普通合伙)

代理人 蒋路帆

(51)

(10)申请公布号 CN 105824787 A

(43)申请公布日 2016.08.03

权利要求说明书 说明书 幅图

(54)发明名称

一种HTML模板动态配置的控制方

法及系统

(57)摘要

本发明提供了一种HTML模板动态

配置的控制方法，包括步骤一：获取

HTML代码，使用模板标签替换需要设置

的属性；步骤二：根据步骤一中的模板标

签使用JSON结构文件创建配置属性；步

骤三：加载步骤二中设置的配置属性，循

环读取每个元素，进行界面绘制并绑定相

关事件；步骤四：进行属性配置选择时，

响应对应元素绑定的事件，调用相关方

法；步骤五：读取步骤一创建的模板，匹

配出其中的对应的内容,依次取出并到保存

的配置属性中去替换为对应的值。应用了

该方法的系统包括代码获取单元、JSON配

置属性单元、读取单元、事件代理器和界

面生成器。本发明添加简单，避免了操作

操作html和js，方便不熟悉编码的用户进

行配置模板配置属性。

法律状态

法律状态公告日

法律状态信息

法律状态

权 利 要 求 说 明 书

1.一种HTML模板动态配置的控制方法，其特征在于，包括如下步骤：

步骤一：根据用户指令创建或从目标网页拷贝一段HTML代码，使用模板标

步骤二：根据步骤一中的模板标签使用JSON结构文件创建配置属性；

步骤三：加载步骤二中设置的配置属性，循环读取每个元素，根据其属性进

步骤四：用户进行属性配置选择时，响应对应元素绑定的事件，调用相关方

步骤五：读取步骤一创建的模板，匹配出其中的对应的内容,依次取出并到

2.根据权利要求1所述的一种HTML模板动态配置的控制方法，其特征在于：所

(1)根据用户指令创建或从目标网页拷贝一段HTML代码；

(2)将其中需要设置的属性使用“{{}}”符号包裹起来，所述“{{}}”包

裹起来的内容为标签名。

述步骤一包括：

保存的配置属性中去替换为对应的值，完成配置操作。

法实现表单的关联调用、赋值和验证；

行界面绘制并绑定相关事件；

签替换需要设置的属性；

3.根据权利要求2所述的一种HTML模板动态配置的控制方法，其特征在于：所

4.根据权利要求1所述的一种HTML模板动态配置的控制方法，其特征在于：所

(1)依据步骤一设定模板中的模板标签，建立模板配置选项；

(2)根据不同的配置要求依次设定属性配置的默认值和可选值以及类型。

5.根据权利要求1所述的一种HTML模板动态配置的控制方法，其特征在于：所

(1)根据步骤二中配置属性的类型创建显示界面；

(2)根据步骤二中配置属性的选项名称设置配置项的显示名称；

(3)根据步骤二中配置属性的默认值设定配置项的默认值；

(4)根据步骤二中配置属性的可选值设定配置项的可选值。

述步骤三包括：

述步骤二包括：

述标签名为模板内的唯一标签名。

6.根据权利要求1所述的一种HTML模板动态配置的控制方法，其特征在于：所

述步骤四包括：用户在步骤三绘制的界面中点击配置项，并且检测可

空，如不为空则显示可选值选择界面，如为空则显示输

选值是否为

入界面。

7.根据权利要求1所述的一种HTML模板动态配置的控制方法，其特征在于：所

(1)读取步骤一设定的模板标签，匹配出模板标签中的标签名；

(2)依次读取配置项，获取其默认值，将该配置项的名称和默认值保存；

(3)读取步骤(1)获取的标签名，并将读取到的标签名与(2)中的名称

8.一种应用了如权利要求1所述的HTML模板动态配置的控制方法的系统，其特

征在于：包括配置文件、模板和规则引擎，所述模板分别与配置文件

连接。

交换。

述步骤五包括：

和规则引擎

9.根据权利要求8所述的一种HTML模板动态配置的控制系统，其特征在于：所

述模板内部设置有模板标签生成器。

10.根据权利要求8所述的一种HTML模板动态配置的控制系统，其特征在于：所

述规则引擎进行表单验证、关联检查、自动填充和多字段运算操作。

说 明 书

技术领域

本发明涉及互联网信息技术领域，尤其涉及一种HTML模板动态配置的控制

背景技术

模板网站是用已经成形的网站为框架进行套用，可以在后台进行设置网站的

一些信息，把这个网站改变成自己需要的网站信息，最为直接的就是一些网

供的自助建站和我们众所周知的博客，比如谷谷互联、中华网库专业

板，另外还有一些公司把自己公司已经设计好的网站进行一些

风格，网站名称等信息，但大致格式及里面的代码并未

版网站。他们最大的特点就是省时，省力，操作

网页框架，使用网页编辑软件将模板原有

布到自己的网站。而模板网站的模

作为基石的作用，并且影响

术，多半需要编码实

标签和

方法及系统。

站提

提供网站模

修改再套用如修改

改动，此网站也可叫作模

简单。网站模板就是已经做好的

的图片和文字替换成自己的内容，再发

板设置及创建在模板网站的运用过程中起到了

到后期模板动态配置的效率。现有html模板配置技

现，并且在添加多个配置选项时，需要创建多个html配置

javascript函数。同时配置属性多有编码人员进行配置，用户如需可视

化配置，还需开发可视化配置界面。并且大部分模板配置流程步骤多，专业

效率低。 性强，

例如中国专利CN104714989A公开的一种在浏览器中动态存取和可视化编辑

WEB页面的方法，该方法按照以下步骤进行的：A、服务器在可编辑页面

特定功能的脚本；B、客户端触发编辑事件；C、服务器响应

编辑的脚本代码；D、载入鼠标右键菜单系统；

建立无模式对话框体现的菜单窗口，通过

建立有

编辑事件，载入页面

载入鼠标事件和/或键盘事件；E、

获取窗口句柄，建立根据选中对象的类

的体系；F、删除用于将脚本载入本页面的代

型进行菜单窗口中菜单的自动切换

码，保持页面的原貌；G、

编辑完成的页面设置

辑，对于不同

性。

服务器将处理后的页面送到客户端的浏览器中；H、将

保存到网络或保存到本地。该方法通过脚本代码实现网页编

的网页属性不一的情况，该方法并不能完全适用，缺乏模板的通用

又例如中国专利CN101968817B公开的一种网页发布技术，具体的说是对静

步

态网页所使用的模板进行数据配置的方法。一种网页模板配置技术包括以下

骤：a通过模板导入，将网页模板的全部信息保存到数据库；b获得

置请求；c分析网页模板，解析模板中需要配置的组件，并生

界面；c保存模板的配置；e发布网页时，根据模板的

法中采用的动态模板采用编码实现需要创建多个

函数，对于非专业人员具有一定的难度，实现效

网页模板配

成对应的组件配置

配置生成网页结果。该方

html配置标签和javascript

率低。

发明内容

为克服现有技术中存在的HTML模板动态配置流程步骤多效率低的问题，本

一种HTML模板动态配置的控制方法，包括如下步骤：

步骤一：根据用户指令创建或从目标网页拷贝一段HTML代码，使用模板标

步骤二：根据步骤一中的模板标签使用JSON结构文件创建配置属性；

签替换需要设置的属性；

发明提供了一种HTML模板动态配置的控制方法及系统。

步骤三：加载步骤二中设置的配置属性，循环读取每个元素，根据其属性进

步骤四：用户进行属性配置选择时，响应对应元素绑定的事件，调用相关方

步骤五：读取步骤一创建的模板，匹配出其中的对应的内容,依次取出并到

进一步的，所述步骤一包括：

(1)根据用户指令创建或从目标网页拷贝一段HTML代码；

(2)将其中需要设置的属性使用“{{}}”符号包裹起来，所述“{{}}”包

的内容为标签名。

进一步的，所述标签名为模板内的唯一标签名。

进一步的，所述步骤二包括：

(1)依据步骤一设定模板中的模板标签，建立模板配置选项；

(2)根据不同的配置要求依次设定属性配置的默认值和可选值以及类型。

进一步的，所述步骤三包括：

(1)根据步骤二中配置属性的类型创建显示界面；

(2)根据步骤二中配置属性的选项名称设置配置项的显示名称；

裹起来

保存的配置属性中去替换为对应的值，完成配置操作。

法实现表单的关联调用、赋值和验证；

行界面绘制并绑定相关事件；

(3)根据步骤二中配置属性的默认值设定配置项的默认值；

(4)根据步骤二中配置属性的可选值设定配置项的可选值。

进一步的，所述步骤四包括：用户在步骤三绘制的界面中点击配置项，并且

检测可选值是否为空，如不为空则显示可选值选择界面，如为空则显示输入

界面。

进一步的，所述步骤五包括：

(1)读取步骤一设定的模板标签，匹配出模板标签中的标签名；

(2)依次读取配置项，获取其默认值，将该配置项的名称和默认值保存；

(3)读取步骤(1)获取的标签名，并将读取到的标签名与(2)中的名称

交换。

一种应用了所述的HTML模板动态配置的控制方法的系统，包括配置文件、

进一步的，所述模板内部设置有模板标签生成器。

进一步的，所述规则引擎进行表单验证、关联检查、自动填充和多字段运算

与现有技术相比，本发明的有益效果是：

(1)本发明配置模板配置属性基于JSON数据自动创建用户界面，可根据不

操作。

模板和规则引擎，所述模板分别与配置文件和规则引擎连接。

同的配置要求依次设定属性配置的默认值和可选值以及类型，添加简单，避

操作操作html和js，方便不熟悉编码的用户进行配置模板配置属性。

免了

(2)本发明配置模板配置可实现动态关联绑定，自动赋值、多属性计算赋

(3)本发明的系统的模板通过内部实现的模板标签生成器来帮助开发人员

屏蔽前端知识，使他们可以通过编写json文件来配置实现模板操作界面；

人员只需要做表单配置即可输出前端操作界面，也减去了前端开发工

值，无需采用编码人工赋值，使得模板配置过程更为简便。

开发

作。

(4)本发明的系统的系统自带规则引擎，可支持表单验证、关联检查和自

动填充、多字段运算等功能，无需编写js代码实现，

员操作。 实现过程简单方便开发人

附图说明

图1是本发明中HTML模板动态配置的控制方法的流程示意图。

具体实施方式

以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所

实施例1

如图1，本具体实施方式披露了一种HTML模板动态配置的控制方法，该方法

配置模板配置属性基于JSON数据自动创建用户界面，添加简单，无需操作

描述的具体实施例仅用以解释本发明，并不用于限定本发明。

HTML

值，并且

包括：

和js。配置模板配置可实现动态关联绑定，自动赋值、多属性计算赋

可实现自动化填充，渲染模板。如图去所示，本实施例的方法

步骤一：根据用户指令创建或从目标网页拷贝一段HTML代码，使用模板标

具体的，HTML代码的来源可以有多种形式，例如可以是用户粘贴板内的内容，

也可是用户导入的文本文档，用户手动输入的内容等。HTML代码及超文

语言(标准通用标记语言下的一个应用，外语缩写HTML)，是

应用最为广泛的语言，也是构成网页文档的主要语言。

组成的描述性文本，HTML命令可以说

等。HTML的结构包括头

览器所需的信息，而

有自己独立的

进行复

签替换需要设置的属性。

本标记

迄今为止网络上

HTML文本是由HTML命令

明文字、图形、动画、声音、表格、链接

部(Head)、主体(Body)两大部分，其中头部描述浏

主体则包含所要说明的具体内容。网站网页的每个网页上都

HTML代码页，用户可以根据自己的需要选择需要配置的网页代码

制粘贴；此外在制作网页的同时，也可以将HTML文本导出为文本格式，

在需要配置属性时将文本文档导入到系统中；另外也可通过系统内的文本输

具手动输入HTML代码 入工

作为优选的，本实施例中具体描述根据用户指令从目标网页拷贝一段HTML

代码的情形。将用户选择的内容复制，系统通过查找确认HTML代码中的

属性的字符，并将HTML代码中

包裹起来的内容为标

一的“标签名”。

可设置

需要设置的属性使用“{{}}”符号包裹起来，“{{}}”

签名，形式为{{标签名}}，其中“标签名”是模板文件中唯

步骤二：根据步骤一中的模板标签使用JSON结构文件创建配置属性。

具体的，现有html模板配置技术，多半需要编码实现，并且在添加多个配

有

置选项时，需要创建多个html配置标签和javascript函数。同时配置属性多

编码人员进行配置，用户如需可视化配置，还需开发可视化配置界面。

模板配置流程步骤多，专业性强，效率低。因此，在本发明实

属性的过程优化，采用JSON结构文件进行配置模板配

从而导致

施例中对创建配置

置属性。

其中采用的JSON结构文件的结构为：

[{label:’选项名称’,name:’标签名’,value:’选项默认

项可选值名称’,value:’选项可选值’}],plugin:’

项’,adjective:’赋值属性＝>赋值目标标签

值’,values:[{text:’选

选项类型’,related:’关联选

名’,enablenil:true,hide:true}]。

系统通过name进行属性和配置界面元素的绑定，通过value设定属性的默

过

作为优选的，可通过以下方法实现JSON结构文件创建配置属性，依据上一

步设定模板中的{{标签名}}，建立模板配置选项，其中模板配置选项的名称

“{{标签名}}”中的“标签名”。继而根据不同的配置要求依次设定属性

默认值(value)和可选值(values)以及类型(plugin)等内容。具体

属性具有关联属性需要配置related字段，其值为目标关联的

有动态赋值属性需要配置adjective字段，其值为『当

的结构。如允许属性可为空需配置

认值，通过values设置属性的可选值范围，通过plugin创建显示界面，通

related实现关联属性的绑定操作，通过adjective实现动态赋值,通过

enablenil检测属性是否可为空，通过hide决定元素是显示还是隐藏。

即是

配置的

的，如

标签名。如属性具

前属性名＝>目标标签名』

enablenil字段的值为true，否则属性必须

hide字段的值为true，否则元素显示并可操

有值。如元素需要隐藏，需要配置

作。

步骤三：加载步骤二中设置的配置属性，循环读取每个元素，根据其属性进

具体的，系统读取步骤二中生成配置属性项，每读取一个属性配置项，根据

plugin字段创建显示界面；根据label字段设置配置项的显示名称；根据

字段设定配置项的默认值；根据values字段设定配置项的可选值；

的id为name字段值。

行界面绘制并绑定相关事件。

value

设定配置项

优选的，显示界面的生成步骤包括：a、配置文件为数组结构，渲染器每次

取一项，并将指针移动到下一项位置。b、解析取到的配置项信息，检查

字段的值。plugin字段为界面控件类型字段，系统依据不同的值输出

面元素。界面组件包括form原生组件(textselect等)和扩展组

发内置)。c、将plugin对应的界面组件添加到显示视图中。d、

他属性进行相关操作，如设定显示或隐藏，默认值，事

a至所有项处理完成。

plugin

不同的界

件(预先开

根据该项的其

件关联等。e、执行步骤

作为优选的，还需要检测配置项的hide字段值是否为true，如为true这设

定配置项的样式属性display为none，进行配置项隐藏。检测配置项的

字段是否有值，如果有值则讲该字段加入系统的relateds事件代理器。

置项的adjective字段是否有值，如果有值则讲该字段加入系

事件代理器。重复以上过程直到所有配置属性项初始化

related

检测配

统的adjectives

完成，显示用户配置界面。

步骤四：用户进行属性配置选择时，响应对应元素绑定的事件，调用相关方

法实现表单的关联调用、赋值和验证。用户在步骤三创建的显示界面进行配

置操 作。用户点击配置项时，系统检测values字段是否为空，如不为空

值选择界面，如为空则显示输入界面。用户输入后，系统检测

为空，如不为空则调用系统的relateds事件代理器执行

联元素操作：设定目标配置项的显示操作。系统检测

如不为空则调用系统的adjectives事件代理器执

元素操作：将该配置项的属性值给定到目

则显示可选

related字段是否

relatedFn方法实现关

adjectives字段是否为空，

行adjectivesFn方法实现关联

标配置项的value属性值。

步骤五：读取步骤一创建的模板，匹配出其中的对应的内容,依次取出并到

具体的，用户在步骤四完成配置操作后，点击完成按钮后系统读取步骤一设

定的模板内容，匹配出里面的{{标签名}}项。系统依次读取配置项，获取其

值，并检测其enablenil字段是否为true，如不为true，同时value为

显示错误信息并提示用户修正错误

使用该配置项的name为

取的{{标签名}}，从

执行替换，直

完成操

保存的配置属性中去替换为对应的值，完成配置操作。

value

空，则

完成赋值，同时停止保存操作。如验证通过则

key，value为值加入到系统的result字段中。读取获

系统的result中通过key取值，并替换{{标签名}}。重复

到所有{{标签名}}替换完成。将配置后的模板保存到存储设备中，

作。

此外，渲染模板的过程是在用户配置完成后点击保存或预览的时候执行的，

分2步执行，首先会将模板标签和选择的配置项在解释引擎中进行计算和替

转化为最终的模板内容，接着系统调用接口将模板传递给处理系统，

回来的html内容，将结果渲染给用户查看。

换，

并接受返回

实施例2

本具体实施方式披露了一种应用了实施例1中的HTML模板动态配置的控制

具体的，系统包括配置文件、模板和规则引擎，模板分别与配置文件和规则

本具体实施例中的系统是一套模板创建和生成工具，主要是通过配置文件来

创建和生成模板文件，并发布为html内容。系统的模板通过内部实现的模

签生成器来帮助开发人员屏蔽前端知识，使他们可以通过编写json

实现模板操作界面；开发人员只需要做表单配置即可输出前端

了前端开发工作。系统自带规则引擎，可支持表单验证、

多字段运算等功能，无需编写js代码实现。

引擎连接，模板内部设置有模板标签生成器。

方法的系统。

板标

文件来配置

操作界面，也减去

关联检查和自动填充、

上述说明示出并描述了本发明的优选实施例，如前所述，应当理解本发明并

非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各

他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述

领域的技术或知识进行改动。而本领域人员所进行的改动和变

精神和范围，则都应在本发明所附权利要求的保护范围

种其

教导或相关

化不脱离本发明的

内。