CN117075892A - 可视化页面生成方法以及可视化模板编辑器 - Google Patents

Abstract

本申请涉及一种可视化页面生成方法以及可视化模板编辑器。该可视化页面生成方法包括：容器创建步骤，利用可视化模板编辑器在页面中添加容器，以构成页面的布局格式；单元创建步骤，在所述容器中利用所述可视化模板编辑器创建单元并且用于进行数据设置和样式设置以生成页面；以及页面发布步骤，发布生成的所述页面，其中，所述可视化模板编辑器至少包括：可视化搭建组件模块，至少用于设置容器和单元；以及可视化组件设置模块，至少用于设置单元的数据和样式。根据本发明，能够提供一种更新灵活且兼容性强的可视化页面生成方法以及可视化模板编辑器。

Description

可视化页面生成方法以及可视化模板编辑器

技术领域

本申请涉及页面编辑技术，具体而言，涉及一种可视化页面生成方法以及可视化模板编辑器。

背景技术

现有技术中企业端客户服务页面的模板制作以及生成静态页面的技术主要有以下三种：

(1)：使用XML来保存数据，使用XSL来定义模板，通过XSL在客户端或者服务端显示数据并生成静态页面。

(2)：使用工具生成html格式的模板，在需要添加格式的地方加入特殊标记，动态生成文件时利用代码读取此模板，然后获得前台输入的内容，添加到此模板的标记位置中，生成新文件名后写入磁盘，写入后再向数据库中写入相关数据。

(3)：直接编写html静态文件填充静态数据以及组织数据展现样式，编写后将文件写入磁盘。

在上述(1)中，使用XML来保存数据，使用XSL来定义模板，需要学习更多的知识点，专业性较高，不易入门。在上述(2)中，在需要添加格式的地方加入特殊标记，动态生成文件时利用代码读取此模板，需要使用硬编码的方式，工作量非常大，需要非常多的html代码，调试困难，而且使用硬编码生成的html样式无法修改，如果网站更换样式，必须得重新编码，给后期带来巨大的工作量。在上述(3)中，由前端开发直接编写html静态文件填充静态数据以及组织数据展现样式的方式，弊端与以上两种方式弊端一致，专业性高，不易入门，html代码量巨大并且网站更换样式，需重新编码，后期维护不便。

发明内容

本发明为了消除上述一项或者多项问题，提供一种更新灵活且兼容性强的可视化页面生成方法以及可视化模板编辑器。

本发明一方面的可视化页面生成方法，其特征在于，包括：

容器创建步骤，利用可视化模板编辑器在页面中添加容器，以构成页面的布局格式；

单元创建步骤，在所述容器中利用所述可视化模板编辑器创建单元并且用于进行数据设置和样式设置以生成页面；以及

页面发布步骤，发布生成的所述页面，

其中，所述可视化模板编辑器至少包括：

可视化搭建组件模块，至少用于设置容器和单元；以及

可视化组件设置模块，至少用于设置单元的数据和样式。

可选地，所述容器创建步骤包括：

利用可视化模板编辑器在页面中添加容器；以及

设置容器的样式以构成页面的布局格式。

可选地，所述设置容器的样式包括以下的一项或者多项：

设置背景色、设置背景图片、设置容器边框以及设置字体属性。

可选地，所述设置容器的样式进一步包括：

对于容器设置名称。

可选地，所述利用可视化模板编辑器在页面中添加容器包括：

利用所述可视化模板编辑器向页面中拖拽入要选择的容器。

可选地，所述单元创建步骤包括：

在所述容器中利用所述可视化模板编辑器创建单元；

设置单元的数据；以及

设置单元的样式。

可选地，所述在所述容器中利用所述可视化模板编辑器创建单元包括：

利用所述可视化模板编辑器向所述容器中拖拽入要选择的单元。

可选地，所述拖拽通过以下方式实现：

监听按下鼠标按钮事件，基于按下鼠标按钮事件以触发克隆当前节点，并获取当前节点的索引；

监听鼠标移动事件，基于鼠标移动事件修改克隆节点位置，并根据移动的索引获取拖拽节点数据存储并从数组中删除拖拽节点数据；以及

