CN110442336A - 一种网页开发方法及装置、存储介质及电子设备 - Google Patents

Abstract

本申请涉及前端开发技术领域，提供一种网页开发方法及装置、存储介质及电子设备。其中，网页开发方法应用于后台服务器，包括：向前端设备提供用于对页面进行可视化搭建的编辑器，编辑器中配置有用于搭建页面的至少一种组件；接收前端设备通过编辑器发送的配置项，配置项是编辑器根据由组件搭建的页面生成的；保存配置项。在上述方法中，由后台服务器提供具有可视化搭建功能的编辑器供前端设备访问，该编辑器中配置有预定义的组件，从而用户可以在编辑器中直接利用这些组件快速完成页面的搭建，提高前端页面的开发效率。编辑器的用户既可以是开发人员，也可以是非开发人员，从而可以降低各职能的人员之间的沟通成本。

Description

一种网页开发方法及装置、存储介质及电子设备

技术领域

本申请涉及前端开发技术领域，具体而言，涉及一种网页开发方法及装置、存储介质及电子设备。

背景技术

目前，在前端页面的开发过程中，网页的布局以及网页实现的逻辑都需要开发人员以代码的方式进行编写，从而开发人员需要进行大量的重复劳动，开发效率低下。

发明内容

本申请实施例的目的在于提供一种网页开发方法及装置、存储介质及电子设备，由后台服务器向前端设备提供可视化编辑器进行页面的搭建，同时在编辑器中配置好预定义的组件供用户选择，从而可以快速完成页面搭建，从而可以改善前端页面开发效率低下的问题。

为实现上述目的，本申请提供如下技术方案：

第一方面，本申请实施例提供一种网页开发方法，应用于后台服务器，所述方法包括：向前端设备提供用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；接收所述前端设备通过所述编辑器发送的配置项，所述配置项是所述编辑器根据由所述组件搭建的页面生成的；保存所述配置项。

在上述方法中，由后台服务器提供具有可视化搭建功能的编辑器供前端设备访问，该编辑器中配置有预定义的至少一种组件，从而用户可以在编辑器中直接利用这些组件通过可视化的操作快速完成页面的搭建，不必再编写大量重复性的代码，从而可以改善前端页面开发效率低下的问题。

另一方面，编辑器的用户既可以是开发人员，也可以是非开发人员，也即开发过程对非技术人员也是友好的。例如，项目的产品经理也可以直接在编辑器中完成页面的布局，再由开发人员进一步完善页面的功能，从而可以降低开发项目组中各职能的人员之间的沟通成本，进一步提高开发效率。

在第一方面的一种实现方式中，所述编辑器中还配置有用于搭建页面的至少一个页面模板，所述页面模板中能够容纳所述组件。

页面模板可以是指进行了某些布局和/或具有某些功能的页面，从而用户可以在选择的页面模板的基础上进一步搭建页面，以提高开发效率。

在第一方面的一种实现方式中，所述页面模板中配置有用于容纳所述组件的至少一个插槽。

在第一方面的一种实现方式中，所述插槽被配置在所述页面模板中预设的位置。

在第一方面的一种实现方式中，所述插槽包括多种类型，每种类型的插槽被配置为仅能容纳特定类型的组件。

在以上三种实现方式中，插槽是指页面模板中一种能够容纳组件的容器，从而便于对组件进行布局。插槽在页面中的位置可以是固定的，也可以是可移动的，若某个插槽在页面中的位置是预设好的，意味着该插槽所容纳的组件只能显示在页面中固定的区域内，相当于对组件的布局进行了某种限定，以便符合实际的开发需求。插槽可以有不同的类型，每种类型的插槽可以仅支持容纳特定类型的组件，相当于限定了每种类型的组件所能布局的位置，以便符合实际的开发需求。

在第一方面的一种实现方式中，所述组件包括至少一个属性，所述编辑器还配置有用于设置所述属性的属性设置界面。

在第一方面的一种实现方式中，所述至少一个属性包括所述组件的显示属性和/或所述组件的行为属性。

在以上两种实现方式中，组件的属性可以通过属性设置界面编辑，从而方便用户定义符合开发需求的组件，这里所说的属性包括组件的显示属性和/或所述组件的行为属性，其中显示属性是指组件的外观、位置等属性，行为属性是指组件实现的功能、逻辑等属性。

在第一方面的一种实现方式中，所述至少一种组件中包括占位组件，所述占位组件用于在搭建页面时代替尚未开发完成的组件。

由于组件的开发和页面的搭建可能并不是完全同步进行的，在搭建页面时某些组件可能尚未开发完成，因此可以用占位组件暂时将其替代，不影响页面开发进度。

在第一方面的一种实现方式中，所述向前端设备提供用于对页面进行可视化搭建的编辑器，包括：通过网页服务的方式向前端设备提供用于对页面进行可视化搭建的编辑器。

编辑器采用网页服务的方式提供，从而用户在前端设备上只要通过普通的网页浏览器就可以访问该编辑器进行页面的搭建，无需安装任何额外的客户端，十分方便。

在第一方面的一种实现方式中，在所述接收前端设备发送的配置项之后，在所述保存所述配置项之前，所述方法还包括：对所述配置项进行整理合并，以去除所述配置项中的冗余信息。

编辑器直接生成的配置项中可能存在一定的冗余信息(例如组件的某些未定义的属性)，消除这些冗余信息可以缩小配置项的体积，便于配置项的存储。

在第一方面的一种实现方式中，所述方法还包括：响应所述前端设备通过所述编辑器发起的配置项导出请求，向所述前端设备发送已保存的所述配置项，以使所述前端设备将接收到的所述配置项导出；其中，被导出的所述配置项能够通过部署在其他开发项目中的软件开发工具包(Software Development Kit，SDK)转换为供其他项目使用的页面代码。

