CN107798084A - 一种web前端页面的可视化编辑生成系统及装置 - Google Patents

Abstract

本发明公开了一种web前端页面的可视化编辑生成系统及装置，该系统包括前端页面布局界面和操作行为监听控制器。该装置所包含的处理器执行以下步骤：对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层，然后，当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理。本发明系统及装置对页面开发制作者的技术专业知识及经验要求低，操作适用性强，页面编辑制作方便快捷，灵活性强，有利于向大众推广并进行普及应用。本发明作为一种web前端页面的可视化编辑生成系统及装置可广泛应用于前端页面制作领域中。

Description

一种web前端页面的可视化编辑生成系统及装置

技术领域

本发明涉及web技术和页面编辑生成技术，尤其涉及一种web前端页面的可视化编辑生成系统及装置。

背景技术

技术词解释：

html：超级文本标记语言，其是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

web前端界面：通过浏览器给用户展示的界面图形，其中包含了设计、特效、用户交互等内容。

button：按钮。

众所周知，整个互联网是由无数网页组合而成的，而网页的本质就是超文本标记语言HTML。可以说，HTML正是互联网的基石。随着时代的发展，尤其是HTML5的正式发布后，互联网技术的更新迭代变得更加迅速。而用户对互联网的需求也越来越多，越来越多没有互联网开发基础的用户也需要制作特定的前端页面。然而，传统的WEB前端页面开发模式需要掌握一定前端开发技能的工程师并且要花费大量的时间才能进行页面的开发和制作，同时其还存在效率低下以及规范不统一导致难以维护等问题。因此设计一种合理、可行、科学、且能够适用于零WEB前端开发基础人员的WEB前端页面编辑生成方法具有重要的意义。

发明内容

为了解决上述技术问题，本发明的目的是提供一种web前端页面的可视化编辑生成系统，可令用户方便快捷地自定义制作所需的前端页面，操作便利性和灵活性高，并且适用性强。

本发明的目的是提供一种web前端页面的可视化编辑生成装置，可令用户方便快捷地自定义制作所需的前端页面，操作便利性和灵活性高，并且适用性强。

本发明所采用的技术方案是：一种web前端页面的可视化编辑生成系统，该系统包括：

前端页面布局界面，用于包含有控件区、画布编辑区和工具操作区；

操作行为监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；

其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

进一步，所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；反之，则取消操作，并清除临时层。

进一步，所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则判断画布编辑区中是否存有布局控件，以及判断临时层所存储的多媒体控件代码是否对应布局控件，然后根据判断结果，执行相对应的处理；反之，则取消操作，并清除临时层。

进一步，所述根据判断结果，执行相对应的处理这一步骤，其包括以下步骤：

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码也不是对应布局控件，此时，则取消操作，并清除临时层；

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码是对应布局控件，此时，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；

当画布编辑区中存有布局控件，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具。

进一步，该系统还包括：

第一存储单元，用于将画布编辑区中的所有代码存储到本地缓存服务器和/或上传到远程服务器进行存储。

进一步，该系统还包括：

第二存储单元，用于将操作数据存储到本地缓存服务器和/或上传到远程服务器进行存储。

进一步，所述操作行为监听控制器还用于根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中；其中，一个多媒体控件对应唯一一个id号。

进一步，所述临时层为一个浮动于网页上层的临时层。

进一步，所述多媒体控件的类型包括有布局控件、基本控件、交互组件及拓展组件。

本发明所采用的另一技术方案是：一种web前端页面的可视化编辑生成装置，包括用于实现各种指令的处理器，所述指令由处理器加载并执行以下步骤：

对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层，然后，当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；

其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

本发明系统及装置的有益效果是：采用本发明的编辑生成系统及装置，用户通过多媒体控件的拖拽便能进行web前端页面的自由自定义制作，页面编辑制作方便快捷，灵活性强，而且对页面开发制作者的技术专业知识及经验要求低，操作适用性强，能有利于向大众推广并进行普及应用。并且由于在多媒体控件被拖拽时，会新建一个跟随鼠标移动轨迹进行移动的临时层，并且所述临时层可根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果，这样令用户在拖拽多媒体控件的时候，可以清晰知道正在操作的多媒体插件的具体内容，从而增强操作的精确性，更加便于用户制作编辑前端页面。

