CN111488148B - 网页源代码的生成方法及装置 - Google Patents

Abstract

本发明公开了一种网页源代码的生成方法及装置，其中，该方法包括：响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码。通过本发明，解决了相关技术中只能手动输入网页源代码的技术问题，操作人员不需要编辑代码，提高了网站的开发速度。

Description

网页源代码的生成方法及装置

技术领域

本发明涉及计算机领域，尤其是一种网页源代码的生成方法及装置。

背景技术

相关技术中，网站制作、发布一般对开发者具有一定的技术要求，需要开发者掌握一些专业的网站开发语言；针对一些项目或者活动，如果市场人员或产品运营发现需求后再交付开发去开发，非常不利于快速发布相关的活动或者项目。

相关技术中，开发并发布一个网站，至少需要两个步骤：编写网站代码；代码发布上线，上面两个步骤，都需要专业技术人员才能完成，网页源代码的创作难度非常高，网页制作速度非常低。

针对相关技术中存在的上述问题，目前尚未发现有效的解决方案。

发明内容

为了解决相关技术中只能手动输入网页源代码的技术问题，本发明实施例提供了一种网页源代码的生成方法及装置。

根据本发明的一个实施例，提供了一种网页源代码的生成方法，包括：响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码。

可选的，在根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，所述方法还包括：基于所述网页源代码编译所述web网站的超文本标记语言HTML文档；将所述HTML文档存储至网络服务器；将所述HTML文档的存储地址设置为所述web网站的链接地址；发布所述链接地址。

可选的，在组件列表中选择组件元素包括：在所述组件列表中选择基础组件元素，以及在所述组件列表中选择业务组件元素，其中，所述业务组件元素由多个基础元素组合得到，所述基础组件元素包括以下至少之一：视频、图片、文本、按钮、跑马灯、分割线。

可选的，根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码包括：提取所述配置信息中的配置参数；基于所述配置参数更新所述组件元素在网络端的组件代码；合并更新后的组件代码和网页框架代码，得到web网站的网页源代码。

可选的，在根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，所述方法还包括：从所述网络端获取所述网页源代码；以组件元素为单元编辑所述网页源代码；将编辑后的网页源代码上传到所述网络端。

可选的，在组件列表中选择组件元素之前，所述方法还包括：通过脚手架工具创建多个待选组件元素的组件代码；响应上传指令，获取各个组件代码的预览截图，创建所述组件代码的版本号，将所述组件代码打包封装成JavaScript格式的代码文档；将所述预览截图和所述代码文档上传至内容分发网络CDN节点。

可选的，通过脚手架工具创建多个待选组件元素的组件代码包括：配置第一组件元素与第二组件元素之间的调用函数接口，其中，所述第一组件元素和所述第二组件元素为以下类型之一的组件：视频、图片、文本、按钮、跑马灯、分割线；通过脚手架工具采用所述调用函数接口关联所述第一组件元素与第二组件元素的组件代码，以创建第三组件元素。

根据本发明的另一个实施例，提供了一种网页源代码的生成装置，包括：选择模块，用于响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；处理模块，用于在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；生成模块，用于根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码。

可选的，所述装置还包括：编辑模块，用于在所述生成模块根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，基于所述网页源代码编译所述web网站的超文本标记语言HTML文档；存储模块，用于将所述HTML文档存储至网络服务器；设置模块，用于将所述HTML文档的存储地址设置为所述web网站的链接地址；发布模块，用于发布所述链接地址。

可选的，所述选择模块，具体用于：在所述组件列表中选择基础组件元素，以及在所述组件列表中选择业务组件元素，其中，所述业务组件元素由多个基础元素组合得到，所述基础组件元素包括以下至少之一：视频、图片、文本、按钮、跑马灯、分割线。

可选的，所述生成模块，具体用于：提取所述配置信息中的配置参数；基于所述配置参数更新所述组件元素在网络端的组件代码；合并更新后的组件代码和网页框架代码，得到web网站的网页源代码。

可选的，所述装置还包括：获取模块，用于在所述生成模块根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，从所述网络端获取所述网页源代码；编辑模块，用于以组件元素为单元编辑所述网页源代码；第一上传模块，用于将编辑后的网页源代码上传到所述网络端。