对于一些不是利用本申请实施例提供的编辑器进行前端页面开发的项目，也可以引入通过本申请实施例提供的编辑器搭建的页面，方法是先导出页面对应的配置项，然后在目标项目中部署SDK，并在目标项目中增加逻辑将配置项传递给SDK，以使SDK将配置项转换为页面代码供目标项目使用。从而，通过本申请实施例提供的编辑器搭建的页面也可以展现在目标项目中，这无疑扩展了本申请实施例提供的方法的适用范围。

在第一方面的一种实现方式中，所述方法还包括：向所述前端设备提供用于开发组件的集成开发环境；接收所述前端设备通过所述集成开发环境发送的开发好的组件，并将所述组件保存至组件库中。

用户可以基于上述集成开发环境开发新的组件以丰富组件库，从而进一步提高前端页面的开发效率，丰富页面的功能。其中，集成开发环境可以通过网页服务的方式提供。

在第一方面的一种实现方式中，在所述保存所述配置项之后，所述方法还包括：将已保存的所述配置项转换为页面代码，对所述页面代码进行编译，生成发布包；将所述发布包部署到目标服务器上。

在第一方面的一种实现方式中，所述将已保存的所述配置项转换为页面代码，包括：利用部署在当前开发项目中的SDK将已保存的所述配置项转换为页面代码。

在第一方面的一种实现方式中，在所述将已保存的所述配置项转换为页面代码之前，所述方法还包括：向所述前端设备提供用于页面编译及发布的编译发布系统；响应所述前端设备通过所述编译发布系统发起的审批请求，通知审批人对搭建好的页面进行审批。

以上三种实现方式提供了对保存的配置项进行编译和发布的流程。在编译和发布之前可以先进行页面的审批。审批通过后，编译和发布可以完全自动进行，完成发布包的快速部署。其中，编译发布系统可以通过网页服务的方式提供。

此外，可以在SDK中实现将配置项转换为页面代码的功能，从而在某个项目中需要这项功能时，可以将SDK部署到该项目中，例如当前开发项目，又例如之前在阐述配置项导出时提到的其他开发项目。

在第一方面的一种实现方式中，所述方法还包括：向所述前端设备提供用于展现已发布页面的中心化后台页面；响应所述前端设备通过浏览器发起的对所述中心化后台页面的访问请求，向所述前端设备返回所述中心化后台页面，所述中心化后台页面中的代码被所述浏览器执行时，能够根据所述页面访问请求中携带的所述已发布页面的标识从所述目标服务器上拉取对应的发布包，并根据所述发布包渲染出所述已发布页面。

以上实现方式提供了中心化后台服务来支持用户对已发布页面的访问，中心化后台服务可以通过网页服务的方式提供一个中心化后台页面供用户访问，中心化后台页面中内置用于页面展现的代码，浏览器执行这些代码后可以对已发布页面进行展现。

第二方面，本申请实施例提供一种网页开发方法，应用于前端设备，所述方法包括：访问后台服务器提供的用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面；通过所述编辑器响应用户作出的保存操作，根据搭建好的页面生成配置项；向所述后台服务器发送所述配置项。

在第二方面的一种实现方式中，所述编辑器中还配置有用于搭建页面的至少一个页面模板，在所述通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面之前，所述方法还包括：通过所述编辑器响应用户作出的模板选择操作，在所述编辑器中显示用户选择的页面模板，所述页面模板中能够容纳所述组件。

在第二方面的一种实现方式中，所述页面模板中配置有用于容纳所述组件的至少一个插槽。

在第二方面的一种实现方式中，所述插槽被配置在所述页面模板中预设的位置。

在第二方面的一种实现方式中，所述插槽包括多种类型，每种类型的插槽被配置为仅能容纳特定类型的组件。

在第二方面的一种实现方式中，所述编辑操作包括：对所述组件的添加操作、选中操作、移动操作以及删除操作中的至少一种。

在第二方面的一种实现方式中，所述组件包括至少一个属性，所述编辑操作还包括对所述组件的属性设置操作，所述编辑器还配置有用于设置所述属性的属性设置界面，所述通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面，包括：通过所述编辑器响应用户作出的属性设置操作，在所述编辑器中显示所述属性设置界面。

在第二方面的一种实现方式中，所述至少一个属性包括所述组件的显示属性和/或所述组件的行为属性。

在第二方面的一种实现方式中，所述至少一种组件中包括占位组件，所述占位组件用于在搭建页面时代替尚未开发好的组件。

在第二方面的一种实现方式中，所述访问后台服务器提供的用于对页面进行可视化搭建的编辑器，包括：访问后台服务器通过网页服务的方式提供的用于对页面进行可视化搭建的编辑器。

第三方面，本申请实施例提供一种网页开发装置，配置于后台服务器，包括：编辑器提供模块，用于向前端设备提供用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；配置项接收模块，用于接收所述前端设备通过所述编辑器发送的配置项，所述配置项是所述编辑器根据由所述组件搭建的页面生成的；配置项保存模块，用于保存所述配置项。

第四方面，本申请实施例提供一种网页开发装置，配置于前端设备，包括：编辑器访问模块，用于访问后台服务器提供的用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；页面显示模块，用于通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面；配置项生成模块，用于通过所述编辑器响应用户作出的保存操作，根据搭建好的页面生成配置项；配置项发送模块，用于向所述后台服务器发送所述配置项。

第五方面，本申请实施例提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序指令，所述计算机程序指令被处理器读取并运行时，执行前两方面或前两方面的任意一种可能的实现方式提供的方法的步骤。

第六方面，本申请实施例提供一种电子设备，包括存储器以及处理器，所述存储器中存储有计算机程序指令，所述计算机程序指令被所述处理器读取并运行时，执行前两方面或前两方面的任意一种可能的实现方式提供的方法的步骤。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本申请实施例提供的一种网页开发方法的交互图；