附图说明

图1是前端页面布局界面的示意图；

图2是拖拽控件过程的示意图；

图3是拖拽控件过程中代码的示意图。

具体实施方式

为了便于零WEB前端开发基础的用户可方便快捷地自定义制作所需的前端页面，本发明提供一种web前端页面的可视化编辑生成系统，其包含用户互动操作的前端页面布局界面以及操作行为监听控制器；

所述前端页面布局界面，包含有控件区、画布编辑区和工具操作区，并且该界面主要用于处理用户的交互操作以及操作行为的呈现；

所述操作行为监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；

其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

作为本发明系统的优选实施例，所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；反之，则取消操作，并清除临时层。

作为本发明系统的优选实施例，所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则判断画布编辑区中是否存有布局控件，以及判断临时层所存储的多媒体控件代码是否对应布局控件，然后根据判断结果，执行相对应的处理；反之，则取消操作，并清除临时层。

作为本发明系统的优选实施例，所述根据判断结果，执行相对应的处理这一步骤，其包括以下步骤：

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码也不是对应布局控件，此时，则取消操作，并清除临时层；

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码是对应布局控件，此时，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；

当画布编辑区中存有布局控件，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具。

作为本发明系统的优选实施例，该系统还包括：

第一存储单元，用于将画布编辑区中的所有代码存储到本地缓存服务器和/或上传到远程服务器进行存储。

作为本发明系统的优选实施例，该系统还包括：

第二存储单元，用于将操作数据存储到本地缓存服务器和/或上传到远程服务器进行存储。

作为本发明系统的优选实施例，所述操作行为监听控制器还用于根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中；其中，一个多媒体控件对应唯一一个id号。

针对上述系统，还对应提供一种web前端页面的可视化编辑生成装置，其包括用于实现各种指令的处理器，所述指令由处理器加载并执行以下步骤：

对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层，然后，当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；

其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

作为本发明装置的优选实施方式，所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；反之，则取消操作，并清除临时层。

作为本发明装置的优选实施方式，所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则判断画布编辑区中是否存有布局控件，以及判断临时层所存储的多媒体控件代码是否对应布局控件，然后根据判断结果，执行相对应的处理；反之，则取消操作，并清除临时层。

作为本发明装置的优选实施方式，所述根据判断结果，执行相对应的处理这一步骤，其包括以下步骤：

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码也不是对应布局控件，此时，则取消操作，并清除临时层；

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码是对应布局控件，此时，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；

当画布编辑区中存有布局控件，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具。

作为本发明装置的优选实施方式，所述指令由处理器加载并还执行以下步骤：

将画布编辑区中的所有代码存储到本地缓存服务器和/或上传到远程服务器进行存储；

和/或

将操作数据存储到本地缓存服务器和/或上传到远程服务器进行存储。

作为本发明装置的优选实施方式，所述指令由处理器加载并还执行以下步骤：

根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中。

结合以下具体优选实施例来对本发明系统和装置做进一步阐述(以下的技术内容均适用于上述系统和装置实施例中)。

对于本发明系统，其具体实现步骤包括有以下步骤。

①、步骤一：构建前端页面布局界面

在本实施例中，所述前端页面布局界面是基于Bootstrap而开发的，通过引入Bootstrap的基础文件来编写操作界面，令前端页面布局界面中的左侧设为控件区，右侧设为画布编辑区，顶部设为工具操作区，具体如图1所示。

对于前端页面布局界面中的每个模块，其各司其职，具体：工具操作区主要是常用工具的集中摆放位置，所述常用工具包括但不限于有编辑模式、预览效果、保存编辑、清空代码、撤销等操作；所述控件区主要是摆放多媒体控件的操作按钮(即按钮元素)，也是拖拽交互的开始点；所述画布编辑区则是核心的操作区域，负责代码可视化渲染及代码存储等功能。

②、步骤二：构建操作行为监听控制器

在本实施例中，前端操作行为监听是采用jquery.ui的交互插件，实现操作行为监听。

