CN112364281A - 一种基于浏览器的网页编辑可视化实现方法、装置及设备 - Google Patents

Abstract

本发明公开了一种基于浏览器的网页编辑可视化实现方法、装置及设备，该方法包括：获取待编辑的网页数据对应的数据层；将所述数据层通过转化器转化为视图层；获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改。本发明实施例基于浏览器环境进行开发，实现了能在windows，mac等多个环境离线或在线条件下提供用户可视化DOM元素，并导出工程文件，为初学者学习网页编辑提供了方便。

Description

一种基于浏览器的网页编辑可视化实现方法、装置及设备

技术领域

本发明涉及互联网技术领域，尤其涉及一种基于浏览器的网页编辑可视化实现方法、装置及设备。

背景技术

网页编辑是一种在网站后台用编译器录入文字、图像、Flash、声音及其他网页元素的过程。

目前为实现网页的编辑，大多数情况下需要进行专业的计算机语言培训，如Javascript HTML Css PHP等，导致学习的门槛十分高，这种情况下是特别不适合编程猫这样的小朋友进行使用。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种基于浏览器的网页编辑可视化实现方法、装置及设备，旨在解决现有技术中要实现网页的编辑，需要进行专业的计算机语言培训，为小朋友等初学者的使用带来了不便的技术问题。

本发明的技术方案如下：

一种基于浏览器的网页编辑可视化实现方法，所述方法包括：

获取待编辑的网页数据对应的数据层；

将所述数据层通过转化器转化为视图层；

获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改。

进一步地，所述将所述数据层通过转化器转化为视图层，包括：

通过编程语言将所述数据层通过转化器转化为视图层。

进一步优选地，所述将所述数据层通过转化器转化为视图层，包括:

通过Javascript语言和/或HTML语言，将所述数据层通过转化器转化为视图层。

进一步优选地，所述将所述数据层通过转化器转化为视图层，包括：

将数据层的数据通过转化器转化为视图层的页面元素。

优选地，所述获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改，包括：

获取用户在视图层的操作，根据操作生成对页面元素的拖拽、放大及更改颜色内容操作。

进一步地，所述将所述数据层通过转化器转化为视图层前，包括：

预先生成一个转化器，所述转化器支持离线模式及上线模式。

进一步地，所述预先生成一个转化器，包括：

预先开辟一个用于存储属性配置的存储空间；

创建实现代码转视图的控制器；

创建任务调度器，根据用户的操作调用对应的控制器，完成转化器的生成。

本发明的另一实施例提供了一种基于浏览器的网页编辑可视化实现设置，装置包括：

数据获取模块，用于获取待编辑的网页数据对应的数据层；

视图转换模块，用于将所述数据层通过转化器转化为视图层；

数据更改模块，用于获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改。

本发明的另一实施例提供了一种基于浏览器的网页编辑可视化实现设备，所述设备包括至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的基于浏览器的网页编辑可视化实现方法。

本发明的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的基于浏览器的网页编辑可视化实现方法。

有益效果：本发明实施例极大的优化了页面开发，简化了开发步骤，降低了用户使用成本，该方法应用场景宽泛，实时性强，前景市场潜力巨大。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1为本发明一种基于浏览器的网页编辑可视化实现方法较佳实施例的流程图；

图2为本发明一种基于浏览器的网页编辑可视化实现装置的较佳实施例的功能模块示意图；

图3为本发明一种基于浏览器的网页编辑可视化实现设备的较佳实施例的硬件结构示意图。

具体实施方式

为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。以下结合附图对本发明实施例进行介绍。

本发明实施例提供了一种基于浏览器的网页编辑可视化实现方法。请参阅图1，图1为本发明一种基于浏览器的网页编辑可视化实现方法较佳实施例的流程图。如图1所示，其包括步骤：

步骤S100、获取待编辑的网页数据对应的数据层；

步骤S200、将所述数据层通过转化器转化为视图层；

步骤S300、获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改。

具体实施时，针对用户使用门槛高，受能力所限等问题，利用浏览器环境，采用可视化操作，用户可以随意的添加、删除页面上的元素，并同我们提供的快捷工具，让用户像是在绘画一样创作网页；

由于是基于浏览的环境抠图，该技术可以跨mac操作系统、windows操作系统、ios操作系统、android操作系统等多个环境。

获取要编辑的网页数据对应的数据层，将数据层通过特定的转化器转化为视图层，用户可在视图层进行相应的操作，视图层将获取的操作，再对数据层的数据进行处理，完成网页的编辑操作。