图2示出了本申请实施例提供的一种可视化搭建编辑器的示意图；

图3示出了本申请实施例提供的一种可视化搭建系统的功能模块图；

图4示出了本申请实施例提供的一种网页开发装置的功能模块图；

图5示出了本申请实施例提供的另一种网页开发装置的功能模块图；

图6示出了本申请实施例提供的一种电子设备的结构框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

图1示出了本申请实施例提供的一种网页开发方法的交互图。参照图1，该网页开发方法可以包括组件开发、页面搭建、配置项导出、编译发布、页面展现等环节，需要指出，这些环节在时间上并不一定按照图1中从上到下的顺序执行，只是为了方便起见将这些环节都在图1中示出而已。网页开发过程通过前端设备和后台服务器之间的交互实现，前端设备泛指用户在页面开发过程中使用的终端设备，例如台式机、笔记本电脑、手机等。后台服务器泛指向前端设备提供服务，以支持页面开发的设备，例如单台服务器、多台服务的组合、服务器集群等。还需要指出，前端设备与后台服务器既可以是实体设备，也可以是虚拟设备。

下面结合图1分别对各个环节进行介绍，首先从最基本的页面搭建环节开始。

页面搭建

步骤S110：前端设备访问后台服务器提供的用于对页面进行可视化搭建的编辑器。

在一些实现方式中，后台服务器可以通过网页服务的方式向前端设备提供编辑器，即该编辑器本身也是网页的形式。从而前端设备可以通过普通的网页浏览器对网页服务的地址进行访问，在浏览器中展现出编辑器的界面，然后用户可以在该界面中进行页面搭建。当然，也不排除后台服务器通过其他方式提供编辑器的情况，在这些情况中前端设备可以通过专门的客户端软件对编辑器进行访问。

编辑器中配置有用于搭建页面的至少一种组件，所谓组件是指构成页面的基本功能单元，例如页面中的一个按钮、一个文本框等等。所谓可视化搭建主要是指步骤S111，即用户利用编辑器提供的功能、组件以及通过一些可视化的编辑操作进行页面的布局以及功能开发。其中，可视化的编辑操作不同于普通的编辑操作(如直接输入代码)，其操作的结果往往直接展现在编辑器中，例如，拖动一个组件，该组件在页面中的位置就会移动，删除一个组件，该组件就会从页面中消失，等等。

使用编辑器进行页面开发的用户可以是任意的用户，也可以是具有一定权限的用户，例如可以要求用户先登录到系统，之后才能使用编辑器进行页面搭建。

步骤S111：前端设备通过编辑器响应用户作出的编辑操作，在编辑器中显示用户利用组件搭建的页面。

在一些实现方式中，编辑器可以提供一个空白的页面供用户在其中布置组件。在另一些实现方式中，编辑器还配置有用于搭建页面的至少一个页面模板，页面模板可以是指已经预先进行了某些布局和/或预先开发了某些功能的页面，在编辑器加载后，可以提示用户选择模板，然后根据用户作出的模板选择操作，在编辑器中显示用户选择的页面模板，从而用户可以在页面模板中布置组件或者进行其他操作，在这些实现方式中，由于用户是在页面模板的基础上进行进一步搭建(即执行步骤S111)，所以页面开发效率较高。页面模板可以根据实际的项目需求进行配置，这里不作限定，作为一种可选的方案，空白页面也可以作为一种页面模板供用户选择。

编辑器支持的编辑操作包括但不限于对组件的添加操作、选中操作、移动操作以及删除操作中的至少一种。添加操作用于向页面中添加组件，其效果为在页面中显示添加的组件，例如，编辑器可以提供组件添加按钮，用户点击后弹出一个包含所有组件的组件选择窗口，然后用户从窗口中选择组件完成组件的添加。选中操作用于选中页面中的某个组件，例如，用户可以通过单击鼠标的方式选中某个组件，其效果为使组件处于被选中的状态，被选中的组件可以高亮显示，或者在组件外围显示一个选中框等等。移动操作用于在页面中移动组件，其效果为组件被显示在移动至的位置，例如，用户可以先选中组件，然后通过拖拽鼠标的方式对组件进行移动，或者点击键盘上的方向键对组件进行移动，等等。删除操作用于从页面中删除组件，其效果为在页面中不再显示被删除的组件，例如，可以先选中组件，然后通过点击键盘上的删除键(如Del)进行删除，或者组件上也可以提供删除标记(例如×符号)，用户通过鼠标点击删除标记进行删除。

在一些实现方式中，每个组件都包括至少一个属性，编辑器还配置有用于设置这些属性的属性设置界面，用户作出的编辑操作中还可以包括针对组件的属性设置操作，从而支持用户定义满足开发需求的组件。例如，用户通过鼠标双击或者右键单击页面中的某个组件，可以弹出一个窗口(属性设置界面)，在该窗口中显示了该组件的全部属性，用户可以对这些属性进行修改。当然，属性设置界面也不一定要以弹窗的方式，例如也可以是在编辑器中以面板的方式呈现。

上述组件的属性可以包括，但不限于组件的显示属性和/或行为属性。其中显示属性是指组件的外观、位置等属性，例如，用户可以设置组件的颜色。行为属性是指组件实现的功能、逻辑等属性，例如，用户可以设置一个按钮被点击后进行怎样的响应行为。

在一些实现方式中，页面模板中配置有用于容纳组件的至少一个插槽。插槽是指页面模板中一种能够容纳组件的容器，每个插槽中都可以容纳一个或多个组件，即插槽所容纳的组件只能显示在页面中该插槽所在的区域，通过配置插槽，对组件的布局进行了某种限定，以便符合实际的开发需求。