在控件区上建立基本元素button列表，并给控件区中所有的button元素绑定拖拽监听行为，如图2所示，当在控件区的button元素被用户进行拖拽操作，即在控件区的button元素被鼠标点击，并且点击后不释放鼠标操作的同时进行拖动，就新建一个相对应的浮动于网页上层的div层(以下简称临时层)。也就是说，当监听到按钮元素被进行拖拽操作时，就新建一个与被拖拽的按钮元素相对应的临时层。

对于上述的临时层，其存储了被拖拽的button元素所对应的多媒体控件的页面信息及数据信息(所述数据信息具体为样例数据)，临时层则可根据多媒体控件的页面信息及数据信息及时在html上渲染出对应的多媒体插件效果，而且临时层是跟随用户的鼠标移动轨迹进行移动，这样则能够及时将鼠标拖拽轨迹展现给用户，同时记录当前鼠标位置给接下来释放鼠标行为操作做判断。当临时层处于合法的画布编辑区以及监听到用户的释放鼠标行为操作时，则根据div层中所存储的内容，按照预设的规范，在画布编辑区生成与被拖拽的button元素对应的多媒体控件的代码，并实时渲染在画布编辑区上。也就是说，对于所述当监听到用户的释放鼠标行为操作时，根据当前鼠标位置，即当前鼠标的坐标位置，执行相对应的处理这一步骤，其具体包括：当当前鼠标位置处于合法的画布编辑区时，则在画布编辑区生成与被拖拽的button元素对应的多媒体控件的代码，并实时渲染在画布编辑区上，以及初始化生成与该多媒体控件对应的编辑工具；反之，则取消此次操作，并清除div层。

关键代码实现如下：

引入jquery.js、jquery.ui.js文件，控件区中的按钮统一添加‘drag’的样式，也就是<span class＝”drag”>，通过jquery选择器统一给予所有元素赋值拖动启动复制拖动事件$(function(){$(‘.drag’).draggble({helper:’clone’})})。

每一个多媒体控件都有一个唯一id号，根据id号，给复制克隆的div浮动层(id赋值为container)赋予对应的提示以及行为记录

当复制克隆的div的鼠标x,y值处于合理的位置上，则执行对应的渲染函数。

③、步骤三：构建多媒体控件

用户可以通过控件区中的多媒体控件按钮(即按钮元素)，制作出统一规范的web前端页面。其中，所述多媒体控件主要分四大类型，分别是：布局控件、基本控件、交互组件、拓展组件。

对于上述四大类型的控件，其具体阐述内容如下所示。

(1)、布局控件

布局控件是用来将画布编辑区进行分割。其中，本系统默认使用的是Bootstrap的栅栏布局模式，因此，布局控件也是根据栅栏布局设置，提供12、6:6、8:4、4:4:4、2:6:4这五种布局模式。栅栏布局可以进行循环嵌套，因此，通过嵌套操作，便能实现各种比例分割的布局。其它多媒体控件需要在布局控件上进行渲染。

(2)、基本控件

基本控件主要含括了常用的html语义标签以及一些Bootstrap常用的组合类型应用。其中，基本标签包括但不限于有标题栏<h3>、段落<p>、地址<address>、引用块<p>、无序列表<ul><li>、有序列表<ol><li>、详细描述<p>、表格<table>、提交表单<form>、搜索框<form>、纵向表单<form>、按钮<button>、图片<img>。而Bootstrap常用的组合类型应用主要包括但不限于有按钮组、下拉菜单、导航、导航列表、面包导航、翻页、文字标签、徽标、概述、页标题、文本、预览列表、进度条等。

(3)、交互控件

交互控件主要包括有焦点图、轮换图、手风琴切换、提示框、导航栏等。交互控件提供了用户体验良好的操作组件，只需要通过对应的编辑工具，替换默认例子的示例值，就能够制作想要的效果。对于高级用户，也可以通过编辑源代码的方式进行编辑，达到更加复杂的交互效果。

(4)、扩展组件

扩展组件是提供自定义组件的一种方式，供掌握前端编辑技术的高级用户使用的。多媒体控件提供方法，自定义创建扩展组件，用户可以通过依赖文档如js、css等来操作添加插件，并编辑扩展组件的操作按钮。用户编辑好操作按钮之后，系统同样会绑定拖动事件，当用户实现拖动到合法区域，就能够根据用户编辑的好的插件进行渲染及展示。