监听释放鼠标按钮事件，基于根据鼠标释放位置获取当前位置的索引插入移动节点的数据。

可选地，在所述单元创建步骤和所述页面发布步骤之间进一步包括：

页面预览步骤，预览生成的所述页面。

可选地，在所述页面发布步骤之后进一步包括：

解析所述生成的页面，得到页面模板；以及

解析所述页面模板生成并发布静态html文件。

本发明一方面的可视化模板编辑器，其特征在于，包括：

可视化搭建组件模块，至少用于设置容器和单元；以及

可视化组件设置模块，至少用于进行数据设置和样式设置。

可选地，进一步包括：

可视化代码生成模块，用于生成页面模板并且用于解析页面模板生成代码；以及

可视化管理模块，包括存储和管理页面模板的可视化模板库以及存储和管理单元的样式的可视化样式库。

可选地，所述可视化代码生成模块包括：

用于生成页面模板的模板生成子模块；以及

用于解析所述模板生成子模块生成的页面模板获得代码的模块解析子模块。

可选地，所述可视化搭建组件模块进一步用于设置单元层组。

可选地，所述可视化组件设置模块进一步用于页面设置。

本发明一方面的计算机可读介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述的可视化页面生成方法。

本发明一方面的计算机设备，包括存储模块、处理器以及存储在存储模块上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述的可视化页面生成方法。

根据本发明的可视化页面生成方法以及可视化模板编辑器，能够以可视化的方式进行页面编辑，能够兼容各种尺寸的显示设备，在服务内容有调整时无需重新建设页面，只需要在原有模板的基础上进行更新即可实现，方便灵活，而且发布效率高，实现发布即展现。

附图说明

从结合附图的以下详细说明中，将会使本申请的上述和其他目的及优点更加完整清楚，其中，相同或相似的要素采用相同的标号表示。

图1是表示本公开实施例的可视化页面生成方法的概要流程图。

图2是表示拖拽单元样式的一个实现方式的示例。

图3是表示本公开实施例的可视化模板编辑器一个示例的示意图。

具体实施方式

下面介绍的是本发明的多个实施例中的一些，旨在提供对本发明的基本了解。并不旨在确认本发明的关键或决定性的要素或限定所要保护的范围。

出于简洁和说明性目的，本文主要参考其示范实施例来描述本发明的原理。但是，本领域技术人员将容易地认识到，相同的原理可等效地应用于所有类型的可视化页面生成方法以及可视化模板编辑器，并且可以在其中实施这些相同的原理以及任何此类变化不背离本专利申请的真实精神和范围。

而且，在下文描述中，参考了附图，这些附图图示特定的示范实施例。在不背离本发明的精神和范围的前提下可以对这些实施例进行电、机械、逻辑和结构上的更改。此外，虽然本发明的特征是结合若干实施/实施例的仅其中之一来公开的，但是如针对任何给定或可识别的功能可能是期望和/或有利的，可以将此特征与其他实施/实施例的一个或多个其他特征进行组合。因此，下文描述不应视为在限制意义上的，并且本发明的范围由所附权利要求及其等效物来定义。

诸如“具备”和“包括”之类的用语表示除了具有在说明书和权利要求书中有直接和明确表述的单元(模块)和步骤以外，本发明的技术方案也不排除具有未被直接或明确表述的其它单元(模块)和步骤的情形。

在说明本公开实施例的服务页面生成方法之前，对于将要出现的一些技术用语进行说明。

(1)XML(Extensible Markup Language，可扩展标记语言)

XML是标准通用标记语言可扩展性良好,内容与形式分离。

(2)XSL(EXtensible Stylesheet Language，扩展样式表语言)

XSL是W3C制定的另一种表现XML文档的样式语言，XSL是XML的应用，符合XML的语法规范，可以被XML的分析器处理，

(3)css

css是指级联样式表，即Cascading Style Sheet，是用这种语言来控制网页元素的表现形式的一种描述性语言

(4)js

js全称是javascript，是一种脚本语言。

(5)栅格布局

把网页划分成列、行、外边距、隔离带(各列与各行之间的空白)等由一系列相交的水平轴和垂直轴组成的栅格。栅格布局的作用在于更有效地控制元素在网页中所占比例的大小。栅格布局的好处是，把所有的宽度分为固定栏数，从而更高效的控制元素宽度。