插槽可以实现为可移动的，也可以实现为位置固定的，若插槽在页面中的位置是预设好的(即在开发页面模板时已经配置好了插槽的位置)，意味着插槽所容纳的组件只能显示在页面中固定的区域内，相当于对组件的布局进行了进一步限定，以便符合实际的开发需求。

插槽可以有不同的类型，例如，可以根据插槽的功能将其区分为不同的类型。每种类型的插槽可以被限制为仅支持容纳特定类型的组件，例如，按钮插槽用于布置按钮类的组件，其他类型的组件不能布置在该插槽中。施加这样的限制相当于限定了每种类型的组件所能布局的位置，以便符合实际的开发需求。

上述页面模板、页面模板中的插槽、插槽中的组件形成了层次化的结构，便于用户实现页面的布局，在后文还会给出一个具体的页面搭建的例子。

步骤S112：前端设备通过编辑器响应用户作出的保存操作，根据搭建好的页面生成配置项。

用户搭建完页面后，可以作出保存操作以便保存搭建好的页面，例如，编辑器中可以提供保存按钮供用户点击，或者用户也可以通过在键盘上输入快捷键进行保存。

配置项根据搭建好的页面对应生成，其中包含了页面的全部信息。配置项可以采用Json的形式，Json的语法便于组织层次化的数据。例如，某个搭建好的页面转换为的配置项如下：

其中，fieldItem和featureButton是页面中的两个插槽，两个插槽中分别布置了一个组件，以fieldItem插槽为例，该组件包括四种属性，分别是name、type、key以及props，每种属性对应有属性值，例如name的属性值是输入框，这些属性的属性值在搭建时都可以进行编辑，之前已经阐述。

步骤S113：前端设备向后台服务器发送配置项。

步骤S114：后台服务器保存配置项。

后台服务器上可以提供持久化存储数据库，用于保存接收到的配置项，保存的配置项可以在之后用于页面的修改、预览、导出等用途。当然也不排除后台服务器将配置项存储到其他服务器上，例如内容分发网络(Content Delivery Network，CDN)中的节点上。

在一些实现方式中，后台服务器可以对外提供存储接口，在步骤S113中，前端设备可以通过调用该存储接口进行配置项的保存，调用时将配置项作为调用参数传入。

进一步的，由编辑器直接生成的配置项中可能存在一定的冗余信息(例如组件的某些未定义的属性)，消除这些冗余信息可以缩小配置项的体积，便于配置项的存储。从而在一些实现方式中，后台服务器会首先将接收到的配置项进行整理合并，去除冗余信息，然后再将其进行保存。

通过上面对页面搭建过程的介绍可以看出，在本申请实施例提供的网页开发方法中，用户使用具有可视化搭建功能的编辑器进行页面的搭建，该编辑器中配置有预定义的组件(在一些实现方式中还可以配置页面模板和插槽)并支持可视化的编辑操作，从而用户可以在编辑器中直接利用这些组件快速完成页面的搭建，不必再编写大量重复性的代码，进而能够提高前端页面开发的效率。

需要指出，页面搭建过程中的用户，既可以是开发人员(例如程序员)，也可以是非开发人员(例如项目的产品经理)，其中非开发人员一般是不懂技术或者不太懂技术的，但由于上述可视化搭建过程主要是通过可视化的编辑操作完成，所以对非技术人员友好，从而这些非开发人员可以参与到页面的搭建过程中来。例如，产品经理可以直接在编辑器中完成页面原型的布局，再由开发人员进一步完善页面的功能，不必再像传统方式一样产品经理只是将需求告诉开发人员，页面完全由开发人员编写，从而可以降低开发项目组中各职能的人员之间的沟通成本，实现产品设计与开发思维相一致，进一步提高开发效率。

下面通过一个个具体的实施例，进一步介绍编辑器、页面模板、插槽以及组件可能的实现方式。

在该实施例中，编辑器配置的页面模板包括：列表查询页模板、表单编辑页模板以及表单内容展示模板。其中，列表查询页模板用于实现数据的搜索并将搜索结果通过列表展示(查询数据)；表单编辑页模板用于处理用户输入的表单数据(收集数据)；表单内容展示模板用于展示表单数据的具体内容(展示数据)。

列表查询页模板使用四种插槽：搜索表单插槽、功能按钮插槽、列表展示项插槽和列表操作项插槽。表单编辑页模板使用两种插槽：表单展示项插槽和功能按钮插槽。表单内容展示模板使用两种插槽：字段展示项插槽和功能按钮插槽。

搜索表单插槽用于输入数据搜索条件，支持容纳如下组件：文本、文本框、选择器、单选框、复选框、计数器、日期选择器、时间选择器、日期时间选择器、日期范围选择器、时间范围选择器、日期时间范围选择器以及占位组件。

功能按钮插槽用于通过功能按钮实现相应的功能，支持容纳如下组件：查看按钮、导出按钮、提交按钮、取消按钮、搜索按钮、重置按钮、编辑按钮、启用按钮、禁用按钮、新增按钮、删除按钮以及占位组件。

列表展示项插槽用于在列表中展示搜索结果，支持容纳如下组件：表格列组件以及占位组件。

列表操作项插槽用于操作列表中的一条或多条记录，支持容纳如下组件：表格操作按钮组件以及占位组件。

表单展示项插槽用于表单数据输入，支持容纳如下组件：文本、文本框、选择器、单选框、复选框、计数器、日期选择器、时间选择器、日期时间选择器、日期范围选择器、时间范围选择器、日期时间范围选择器以及占位组件。

字段展示项插槽用于表单数据展示，支持容纳如下组件：文本、文本框、选择器、单选框、复选框、计数器、日期选择器、时间选择器、日期时间选择器、日期范围选择器、时间范围选择器、日期时间范围选择器以及占位组件。