多媒体控件的代码是直接嵌套到html界面，该代码是根据id的唯一性进行绑定以及渲染的。当控件的按钮触发拖动事件，根据多媒体控件的唯一id，将多媒体信息(页面信息及样例数据信息)渲染到复制拖动的div浮动层中，即所述的临时层中。如图3所示，其显示了在编辑过程中，不同状态不同区域下的代码情况。

另外，根据上述步骤二的内容可知，操作行为监听控制器主要执行以下步骤：

对设置在控件区中的按钮元素进行拖拽操作行为的监听；

当监听到按钮元素被拖拽操作时，根据被拖拽的按钮元素所对应的多媒体控件的id号，通过jquery选择器去获取对应的多媒体控件的页面信息及样例数据；

生成并渲染一个相对应的浮动于网页上层的临时层，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中，所述临时层会跟随鼠标移动轨迹进行移动，同时临时层会根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果；

当监听到释放鼠标行为操作时，判断当前鼠标的坐标位置(即被释放时临时层所处的位置)是否处于合法的画布编辑区，以及临时层的相关数据是否合法；当当前鼠标位置处于合法的画布编辑区，且数据是合法的，那么则按照统一规范，在画布编辑区上添加生成与被拖拽的按钮元素相对应的多媒体控件的代码，并进行渲染以及自动构建出对应的编辑工具；反之，当前鼠标位置不处于合法的画布编辑区，或数据不是合法的，则取消此次操作，并清除临时层。具体代码如下所示：

其中，代码<span class＝"drag label"><i class＝"icon-move"></i>拖动</span>就是可以被拖动的部分，代码<div class＝"view"><div class＝"row-fluidclearfix"><div class＝"span12column"></div></div></div>就是存储了对应多媒体控件的页面信息及样例数据，由于布局控件的特殊性，主要数据其实就是class＝“span12column”，当监听的拖动按钮被拖动之后，临时层就会渲染这些代码，在界面上展示出来，在画布编辑区上释放鼠标，就会将对应的数据代码渲染在编辑区域。

④、步骤四：渲染画布编辑区

监听拖动行为，当监听到释放鼠标行为操作时，当前鼠标位置不处于合法的画布编辑区，那么则取消此次操作，并清除临时层；若释放时，当前鼠标位置处于合法的画布编辑区，那么则判断画布编辑区中是否存有布局控件，以及判断临时层所存储的多媒体控件代码是否对应一布局控件，然后根据判断结果，执行对应的处理；

对于所述根据判断结果，执行对应的处理这一步骤，其具体包括以下步骤：

当画布编辑区中没有存有布局控件，并且临时层所存储的多媒体控件代码也不是对应布局控件，此时，则取消此操作，并清除临时层；

当画布编辑区中没有存有布局控件，而临时层所存储的多媒体控件代码则对应布局控件，此时，则根据临时层，在画布编辑区中渲染对应的多媒体控件；

当画布编辑区中存有布局控件，则根据临时层，在画布编辑区中直接渲染对应的多媒体控件。

对于渲染控件这一行为，其主要处理两个事情：1、获取临时层中所存储的多媒体控件代码，并将临时层中所存储的多媒体控件代码按照统一的规范格式，在画布编辑区中添加、渲染，然后初始化该多媒体控件所对应的编辑工具(该工具提供源码编辑以及针对不同多媒体控件而提前设置好的可视化操作编辑工具)；2、记录本次操作行为，并将操作数据存储到本地缓存或者上传到远程服务器，用于恢复操作以及重新渲染编辑好的界面。

其中，渲染的核心实现代码如下所示：

具体地，在画布编辑区中，控件都可以进行编辑，例如：针对普通的基本控件，提供可视化的富文本编辑器进行处理；针对交互控件，提供固定的编辑界面进行编辑处理；针对布局控件，则没有编辑，只提供删除功能；针对扩展组件，也只是提供富文本的源码编辑模式。通过这些交互互动操作，可以让用户进一步自定义前端页面的功能和设计，制作出符合自己需求的web前端页面。

⑤、步骤五：存储/应用成果页面

由于每一次拖动多媒体控件的行为操作都会被监听，无论是否操作成功，都会对画布编辑区的代码进行本地存储或者远程服务器存储的，所以不用担心数据丢失的可能性。