(6)响应式布局

响应式布局即监听浏览器视觉视口宽度的变化，当浏览器视觉视口宽度变化到一定程度或一定范围内时，网页的布局就改变，即网页采用另一套样式。响应式栅格布局的含义就是：针对不同范围的视口宽度，定制多套栅格布局，举个例子，非响应式栅格系统中只需要.col-*类，而响应式栅格系统需要有.col-xs-*、.col-sm-*、.col-md-*、.col-lg-*多个类。

图1是表示本公开实施例的可视化页面生成方法的概要流程图。

如图1所示，本公开实施例的可视化页面生成方法包括：

容器创建步骤S100：利用可视化模板编辑器在页面中添加容器，以构成页面的布局格式；

单元创建步骤S200：在所述容器中利用所述可视化模板编辑器创建单元并且设置单元的数据和样式以生成页面；

页面预览步骤S300：预览生成的所述页面；以及

页面发布步骤S400：发布生成的所述页面，例如保存生成的页面，存储到后端服务器，触发发布操作，以实现在各端上的展示。例如，将样式以及数据源设置等传输给后端，后端通过末班引擎，生成html+css+js，自定义指令v-append实现html+css+js的渲染并执行，实现终端展现。

其中，在所述容器创建步骤S100中，利用可视化模板编辑器在页面中添加容器，并且设置容器的样式以构成页面的布局格式。其中，设置容器的样式包括以下的一项或者多项：设置背景色、设置背景图片、设置容器边框、设置字体属性以及容器名称。

在单元创建步骤S200包括：在容器中利用所述可视化模板编辑器创建单元；设置单元的数据；以及设置单元的样式。例如，作为一个示例，根据专题内容的展现形式，在创建的容器中选择不同单元，并在单元的设置中进行数据源设置以及样式设置，实现数据调用、背景、边框及边距、字体、展示元素设置。而且，进一步，能够根据设备的尺寸，实现网页端、移动端多端自适应展示。

其中，利用可视化模板编辑器在页面中添加容器可以是利用可视化模板编辑器向页面中拖拽入要选择的容器。在容器中利用可视化模板编辑器创建单元也可以是利用可视化模板编辑器向容器中拖拽入要选择的单元。这里的“拖拽”通过以下方式实现：

监听按下鼠标按钮事件，基于按下鼠标按钮事件以触发克隆当前节点，并获取当前节点的索引；

监听鼠标移动事件，基于鼠标移动事件修改克隆节点位置，并根据移动的索引获取拖拽节点数据存储并从数组中删除拖拽节点数据；以及

监听释放鼠标按钮事件，基于根据鼠标释放位置获取当前位置的索引插入移动节点的数据。

作为优选的示例，在本公开实施例中还可以进一步提供丰富的默认模板，管理员根据创建的专题主题，选择不同场景下的默认模板。模板带有大量的内置功能、样式，除了使管理员可以灵活地创建设计外，在创建好的默认页面布局中，拖拽单元组件，可设置数据源以及展现样式，使设置工作变得更加容易，极大的减少维护的时间，提高维护的效率。

作为实现多端自适应的一个示例，根据设备的尺寸进行分段，每段宽度固定，通过百分比和媒体查询实现响应式布局。在终端上展现时，通过检测当前设备类型加上对应类型的全局样式类名，实现多端自适应。

具体地，例如，预定义容器类(container)、断点类-xs-(<768px)，-sm-(≥768px)，-md-(≥992px)，-lg-(≥1200px)，随着屏幕设备或视口尺寸的改变使用css媒体查询(@media)根据设备和窗口大小动态改变container的宽度，并将container平分成24份，通过断点类标志不同窗口大小展示不同的样式来实现多端自适应。其中，xs是指超小屏幕，例如手机(<768px)，其中，sm是指小屏幕，例如平板(>＝768px)，其中，md是指中等屏幕，例如桌面显示器(>＝992px)，lg是指大屏幕，例如大桌面显示器(>＝1200px)。