其中，占位组件是一种特殊的组件，组件可以不包括可展示的内容，仅用于在页面中占位。使用占位组件的一种可能的场景是：组件的开发和页面的搭建并不是完全同步进行的，在搭建页面时某些组件可能尚未开发完成，因此可以用占位组件暂时将其替代，不影响页面开发进度，在组件开发好后再将占位组件用实际的组件替换掉。

下面参考图2进一步介绍该实施例(假设采用列表查询页模板进行页面搭建)：

编辑器200包括两个区域，页面显示区域210以及组件选择区域220，两个区域之间用虚线分隔。页面显示区域210中目前显示的是列表查询页模板，页面模板中配置有插槽211，插槽211中显示有用户添加的组件212。具体而言，列表查询页模板配置有搜索表单插槽、功能按钮插槽、列表展示项插槽、列表操作项插槽共四个插槽。组件选择区域220也显示有搜索表单区域、功能按钮区域、列表展示项区域、列表操作项共区域四个组件选择区域，与四个插槽一一对应。

以搜索表单区域为例，该区域右下角有一个添加组件按钮，点击后会弹出一个组件选择窗口，其中包括搜索表单插槽可以容纳的全部组件(见上面的阐述)。假设用户选择了其中的文本框组件，则文本框组件会显示在搜索表单插槽中(该文本框组件命名为输入框，以下简称输入框组件)，同时搜索表单区域中也会显示一个小的矩形框，代表输入框组件。这个矩形框上有一个×符号，点击后可以将输入框组件从搜索表单插槽中删除，同时搜索表单区域中对应的矩形框也会删除。其他几个插槽的情况是类似的，限于篇幅不再一一介绍。插槽中的组件可以进行拖动，也可以通过双击进行属性编辑(或者双击组件选择区域中与组件对应的矩形框也可以)。

可以理解的，图2只是编辑器界面的一种实现方式，并不是唯一的实现方式。并且，图2示出的也可以只是编辑器界面的主要组成部分，而不是全部的组成部分。因此，不应将图2示出的内容视为对本申请保护范围的限制。

组件开发

步骤S100：前端设备访问后台服务器提供的集成开发环境(IntegratedDevelopment Environment，IDE)。

步骤S100中提供的集成开发环境用于页面搭建环节中使用的组件的开发。该集成开发环境的功能和现有的集成开发环境功能类似，区别在于步骤S100中的集成开发环境不是前端设备本地的开发软件，而是后台服务器提供的，例如，后台服务器可以通过网页服务的方式提供集成开发环境，从而前端设备可以通过普通的网页浏览器对集成开发环境的地址进行访问，在浏览器中展现出集成开发环境的界面，然后用户可以在该界面中进行组件开发。

步骤S101：前端设备通过集成开发环境响应用户作出的开发操作，完成组件开发。

步骤S102：前端设备向后台服务器发送开发好的组件。

步骤S103：后台服务器将组件保存至组件库。

开发组件的过程中，开发人员可以声明组件要支持的属性，并为这些属性提供默认的值以便对组件进行开发调试。组件对属性的调用规则(即组件如何使用这些属性)可以内置在集成开发环境中，开发人员无需关心，从而可以减轻开发人员的负担。组件实际用于搭建时用户会编辑组件的属性，属性值通过依赖注入的方式传递给组件，并根据调用规则为组件所使用。关于组件开发的其他内容这里不作详细阐述，可以参考现有技术中的实现方式。

用户可以基于上述集成开发环境开发新的组件以丰富组件库，从而进一步提高前端页面的开发效率，丰富页面的功能。其中，组件库可以在后台服务器上，也可以在其他服务器上，例如CDN中的节点上。

配置项导出

步骤S120：前端设备通过编辑器向后台服务器发起配置项导出请求。

例如，在编辑器中可以设置一个配置项导出按钮，用户可以点击该按钮，编辑器响应用户的点击操作，向后台服务器发起配置项导出请求，请求中可以指定要导出的配置项，既可以是当前正在搭建的页面对应的配置项，也可以是之前搭建的某个页面对应的配置项。配置项于页面搭建环节中保存在后台服务器上。

步骤S121：后台服务器将需要导出的配置项返回给前端设备。

步骤S122：前端设备将将配置项导出，用于合并至其他项目。

前端设备既可以将配置项导出为文件，也可以导出为文本(文本可以放到系统的剪切板中，供用户粘贴到其他地方)。导出的配置项可用于任意的用途，其中一种用途是合并至其他前端页面开发项目，例如，不是利用本申请实施例提供的编辑器进行前端页面开发的项目(以下简称目标项目)，使得这些项目中也可以使用通过本申请实施例提供的编辑器搭建的页面。

具体的合并方法可以是：先导出页面对应的配置项，然后在目标项目中部署SDK，该SDK中可以实现将配置项转换为页面代码的功能(对于此功能的描述见步骤S133)，之后将导出的配置项放到目标项目中，并在目标项目中增加逻辑将配置项传递给SDK，以使SDK将配置项转换为页面代码供目标项目使用。

从而，通过导出配置项，本申请实施例提供的编辑器搭建的页面也可以展现在其他项目中，这使得本申请实施例提供的网页开发方法开发出的页面具有良好的兼容性。

编译及发布

步骤S130：前端设备访问后台服务器提供的编译发布系统。

步骤S130中提供的编译发布系统用于将页面搭建环节中保存的配置项进行自动化的编译以及发布。后台服务器可以通过网页服务的方式提供编译发布系统，从而前端设备可以通过普通的网页浏览器对编译发布系统的地址进行访问，在浏览器中展现出编译发布系统的界面，然后用户可以在该界面中进行编译发布的相关操作。

步骤S131：前端设备通过编译发布系统向后台服务器发起审批请求。

步骤S132：后台服务器通知审批人对搭建好的页面进行审批。