当编辑好页面之后，点击工具操作区的预览按钮，此时则会新建一个浮动于网页上层的展现层，将画布编辑区中的所有代码及数据重新渲染，并展现给用户看。展现层的具体效果就是用户将编辑好的web前端网页具体应用到其它地方的效果。并且，用户可以通过操作工具操作区的应用按钮，从而将编辑好的页面所对应的具体的代码直接复制到计算机的剪贴板上，这样用户便可以直接通过iframe应用或者直接在html上应用到自己成品。

由上述可见，本发明的系统及装置的优点包括有：

1、采用系统已定义的各种多媒体元素操作控件，通过拖拽的操作方式或源码编辑的方式对web前端多媒体元素进行编辑，实现UI、代码统一规范的管理，便利了用户的自定义编辑操作；并且在实际应用中不要求操作者拥有前端知识，也能通过拖拽方式实现制作一套标准的前端页面；

2、不仅针对布局的应用，还能细化到具体HTML的各种多媒体元素的混合编排使用，操作灵活性高，并且能达到用户自由自定义web前端页面的编辑制作，满足不同用户的需求，适用性强，能利于web前端页面编辑设计技术的推广及普及应用；

3、通过引入多媒体控件的概念以及方法，可以自由组合多种布局模式，提高了用户编辑页面的多样性；

4、通过扩充多媒体插件的方式，让编辑内容以及样式变得更广泛，可以自由组合出任意的需求页面；

5、通过页面源码渲染浮动div的方式可以让用户在拖拽多媒体控件的时候，清晰知道操作正对哪一个多媒体插件进行操作，增强操作的精确性；

6、引入布局控件，能有效地统一代码的规范性，使得各种多媒体插件能够以Bootstrap栅栏布局模式，标准化地展现出来，同时也减少了因用户更多的误操作而带来的页面错乱；

7、开放多媒体控件自定义的方法，可以由用户自定义保存并应用更多类型的控件，不局限默认提供的多媒体控件，操作灵活性强。

以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (10)

1.一种web前端页面的可视化编辑生成系统，其特征在于：该系统包括：

前端页面布局界面，包含有控件区、画布编辑区和工具操作区；

操作行为监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；

其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

2.根据权利要求1所述一种web前端页面的可视化编辑生成系统，其特征在于：所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；反之，则取消操作，并清除临时层。

3.根据权利要求1所述一种web前端页面的可视化编辑生成系统，其特征在于：所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则判断画布编辑区中是否存有布局控件，以及判断临时层所存储的多媒体控件代码是否对应布局控件，然后根据判断结果，执行相对应的处理；反之，则取消操作，并清除临时层。

4.根据权利要求3所述一种web前端页面的可视化编辑生成系统，其特征在于：所述根据判断结果，执行相对应的处理这一步骤，其包括以下步骤：

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码也不是对应布局控件，此时，则取消操作，并清除临时层；

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码是对应布局控件，此时，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；

当画布编辑区中存有布局控件，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具。

5.根据权利要求1-4任一项所述一种web前端页面的可视化编辑生成系统，其特征在于：该系统还包括：

第一存储单元，用于将画布编辑区中的所有代码存储到本地缓存服务器和/或上传到远程服务器进行存储。

6.根据权利要求1-4任一项所述一种web前端页面的可视化编辑生成系统，其特征在于：该系统还包括：

第二存储单元，用于将操作数据存储到本地缓存服务器和/或上传到远程服务器进行存储。

7.根据权利要求1所述一种web前端页面的可视化编辑生成系统，其特征在于：所述操作行为监听控制器还用于根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中；其中，一个多媒体控件对应唯一一个id号。

8.根据权利要求1所述一种web前端页面的可视化编辑生成系统，其特征在于：所述临时层为一个浮动于网页上层的临时层。

9.根据权利要求1所述一种web前端页面的可视化编辑生成系统，其特征在于：所述多媒体控件的类型包括有布局控件、基本控件、交互组件及拓展组件。

10.一种web前端页面的可视化编辑生成装置，其特征在于：包括用于实现各种指令的处理器，所述指令由处理器加载并执行以下步骤：

对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层，然后，当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；

其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。