可选的，所述装置还包括：创建模块，用于所述选择模块在组件列表中选择组件元素之前，通过脚手架工具创建多个待选组件元素的组件代码；封装模块，用于响应上传指令，获取各个组件代码的预览截图，创建所述组件代码的版本号，将所述组件代码打包封装成JavaScript格式的代码文档；第二上传模块，用于将所述预览截图和所述代码文档上传至内容分发网络CDN节点。

可选的，所述创建模块，具体用于：配置第一组件元素与第二组件元素之间的调用函数接口，其中，所述第一组件元素和所述第二组件元素为以下类型之一的组件：视频、图片、文本、按钮、跑马灯、分割线；通过脚手架工具采用所述调用函数接口关联所述第一组件元素与第二组件元素的组件代码，以创建第三组件元素。

根据本发明的又一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

根据本发明的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。

通过本实施例的方案，响应操控指令，在组件列表中选择组件元素，然后在预设画布中添加组件元素，在预设配置框中设置组件元素的配置信息，最后根据组件元素和配置信息在网络端生成web网站的网页源代码，使用组件元素替换复杂难懂的组件代码，只需要通过简单的配置操作，就可以完成一个网页页面的制作和上线，根据活动实际需求，可以通过组件元素自动生成网站的源码文件，进而编译生成网站页面并自动化发布。解决了相关技术中只能手动输入网页源代码的技术问题，操作人员不需要编辑网页代码，提高了网站的开发速度。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

构成说明书的一部分的附图描述了本发明的实施例，并且连同描述一起用于解释本发明的原理。

参照附图，根据下面的详细描述，可以更加清楚地理解本发明，其中：

图1是本发明实施例的一种网页源代码的生成计算机的硬件结构框图；

图2是根据本发明实施例的一种网页源代码的生成方法的流程图；

图3是本发明实施例发布组件的流程图；

图4是本发明发布网页项目的流程图；

图5是本发明实施例的系统结构图；

图6是本发明一个实施方式中的网页源代码的生成装置的结构框图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本发明实施例可以应用于计算机系统/服务器，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与计算机系统/服务器一起使用的众所周知的计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统、大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

计算机系统/服务器可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

本申请实施例一所提供的方法实施例可以在移动终端、计算机、服务器或者类似的运算装置中执行。以运行在计算机上为例，图1是本发明实施例的一种网页源代码的生成计算机的硬件结构框图。如图1所示，计算机10可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)和用于存储数据的存储器104，可选地，上述计算机还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述计算机的结构造成限定。例如，计算机10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本发明实施例中的网页源代码的生成方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

在本实施例中提供了一种网页源代码的生成方法，图2是根据本发明实施例的一种网页源代码的生成方法的流程图，如图2所示，该流程包括如下步骤：

步骤S202，响应操控指令，在组件列表中选择组件元素，其中，组件元素为组成页面视图的抽象单元；

本实施例的操控指令可以是用户使用鼠标，键盘，触控介质等触发的选择指令，用于选中组件列表中的一个或多个组件元素，可选的，还可以一并配置该组件的位置、数量等信息，如使用鼠标将组件元素A从组件列表中拖拽到预设画布的位置1中，通过触控介质将组件元素B从组件列表移动到预设画布的位置2中，并输入数字3，则会以位置2为中心在预设画布中生成3个组件元素。

本实施例的组件元素是组件代码实际运行时截图、缩略图、也可以是标识性的图标等，对应一个汇编语言的封装包，如VUE组件等，实现了在客户端上以具体的元素内容表征抽象的组件代码。

步骤S204，在预设画布中添加组件元素，在预设配置框中设置组件元素的配置信息；

本实施例的预设画布是在客户端上显示的一个网页框架界面，在初始状态下，是空白页或者按照预设模板和样式显示的框架界面，与web网站的网页框架代码对应。

步骤S206，根据组件元素和配置信息在网络端生成web网站的网页源代码。

本实施例在客户端实现web网页的界面编辑，由于组成网页的底层代码设置在云端(网络端)，通过设置和添加组件元素，与其对应的组件代码也会配置到网页源代码中。

通过上述步骤，响应操控指令，在组件列表中选择组件元素，然后在预设画布中添加组件元素，在预设配置框中设置组件元素的配置信息，最后根据组件元素和配置信息在网络端生成web网站的网页源代码，使用组件元素替换复杂难懂的组件代码，只需要通过简单的配置操作，就可以完成一个网页页面的制作和上线，根据活动实际需求，可以通过组件元素自动生成网站的源码文件，进而编译生成网站页面并自动化发布。解决了相关技术中只能手动输入网页源代码的技术问题，操作人员不需要编辑代码，提高了网站的开发速度。