开发人员搭建好页面后，多数情况下不能直接进行发布，需要由审批人(例如，开发人员的上级领导)对项目进行审批，审批通过后才能够进行发布。在编译发布系统中，开发人员可以提起审批请求(例如，可以点击界面中的某些按钮)，后台服务器接收到审批请求后可以通知审批人进行审批，例如，将审批消息与审批人的账号相关联，从而审批人登陆编译发布系统后就能够看到审批消息，审批消息中可以包括对将要发布的页面的描述信息。在一些实现方式中，审批人若想要具体查看开发人员搭建的页面，还可以从编译发布系统跳转至可视化编辑器中进行查看(例如，通过单点登录等方式)。

当然，也不排除开发人员具有较高的权限，能够直接发布页面的情况，此时也可以跳过步骤S131和步骤S132。

步骤S133：后台服务器将已保存的配置项转换为页面代码。

由于保存的配置项(例如，采用Json格式保存)可能不适于直接编译，因此需要将其先转换为页面代码的形式。

将配置项转换为页面代码的功能可以在某个SDK中实现，从而在某个项目中需要这项功能时，可以方便地将SDK部署到该项目中，例如，可以将SDK部署到后台服务器，以便支持在当前项目中将配置项转换为页面代码(即支持步骤S133)。当然，也不排除直接将转换逻辑写到后台服务器的代码中，而不通过部署SDK的方式。

步骤S134：后台服务器对页面代码进行编译，生成发布包。

编译的对象包括页面代码中的js代码、DSL框架等内容，编译完成后，对编译产生的文件进行打包(可能会进行压缩)以生成发布包，例如js文件包。打包时可以针对不同的系统环境生成适应于每个环境的发布包，供用户在不同环境下访问页面时使用，这里所称的系统环境包括但不限于：开发调试环境、测试环境、准生产环境、生产环境等。

步骤S135：后台服务器将发布包部署到目标服务器上。

目标服务器可以是后台服务器本身，也可以是CDN的节点，例如CDN的静态资源库。

在上述编译及发布环节中，一旦审批通过，后台服务器可以完全自动化地完成页面的编译、发布以及发布包的部署，整个编译发布过程人工介入较少，执行效率较高。进一步的，编译发布系统还可以提供系统环境选择、版本递增控制、组件编译等功能供用户使用。

页面展现

步骤S140：前端设备访问后台服务器提供的中心化后台页面。

步骤S141：前端设备通过浏览器执行中心化后台页面中的代码，展现已发布页面。

后台服务器可以提供中心化后台服务来支持用户对已发布页面的访问，中心化后台服务包括通过网页服务的方式提供一个中心化后台页面供用户访问，中心化后台页面中内置用于页面展现的代码，浏览器执行这些代码后可以对已发布页面进行展现。

具体而言，用户要对已发布页面进行访问时，可以先通过前端设备上的浏览器访问中心化后台页面，页面访问请求中携带有已发布页面的标识(例如，页面的名称或地址)，后台服务器响应该页面访问请求，向前端设备返回中心化后台页面(中心化后台页面可以是一个不可见的页面，只是作为展现已发布页面的容器)，中心化后台页面中内置用于页面展现的代码，该代码被浏览器执行时，会根据页面访问请求中携带的已发布页面的标识从目标服务器上拉取对应的发布包(即已发布页面所在的发布包)，然后浏览器会根据拉取的发布包渲染出已发布页面，在展现已发布页面的过程中，可以通过中心化后台服务支持组件的异步加载。

此外，中心化后台服务还提供组件缓存、路由控制、开发环境热更新、线上监控等功能供用户使用。其中，组件缓存功能用于用户连续访问同一个页面时，对页面中的组件进行缓存，避免多次加载同一组件；路由控制功能用于用户从A页面跳转至B页面时，执行路由跳转功能；线上监控功能用于对被访问的已发布页面进行监控，例如错误监控、性能监控等；开发环境热更新功能用于支持在页面搭建的过程中进行实时预览。

图3示出了本申请实施例提供的一种可视化搭建系统的功能模块图。参照图3，可视化搭建系统300运行于后台服务器，包括四个主要功能单元，分别是：可视化搭建界面310、系统服务320、中心化后台服务330以及SDK 340。

其中，可视化搭建界面310提供可视化的编辑器、集成开发环境、组件管理、发布审批、配置项导出等功能，在前文基本已经介绍，其中组件管理功能是指在开发组件的过程中对组件的版本进行管理，比如创建新的组件版本、合并组件版本、创建新的组件等。

系统服务320提供编译服务、发布服务、热更新服务、发布审批服务等基础服务，供其他功能单元使用。例如，编译服务供、发布服务、发布审批服务都用于支持可视化搭建界面310中的发布审批功能的实现，即在审批通过后自动完成编译和发布。热更新服务则用于支持中心化后台服务330中的开发环境热更新功能。

中心化后台服务330提供组件缓存、路由控制、线上监控、开发环境热更新、中心化后台页面等功能，在前文已经介绍，不再重复阐述。

SDK 340提供将配置项转化为页面代码的功能，在前文已经介绍，不再重复阐述。

基于上述可视化搭建系统，用户可以高效地完成页面的可视化搭建以及后续的编译发布，使前端页面开发变得简单。

图4示出了本申请实施例提供的网页开发装置400的功能模块图，该装置配置于后台服务器。参照图4，网页开发装置400包括：编辑器提供模块410，用于向前端设备提供用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；配置项接收模块420，用于接收所述前端设备通过所述编辑器发送的配置项，所述配置项是所述编辑器根据由所述组件搭建的页面生成的；配置项保存模块430，用于保存所述配置项。

在一些实现方式中，所述编辑器中还配置有用于搭建页面的至少一个页面模板，所述页面模板中能够容纳所述组件。

在一些实现方式中，所述页面模板中配置有用于容纳所述组件的至少一个插槽。

在一些实现方式中，所述插槽被配置在所述页面模板中预设的位置。