本发明实施例基于浏览器环境，使用技术语言进行开发，实现了能在windows，mac等多个环境离线或在线条件下提供用户可视化DOM元素，并导出工程文件。该工程文件支持多次导入和导出。其中，DOM是以层次结构组织的节点或信息片断的集合。文档对象模型(Document Object Model)是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

进一步地，将所述数据层通过转化器转化为视图层，包括：

通过编程语言将所述数据层通过转化器转化为视图层。

具体实施时，通过编程语言实现转化器，通过转化器将数据层转化为视图层。

进一步地，将所述数据层通过转化器转化为视图层，包括:

通过Javascript语言和/或HTML语言，将所述数据层通过转化器转化为视图层。

具体实施时，使用Javascript，HTML语言、CSS语言等语言，数据层通过转化器转化为视图层。JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。CSS(Cascading Style Sheets,层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

进一步地，将所述数据层通过转化器转化为视图层，包括：

将数据层的数据通过转化器转化为视图层的页面元素。

具体实施时，转化器获取数据层的数据后，将数据层需要编辑的数据转化为视图层的页面元素。页面元素为网页页面的单个元素。网页元素包括但不限于文字、图片、音频、动画、视频。文字，符合排版要求。图片、音频、动画、视频，符合网络传输及专题需要。

进一步地，获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改，包括：

获取用户在视图层的操作，根据操作生成对页面元素的拖拽、放大及更改颜色内容操作。

具体实施时，用户通过改变视图层的操作，间接的更改了数据层的数据，在处理保存时，用户通过我们提供的可换操作工具，可以简单轻易的实现页面元素的拖拽，放大及更改颜色内容等操作。

进一步地，将所述数据层通过转化器转化为视图层前，包括：

预先生成一个转化器，所述转化器支持离线模式及上线模式。

具体实施时，预先通过编程语言生成转化器，为了使得网页编辑可视化，将转化器生成在本地，可同时支持离线模式和上线模式。

进一步地，预先生成一个转化器，包括：

预先开辟一个用于存储属性配置的存储空间；

创建实现代码转视图的控制器；

创建任务调度器，根据用户的操作调用对应的控制器，完成转化器的生成。

具体实施时，转化器的主要实现原理是先开辟一个store空间，该控件复制存储管属性配置，再创建一个Controler，主要是实现代码转视图的具体实现，以及最后的Scheduler，负责协调和调用具体的Controler,以实现用户不同的操作调用不同的控制器。

由以上方法实施例可知，本发明实施例提出了一种基于浏览器的网页编辑可视化实现方法，基于浏览器的可视化操作与代码相互转换技术，是指在浏览器环境中用户可以在多个不同的设备下，只需几步简单的通过可视化的操作快速升成HTML，并直接显示在浏览器上。

基于本地浏览器实现可视化编辑网页的技术，具有低功耗、高性能、轻量级、易操作开发成本低，时效性高的特点。

本方法极大的优化了页面开发，简化了开发步骤，降低了用户使用成本，该方法应用场景宽泛，实时性强，前景市场潜力巨大。

需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。

本发明另一实施例提供一种基于浏览器的网页编辑可视化实现装置，如图2所示，装置1包括：

数据获取模块11，用于获取待编辑的网页数据对应的数据层；

视图转换模块12，用于将所述数据层通过转化器转化为视图层；

数据更改模块13，用于获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改。

具体实施方式见方法实施例，此处不再赘述。

本发明另一实施例提供一种基于浏览器的网页编辑可视化实现设备，如图3所示，设备10包括：

一个或多个处理器110以及存储器120，图3中以一个处理器110为例进行介绍，处理器110和存储器120可以通过总线或者其他方式连接，图3中以通过总线连接为例。

处理器110用于完成，设备10的各种控制逻辑，其可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISCMachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器110还可以是任何传统处理器、微处理器或状态机。处理器110也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。

存储器120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的基于浏览器的网页编辑可视化实现方法对应的程序指令。处理器110通过运行存储在存储器120中的非易失性软件程序、指令以及单元，从而执行设备10的各种功能应用以及数据处理，即实现上述方法实施例中的基于浏览器的网页编辑可视化实现方法。

存储器120可以包括存储程序区和存储数据区，其中，存储程序区可存储操作装置、至少一个功能所需要的应用程序；存储数据区可存储根据设备10使用所创建的数据等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器120可选包括相对于处理器110远程设置的存储器，这些远程存储器可以通过网络连接至设备10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

一个或者多个单元存储在存储器120中，当被一个或者多个处理器110执行时，执行上述任意方法实施例中的基于浏览器的网页编辑可视化实现方法，例如，执行以上描述的图1中的方法步骤S100至步骤S300。

本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤S100至步骤S300。

作为示例，非易失性存储介质能够包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦ROM(EEPROM)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(RAM)。通过说明并非限制，RAM可以以诸如同步RAM(SRAM)、动态RAM、(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强型SDRAM(ESDRAM)、Synchlink DRAM(SLDRAM)以及直接Rambus(兰巴斯)RAM(DRRAM)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器组件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。

本发明的另一种实施例提供了一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使处理器执行上述方法实施例的基于浏览器的网页编辑可视化实现方法。例如，执行以上描述的图1中的方法步骤S100至步骤S300。

以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际需要选择其中的部分或者全部模块来实现本实施例方案的目的。

通过以上的实施例的描述，本领域的技术人员可以清楚地了解到各实施例可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存在于计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分的方法。

除了其他之外，诸如"能够'、"能"、"可能"或"可以"之类的条件语言除非另外具体地陈述或者在如所使用的上下文内以其他方式理解，否则一般地旨在传达特定实施方式能包括(然而其他实施方式不包括)特定特征、元件和/或操作。因此，这样的条件语言一般地还旨在暗示特征、元件和/或操作对于一个或多个实施方式无论如何都是需要的或者一个或多个实施方式必须包括用于在有或没有输入或提示的情况下判定这些特征、元件和/或操作是否被包括或者将在任何特定实施方式中被执行的逻辑。

已经在本文中在本说明书和附图中描述的内容包括能够提供基于浏览器的网页编辑可视化实现方法及装置的示例。当然，不能够出于描述本公开的各种特征的目的来描述元件和/或方法的每个可以想象的组合，但是可以认识到，所公开的特征的许多另外的组合和置换是可能的。因此，显而易见的是，在不脱离本公开的范围或精神的情况下能够对本公开做出各种修改。此外，或在替代方案中，本公开的其他实施例从对本说明书和附图的考虑以及如本文中所呈现的本公开的实践中可能是显而易见的。意图是，本说明书和附图中所提出的示例在所有方面被认为是说明性的而非限制性的。尽管在本文中采用了特定术语，但是它们在通用和描述性意义上被使用并且不用于限制的目的。

Claims (10)

1.一种基于浏览器的网页编辑可视化实现方法,其特征在于,所述方法包括：

获取待编辑的网页数据对应的数据层；

将所述数据层通过转化器转化为视图层；

获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改。

2.根据权利要求1所述的基于浏览器的网页编辑可视化实现方法，其特征在于，所述将所述数据层通过转化器转化为视图层，包括：

通过编程语言将所述数据层通过转化器转化为视图层。

3.根据权利要求2所述的基于浏览器的网页编辑可视化实现方法，其特征在于，所述将所述数据层通过转化器转化为视图层，包括:

通过Javascript语言和/或HTML语言，将所述数据层通过转化器转化为视图层。

4.根据权利要求1所述的基于浏览器的网页编辑可视化实现方法，其特征在于，所述将所述数据层通过转化器转化为视图层，包括：

将数据层的数据通过转化器转化为视图层的页面元素。

5.根据权利要求4所述的基于浏览器的网页编辑可视化实现方法，其特征在于，所述获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改，包括：

获取用户在视图层的操作，根据操作生成对页面元素的拖拽、放大及更改颜色内容操作。

6.根据权利要求1所述的基于浏览器的网页编辑可视化实现方法，其特征在于，所述将所述数据层通过转化器转化为视图层前，包括：

预先生成一个转化器，所述转化器支持离线模式及上线模式。

7.根据权利要求6所述的基于浏览器的网页编辑可视化实现方法，其特征在于，所述预先生成一个转化器，包括：

预先开辟一个用于存储属性配置的存储空间；

创建实现代码转视图的控制器；

创建任务调度器，根据用户的操作调用对应的控制器，完成转化器的生成。

8.一种基于浏览器的网页编辑可视化实现装置，其特征在于，所述装置包括：

数据获取模块，用于获取待编辑的网页数据对应的数据层；

视图转换模块，用于将所述数据层通过转化器转化为视图层；

数据更改模块，用于获取用户在视图层的操作，根据用户的操作对数据层的数据进行更改。

9.一种基于浏览器的网页编辑可视化实现设备，其特征在于，所述设备包括至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7任一项所述的基于浏览器的网页编辑可视化实现方法。

10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的基于浏览器的网页编辑可视化实现方法。

Images