在本实施例的一个实施方式中，在生成网页源代码后，还可以进行自动发布，进而实现web网站的生成发布方案。在根据组件元素和配置信息在网络端生成web网站的网页源代码之后，还包括：基于网页源代码编译web网站的超文本标记语言(Hyper Text MarkupLanguage，HTML)文档；将HTML文档存储至网络服务器；将HTML文档的存储地址设置为web网站的链接地址；发布链接地址。其中，HTML文档可以是HTML5版本的文档，当然也可以是其升级或者类似的描述性文本。

本实施例的组件元素包括多种类型，包括基础组件和业务组件元素，其中，基础组件用于实现视频、图片、文本等基础功能，业务组件可以根据业务需求进行定制，组合多个基础组件的功能，进而通过一个组件实现多个基础功能。在组件列表中选择组件元素包括：在组件列表中选择基础组件元素，以及在组件列表中选择业务组件元素，其中，业务组件元素由多个基础元素组合得到，基础组件元素包括以下至少之一：视频、图片、文本、按钮、跑马灯(可以实现在一个界面上按照周期切换文字或多媒体内容)、分割线。

在本实施例中，在预设配置框中设置组件元素的配置信息包括：添加新的配置信息、更新原配置信息，配置信息包括多种，不同组件元素的配置信息不同，如文本组件的配置信息包括：文本内容、字体、颜色、字号等，图片组件的配置信息包括：图片内容(如url地址)、尺寸等，跑马灯组件的配置信息包括：跑马灯内容、背景颜色、字体颜色、切换时间等。在组件元素的配置信息设置完成后，会根据配置信息生成一个真正可在网页上显示的组件，如在文本组件中设置了待显示文字的内容和样式，在视频组件中设置了视频源等，组件在运行时可以调用设置的内容和视频源，进而在用户端显示。

根据组件元素和配置信息在网络端生成web网站的网页源代码包括：提取配置信息中的配置参数；基于配置参数更新组件元素在网络端的组件代码；合并更新后的组件代码和网页框架代码，得到web网站的网页源代码。组件元素在网络端的源代码是不完善的或者只是一个模板代码，通过设置配置信息，可以生成对一个用户需求的组件代码，通过与网页框架代码合并，可以最终生成web网站的网页源代码。

在本实施例的一个实施方式中，在生成网页源代码之后，甚至是在发布web网站之后，可以编辑和更新网页源代码，以实现对web网站的更新。在根据组件元素和配置信息在网络端生成web网站的网页源代码之后，还包括：从网络端获取网页源代码；以组件元素为单元编辑网页源代码；将编辑后的网页源代码上传到网络端。由于网页是以组件为单位生成的，因此在编辑和更新的时候，也以组件为单位进行更新，具体包括：通过客户端的组件元素选中对应的组件代码，进而将对应的组件代码下载到本地，在本地更新完成后，再上传到网络端，替换原组件代码。

在本实施例中，还可以预设创建包括多个组件元素的组件库，形成组件列表，在组件列表中选择组件元素之前，还包括：通过脚手架工具创建多个待选组件元素的组件代码；响应上传指令，获取各个组件代码的预览截图，创建组件代码的版本号，将组件代码打包封装成JavaScript格式的代码文档；将预览截图和代码文档上传至内容分发网络(CDN,Content Delivery Network)节点。

在本实施例中，除了创建基础组件的组件代码之外，还包括业务组件的组件代码。通过脚手架工具创建多个待选组件元素的组件代码包括：配置第一组件元素与第二组件元素之间的调用函数接口，其中，第一组件元素和第二组件元素为以下类型之一的组件：视频、图片、文本、按钮、跑马灯、分割线；通过脚手架工具采用调用函数接口关联第一组件元素与第二组件元素的组件代码，以创建第三组件元素。

本实施例通过采用vue组件生成网页源代码，可以根据业务需求使用基础组件创建复杂的业务组件，组件与组件之间的函数接口包括：props，slots，Methods等，props，从父组件向子组件传递数据的方式，slots为代码脚本中的插槽，分为匿名插槽，具名插槽，作用域插槽，Events为代码脚本中的自定义事件；Methods为代码脚本中的用户事件。其中，Props允许外部环境传递数据给组件，Events允许组件触发外部环境的副作用(额外事件)，Slots允许外部环境将额外的内容组合在组件中。