在一些实现方式中，所述插槽包括多种类型，每种类型的插槽被配置为仅能容纳特定类型的组件。

在一些实现方式中，所述组件包括至少一个属性，所述编辑器还配置有用于设置所述属性的属性设置界面。

在一些实现方式中，所述至少一个属性包括所述组件的显示属性和/或所述组件的行为属性。

在一些实现方式中，所述至少一种组件中包括占位组件，所述占位组件用于在搭建页面时代替尚未开发完成的组件。

在一些实现方式中，编辑器提供模块410向前端设备提供用于对页面进行可视化搭建的编辑器，包括：通过网页服务的方式向前端设备提供的用于对页面进行可视化搭建的编辑器。

在一些实现方式中，网页开发装置400还包括配置项整理模块，用于在配置项接收模块420接收前端设备发送的配置项之后，在配置项保存模块430保存所述配置项之前，对所述配置项进行整理合并，以去除所述配置项中的冗余信息。

在一些实现方式中，网页开发装置400还包括：配置项导出模块，用于响应所述前端设备通过所述编辑器发起的配置项导出请求，向所述前端设备发送已保存的所述配置项，以使所述前端设备将接收到的所述配置项导出；其中，被导出的所述配置项能够通过部署在其他开发项目中的SDK转换为供其他项目使用的页面代码。

在一些实现方式中，网页开发装置400还包括：集成开发环境提供模块，用于向所述前端设备提供用于开发组件的集成开发环境；组件接收模块，用于接收所述前端设备通过所述集成开发环境发送的开发好的组件，并将所述组件保存至组件库中。

在一些实现方式中，网页开发装置400还包括：配置项转换模块，用于在配置项保存模块430保存所述配置项之后，将已保存的所述配置项转换为页面代码；编译模块，用于对所述页面代码进行编译，生成发布包；发布模块，用于将所述发布包部署到目标服务器上。

在一些实现方式中，配置项转换模块将已保存的所述配置项转换为页面代码，包括：利用部署在当前开发项目中的SDK将所述配置项转换为页面代码。

在一些实现方式中，网页开发装置400还包括：编译发布系统提供模块，用于在配置项转换模块将已保存的所述配置项转换为页面代码之前，向所述前端设备提供用于页面编译及发布的编译发布系统；审批模块，用于响应所述前端设备通过所述编译发布系统发起的审批请求，通知审批人对搭建好的页面进行审批。

在一些实现方式中，网页开发装置400还包括：中心化后台页面提供模块，用于向所述前端设备提供用于展现已发布页面的中心化后台页面；中心化后台页面返回模块，用于响应所述前端设备通过浏览器发起的对所述中心化后台页面的访问请求，向所述前端设备返回所述中心化后台页面，所述中心化后台页面中的代码被所述浏览器执行时，能够根据所述页面访问请求中携带的所述已发布页面的标识从所述目标服务器上拉取对应的发布包，并根据所述发布包渲染出所述已发布页面。

本申请实施例提供的网页开发装置400，其实现原理及产生的技术效果在前述方法实施例中已经介绍，为简要描述，装置实施例部分未提及之处，可参考方法施例中相应内容。

图5示出了本申请实施例提供的网页开发装置500的功能模块图，该装置配置于前端设备。参照5，网页开发装置500包括：编辑器访问模块510，用于访问后台服务器提供的用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；页面显示模块520，用于通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面；配置项生成模块530，用于通过所述编辑器响应用户作出的保存操作，根据搭建好的页面生成配置项；配置项发送模块540，用于向所述后台服务器发送所述配置项。

在一些实现方式中，所述编辑器中还配置有用于搭建页面的至少一个页面模板，网页开发装置500还包括：页面模板选择模块，用于在页面显示模块520通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面之前，通过所述编辑器响应用户作出的模板选择操作，在所述编辑器中显示用户选择的页面模板，所述页面模板中能够容纳所述组件。

在一些实现方式中，所述页面模板中配置有用于容纳所述组件的至少一个插槽。

在一些实现方式中，所述插槽被配置在所述页面模板中预设的位置。

在一些实现方式中，所述插槽包括多种类型，每种类型的插槽被配置为仅能容纳特定类型的组件。

在一些实现方式中，所述编辑操作包括：对所述组件的添加操作、选中操作、移动操作以及删除操作中的至少一种。

在一些实现方式中，所述组件包括至少一个属性，所述编辑操作还包括对所述组件的属性设置操作，所述编辑器还配置有用于设置所述属性的属性设置界面，页面显示模块520通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面，包括：通过所述编辑器响应用户作出的属性设置操作，在所述编辑器中显示所述属性设置界面。

在一些实现方式中，所述至少一个属性包括所述组件的显示属性和/或所述组件的行为属性。

在一些实现方式中，所述至少一种组件中包括占位组件，所述占位组件用于在搭建页面时代替尚未开发好的组件。

在一些实现方式中，编辑器访问模块510访问后台服务器提供的用于对页面进行可视化搭建的编辑器，包括：访问后台服务器通过网页服务的方式提供的用于对页面进行可视化搭建的编辑器。

本申请实施例提供的网页开发装置500，其实现原理及产生的技术效果在前述方法实施例中已经介绍，为简要描述，装置实施例部分未提及之处，可参考方法施例中相应内容。

图6示出了本申请实施例提供的电子设备600的结构框图。参照图6，电子设备600包括：处理器610、存储器620以及通信接口630，这些组件通过通信总线640和/或其他形式的连接机构(未示出)互连并相互通讯。

其中，存储器620包括一个或多个(图中仅示出一个)，其可以是，但不限于，随机存取存储器(Random Access Memory，简称RAM)，只读存储器(Read Only Memory，简称ROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，简称EEPROM)等。处理器610以及其他可能的组件可对存储器620进行访问，读和/或写其中的数据。

