本发明涉及计算机技术领域，具体而言，涉及一种网页构建方法、装置、电子设备及存储介质。
背景技术：
随着互联网技术的飞跃发展，互联网企业进行营销活动时对落地页的需求量较大。开发人员每次在进行落地页开发时需要对落地页的所有内容进行开发，而落地页的大部分需求都是类似或者相同的，从而导致开发的工作量和成本较大。
技术实现要素：
有鉴于此，本发明实施例提供了一种网页构建方法、装置、电子设备及存储介质。
为了实现上述目的，本发明采用的技术方案如下：
第一方面，本发明实施例提供了一种网页构建方法，所述方法包括：获得用户于预先存储的页面模板中对预先存储的组件的编辑操作，所述编辑操作包括对所述组件的选取操作以及放置操作；获取所述选取操作对应的选取组件的组件信息，其中，所述组件信息包括渲染组件html以及组件CSS样式；将所述渲染组件html以及所述组件CSS样式添加至所述页面模板中所述放置操作对应的位置。
第二方面，本发明实施例提供了一种网页构建装置，所述装置包括操作获得模块、信息获取模块以及信息添加模块，其中，所述操作获得模块用于获得用户于预先存储的页面模板中对预先存储的组件的编辑操作，所述编辑操作包括对所述组件的选取操作以及放置操作；所述信息获取模块用于获取所述选取操作对应的选取组件的组件信息，其中，所述组件信息包括渲染组件html以及组件CSS样式；所述信息添加模块用于将所述渲染组件html以及所述组件CSS样式添加至所述页面模板中所述放置操作对应的位置。
第三方面，本发明实施例提供了一种电子设备，所述电子设备包括存储器和处理器，所述存储器存储有计算机指令，当所述计算机指令由所述处理器读取并执行时，使所述处理器执行上述第一方面提供的网页构建方法。
第四方面，本发明实施例提供了一种存储介质，所述存储介质中存储有计算机指令，其中，所述计算机指令在被读取并运行时执行上述第一方面提供的网页构建方法。
本发明实施例提供的网页构建方法、装置、电子设备及存储介质，通过获得用户于预先存储的页面模板中对预先存储的组件的编辑操作，该编辑操作包括对上述组件的选取操作以及放置操作，然后获取该选取操作对应的选取组件的组件信息，其中，组件信息包括渲染组件html以及组件CSS样式，最后将上述渲染组件html以及上述组件CSS样式添加至页面模板中放置操作对应的位置。从而，该网页构建方法、装置、电子设备及存储介质可以实现仅通过用户对预先存储的组件的操作，就可以实现网页的开发，从而可以节省开发时间以及开发成本。
为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图1示出了本发明实施例提供的电子设备的方框示意图；
图2示出了本发明实施例提供的网页构建方法的流程图；
图3示出了本发明实施例提供的网页构建方法中步骤S120流程图；
图4示出了本发明实施例提供的网页构建方法中步骤S130流程图；
图5示出了本发明实施例提供的网页构建装置的模块图；
图6示出了本发明实施例提供的网页构建装置中信息获取模块的模块图；
图7示出了本发明实施例提供的网页构建装置中信息添加模块的模块图。
具体实施方式
下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
图1示出了一种可应用于本发明实施例中的电子设备的结构框图。如图1所示，电子设备100包括存储器102、存储控制器104，一个或多个(图中仅示出一个)处理器106、外设接口108、射频模块110、音频模块112、显示单元114等。这些组件通过一条或多条通讯总线/信号线116相互通讯。
存储器102可用于存储软件程序以及模块，如本发明实施例中的网页构建方法及装置对应的程序指令/模块，处理器106通过运行存储在存储器102内的软件程序以及模块，从而执行各种功能应用以及数据处理，如本发明实施例提供的网页构建方法。
存储器102可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。处理器106以及其他可能的组件对存储器102的访问可在存储控制器104的控制下进行。
外设接口108将各种输入/输出装置耦合至处理器106以及存储器102。在一些实施例中，外设接口108，处理器106以及存储控制器104可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。
射频模块110用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。
音频模块112向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。
显示单元114在电子设备100与用户之间提供一个显示界面。具体地，显示单元114向用户显示视频输出，这些视频输出的内容可包括文字、图形、视频及其任意组合。
可以理解，图1所示的结构仅为示意，电子设备100还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。
第一实施例
如图2示出了本发明实施例提供的网页构建方法的一种流程图。请参见图2，该网页构建方法包括：
步骤S110：获得用户于预先存储的页面模板中对预先存储的组件的编辑操作，所述编辑操作包括对所述组件的选取操作以及放置操作。
在本发明实施例中，网络页面可以由多个组件构成，页面通用的组件可以预先由开发人员开发完成后存储于执行该网页构建方法的电子设备中。另外，电子设备中还可以存储有网页的页面模板。
其中，组件是web页面的功能单元，分为布局组件、基础组件、列表组件、功能组件、活动组件等，不同组件有不同的实现原理与展现形式。另外，每个组件可以抽象为4个部分，即渲染脚本(render.js)、样式(style.css)、模板(index.html)、启动脚本(app.js)。
可以理解的是，电子设备中存储有上述组件的相关文件信息，例如渲染脚本(render.js)、样式(style.css)、模板(index.html)、启动脚本(app.js)等文件信息，也存储有上述页面模板的相关文件信息。
在本发明实施例中，可以对所有的预先存储的组件以及模板进行编号，每个组件以及每个模板对应一个ID号，以便于网页构建中对用户选取的组件和模板的调用。
可以理解的是，上述页面通用的组件可以为进行网页开发时，大多数网页需求的组件。上述页面模板可以是可以为常用的网页模板。
在本发明实施例中，可以将上述预先存储的页面模板以及组件进行展示，具体可以是以缩略图、图标等方式进行展示。然后基于用户的选择，可以将用户选取的页面模板具体呈现。
在本发明实施例中，用户可以将需求的组件进行选取，并放置于用户需求的位置。因此，可以获得到用户于上述页面模板中对组件的编辑操作，编辑操作可以包括对组件的选取操作以及放置操作。
可以理解的是，选取操作可以是对应用户对具体的组件的选取，放置操作则可以是对应用户对选取的组件的如何放置。
在本发明实施例中，用户于预先存储的页面模板中对预先存储的组件的编辑操作可以是用户对多个组件进行的编辑操作，也可以是对一个组件进行的编辑操作。具体可以根据用户的实际需求而定。
步骤S120：获取所述选取操作对应的选取组件的组件信息，其中，所述组件信息包括渲染组件html以及组件CSS样式。
在获得到上述用户于上述页面模板中对组件的编辑操作之后，再根据上述的编辑操作完成网页的配置等。
首先，需要获取上述用户的选取的选取组件的组件信息。
在本发明实施例中，请参见图3，步骤S120：获取选取操作对应的选取组件的组件信息，其中，所述组件信息包括渲染组件html以及组件CSS样式，可以包括：
步骤S121：获取所述选取操作对应的选取组件。
可以理解的是，可以基于上述用户的选取操作确定出用户选取的具体哪些组件。具体可以是，基于用户的操作确定出用户选取的选取组件对应的ID号。
步骤S122：读取所述选取组件对应的组件模板以及渲染脚本。
在确定出用户选取的选取组件之后，再根据选取组件的ID号来读取上述选取组件对应的组件模板以及渲染脚本。可以理解的是，可以根据ID号来查找出上述选取组件的文件信息。
步骤S123：通过执行渲染脚本，将所述选取组件对应的组件参数写入所述组件模板，得到渲染组件html。
在读取出选取组件的组件模板以及渲染脚本之后，再进行渲染操作。具体的，通过执行上述渲染脚本，将选取组件对应的组件参数写入上述组件模板，得到渲染组件html。
例如：组件参数：
组件模板：
<script id＝"hotLink-child"type＝"text/html">
<a class＝"linkBox"href＝"{{href}}"target＝"{target}}"></a>
</script>
替换结果：
<a class＝"linkBox"href＝"http://www.douyu.com"target＝"_blank"></a>
在本发明实施例中，组件参数可以是用户进行设置的组件参数，在进行上述操作之后，可以将组件模板的原来的参数替换为上述组件参数，以使达到用户需求的组件的效果。
步骤S124：读取所述组件对应的样式文件信息，得到组件CSS样式。
再读取组件信息文件信息中的样式文件信息，即style.css，得到组件CSS样式字符串。
例如，linkBox{display:block；cursor:pointer；height:100％；width:100％；}。
可以理解的是，上述操作可以根据用户的需求的不同配置，还原html模板，灵活并且高效。另外，将不同组件的CSS样式拆分，仅读取用户选取的组件的CSS样式，即后续仅加载页面引用组件的样式，减少页面大小，提升页面渲染效率。
步骤S130：将所述渲染组件html以及所述组件CSS样式添加至所述页面模板中所述放置操作对应的位置。
在获得上述渲染组件html以及组件CSS样式之后，再将渲染组件html以及组件CSS样式添加至页面模板中对应的位置，即放置操作对应的位置。
在本发明实施例中，由于存在嵌套组件的情况，即某个组件中嵌套有其他组件的情况，为满足将父组件先进行渲染。因此，在对组件信息进行添加时，需要对每个组件进行判断，以保证将父组件先进行渲染。
在本发明实施例中，请参见图4，步骤S130可以包括：
步骤S131：判断所述选取组件中的第一选取组件是否挂载有父选取组件。
可以理解的是，在对多个选取组件的组件信息进行添加时，可以对正被添加的第一选取组件进行判断其是否挂载有父选取组件，即该第一选取组件是否为子组件。例如，第一选取组件为其他选取组件嵌套的组件，则第一选取组件为子组件；第一选取组件不是其他选取组件嵌套的组件，则第一选取组件不为子组件。
步骤S132：在为是时，将所述父选取组件的所述渲染组件html以及所述组件CSS样式添加至所述页面模板中所述放置操作对应的位置。
在上述第一选取组件挂载有父选取组件时，则该第一选取组件对应的父选取组件的渲染组件html以及组件CSS样式添加至页面模板中放置操作对应的位置。
具体的，将该父选取组件的渲染组件html添加至页面模板中用户的放置操作对应的位置，将组件CSS样式添加至页面模板的页面头部。
步骤S133：将所述第一选取组件的所述渲染组件html以及所述组件CSS样式添加至所述父选取组件中所述放置操作对应的位置。
在将上述第一选取组件的父选取组件的组件信息添加至页面的相应位置之后，再将该第一选取组件的组件信息添加至该第一选取组件的父选取组件中放置操作对应的位置。
具体的，将第一选取组件的渲染组件html添加至第一选取组件的放置操作对应的插槽中。然后，再将该第一选取组件的组件CSS样式添加至页面模板的页面头部。
在本发明实施例中，还存在第一选取组件还嵌套有其他选取组件的情况。因此，该网页构建方法还可以包括：
判断所述第一选取组件是否嵌套有子选取组件；在所述第一选取组件嵌套有子选取组件时，将所述子选取组件的所述渲染组件html以及组件CSS样式添加至所述第一选取组件中所述放置操作对应的位置。
可以理解的是，判断该第一选取组件是否嵌套有子选取组件，即判断该第一选取组件是否嵌套有其他选取组件；然后在第一选取组件嵌套有子选取组件时，将该第一选取组件的子选取组件的组件信息添加至第一选取组件中放置操作对应的位置。
具体可以是，将第一选取组件的子选取组件的渲染组件html添加至第一选取组件中放置操作对应的插槽处，将第一选取组件的子选取组件的组件CSS样式添加至页面模板的页面头部。
在本发明实施例中，在步骤S131中判断出第一选取组件没有挂载父选取组件，即表示该第一选取组件不是其他组件的子组件，则可以直接将第一选取组件的组件信息添加至页面模板中放置操作对应的位置处。即直接将第一选取组件的渲染组件html添加至页面模板中放置操作对应的位置，将第一选取组件的组件CSS样式添加至页面模板的页面头部。
然后，可以再进一步判断该第一选取组件是否嵌套有子选取组件。然后在第一选取组件嵌套有子选取组件时，将该第一选取组件的子选取组件的组件信息添加至第一选取组件中放置操作对应的位置。
在本发明实施例中，可以是在对每个组件的组件信息进行获取之后，再根据上述对组件信息添加的逻辑对组件信息进行添加，保证父组件在子组件之前进行渲染。当然，也可以是，在根据上述对组件信息添加的逻辑对组件信息进行添加时，再获取对应的组件的组件信息以进行组件信息添加。具体的先后顺序在本发明实施例中并不作为限定。
在对选取组件中的每个组件的组件信息进行添加之后，则完成了网页中组件的渲染，即完成了对于选取的页面模板中需求的组件的渲染，从而完成了网页构建工作。
本发明第一实施例提供的网页构建方法，可以将网页中的模块以组件的形式呈现，页面开发者通过拖拽组件，修改组件的属性，即可完成落地页的开发。从而可以大大节省了开发时间和成本。
第二实施例
本发明第二实施例提供了一种网页构建装置200，请参见图5，该网页构建装置200包括：操作获得模块210、信息获取模块220以及信息添加模块230。其中，所述操作获得模块210用于获得用户于预先存储的页面模板中对预先存储的组件的编辑操作，所述编辑操作包括对所述组件的选取操作以及放置操作；所述信息获取模块220用于获取所述选取操作对应的选取组件的组件信息，其中，所述组件信息包括渲染组件html以及组件CSS样式；所述信息添加模块230用于将所述渲染组件html以及所述组件CSS样式添加至所述页面模板中所述放置操作对应的位置。
在本发明实施例中，请参见图6，所述信息获取模块220可以包括组件获取单元221、模板获取单元222、组件渲染单元223以及样式获取单元224。其中，所述组件获取单元221用于获取所述选取操作对应的选取组件；所述模板获取单元222用于读取所述选取组件对应的组件模板以及渲染脚本；所述组件渲染单元223用于通过执行渲染脚本，将所述选取组件对应的组件参数写入所述组件模板，得到渲染组件html；所述样式获取单元224用于读取所述组件对应的样式文件信息，得到组件CSS样式。
在本发明实施例中，请参见图7，所述信息添加模块230包括第一组件判断单元231、第一添加单元232以及第二添加单元233。其中，所述组件判断单元231用于判断所述选取组件中的第一选取组件是否挂载有父选取组件；所述第一添加单元232用于在所述选取组件中的第一选取组件挂载有父选取组件时，将所述父选取组件的所述渲染组件html以及所述组件CSS样式添加至所述页面模板中所述放置操作对应的位置；所述第二添加单元233用于将所述第一选取组件的所述渲染组件html以及所述组件CSS样式添加至所述父选取组件中所述放置操作对应的位置。
在本发明实施例中，所述信息添加模块230还可以包括第二组件判断单元以及第三添加单元。其中，所述第二组件判断单元用于判断所述第一选取组件是否嵌套有子选取组件；所述第三添加单元用于在所述第一选取组件嵌套有子选取组件时，将所述子选取组件的所述渲染组件html以及组件CSS样式添加至所述第一选取组件中所述放置操作对应的位置。
需要说明的是，本发明第二实施例提供的网页构建装置为本发明第一实施例提供的网页构建方法对应的装置，其他具体内容可以参见本发明第一实施例提供的网页构建方法，在此不再一一赘述。
第三实施例
本发明第三实施例提供了一种电子设备100，请参见图1，该电子设备100包括存储器102和处理器106，所述存储器102存储有计算机指令，当所述计算机指令由所述处理器106读取并执行时，使所述处理器106执行本发明第一实施例提供的网页构建方法。
第四实施例
本发明第四实施例提供了一种存储介质，所述存储介质中存储有计算机指令，其中，所述计算机指令在被读取并运行时执行本发明第一实施例提供的网页构建方法。
综上所述，本发明实施例提供的网页构建方法、装置、电子设备及存储介质，通过获得用户于预先存储的页面模板中对预先存储的组件的编辑操作，该编辑操作包括对上述组件的选取操作以及放置操作，然后获取该选取操作对应的选取组件的组件信息，其中，组件信息包括渲染组件html以及组件CSS样式，最后将上述渲染组件html以及上述组件CSS样式添加至页面模板中放置操作对应的位置。从而，该网页构建方法、装置、电子设备及存储介质可以实现仅通过用户对预先存储的组件的操作，就可以实现网页的开发，从而可以节省开发时间以及开发成本。
需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。