图3是本发明实施例发布组件的流程图，流程包括：安装脚手架程序，通过脚手架来创建组件模板项目,优选的,可以使用vue组件，模板包含组件工程，和预览工程，启动预览工程，可直接预览当前开发的组件；开发完成后，通过执行上传组件命令，完成组件上传；组件上传命令执行后，系统会自动启动预览程序，并抓取组件截图(对应组件元素的图标)，并上传，然后更新组件版本号，对组件代码进行打包，打包完成后，上传到CDN，并保存组件信息到数据库中。

图4是本发明发布网页项目的流程图，以创建网站为项目，项目发布流程包括：

S41，使用选择网页需要的组件元素，并进行配置；

S42，根据组件配置信息，生成项目文件,基于项目文件的源代码,根据需要进行修改和更新；

S43，通过Git平台将代码提交到远程仓库；

S44，提交完成触发CI/CD(持续集成和持续交付)工具完成项目部署。

本实施例生成的项目的组件可以是VUE组件，所有VUE都是独立部署的，VUE组件用于生成为基于VUE代码的网站源码，开发人员可以对VUE的源码直接进行修改并通过编译后生成html5的源码以及发布网站，发布成功后不受网站发布系统影响，网站稳定性更高。

图5是本发明实施例的系统结构图，包括前端服务50和后端服务52和组件工具54，前端服务提供用户认证、(网页)项目管理、(组件)模板管理等功能，后端服务提供API接口、日志、(网页)项目管理、(组件)模板管理等功能，组件工具包括脚手架工具和组件打包发布工具。在前端服务中，用户认证，用于后台用户认证授权，项目管理，用于H5网页项目管理，模板管理，用于创建管理H5网页项目的页面，组件预览，用于实现组件列表功能展示页，操作记录，用于统计用户操作行为。在后端服务中，API接口，用于提供与前端交互的接口，用户系统LDAP(Lightweight Directory Access Protocol，轻量级目录访问协议)，用于调用LDAP用户认证，项目生成发布，用于生成H5网页项目，发布上线功能，sd-log，用于实现日志统计服务，sd-report，用于监控数据上报，部署成功通知，用于在项目发布成功后通知服务。

对于网页相关的页面需求，快速部署上线，同时生成网页源代码，可用于二次编辑，减少程序开发人员的开发成本，用户直接通过前端操作，即可快速完成网页页面创建发布。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

在本实施例中还提供了一种网页源代码的生成装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图6是根据本发明实施例的网页源代码的生成装置的结构框图，如图6所示，该装置包括：选择模块60，处理模块62，生成模块64，其中，

选择模块60，用于响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；

处理模块62，用于在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；

生成模块64，用于根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码。

可选的，所述装置还包括：编辑模块，用于在所述生成模块根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，基于所述网页源代码编译所述web网站的超文本标记语言HTML文档；存储模块，用于将所述HTML文档存储至网络服务器；设置模块，用于将所述HTML文档的存储地址设置为所述web网站的链接地址；发布模块，用于发布所述链接地址。

可选的，所述选择模块，具体用于：在所述组件列表中选择基础组件元素，以及在所述组件列表中选择业务组件元素，其中，所述业务组件元素由多个基础元素组合得到，所述基础组件元素包括以下至少之一：视频、图片、文本、按钮、跑马灯、分割线。

可选的，所述生成模块，具体用于：提取所述配置信息中的配置参数；基于所述配置参数更新所述组件元素在网络端的组件代码；合并更新后的组件代码和网页框架代码，得到web网站的网页源代码。

可选的，所述装置还包括：获取模块，用于在所述生成模块根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，从所述网络端获取所述网页源代码；编辑模块，用于以组件元素为单元编辑所述网页源代码；第一上传模块，用于将编辑后的网页源代码上传到所述网络端。

可选的，所述装置还包括：创建模块，用于所述选择模块在组件列表中选择组件元素之前，通过脚手架工具创建多个待选组件元素的组件代码；封装模块，用于响应上传指令，获取各个组件代码的预览截图，创建所述组件代码的版本号，将所述组件代码打包封装成JavaScript格式的代码文档；第二上传模块，用于将所述预览截图和所述代码文档上传至内容分发网络CDN节点。

可选的，所述创建模块，具体用于：配置第一组件元素与第二组件元素之间的调用函数接口，其中，所述第一组件元素和所述第二组件元素为以下类型之一的组件：视频、图片、文本、按钮、跑马灯、分割线；通过脚手架工具采用所述调用函数接口关联所述第一组件元素与第二组件元素的组件代码，以创建第三组件元素。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