在本公开实施例中，采用可视化模板编辑器提供可视化页面编排设计能力，支持栅格化排列布局，通过“所见即所得”的拖拽方式与简单的参数配置，实现灵活的可视化布局，可根据各类业务产品或服务场景轻松构建多样化页面，使用户获得极致体验。可视化模板编辑器使用vue.js+antdv+jpaas-component编写主体页面，使用vuedraggable拖拽组件实现容器以及单元的拖拽功能。

以下对于本公开实施例中的可视化拖拽编辑进行具体说明。

在本公开实施例中拖拽事件主要分为两个类别：

一类是拖拽元素的时候可以触发的事件即dragstart(拖拽开始):鼠标选中元素移动时触发，drag(拖拽):拖拽过程中持续在触发，dragend(拖拽结束):拖拽结束松开鼠标时触发。

另一类是当拖拽的目标与某个目标元素相交时目标元素会触发的事件即：dragenter(拖拽进入):拖拽元素到达目标上时触发，dragover(拖拽覆盖):拖动元素在目标元素上移动式持续触发，dragleave(拖拽离开):离开目标元素时触发，drop(拖放):拖放元素到了目标元素中松开时触发。

其中，拖拽放置实现原理如下：在拖拽事件中，会获取到拖拽元素的事件对象，在拖拽对象中能获取到属性dataTransfer，可以通过dataTransfer.dropEffect属性控制被拖动的元素的放置行为，主要包含以下值none:不能把元素拖放至此，move(移动):移动到目标，copy(复制):复制到目标，link(链接):拖动元素必须时链接并且有url。

拖拽放置的实现方式是在拖拽的元素以及目标元素上设置事件，为每个组件设置dragstart(拖拽开始)事件，需要做以下处理：

设置拖动元素的行为为move(移动)；

组件在目标元素上移动时阻止默认行为；

设置组件离开目标元素时放置行为为none(无)，即不能拖放；

拖动元素在目标元素松开鼠标时添加到目标元素上，元素所对应的元数据也记录；

然后在dragend(拖拽结束)事件中取消监听以上动作，完成拖拽放置。

其中，拖拽排序的实现原理如下：

拖拽的核心是使用DOM操作insertBefore来实现：

如果拖拽元素的位置小于目标元素的位置，说明是从上往下拖动，那么将拖拽元素移动到目标元素的下一个元素之前；

如果拖拽元素的位置大于目标元素的位置，说明是从下往上拖动，那么只需将拖拽元素移动到目标元素之前即可；

其中，拖拽动画的实现原理：

先记录容器子项位置信息，在操作DOM移动拖拽元素前，记录容器内所有子项的位置；

进行DOM操作进行位置交换，DOM操作本身没有动画，这时再去记录一次移动后的容器内所有子项的位置，有了上面几步的操作，接下来就可以根据移动前后的位置进行动画操作。

通过translate先让元素立刻回到移动前的位置，给元素自身设置过度效果transform；这时候就可以通过translate让元素回到移动之后的位置。

作为实现拖拽的一个示例，利用vuedraggable和component动态组件封装画布区域预览组件,通过对JSON数据的循环动态设置component的路径完成页面的渲染。画布区域利用vuedraggable的update(更新)事件对容器以及单元的排序和移动。

作为拖拽排列容器的一个示例，例如，通过在允许排序的容器上，监听mousedown(鼠标按钮按下)事件，鼠标按下后克隆当前节点，获取当前节点的索引；监听mousemove(鼠标移动)事件，修改克隆节点位置，根据移动的索引获取拖拽节点数据存储并从数组中删除拖拽节点数据；监听mouseup(鼠标按钮放开)事件，根据鼠标放开位置获取当前位置的索引使用splice方法插入移动节点的数据完成排序。

图2是表示拖拽单元样式的一个实现方式的示例。如图2所示如下实现：

S1：拖拽单元样式开始；

S2：监听鼠标按钮按下事件，基于鼠标按钮按下事件克隆选中的单元数据；

S3：监听鼠标移动事件，基于鼠标移动事件修改克隆节点位置以及经过的节点数据；

S4：监听鼠标按钮放开事件；

S5：调用可视化模板编辑器的模板解析模块单元进行解析，获得html内容；

S6：使用自定义指令向指定节点插入html；

