网页的保存方法、装置、存储介质和服务器与流程

1.本技术涉及计算机领域，尤其涉及一种网页的保存方法、系统、装置、存储介质和服务器。


背景技术：

2.用户使用网页设计工具进行网页的设计，在完成网页的设计后将网页上传到服务器，由服务器对网页进行保存。在相关技术中，服务器保存网页的方法是：将网页的html(hypertext markup language，超文本标记语言)文件保存到存储器中，html文件的数据结构，结构复杂，冗余信息较多，会消耗服务器上较多的存储空间，另外在终端设备访问该网页时，也会消耗较多的流量。


技术实现要素：

3.本技术提供一种网页的保存方法、装置、存储介质和服务器，解决服务器中保存html格式文件存在占用存储空间较多和访问时流量消耗较大的问题。
4.第一方面，本技术提供了一种网页的保存方法，包括：
5.接收针对网页的保存指令；
6.获取所述网页包括的各个元素的属性信息，以及根据各个元素的属性信息生成json数据；
7.将所述各个元素的json数据写入到数据库中。
8.第二方面，本技术提供了一种网页的保存装置，包括：
9.收发单元，用于接收针对网页的保存指令；
10.生成单元，用于获取所述网页包括的各个元素的属性信息，以及根据各个元素的属性信息生成json数据；
11.保存单元，用于将所述各个元素的json数据写入到数据库中。
12.本技术又一方面提供了一种装置，可以实现上述第一方面的网页的保存方法。可以通过软件、硬件、或者通过硬件执行相应的软件实现上述方法。
13.在一种可能的实现方式中，所述装置的结构中包括处理器、存储器；所述处理器被配置为支持所述装置执行上述网页的保存方法中相应的功能。存储器用于与处理器耦合，其保存所述装置必要的程序(指令)和/或数据。可选的，所述装置还可以包括通信接口用于支持所述装置与其他网元之间的通信。
14.在另一种可能的实现方式中，所述装置，可以包括执行上述方法中相应动作的单元模块。
15.在又一种可能的实现方式中，包括处理器和收发装置，所述处理器与所述收发装置耦合，所述处理器用于执行计算机程序或指令，以控制所述收发装置进行信息的接收和发送；当所述处理器执行所述计算机程序或指令时，所述处理器还用于实现上述方法。其中，所述收发装置可以为收发器、收发电路或输入输出接口。
16.本技术又一方面提供了一种装置，该装置包括：存储器和处理器；其中，所述存储器中存储一组程序代码，且所述处理器用于调用所述存储器中存储的程序代码，执行各方面所述的方法。
17.本技术又一方面提供了一种终端设备，包括上述的装置。终端设备包括但不限于手机、电脑、平板电脑、个人计算机、服务器或工作站等。
18.本技术的又一方面提了供一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述各方面所述的方法。
19.本技术的又一方面提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述各方面所述的方法。
20.根据以上的实施例，在需要保存网页时，根据网页的html代码提取包含的所有元素，将各个元素的属性信息转换为json数据，然后将json数据直接存储到数据库中，相比于直接存储网页的html文件的方式，本技术的json格式的数据具有极小的数据量，因此可以极大的减少存储空间的占用，在终端设备访问该网页时加载速度更快且效率更高，另外也方便对某一元素的属性信息进行调整，无需修改html代码，提高网页设计的便捷性。
附图说明
21.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
22.图1是本技术实施例提供的一种网络架构图；
23.图2是本技术实施例提供的一种网页的保存方法的流程示意图；
24.图3是本技术实施例提供的一种保存装置的结构示意图；
25.图4是本技术实施例提供的一种服务器的结构示意图。
具体实施方式
26.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。同时，在本技术的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本技术。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本技术的描述。
27.图1示出了可以应用于本技术的网页的保存方法或网页的保存装置的示例性系统架构。
28.如图1所示，系统架构可以包括：终端设备101和服务器102。终端设备101和服务器102之间可以通过网络进行通信，网络用于上述各个单元之间提供通信链路的介质。网络可以包括各种类型的有线通信链路或无线通信链路，例如：有线通信链路包括光纤、双绞线或同轴电缆的，无线通信链路包括蓝牙通信链路、无线保真(wireless-fidelity，wi-fi)通信链路或微波通信链路等。
29.其中，服务器102上部署有数据库，数据库可以为关系型数据库，数据库中存储有网页包含的各个元素的json数据，终端设备101向服务器发送网页访问请求时，服务器102将网页关联的所有元素的json数据发送给终端设备，终端设备101根据各个json数据渲染成网页。
30.需要说明的是，终端设备101和服务器102可以是硬件，也可以是软件。当终端设备101和服务器102为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当终端设备101和服务器102为软件时，可以实现成多个软件或软件模块(例如用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不做具体限定。
31.应理解，图1中的终端设备、网络和服务器的数目仅是示意性的。根据实现需要，可以是任意数量的终端设备、网络和服务器。
32.为了说明本技术所述的技术方案，下面通过具体实施例来进行说明。
33.参见图2，图2是本技术实施例提供的网页的保存方法的流程示意图，在本技术实施例中，所述方法包括：
34.s201、接收针对网页的保存指令。
35.其中，服务器启动网页设计工具，网页设计工具加载网页设计界面，网页设计界面包括网页设计区域，用户在网页设计区域中进行网页设计，网页设计的方法可以是可视化编辑或代码编辑。可视化编辑的过程包括：网页设计界面包括元素模板库，元素模板库中包含多个元素，用户可以直接利用输入装置选中多个元素中的一个，然后将选中的元素进行拖拽操作，服务器检测到拖拽操作后生成拖拽指令，基于拖拽指令将选择的元素放置在网页设计区域中，通过可视化的网页编辑，可以实现所见即得的效果，提高网页设计的效果。代码编辑的效果包括：用户在网页设计区域中输入html代码，网页设计工具对html代码进行解析生成对应的元素，用户也可以根据需要将常用的元素加入到原始模板库中，通过代码编辑的方式可以灵活的编辑各种自定义元素。
36.网页设计界面设置有网页的保存按钮，用户需要对网页设计区域中的网页进行保存时，对保存按钮执行预设触发操作，例如：预设触发操作为鼠标左键点击操作，检测到保存按钮上的预设触发操作时，输入装置生成保存指令，处理器接收到针对该网页的保存指令。
37.s202、获取网页包括的各个元素的属性信息，以及根据各个元素的属性信息生成json数据。
38.其中，网页中包括多个元素，该元素可以网页设计工具提供的基础元素，例如：图片、色块、文字、按钮、输入框和超链接等，也可以是用户设计的自定义元素，自定义元素一般由多个不同的基础元素组合而成。属性信息用于表示元素在网页中的属性，包括：序号、类型、尺寸、位置、触发事件和动画效果中的一种或多种。序号表示元素的编号，从1开始编号。类型表示元素的类型，包括图片、色块、文字或自定义类型等。尺寸标识元素的大小和形状。位置表示元素在网页中的像素坐标。触发事件表示人机交互的事件，例如：鼠标点击该元素跳转到新的网页，鼠标滑过该元素发出声音等触发时间。动画效果表示元素在网页中的显示效果。容易理解的是，一个元素的属性信息的数量为多个，除了上述列举的属性信息，还可以包括其他属性信息。
39.json格式(javascript objectnotation)是一种轻量级的数据交换格式。易于人
阅读和编写，同时也易于机器解析和生成。网页中每个元素对应生成一条json数据，json数据包括多个字段和字段的取值，每个字段对应该元素的一个属性信息。
40.举例来说，根据元素生成的一个json数据表示如下：
41.components{
42./**
43.*组件类型如所有矩形这个id都是一样
44.*/
45.id:string；
46./**
47.*组件拖出后的唯一id,即每个矩形这个customid都不一样
48.*/
49.customid:string；
50./**
51.*基础配置相关
52.*/
53.config:config；
54./**
55.*导出时代码上的配置
56.*/
57.codeconfig:codeconfig；
58./**
59.*基础组件类型
60.*组合组件的类型为container
61.*/
62.type:componenttype；
63./**
64.*扩展组件类型，可以用于区分扩展组件
65.*/
66.extendtype:string；
67./**
68.*导出类型,
69.*1.用于导出时决定组件template的构建方法
70.*2.组合组件拆分时,builin(内置组件不会拆分重组)
71.*/
72.exporttype:exporttype；
73./**
74.*组件的html模板
75.*/
76.toolhtml:string；
77./**
78.*组件的svg资源
79.*/
80.svg:string；
81./**
82.*组件的data-option，跟天鹿那个data-option一样作用*/
83.dataoption:object；
84./**
85.*组件的通用配置
86.*/
87.common:common；
88./**
89.*组件的属性配置(输入框)
90.*/
91.attributes:attributes；
92./**
93.*方位坐标数据
94.*/
95.position:position；
96./**
97.*改类型的序号，用于创建时初始化名称，名称序号累加
98.*/
99.orderofextendtype？:number；
100./**
101.*子组件
102.*/
103.children？:array《components》；
104./**
105.*组合组件时,通过这个属性获取父节点的id,top,left等信息
106.*/
107.parentnode？:parentnode；
108./**
109.*母版id,有这个id,更新时会把children内容从母版中同步一次*/
110.blockid？:string；
111./**
112.*母版状态数据
113.*/
114.blockstatelist？:array《statelistitem》；
115./**
116.*母版子组件的动效和事件
117.*/
118.state？:state；
119./**
120.*导出时的代码，目前暂时业务组件在使用
121.*/
122.template？:string；
123.}。
124.上述json数据中加粗字体为一个字段，对应元素的一个属性信息。
125.进一步的，所述获取所述网页包括的各个元素的属性信息，包括：
126.获取所述网页的文档对象模型dom树；
127.遍历所述dom树得到各个元素的属性信息。
128.其中，dom(document object model，文档对象模型)树，dom树中的各个节点对应一个元素，每个元素设置有属性信息，然后遍历dom树中的各个节点得到元素的属性信息，基于各个元素的属性信息生成json数据，每个元素对应一条json数据。
129.另外，在生成各个元素的json数据之后，在需要对元素的属性进行修改时，可以直接修改json数据，例如：在json数据中增加新的字段、删除已有的字段和修改字段的取值，这样在属性调整时无需修改html代码，提高网页设计的效率。
130.s203、将各个元素的json数据写入到数据库中。
131.其中，将各个元素的json数据依次写入到数据库中形成记录，每个记录对应一个json数据，记录的索引为网页id和元素id。
132.在一个或多个可能的实施例中，所述方法还包括：
133.获取所述网页包含的附属文件；其中，所述附属文件包括：图片文件、视频文件或音频文件；
134.将附属文件存储到所述网页关联的项目文件夹中。
135.其中，网页中除了html代码，还可能包括附属文件，在网页中包括附属文件时，为网页创建一个项目文件夹，不同的网页关联不同的项目文件夹，将网页中的附属文件存储到创建的项目文件夹中。
136.在一个或多个可能的实施例中，所述将各个元素的json数据之后，还包括：
137.接收来自终端设备的网页访问请求；其中，所述网页访问请求携带网页id；
138.根据所述网页id在所述数据库中查询关联的所有json数据，以及根据所述网页id在关联的项目文件夹中查询附属文件；
139.将查询到的json数据和附属文件发送给所述终端设备。
140.其中，数据库可以为关系型数据库中，数据库中每一条记录对应一个元素的json数据，在接收到网页访问请求时，利用数据库查询语句将网页关联的所有json数据查询出来，以及在对应的相关文件夹中查询附属文件，将查询到的json数据和附属文件发送给终端设备，终端设备利用json数据和附属文件渲染成网页，由于json数据具有语法简单冗余较小的特点，因此可以降低数据传输过程中流量的消耗。
141.进一步的，所述将查询到的json数据和附属文件发送给所述终端设备之前，还包
括：
142.将查询到的json数据和附属文件进行压缩处理，压缩处理算法本技术不作限制，压缩后的json数据和附属文件的数据量进一步较低，仅此可以进一步较小流量的消耗。
143.实施本技术实施例的有益效果：在需要保存网页时，根据网页的html代码提取包含的所有元素，将各个元素的属性信息转换为json数据，然后将json数据直接存储到数据库中，相比于直接存储网页的html文件的方式，本技术的json格式的数据具有极小的数据量，因此可以极大的减少存储空间的占用，在终端设备访问该网页时加载速度更快且效率更高，另外也方便对某一元素的属性信息进行调整，无需修改html代码，提高网页设计的便捷性。
144.上述图2详细阐述了网页的保存方法。相应的本技术实施例的一种保存装置的结构示意图。
145.请参见图3，图3是本技术实施例提供的一种装置3的结构示意图，该保存装置3(简称装置3)可以包括：收发单元301、生成单元402和保存单元403。
146.收发单元301，用于接收针对网页的保存指令；
147.生成单元302，用于获取所述网页包括的各个元素的属性信息，以及根据各个元素的属性信息生成json数据；
148.保存单元303，用于将所述各个元素的json数据写入到数据库中。
149.在一个或多个可能的实施例中，所述获取所述网页包括的各个元素的属性信息，包括：
150.获取所述网页的文档对象模型dom树；
151.遍历所述dom树得到各个元素的属性信息。
152.在一个或多个可能的实施例中，所述属性信息包括：序号、类型、尺寸、位置、触发事件、动画效果中的一种或多种。
153.在一个或多个可能的实施例中，保存单元303还用于：
154.获取所述网页包含的附属文件；其中，所述附属文件包括：图片文件、视频文件或音频文件；
155.将附属文件存储到所述网页关联的项目文件夹中。
156.在一个或多个可能的实施例中，还包括：
157.响应单元，用于接收来自终端设备的网页访问请求；其中，所述网页访问请求携带网页id；
158.根据所述网页id在所述数据库中查询关联的所有json数据，以及根据所述网页id在关联的项目文件夹中查询附属文件；
159.将查询到的json数据和附属文件发送给所述终端设备。
160.在一个或多个可能的实施例中，还包括：
161.压缩单元，用于将查询到的json数据和附属文件进行压缩处理。
162.在一个或多个可能的实施例中，还包括：
163.编辑单元，用于加载网页设计界面；其中，所述网页设计界面包括工具栏和网页设计区域；
164.基于用户的拖拽指令在元素模板库中选择元素放置在所述网页设计区域中。
165.本技术实施例和图2的方法实施例基于同一构思，其带来的技术效果也相同，具体过程可参照图2的方法实施例的描述，此处不再赘述。
166.装置3可以是终端设备，所述装置3也可以为实现相关功能的现场可编程门阵列(field-programmable gate array，fpga)，专用集成芯片，系统芯片(system on chip，soc)，中央处理器(central processorunit，cpu)，网络处理器(network processor，np)，数字信号处理电路，微控制器(micro controllerunit，mcu)，还可以采用可编程控制器(programmable logic device，pld)或其他集成芯片。
167.请参见图4，为本技术实施例提供了一种服务器的结构示意图。如图4所示，所述服务器400可以包括：至少一个处理器401，至少一个网络接口404，用户接口403，存储器405，至少一个通信总线402。
168.其中，通信总线402用于实现这些组件之间的连接通信。
169.可选的，用户接口403可以包括显示屏(display)、摄像头(camera)，可选用户接口403还可以包括标准的有线接口、无线接口。
170.其中，网络接口404可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。
171.其中，处理器401可以包括一个或者多个处理核心。处理器401利用各种接口和线路连接整个服务器400内的各个部分，通过运行或执行存储在存储器405内的指令、程序、代码集或指令集，以及调用存储在存储器405内的数据，执行服务器400的各种功能和处理数据。可选的，处理器401可以采用数字信号处理(digital signal processing，dsp)、现场可编程门阵列(field-programmable gatearray，fpga)、可编程逻辑阵列(programmable logicarray，pla)中的至少一种硬件形式来实现。处理器401可集成中央处理器(central processing unit，cpu)、图像处理器(graphics processing unit，gpu)和调制解调器等中的一种或几种的组合。其中，cpu主要处理操作系统、用户界面和应用程序等；gpu用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器401中，单独通过一块芯片进行实现。
172.其中，存储器405可以包括随机存储器(randomaccess memory，ram)，也可以包括只读存储器(read-only memory)。可选的，该存储器405包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器405可用于存储指令、程序、代码、代码集或指令集。存储器405可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器405可选的还可以是至少一个位于远离前述处理器401的存储装置。如图4所示，作为一种计算机存储介质的存储器405中可以包括操作系统、网络通信模块、用户接口模块以及应用程序。
173.在图4所示的服务器400中，用户接口403主要用于为用户提供输入的接口，获取用户输入的数据；而处理器401可以用于调用存储器405中存储的应用程序，并具体执行图2的方法实施例。
174.本实施例的构思和图2的方法实施例相同，其带来的技术效果也相同，具体过程可参照图2实施例的描述，此处不再赘述。
175.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以
通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。
176.以上所揭露的仅为本技术较佳实施例而已，当然不能以此来限定本技术之权利范围，因此依本技术权利要求所作的等同变化，仍属本技术所涵盖的范围。