本发明的实施例还提供了一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；

S2，在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；

S3，根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。

本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；

S2，在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；

S3，根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

可能以许多方式来实现本发明的方法和系统。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本发明的方法和系统。用于所述方法的步骤的上述顺序仅是为了进行说明，本发明的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本发明实施为记录在记录介质中的程序，这些程序包括用于实现根据本发明的方法的机器可读指令。因而，本发明还覆盖存储用于执行根据本发明的方法的程序的记录介质。

本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。

Claims (10)

1.一种网页源代码的生成方法，其特征在于，包括：

响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；

在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；

根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码；

所述在组件列表中选择组件元素之前，所述方法还包括：

通过脚手架工具创建多个待选组件元素的组件代码；

响应上传指令，获取各个组件代码的预览截图，创建所述组件代码的版本号，将所述组件代码打包封装成JavaScript格式的代码文档；

将所述预览截图和所述代码文档上传至内容分发网络CDN节点。

2.根据权利要求1所述的方法，其特征在于，在根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，所述方法还包括：

基于所述网页源代码编译所述web网站的超文本标记语言HTML文档；

将所述HTML文档存储至网络服务器；

将所述HTML文档的存储地址设置为所述web网站的链接地址；

发布所述链接地址。

3.根据权利要求1所述的方法，其特征在于，在组件列表中选择组件元素包括：

在所述组件列表中选择基础组件元素，以及在所述组件列表中选择业务组件元素，其中，所述业务组件元素由多个基础元素组合得到，所述基础组件元素包括以下至少之一：视频、图片、文本、按钮、跑马灯、分割线。

4.根据权利要求1所述的方法，其特征在于，根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码包括：

提取所述配置信息中的配置参数；

基于所述配置参数更新所述组件元素在网络端的组件代码；

合并更新后的组件代码和网页框架代码，得到web网站的网页源代码。

5.根据权利要求1所述的方法，其特征在于，在根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，所述方法还包括：

从所述网络端获取所述网页源代码；

以组件元素为单元编辑所述网页源代码；

将编辑后的网页源代码上传到所述网络端。

6.根据权利要求1所述的方法，其特征在于，通过脚手架工具创建多个待选组件元素的组件代码包括：

配置第一组件元素与第二组件元素之间的调用函数接口，其中，所述第一组件元素和所述第二组件元素为以下类型之一的组件：视频、图片、文本、按钮、跑马灯、分割线；

通过脚手架工具采用所述调用函数接口关联所述第一组件元素与第二组件元素的组件代码，以创建第三组件元素。

7.一种网页源代码的生成装置，其特征在于，包括：

选择模块，用于响应操控指令，在组件列表中选择组件元素，其中，所述组件元素为组成页面视图的抽象单元；

处理模块，用于在预设画布中添加所述组件元素，在预设配置框中设置所述组件元素的配置信息；

生成模块，用于根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码；

所述选择模块之前，所述装置还包括：

创建模块，用于通过脚手架工具创建多个待选组件元素的组件代码；

封装模块，用于响应上传指令，获取各个组件代码的预览截图，创建所述组件代码的版本号，将所述组件代码打包封装成JavaScript格式的代码文档；

第二上传模块，用于将所述预览截图和所述代码文档上传至内容分发网络CDN节点。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

编辑模块，用于在所述生成模块根据所述组件元素和所述配置信息在网络端生成web网站的网页源代码之后，基于所述网页源代码编译所述web网站的超文本标记语言HTML文档；

存储模块，用于将所述HTML文档存储至网络服务器；

设置模块，用于将所述HTML文档的存储地址设置为所述web网站的链接地址；

发布模块，用于发布所述链接地址。

9.根据权利要求7所述的装置，其特征在于，所述选择模块，具体用于：

在所述组件列表中选择基础组件元素，以及在所述组件列表中选择业务组件元素，其中，所述业务组件元素由多个基础元素组合得到，所述基础组件元素包括以下至少之一：视频、图片、文本、按钮、跑马灯、分割线。

10.根据权利要求7所述的装置，其特征在于，所述生成模块，具体用于：

提取所述配置信息中的配置参数；

基于所述配置参数更新所述组件元素在网络端的组件代码；

合并更新后的组件代码和网页框架代码，得到web网站的网页源代码。