S7：修改节点及模板数据；以及

S8：单元样式拖拽结束。

这里，本公开实施例的可视化模板编辑器进行说明。

图3是表示本公开实施例的可视化模板编辑器一个示例的示意图。

如图3所示，可视化模板编辑器100包括：

可视化搭建组件模块110，用于设置容器、单元、以及单元层组；

可视化组件设置模块120，用于进行数据设置和样式设置、以及页面设置；

可视化代码生成模块130，用于生成页面模板并且用于解析页面模板生成代码；以及

可视化管理模块140，包括存储和管理页面模板的可视化模板库141以及存储和管理单元的样式的可视化样式库142。

其中，可视化代码生成模块130包括：

模板生成子模块131，用于生成页面模板的模板生成子模块；以及

模块解析子模块132，用于解析所述模板生成子模块生成的页面模板并获得代码。

这样，根据本公开实施例的可视化页面生成方法以及可视化模板编辑器，通过容器设计、单元组件以及样式形成框架清晰的web端页面，然后，通过数据设置、填充数据，完成可视化页面的搭建，最终生成的终端用户可交互的页面。

接着，对于本公开实施例的可视化页面生成方法的一个具体实施方式进行说明。

本公开实施例的可视化页面生成方法的一个具体实施方式包括：

第一步：进入可视化模板设置页面

进入模板设置页面，通过选择“可视化模板编辑器”，以开始进行页面设置。这里，可以从模板库中选择内置的模板，或者也可以直接选择空白模板进行页面的搭建，并且，同时可视化模板编辑器还可以提供模板的预览、使用、收藏，以及自定义模板功能。另外，例如作为其他选项，可以设置为在模板顶部的操作区进行切换页面，支持栏目页、频道页的切换，以及也可以设置为提供切换模板的功能，可将页面一键替换成其他模板样式。

一方面，在页面的画布区域还个提供放大缩小、还原尺寸功能，画布上也标有横纵坐标，可设置基准线，辅助实施人员进行精细化的设置。

再一方面，基于网页、移动端适配技术，默认展示网页端视图，也可以切换成移动端视图。

第二步：页面整体设置

针对页面的背景颜色，设置背景图片时可选择居中、拉伸、平铺。进一步，可设置页面css、js。

第三步：创建容器

在本公开实施例中，可视化模板编辑器是基于响应式栅格布局的，因此，可以自适应网页端、移动端，其中，可通过拖拽方式，在页面上添加容器。

在栅格布局下，一个容器就是独立的一行，容器行由不同比例的容器列组成，例如，作为一个示例，可以提供通栏、两栏、三栏这三种类型的容器行，其中，通栏包括“全屏宽单栏”、“固定宽单栏”这两种布局；两栏包括“1:1、1:2、1:3、1:5、、2:1、3:1、5:1”这7种布局；三栏包括“1:1:1、1:2:1、1:4:1、1:1:2、、2:1:1、1:1:4、5:1:1”这7种布局。

进一步，可对容器进行操作，可在容器中继续嵌套容器，从而达到所希望的布局格式。

容器拖拽到画布上后，可视化模板编辑器可以设置为在右侧出现容器设置栏，用于设置容器的样式。作为容器的样式，支持背景色、背景图片的设置，设置背景图片时可选择居中、拉伸、平铺；支持容器边框以及编辑设置，可设置线宽、颜色、边框类型，以及上下左右内外边距；支持字体、字号、颜色、行高、字间距、加粗、斜体、下划线、居中居左居右等设置。支持名称的修改，便于实施人员在单元层组页面，直接点击容器名称定位到相应的容器位置。

第四步：创建单元

设置完容器后，可往容器中拖入相应的单元样式。例如，可以预先内置文本、富文本、图片、自定义、文本列表、图文列表、轮播等这几种单元类型。

可视化模板编辑器可以设置为在左侧针对不同类型的单元提供不同的内置样式。例如，可以直接选择样式，拖拽到容器布局中。样式支持检索、收藏、自定义上传等功能。对于用户自定义的样式，支持样式分享到样式库中，便于其他实施人员复用样式，减少重复工作。作为一个优选示例，例如鼠标悬停于单元样式上时，可浮窗预览样式大图。单元拖拽到容器后，可视化模板编辑器可以设置为在右侧出现单元设置栏，用于设置单元的数据和样式。

