CN105824787A - 一种html模板动态配置的控制方法及系统 - Google Patents

Abstract

本发明提供了一种HTML模板动态配置的控制方法，包括步骤一：获取HTML代码，使用模板标签替换需要设置的属性；步骤二：根据步骤一中的模板标签使用JSON结构文件创建配置属性；步骤三：加载步骤二中设置的配置属性，循环读取每个元素，进行界面绘制并绑定相关事件；步骤四：进行属性配置选择时，响应对应元素绑定的事件，调用相关方法；步骤五：读取步骤一创建的模板，匹配出其中的对应的内容,依次取出并到保存的配置属性中去替换为对应的值。应用了该方法的系统包括代码获取单元、JSON配置属性单元、读取单元、事件代理器和界面生成器。本发明添加简单，避免了操作操作html和js，方便不熟悉编码的用户进行配置模板配置属性。

Description

一种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模板动态配置的控制方法，包括如下步骤：

步骤一：根据用户指令创建或从目标网页拷贝一段HTML代码，使用模板标签替换需要设置的属性；

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

步骤三：加载步骤二中设置的配置属性，循环读取每个元素，根据其属性进行界面绘制并绑定相关事件；

步骤四：用户进行属性配置选择时，响应对应元素绑定的事件，调用相关方法实现表单的关联调用、赋值和验证；

步骤五：读取步骤一创建的模板，匹配出其中的对应的内容,依次取出并到保存的配置属性中去替换为对应的值，完成配置操作。

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

(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:’选项默认值’,values:[{text:’选项可选值名称’,value:’选项可选值’}],plugin:’选项类型’,related:’关联选项’,adjective:’赋值属性＝>赋值目标标签名’,enablenil:true,hide:true}]。

系统通过name进行属性和配置界面元素的绑定，通过value设定属性的默认值，通过values设置属性的可选值范围，通过plugin创建显示界面，通过related实现关联属性的绑定操作，通过adjective实现动态赋值,通过enablenil检测属性是否可为空，通过hide决定元素是显示还是隐藏。

作为优选的，可通过以下方法实现JSON结构文件创建配置属性，依据上一步设定模板中的{{标签名}}，建立模板配置选项，其中模板配置选项的名称即是“{{标签名}}”中的“标签名”。继而根据不同的配置要求依次设定属性配置的默认值(value)和可选值(values)以及类型(plugin)等内容。具体的，如属性具有关联属性需要配置related字段，其值为目标关联的标签名。如属性具有动态赋值属性需要配置adjective字段，其值为『当前属性名＝>目标标签名』的结构。如允许属性可为空需配置enablenil字段的值为true，否则属性必须有值。如元素需要隐藏，需要配置hide字段的值为true，否则元素显示并可操作。

步骤三：加载步骤二中设置的配置属性，循环读取每个元素，根据其属性进行界面绘制并绑定相关事件。

具体的，系统读取步骤二中生成配置属性项，每读取一个属性配置项，根据plugin字段创建显示界面；根据label字段设置配置项的显示名称；根据value字段设定配置项的默认值；根据values字段设定配置项的可选值；设定配置项的id为name字段值。

优选的，显示界面的生成步骤包括：a、配置文件为数组结构，渲染器每次取一项，并将指针移动到下一项位置。b、解析取到的配置项信息，检查plugin字段的值。plugin字段为界面控件类型字段，系统依据不同的值输出不同的界面元素。界面组件包括form原生组件(text\select等)和扩展组件(预先开发内置)。c、将plugin对应的界面组件添加到显示视图中。d、根据该项的其他属性进行相关操作，如设定显示或隐藏，默认值，事件关联等。e、执行步骤a至所有项处理完成。

作为优选的，还需要检测配置项的hide字段值是否为true，如为true这设定配置项的样式属性display为none，进行配置项隐藏。检测配置项的related字段是否有值，如果有值则讲该字段加入系统的relateds事件代理器。检测配置项的adjective字段是否有值，如果有值则讲该字段加入系统的adjectives事件代理器。重复以上过程直到所有配置属性项初始化完成，显示用户配置界面。

步骤四：用户进行属性配置选择时，响应对应元素绑定的事件，调用相关方法实现表单的关联调用、赋值和验证。用户在步骤三创建的显示界面进行配置操作。用户点击配置项时，系统检测values字段是否为空，如不为空则显示可选值选择界面，如为空则显示输入界面。用户输入后，系统检测related字段是否为空，如不为空则调用系统的relateds事件代理器执行relatedFn方法实现关联元素操作：设定目标配置项的显示操作。系统检测adjectives字段是否为空，如不为空则调用系统的adjectives事件代理器执行adjectivesFn方法实现关联元素操作：将该配置项的属性值给定到目标配置项的value属性值。

步骤五：读取步骤一创建的模板，匹配出其中的对应的内容,依次取出并到保存的配置属性中去替换为对应的值，完成配置操作。

具体的，用户在步骤四完成配置操作后，点击完成按钮后系统读取步骤一设定的模板内容，匹配出里面的{{标签名}}项。系统依次读取配置项，获取其value值，并检测其enablenil字段是否为true，如不为true，同时value为空，则显示错误信息并提示用户修正错误完成赋值，同时停止保存操作。如验证通过则使用该配置项的name为key，value为值加入到系统的result字段中。读取获取的{{标签名}}，从系统的result中通过key取值，并替换{{标签名}}。重复执行替换，直到所有{{标签名}}替换完成。将配置后的模板保存到存储设备中，完成操作。

此外，渲染模板的过程是在用户配置完成后点击保存或预览的时候执行的，分2步执行，首先会将模板标签和选择的配置项在解释引擎中进行计算和替换，转化为最终的模板内容，接着系统调用接口将模板传递给处理系统，并接受返回回来的html内容，将结果渲染给用户查看。

实施例2

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

具体的，系统包括配置文件、模板和规则引擎，模板分别与配置文件和规则引擎连接，模板内部设置有模板标签生成器。

本具体实施例中的系统是一套模板创建和生成工具，主要是通过配置文件来创建和生成模板文件，并发布为html内容。系统的模板通过内部实现的模板标签生成器来帮助开发人员屏蔽前端知识，使他们可以通过编写json文件来配置实现模板操作界面；开发人员只需要做表单配置即可输出前端操作界面，也减去了前端开发工作。系统自带规则引擎，可支持表单验证、关联检查和自动填充、多字段运算等功能，无需编写js代码实现。

上述说明示出并描述了本发明的优选实施例，如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (10)

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模板动态配置的控制系统，其特征在于：所述规则引擎进行表单验证、关联检查、自动填充和多字段运算操作。