处理器610包括一个或多个(图中仅示出一个)，其可以是一种集成电路芯片，具有信号的处理能力。上述的处理器610可以是通用处理器，包括中央处理器(CentralProcessing Unit，简称CPU)、微控制单元(Micro Controller Unit，简称MCU)、网络处理器(Network Processor，简称NP)或者其他常规处理器；还可以是专用处理器，包括数字信号处理器(Digital Signal Processor,简称DSP)、专用集成电路(Application SpecificIntegrated Circuits，简称ASIC)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

通信接口630包括一个或多个(图中仅示出一个)，可以用于和其他设备进行直接或间接地通信，以便进行数据的交互。通信接口630可以是以太网接口；可以是移动通信网络接口，例如3G、4G、5G网络的接口；还是可以是具有数据收发功能的其他类型的接口。

在存储器620中可以存储一个或多个计算机程序指令，处理器610可以读取并运行这些计算机程序指令，以实现本申请实施例提供的网页开发方法的步骤以及其他期望的功能。

可以理解，图6所示的结构仅为示意，电子设备600还可包括比图6中所示更多或者更少的组件，或者具有与图6所示不同的配置。图6中所示的各组件可以采用硬件、软件或其组合实现。于本申请实施例中，后台服务器以及前端设备均可采用电子设备600实现。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序指令，所述计算机程序指令被计算机的处理器读取并运行时，执行本申请实施例提供的网页开发方法的步骤。例如，计算机可读存储介质可以实现为上述电子设备600中的存储器620。

在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

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

再者，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (17)

1.一种网页开发方法，其特征在于，应用于后台服务器，所述方法包括：

向前端设备提供用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；

接收所述前端设备通过所述编辑器发送的配置项，所述配置项是所述编辑器根据由所述组件搭建的页面生成的；

保存所述配置项。

2.根据权利要求1所述的网页开发方法，其特征在于，在所述接收前端设备发送的配置项之后，在所述保存所述配置项之前，所述方法还包括：

对所述配置项进行整理合并，以去除所述配置项中的冗余信息。

3.根据权利要求1所述的网页开发方法，其特征在于，所述方法还包括：

响应所述前端设备通过所述编辑器发起的配置项导出请求，向所述前端设备发送已保存的所述配置项，以使所述前端设备将接收到的所述配置项导出；

其中，被导出的所述配置项能够通过部署在其他开发项目中的软件开发工具包SDK转换为供其他项目使用的页面代码。

4.一种网页开发方法，其特征在于，应用于前端设备，所述方法包括：

访问后台服务器提供的用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；

通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面；

通过所述编辑器响应用户作出的保存操作，根据搭建好的页面生成配置项；

向所述后台服务器发送所述配置项。

5.根据权利要求4所述的网页开发方法，其特征在于，所述编辑器中还配置有用于搭建页面的至少一个页面模板，在所述通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面之前，所述方法还包括：

通过所述编辑器响应用户作出的模板选择操作，在所述编辑器中显示用户选择的页面模板，所述页面模板中能够容纳所述组件。

6.根据权利要求5所述的网页开发方法，其特征在于，所述页面模板中配置有用于容纳所述组件的至少一个插槽。

7.根据权利要求6所述的网页开发方法，其特征在于，所述插槽被配置在所述页面模板中预设的位置。

8.根据权利要求6所述的网页开发方法，其特征在于，所述插槽包括多种类型，每种类型的插槽被配置为仅能容纳特定类型的组件。

9.根据权利要求4所述的网页开发方法，其特征在于，所述编辑操作包括：对所述组件的添加操作、选中操作、移动操作以及删除操作中的至少一种。

10.根据权利要求9所述的网页开发方法，其特征在于，所述组件包括至少一个属性，所述编辑操作还包括对所述组件的属性设置操作，所述编辑器还配置有用于设置所述属性的属性设置界面，所述通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面，包括：

通过所述编辑器响应用户作出的属性设置操作，在所述编辑器中显示所述属性设置界面。

11.根据权利要求10所述的网页开发方法，其特征在于，所述至少一个属性包括所述组件的显示属性和/或所述组件的行为属性。

12.根据权利要求4所述的网页开发方法，其特征在于，所述至少一种组件中包括占位组件，所述占位组件用于在搭建页面时代替尚未开发好的组件。

13.根据权利要求4-12中任一项所述的网页开发方法，其特征在于，所述访问后台服务器提供的用于对页面进行可视化搭建的编辑器，包括：

访问后台服务器通过网页服务的方式提供的用于对页面进行可视化搭建的编辑器。

14.一种网页开发装置，配置于后台服务器，其特征在于，包括：

编辑器提供模块，用于向前端设备提供用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；

配置项接收模块，用于接收所述前端设备通过所述编辑器发送的配置项，所述配置项是所述编辑器根据由所述组件搭建的页面生成的；

配置项转换模块，用于保存所述配置项。

15.一种网页开发装置，配置于前端设备，其特征在于，包括：

编辑器访问模块，用于访问后台服务器提供的用于对页面进行可视化搭建的编辑器，所述编辑器中配置有用于搭建页面的至少一种组件；

页面显示模块，用于通过所述编辑器响应用户作出的编辑操作，在所述编辑器中显示用户利用所述组件搭建的页面；

配置项生成模块，用于通过所述编辑器响应用户作出的保存操作，根据搭建好的页面生成配置项；

配置项发送模块，用于向所述后台服务器发送所述配置项。

16.一种计算机可读存储介质，其特征在于，计算机可读存储介质上存储有计算机程序指令，所述计算机程序指令被处理器读取并运行时，执行所如权利要求1-13中任一项所述的方法的步骤。

17.一种电子设备，其特征在于，包括存储器以及处理器，所述存储器中存储有计算机程序指令，所述计算机程序指令被所述处理器读取并运行时，执行所如权利要求1-13中任一项所述的方法的步骤。