一种可视化生成网页模板的方法及系统的制作方法
【专利摘要】本发明提供了一种可视化生成网页模板的方法，包括以下步骤：步骤1：定义多个基准组件并分类后保存在服务器中；步骤2：客户端从服务器获取组件，并插入当前编辑页面；步骤3：设置组件数据来源，保存生成模板代码；步骤4：填充数据生成网页模板。与之相对应的，本发明还提供了一种可视化生成网页模板的系统，解决了开发效率低下，网页模板修改更新耗时长，准确率不高的问题，另外本发明通过纯拖拽、可视化编辑网页模板，所见即所得，简单易用，通过定义多个基准组件和基准组件的分类能够实现批量替换，开发效率高，缩短了网页制作的流程，且后期易维护，大大降低了网页模板制作的时间和出错的可能性。
【专利说明】
一种可视化生成网页模板的方法及系统
技术领域
[0001]本发明涉及信息技术领域，尤其涉及一种可视化生成网页模板的方法及系统。
【背景技术】
[0002]目前网站网页模板，大多采用动态语言或者模板标签技术，动态语言如asp、jsp等，这个一般需要专业人员才能掌握，而模板标签技术，一般是freemarker、velocity等，这类技术也需要一定的学习成本。而且模板制作过程中，无法立马看到效果，无法所见即所得，大多数网站制作时，都需要预先制作好模板，遇到模板需要修改的问题，还需要由前端人员进行重新切图，导致开发效率低下。
[0003]如申请号:2010101516 7 8.1的中国专利公开了一种网页制作的方法，该方法包括:客户端向服务端请求获取预设的组件;服务端保存有预设的组件配置文件，根据客户端的请求向其返回所请求的组件;客户端将获取的组件插入当前编辑的页面，对所述组件进行参数配置并将配置后的参数通知服务端;服务端接收客户端发来的配置后的组件参数并进行同步更新，对参数更新后的组件进行解析生成该组件当前对应的具有可视化效果的html代码并返回给客户端，客户端利用自身所在的网页开发工具中包含的浏览器插件即时获得所述组件的可视化效果;客户端将所述组件与网页中的固定内容组合得到完成的网页模板。该申请客户端需要安装浏览器插件，而组件需要更新时，需要修改插件，使用不便。
[0004]又如申请号为:200810110094.2的中国专利公开了一种在线、实时及自动生成动态网页的组件实现技术，其中组件是指实现动态网页中特定功能所需的资源集合，在所见即所得网页设计窗口中，组件用具有特定标识的浏览器控件表示并显示为块状图形，能够插入、删除、剪切、拷贝、粘贴组件，可以通过设置组件的参数及选项来定制组件的链接、功能、CSS样式、位置、大小及动态信息接口等。在网页设计窗口中编辑好原始网页信息并提交时，服务器系统自动进行扫描、分析及编译，并在相应的存储位置生成具有预期功能的动态网页文件。编辑的原始网页信息被存放到数据库中，可以下次调出来修改并重新生成动态网页。采用组件可以生成框架，框架实现了若干网页共有的内容，使用同一框架的网页具有相同的总体内容及风格。该申请使用时无法批量更新，如果想要修改或者更新网页布局，需要重新修改网页模板，耗时费力，同时不能保证修改的正确性，会导致重复性工作，开发效率不高。
【发明内容】
[0005]为克服现有技术中存在的开发效率低，网页模板更新时不能批量替换等问题，本发明提供了一种可视化生成网页模板的方法及系统。
[0006]具体技术方案如下:
[0007]—种可视化生成网页模板的方法，
[0008]步骤1:定义多个基准组件并分类后保存在服务器中；
[0009]步骤2:客户端从服务器获取组件，并插入当前编辑页面；
[0010]步骤3:设置组件数据来源，保存生成模板代码；
[0011]步骤4:填充数据生成网页模板。
[0012]在此基础上，所述步骤I中多个基准组件通过定义分类属性进行分类，包括导航栏基准组件、内容块基准组件和幻灯片基准组件。
[0013]在此基础上，所述基准组件还包括布局基准组件，所述布局基准组件包括多个内容块，所述内容块均设置有名称。
[0014]在此基础上，多个所述基准组件均设置有多个普通组件，所述普通组件包括基准组件的所有基本属性，所述基本属性包括组件的宽度、组件的高度和组件的扩展属性，所述基本属性均为独立属性。
[0015]在此基础上，所述基准组件的基本属性、组件名字和组件代码均分别存入服务器数据库的不同字段。
[0016]在此基础上，所述步骤2中具体步骤包括:
[0017]步骤21:客户端向服务器提出获取组件请求；
[0018]步骤22:服务器判断请求是否合理，若合理则通过获取请求，若不合理则视为无效请求。
[0019]在此基础上，所述步骤3的具体步骤包括:
[0020]步骤31:确定动态组件内容并获取数据来源；
[0021 ]步骤32:将数据来源自定义后分配至各个组件；
[0022]步骤33:保存生成模板代码。
[0023]在此基础上，所述步骤4的具体步骤为:
[0024]步骤41:根据各个组件中的数据来源从数据库获取数据；
[0025]步骤42:填充各个组件的内容；
[0026]步骤43:保存组件中的内容并发布，生成整个网页。
[0027]本发明还提供了一种可视化生成网页模板的系统，包括客户端和服务器，所述客户端与服务器相连用于交互信息数据，所述服务器包括组件定义模块、组件获取模块、组件数据填充模块、组件预览模块，
[0028]所述客户端，用于向服务器获取组件，并将组件插入到当前页面；
[0029]所述组件定义模块，用于定义多个基准组件，并对组件进行参数配置；
[0030]所述组件获取模块，用于接收客户端的请求，获取相应的组件；
[0031]所述组件数据填充模块，用于确定组件的动态内容并获取数据来源后填充网页；
[0032]所述组件预览模块，用于网页发布前的页面预览。
[0033]在此基础上，所述组件获取模块还包括判断模块，所述判断模块用于判断客户端的获取请求是否有效。
[0034]与现有技术相比，本发明的有益效果是:
[0035]1、本发明一种可视化生成网页模板的方法，包括定义多个基准组件并分类后保存在服务器中；客户端从服务器获取组件，并插入当前编辑页面;设置组件数据来源，保存生成模板代码;填充数据生成网页模板。解决了开发效率低下，网页模板修改更新耗时长，准确率不高的问题，另外本发明通过纯拖拽、可视化编辑网页模板，所见即所得，简单易用，通过定义多个基准组件和基准组件的分类能够实现批量替换，开发效率高，缩短了网页制作的流程，且后期易维护，大大降低了网页模板制作的时间和出错的可能性。
[0036]2、本发明中多个基准组件均设置有多个普通组件，普通组件包括基准组件的所有基本属性，基本属性包括组件的宽度、组件的高度和组件的扩展属性，基本属性均为独立属性，且基准组件的基本属性、组件名字和组件代码均分别存入服务器数据库的不同字段，方便批量修改和更新，开发效率高，且预留有扩展属性，使得网页模板的开发前景更加广阔和具有特色。
[0037]3、本发明中服务器判断请求是否合理，若合理则通过获取请求，若不合理则视为无效请求，减少了网页模板制作过程中的重复劳动，保证了开发效率和有效性。
[0038]4、本发明还提供了一种可视化生成网页模板的系统，超链接提前预览的方法和技术，可以在不打开超链接页面的情况下，直接预览到超链接页面的快照，所见即所得，纯拖拽和可视化编辑简单易用，批量替换，开发效率高。
【附图说明】
[0039]图1是本发明一种可视化生成网页模板的方法的流程示意图；
[0040]图2是本发明导航栏基准组件的类型示意图；
[0041 ]图3是本发明列表类基准组件的类型示意图；
[0042]图4是本发明布局基准组件的类型示意图；
[0043]图5是本发明一种可视化生成网页模板的系统的结构示意图。
【具体实施方式】
[0044]以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
[0045]本发明披露了一种可视化生成网页模板的方法，如图1所示，具体步骤如下:
[0046]步骤1:定义多个基准组件并分类后保存在服务器2中；优选地，基准组件可以设置有多个，如导航栏基准组件、内容块基准组件、幻灯片基准组件和列表类基准组件等，如图2所示，为导航栏基准组件的类型示意图，从左至右依次为透明导航、侧边导航、静态导航(一)和静态导航(二)。导航栏可以为单个内容块，也可以为多个内容块的不同组合，在使用过程中若有需求可继续增加，并对之前已有的基准组件无影响。如图3所示，为列表类基准组件的类型示意图，从左至右依次为纯图片列表、列表单栏目双栏目信息和列表双栏目，所有基准组件都可以按照需求进行排布后生成多个普通组件。优选地，步骤I中多个基准组件通过定义分类属性进行分类，如导航栏基准组件、内容块基准组件和幻灯片基准组件的分类方法依次为〈ul true=，，list，，X/ul>，〈ul true=，，list_titlelist，，X/ul>，〈ul true=” list-columnlist”>〈/ul>。每个组件都一段标准的代码，在定义过程中规定Iist-titlelist和list-columnlist都继承自list，并且每个字段都分别存入数据库，在某个类型的组件需要更新时，可以更新不同类型“list”、“Iist-titie”或“listlist-columnlist”开头所有组件的属性，可以实现整个类型的同步修改。相同类型的组件，结构相同，相似类型的组件，结构也类似。
[0047]优选地，基准组件还包括布局基准组件，布局基准组件包括多个内容块，所述内容块均设置有名称。可以定义每个布局的属性，如宽、高、间距等，每个内容块均可以定义一个名称，如:<div truename =”导航” ></div>，使用一定的名称来管理各个布局中的内容块，可以在修改的过程中进行批量替换该同一个名称的内容块，加快了工作效率，且保证了正确性，如网站设置有多个模板，每个模板均设置有导航，但需要同时更换或者更新一个网站上的所有导航，则可以更新布局中所有名称为导航的部件，将原有的导航组件替换为新的导航组件。如图4所示为布局基准组件的类型示意图，从左至右布局页面的比例分别为1:3、3:1、1:1和1:1:2，布局页面比例还可以为1、1:1:1、1:1:1:1等比例，布局页面比例不局限所列举的比例，可以根据用户需求将页面进行不同比例的分离，以适应不同版式，同时可以设置布局基准组件的信息，如布局高度、边距设置、背景色和背景图等。
[0048]多个所述基准组件均设置有多个普通组件，普通组件包括基准组件的所有基本属性，基本属性包括组件的宽度、组件的高度和组件的扩展属性，基本属性均为独立属性。所述扩展属性用于以后的升级扩展，如若支持动画效果，即可将某个基准组件的扩展属性中增设支持动画效果，所有继承该基准组件的普通组件均可以支持动画效果，无须每个组件逐一修改，方便快捷且准确无误。优选地，基准组件的基本属性、组件名字和组件代码均分别存入服务器2数据库的不同字段，当组件更新时，可以更新某个字段的内容。组件属性可以在实际使用过程中进行调整，以适应不同的网页模板要求。组件属性的设置信息包括部件参数设置和参数样式设置，其中部件参数设置包括:所属站点、栏目名称、信息数量、标题长度、时间格式、项目符号和底部线条，基本样式设置包括:部件宽度和高度等，即用户可以通过需求选择一个较为符合的基准组件，同时可以对基准组件内部进行适当调整，以体现不同网页模板的特色，本发明不局限于相同基准组件的重复组合，可以针对基准组件进行二次调整。
[0049]步骤2:客户端I从服务器2获取组件，并插入当前编辑页面;步骤2中具体步骤包括:步骤21:客户端I向服务器2提出获取组件请求;步骤22:服务器2端判断请求是否合理，若合理则通过获取请求，允许客户端I拖拽基准组件在网页上进行排布，若不合理则视为无效请求。判断要求包括:是否在同一区域选择同一种基准组件，如在网页某一区域选择导航栏基准组件，客户端I再次请求服务器2获取同一导航栏基准组件放在相同区域，则服务器2视为无效操作;是否在基准组件内部嵌入同一基本组件，如在透明导航栏基准组件中客户端I请求获取导航栏基准组件再次嵌入透明导航栏内，则服务器2视为无效操作;是否在低等级基准组件中插入高等级基准组件，优选地，布局基准组件、导航栏基准组件、列表基准组件、内容块基准组件和幻灯片基准组件的登记依次降低，如在导航栏基准组件中插入布局基准组件等，均被服务器2视为无效操作;是否当客户端I向服务器2请求基准组件时，若网页中已有组件已经布满区域或超过该基准组件的放置区域，则服务器2视为无效操作等判断要求，该判断要求不唯一，可以在实际过程中进行增删与修改。
[0050]步骤3:设置组件数据来源，保存生成模板代码;步骤3的具体步骤包括:步骤31:确定动态组件内容并获取数据来源;步骤32:将数据来源自定义后分配至各个组件;步骤33:保存生成模板代码。由于组件设置数据来源，很多组件的内容均是动态的，如标题列表基准组件，数据一般来源于网站的某个栏目，如娱乐新闻，获取数据来源的方式不固定，可以通过freemarker的自定义的指令实现，也可以通过超链接等方式，优选地，本发明中使用freemarker来自定义组件的数据来源，实现方式如下:〈@cmslist Imxx = 〃站点简称，栏目简称〃 count = 〃条数〃 order = 〃排序号〃has Img = 〃l〃begin=” 起始行数”〉
[0051]<#list messageMap as nr>
[0052]<!—.信息标题${ (nr.msgAll.msgTitle) !，，}，
[0053]信息路径${(nr.msgAll.htmlPath)!” },
[0054]图片路径${(nr.msgAll.headlmg)!” },
[0055]发布日期${(nr.msgAll.releaseTime)!” },
[0056]发布人员${(nr.msgAll.author)!” }—>
[0057]</#list>
[0058]</icmslist>
[0059]通过freemarker的自定义指令可以减少通过打开超链接的页面预览的时间，可以直接预览到超链接页面的快照，方便快捷。
[0060]步骤4:填充数据生成网页模板。步骤4的具体步骤为:步骤41:根据各个组件中的数据来源从数据库获取数据;步骤42:填充各个组件的内容;步骤43:保存组件中的内容并发布，生成整个网页。
[0061 ]本发明解决了开发效率低下，网页模板修改更新耗时长，准确率不高的问题，另外本发明通过纯拖拽、可视化编辑网页模板，所见即所得，简单易用，通过定义多个基准组件和基准组件的分类能够实现批量替换，开发效率高，缩短了网页制作的流程，且后期易维护，大大降低了网页模板制作的时间和出错的可能性。
[0062]本发明还提供了一种可视化生成网页模板的系统，如图5所示，包括客户端I和服务器2，客户端I与服务器2相连用于交互信息数据，服务器2包括组件定义模块21、组件获取模块22、组件数据填充模块23、组件预览模块24，客户端I，用于向服务器2端获取组件，并将组件插入到当前页面;组件定义模块21，用于定义多个基准组件，并对组件进行参数配置；组件获取模块22，用于接收客户端I的请求，获取相应的组件;组件数据填充模块23，用于确定组件的动态内容并获取数据来源后填充网页;组件预览模块24，用于网页发布前的页面预览。优选地，组件获取模块22还包括判断模块，判断模块用于判断客户端I的获取请求是否有效。
[0063]工作过程:首先通过服务器2中的定义模块21定义不同类型和不同大小的基准组件并保存，供客户端I选择;客户端I向服务器2提出基准组件需求，服务器2中的判断模块判断客户端I的需求是否为有效请求，若有效则通过组件获取模块22从数据库中调取相应的基准组件，客户端I直接通过拖拽至指定地点进行网页布局，期间进行基准组件的属性设置和调整;通过组件数据填充模块23确定动态内容和数据来源，并从数据库调取相关数据填充基准组件，最后通过组件预览模块24进行现有的基准组件预览，若没有改动则进行保存，发布网页。当网页中的部分基准组件需要更新时，可以在组件定义模块21中提取该类型的基准组件进行更新后发布。
[0064]本发明提供了超链接提前预览的方法和技术，可以在不打开超链接页面的情况下，直接预览到超链接页面的快照，所见即所得，纯拖拽和可视化编辑简单易用，批量替换，开发效率高。
[0065]上述说明示出并描述了本发明的优选实施例，如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。
【主权项】
1.一种可视化生成网页模板的方法，其特征在于: 步骤1:定义多个基准组件并分类后保存在服务器(2)中； 步骤2:客户端(I)从服务器(2)获取组件，并插入当前编辑页面； 步骤3:设置组件数据来源，保存生成模板代码； 步骤4:填充数据生成网页模板。2.根据权利要求1所述的一种可视化生成网页模板的方法，其特征在于:所述步骤I中多个基准组件通过定义分类属性进行分类，包括导航栏基准组件、内容块基准组件和幻灯片基准组件。3.根据权利要求2所述的一种可视化生成网页模板的方法，其特征在于:所述基准组件还包括布局基准组件，所述布局基准组件包括多个内容块，所述内容块均设置有名称。4.根据权利要求3所述的一种可视化生成网页模板的方法，其特征在于:多个所述基准组件均设置有多个普通组件，所述普通组件包括基准组件的所有基本属性，所述基本属性包括组件的宽度、组件的高度和组件的扩展属性，所述基本属性均为独立属性。5.根据权利要求4所述的一种可视化生成网页模板的方法，其特征在于:所述基准组件的基本属性、组件名字和组件代码均分别存入服务器(2)数据库的不同字段。6.根据权利要求1所述的一种可视化生成网页模板的方法，其特征在于:所述步骤2中具体步骤包括: 步骤21:客户端(I)向服务器(2)提出获取组件请求； 步骤22:服务器(2)判断请求是否合理，若合理则通过获取请求，若不合理则视为无效请求。7.根据权利要求1所述的一种可视化生成网页模板的方法，其特征在于:所述步骤3的具体步骤包括: 步骤31:确定动态组件内容并获取数据来源； 步骤32:将数据来源自定义后分配至各个组件； 步骤33:保存生成模板代码。8.根据权利要求1所述的一种可视化生成网页模板的方法，其特征在于:所述步骤4的具体步骤为: 步骤41:根据各个组件中的数据来源从数据库获取数据； 步骤42:填充各个组件的内容； 步骤43:保存组件中的内容并发布，生成整个网页。9.一种可视化生成网页模板的系统，其特征在于:包括客户端(I)和服务器(2)，所述客户端(I)与服务器(2)相连用于交互信息数据，所述服务器(2)包括组件定义模块(21)、组件获取模块(22)、组件数据填充模块(23)、组件预览模块(24)， 所述客户端(I)，用于向服务器(2)获取组件，并将组件插入到当前页面； 所述组件定义模块(21)，用于定义多个基准组件，并对组件进行参数配置； 所述组件获取模块(22)，用于接收客户端(I)的请求，获取相应的组件； 所述组件数据填充模块(23)，用于确定组件的动态内容并获取数据来源后填充网页； 所述组件预览模块(24)，用于网页发布前的页面预览。10.根据权利要求9所述的一种可视化生成网页模板的系统，其特征在于:所述组件获取模块(22)还包括判断模块，所述判断模块用于判断客户端(I)的获取请求是否有效。
【文档编号】G06F17/24GK106096049SQ201610494224
【公开日】2016年11月9日
【申请日】2016年6月29日
【发明人】何中, 张安兵, 严伟, 戴建峰, 徐晓辉, 巢振军, 汤佳杰
【申请人】江苏中威科技软件系统有限公司