[发明专利]一种web前端页面的可视化编辑生成系统及装置

说明书

技术领域

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

背景技术

技术词解释：

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

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

button：按钮。

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

进一步，该系统还包括：

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

进一步，该系统还包括：

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

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

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