其中，单元数据可选择调用系统内部的栏目数据、信息数据或者是对接的第三方系统的数据，也可以选择手工调用，需要手动维护数据。同时可以设置数据显示的条数以及数据的排序等。单元样式支持背景色、背景图片的设置，设置背景图片时可选择居中、拉伸、平铺；支持单元边框以及边距设置，可设置线宽、颜色、边框类型，以及上下左右内外边距；支持字体、字号、颜色、行高、字间距、加粗、斜体、下划线、居中居左居右等设置。

除了样式、数据设置，单元支持名称的修改，实施人员可在单元层组页面，点击单元名称直接定位到相应的容器、单元位置；单元支持样式的更换，可一键替换成其他样式；单元支持源码设置，可通过代码编辑实现更加复杂的单元效果。可将样式另存为新样式，同时可进行分享，便于其他实施人员复用样式，减少重复工作。

第五步：页面预览、发布等操作

支持保存当前页面为新模板，可方便复用。并且，支持页面的实时预览，可预览网页端、移动端不同视图下的页面样式，且预览页面中，用户可进行交互。可视化模板也支持页面的关联发布，页面设置完毕后，点击发布可将页面一键发布至前台如图所示，同时也会进行页面的发布监测。

在本公开实施例的可视化页面生成方法中，采用数据与页面分离的方式，例如，结合vue自定义指令功能和jquery的$().html方法实现v-append指令，并使用beetl把beetl代码转成html+css+js，再使用v-append自定义指令把html+css+js渲染到页面中并执行。利用vue的props、事件总线、$emit,mixin进行数据通信实现数据回显、容器以及单元的样式设置和数据源设置。由此，使数据与页面html+css分离，在保证数据安全的同时，使前端展现样式模块化、组件化，使用模板简单拖拽，更改参数数据，即可生成精美的终端用户可交互的页面。

在本公开实施例的可视化页面生成方法中，采用组件化设计，例如，将页面中涉及的通用功能封装成组件，同时提供组件自定义，用户可根据实际需求开发各类组件供随时调用，实现组件设计、组件重用、组件分享，提升网站页面设置效率，支撑页面、站点的快速搭建，最大程度的满足后续工作所需。

在本公开实施例的可视化页面生成方法中，采用多端同步的方式，即，采用动态框架开发方式，利用跨平台开发架构，实现一套代码适配多端业务场景，高性能多端实时发布。

在本公开实施例的可视化页面生成方法中，通过低代码实现，不仅能够提供丰富的模板、组件，还能够支持大量扩充页面可视化资源，减少编码、减少人工操作，整体降低页面开发风险。

根据本公开实施例的可视化页面生成方法主要能够实现以下的的技术效果：主要包括：

(1)上新快

在有新的业务产品或服务事项时，需要制作相对应的页面进行前台展现，通过本发明可以快速完成页面的构建，第一时间发布到前台为B端客户(即企业客户)提供服务。

(2)样式丰富

不同的业务产品和服务事项，所需呈现的样式也各不相同，本发明将特定类型的元素提取出来作为组件，为页面设计提供丰富的文字列表、图片列表、图文列表样式，可以构建出丰富多彩的呈现方式。

(3)更新灵活

在对现有业务产品或服务内容有调整时，无需对展现页面重新建设，只要基于原有模板进行更新，数据自动继承，方便灵活。

(4)发布效率高

本发明采用了多线程、缓存、消息中间件等技术，提高了发布效率，实现发布即展现。使用动静结合的发布方式，把数据量最大的本身文件小的信息做动态发布、伪静态处理；在频道页及栏目页发布方面，使用了模板引擎，页面渲染发布效率有很大提升；检索查询更高效，新发布在列表、查询、分页时，用户使用场景时更快捷高效的使用感知。

(5)兼容性强

基于本发明的可视化页面生成方法构建的页面，能够支持pc端站点页面的快速实施，也能够支持移动端页面的快速建设，由此，能够提供更加灵活高效的站点页面建设方式。

以上仅为本申请的具体实施方式，但本申请的保护范围并不局限于此。本领域的技术人员可以根据本申请所披露的技术范围想到其他可行的变化或替换，此等变化或替换皆涵盖于本申请的保护范围之中。在不冲突的情况下，本申请的实施方式及实施方式中的特征还可以相互组合。本申请的保护范围以权利要求的记载为准。

Claims (17)

1.一种可视化页面生成方法，其特征在于，包括：

容器创建步骤，利用可视化模板编辑器在页面中添加容器，以构成页面的布局格式；

单元创建步骤，在所述容器中利用所述可视化模板编辑器创建单元并且用于进行数据设置和样式设置以生成页面；以及

页面发布步骤，发布生成的所述页面，

其中，所述可视化模板编辑器至少包括：

可视化搭建组件模块，至少用于设置容器和单元；以及

可视化组件设置模块，至少用于设置单元的数据和样式。

2.如权利要求1所述的可视化页面生成方法，其特征在于，所述容器创建步骤包括：

利用可视化模板编辑器在页面中添加容器；以及

设置容器的样式以构成页面的布局格式。

3.如权利要求2所述的可视化页面生成方法，其特征在于，所述设置容器的样式包括以下的一项或者多项：

设置背景色、设置背景图片、设置容器边框以及设置字体属性。

4.如权利要求3所述的可视化页面生成方法，其特征在于，所述设置容器的样式进一步包括：

对于容器设置名称。

5.如权利要求2所述的可视化页面生成方法，其特征在于，所述利用可视化模板编辑器在页面中添加容器包括：

利用所述可视化模板编辑器向页面中拖拽入要选择的容器。

6.如权利要求1所述的可视化页面生成方法，其特征在于，所述单元创建步骤包括：

在所述容器中利用所述可视化模板编辑器创建单元；

设置单元的数据；以及

设置单元的样式。

7.如权利要求6所述的可视化页面生成方法，其特征在于，所述在所述容器中利用所述可视化模板编辑器创建单元包括：

利用所述可视化模板编辑器向所述容器中拖拽入要选择的单元。

8.如权利要求5或者7所述的可视化页面生成方法，其特征在于，所述拖拽通过以下方式实现：

监听按下鼠标按钮事件，基于按下鼠标按钮事件以触发克隆当前节点，并获取当前节点的索引；

监听鼠标移动事件，基于鼠标移动事件修改克隆节点位置，并根据移动的索引获取拖拽节点数据存储并从数组中删除拖拽节点数据；以及

监听释放鼠标按钮事件，基于根据鼠标释放位置获取当前位置的索引插入移动节点的数据。

9.如权利要求1所述的可视化页面生成方法，其特征在于，在所述单元创建步骤和所述页面发布步骤之间进一步包括：

页面预览步骤，预览生成的所述页面。

10.如权利要求1所述的可视化页面生成方法，其特征在于，在所述页面发布步骤之后进一步包括：

解析所述生成的页面，得到页面模板；以及

解析所述页面模板生成并发布静态html文件。

11.一种可视化模板编辑器，其特征在于，包括：

可视化搭建组件模块，至少用于设置容器和单元；以及

可视化组件设置模块，至少用于进行数据设置和样式设置。

12.如权利要求11所述的可视化模板编辑器，其特征在于，进一步包括：

可视化代码生成模块，用于生成页面模板并且用于解析页面模板生成代码；以及

可视化管理模块，包括存储和管理页面模板的可视化模板库以及存储和管理单元的样式的可视化样式库。

13.如权利要求12所述的可视化模板编辑器，其特征在于，所述可视化代码生成模块包括：

用于生成页面模板的模板生成子模块；以及

用于解析所述模板生成子模块生成的页面模板获得代码的模块解析子模块。

14.如权利要求11所述的可视化模板编辑器，其特征在于，所述可视化搭建组件模块进一步用于设置单元层组。

15.如权利要求11所述的可视化模板编辑器，其特征在于，所述可视化组件设置模块进一步用于页面设置。

16.一种计算机可读介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1～10任意一项所述的可视化页面生成方法。

17.一种计算机设备，包括存储模块、处理器以及存储在存储模块上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1～10任意一项所述的可视化页面生成方法。