一种生成前端代码的方法和装置与流程

本公开是关于计算机技术领域，尤其是关于一种生成前端代码的方法和装置。

背景技术：

随着互联网技术的发展，互联网的应用越来越广泛，越来越多的用户可以通过互联网进行网页浏览。用户想要浏览某网页时，用户终端可以从服务器获取该网页的前端代码，用户终端运行该前端代码，以显示该网页。网页通常由多个内容元素组成，比如图片、表格和输入框等，其中，前端代码包含有网页中各内容元素的显示代码。

技术人员在编写前端代码时，需要针对网页中的每个内容元素，分别编写其对应的显示代码，从而得到该网页的前端代码。例如，对于某网页包含两个表格和一个图片，技术人员需要编写两个表格对应的显示代码，以及图片对应的显示代码，然后根据这三个内容元素的显示代码，得到该网页的前端代码。

在实现本发明的过程中，发明人发现现有技术至少存在以下问题：

对于网页中的每个内容元素，都需要人工编写其对应的显示代码，然后才能得到该网页的前端代码，导致生成前端代码的效率较低。

技术实现要素：

为了克服相关技术中存在的问题，本公开提供了一种生成前端代码的方法和装置。所述技术方案如下：

根据本公开实施例的第一方面，提供一种生成前端代码的方法，所述方法包括：

接收对应目标内容元素的基础代码的选择指令，所述基础代码中包含至少一个视图参数；

获取预先存储的所述目标内容元素的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的显示代码；

根据所述目标内容元素的显示代码，生成所述目标内容元素所属网页的前端代码。

可选的，所述根据所述目标内容元素的显示代码，生成所述目标内容元素所属网页的前端代码之前，还包括：

基于所述目标内容元素的显示代码，对所述目标内容元素进行显示。

这样，可以在编写目标内容元素的显示代码时，预览编写出的目标内容元素，提高用户体验。

可选的，所述根据所述目标内容元素的显示代码，生成所述目标内容元素所属网页的前端代码，包括：

将所述目标内容元素的显示代码，添加到所述目标内容元素所属网页的其他代码中，得到所述网页的前端代码。

这样，提供了一种生成的实现方式。

可选的，所述根据所述目标内容元素的显示代码，生成所述目标内容元素所属网页的前端代码，包括：

获取所述目标内容元素的显示代码对应的模块地址；

将所述模块地址添加到所述目标内容元素所属网页的其他代码中，得到所述网页的前端代码。

这样，提供了一种生成的实现方式。

可选的，所述方法还包括：

在运行所述网页的前端代码的过程中，根据所述目标内容元素的显示代码对应的模块地址，从服务器中获取所述目标内容元素的显示代码；

基于获取到的所述目标内容元素的显示代码和所述其他代码，对所述网页进行显示。

根据本公开实施例的第二方面，提供一种生成前端代码的装置，所述装置包括：

接收模块，用于接收对应目标内容元素的基础代码的选择指令，所述基础代码中包含至少一个视图参数；

第一获取模块，用于获取预先存储的所述目标内容元素的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的显示代码；

生成模块，用于根据所述目标内容元素的显示代码，生成所述目标内容元素所属网页的前端代码。

可选的，所述装置还包括：

第一显示模块，用于基于所述目标内容元素的显示代码，对所述目标内容元素进行显示。

可选的，所述生成模块，用于：

将所述目标内容元素的显示代码，添加到所述目标内容元素所属网页的其他代码中，得到所述网页的前端代码。

可选的，所述生成模块，包括：

获取子模块，用于获取所述目标内容元素的显示代码对应的模块地址；

添加子模块，用于将所述模块地址添加到所述目标内容元素所属网页的其他代码中，得到所述网页的前端代码。

可选的，所述装置还包括：

第二获取模块，用于在运行所述网页的前端代码的过程中，根据所述目标内容元素的显示代码对应的模块地址，从服务器中获取所述目标内容元素的显示代码；

第二显示模块，用于基于获取到的所述目标内容元素的显示代码和所述其他代码，对所述网页进行显示。

根据本公开实施例的第三方面，提供一种生成前端代码的装置，所述装置包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

接收对应目标内容元素的基础代码的选择指令，所述基础代码中包含至少一个视图参数；

获取预先存储的所述目标内容元素的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的显示代码；

根据所述目标内容元素的显示代码，生成所述目标内容元素所属网页的前端代码。

本公开的实施例提供的技术方案可以包括以下有益效果：

本公开实施例中，接收对应目标内容元素的基础代码的选择指令，基础代码中包含至少一个视图参数，获取预先存储的目标内容元素的基础代码，根据基础代码和用户输入的视图参数的参数值，生成目标内容元素的显示代码，根据目标内容元素的显示代码，生成目标内容元素所属网页的前端代码，这样，可以根据预设存储的基础代码和用户输入的视图参数的参数值，自动生成内容元素的显示代码，无需用户分别编写每个内容元素的显示代码，提高了生成前端代码的效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。在附图中：

图1是根据一示例性实施例示出的一种生成前端代码的方法的流程图；

图2是根据一示例性实施例示出的一种界面显示示意图；

图3是根据一示例性实施例示出的一种界面显示示意图；

图4是根据一示例性实施例示出的一种界面显示示意图；

图5是根据一示例性实施例示出的一种生成前端代码的装置的示意图；

图6是根据一示例性实施例示出的一种生成前端代码的装置的示意图；

图7是根据一示例性实施例示出的一种生成前端代码的装置的示意图；

图8是根据一示例性实施例示出的一种生成前端代码的装置的示意图；

图9是根据一示例性实施例示出的一种终端的结构示意图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

本公开一示例性实施例提供了一种生成前端代码的方法，该方法可以用于终端中，其中，该终端可以是pc((personalcomputer，个人计算机)终端，也可以是手机或平板电脑等移动终端，该终端中可以安装有用于生成网页的前端代码的应用程序(比如某插件)，用户可以通过该应用程序生成网页中各内容元素的显示代码，进而生成该网页的前端代码。本实施例中的用户均为编写前端代码的用户，比如某网页的技术人员。

下面将结合实施方式，对图1所示的处理流程进行详细的说明，内容可以如下：

在步骤101中，接收对应目标内容元素的基础代码的选择指令。

在实施中，用户可以在终端安装用于生成网页的前端代码的应用程序，该应用程序中可以包括预设的多个内容元素的基础代码。其中，该内容元素是网页中的任意内容元素，比如标题、图片、表格和输入框等。例如，该应用程序可以包括图片的基础代码、列表的基础代码、柱状图的基础代码等。基础代码可以是用于显示内容元素的最基本的逻辑代码(可称为model)，用于实现除该内容元素的具体显示内容以外的视图效果。例如，内容元素为表格，通过基础代码可以实现除该表格中的具体内容以外的视图效果，比如表格的边框、尺寸和颜色等；内容元素为标题，通过基础代码可以实现标题文字以外的视图效果，比如字体、颜色和标题的装饰图片等。基础代码中可以包含至少一个视图参数，基础代码中视图参数的参数值可以为预设的初始值，也可以为空。对于任一内容元素的基础代码，用户可以通过输入该基础代码中的各视图参数的参数值，来设置该内容元素的具体显示内容。具体的处理过程后续会进行详细说明。各内容元素的基础代码可以由该应用程序的开发人员预先编写出来，存储在该应用程序中。其中，对于同一内容元素，可以设置有多种基础代码，例如，对于表格，可以设置多种基础代码，以实现不同的显示效果。

当用户想要编写某网页的前端代码时，用户可以在终端开启该应用程序，然后在该应用程序中打开用于选择基础代码的界面(可称为代码选择界面)。该代码选择界面中可以显示有预设的基础代码列表，如图2所示，该基础代码列表中可以显示有预设的各基础代码的标识，比如基础代码的名称，还可以显示各基础代码对应的内容元素的名称等。用户想要创建某内容元素(即目标内容元素)的显示代码时，可以根据自己的需要在基础代码列表中选择需要使用的基础代码。终端则可以接收到对应该基础代码的选择指令。用户选择的基础代码可以是一种，也可以是多种。

在步骤102中，获取预先存储的目标内容元素的基础代码，根据基础代码和用户输入的视图参数的参数值，生成目标内容元素的显示代码。

在实施中，终端接收到对应该基础代码的选择指令后，可以显示用于输入视图参数的参数值的界面(也可称为属性编辑界面)，该属性编辑界面中可以显示有该基础代码所包含的各视图参数，以及各视图参数对应的参数值的输入框。用户可以在每个视图参数对应的输入框中输入参数值，以设置目标内容元素的显示内容。例如，目标内容元素为表格，基础代码中的视图参数包括title、字段名和数据类型，其中，title为表格中的第一列，字段名为表格中的第二列，数据类型为表格中的第三列，相应的属性编辑界面如图3所示，可以按行显示title、字段名和数据类型，用户可以分别输入第一行的title、字段名和数据类型，第二行的title、字段名和数据类型，以及第三行的title、字段名和数据类型，得到如图4所示的表格。另外，属性编辑界面中还可以设置有添加选项，用户可以选择添加选项，输入更多表格中更多行的数据。用户输入完成后，可以点击保存选项，终端则可以对用户输入的各视图参数的参数值进行存储。

终端接收到对应该基础代码的选择指令后，还可以获取预先存储的目标内容元素的基础代码，然后可以将用户输入的各视图参数的参数值，传入到基础代码中，生成目标内容元素的显示代码。终端还可以将显示代码转化js、html和css代码，然后将转化得到的代码以文件形式存储。对于用户选择多个基础代码的情况，用户可以分别输入每个基础代码中的视图参数的参数值，终端则可以生成多组显示代码，然后可以将多组显示代码进行转化，并打包转化后的显示代码，并以文件形式存储。另外，终端还可以生成该显示代码的模块地址，该模块地址是用于在线访问该显示代码的地址，当终端在加载该网页时，可以通过该模块地址在线引用该显示代码。

可选的，用户在输入视图参数的参数值后，终端可以显示目标内容元素的预览图像，相应的处理过程可以如下：基于目标内容元素的显示代码，对目标内容元素进行显示。

在实施中，终端生成目标内容元素的显示代码后，可以运行该显示代码，以显示目标内容元素的图像，用户则可以直观的看到目标内容元素，从而判定输入的参数值是否有误。终端可以在接收到用户输入的全部参数值后，对目标内容元素进行显示，或者，也可以在每接收到一个参数值之后，就将参数值传入到基础代码中，然后对传入该参数值的基础代码进行显示，以便用户可以实时预览目标内容元素。

在步骤103中，根据目标内容元素的显示代码，生成目标内容元素所属网页的前端代码。

在实施中，终端生成目标内容元素的显示代码后，可以获取目标内容元素所属网页的其他代码，然后根据目标内容元素的显示代码，以及目标内容元素所属网页的其他代码，生成目标内容元素所属网页的前端代码。具体的生成过程可以是多种多样的，本实施例提供了两种可行的处理方式。

方式一、将目标内容元素的显示代码，添加到目标内容元素所属网页的其他代码中，得到网页的前端代码。

在实施中，用户可以预先编写该网页中，除目标内容元素以外的其他代码，终端生成目标内容元素的显示代码后，可以自动将目标内容元素的显示代码，添加到目标内容元素所属网页的其他代码中，得到网页的前端代码。或者，终端可以根据用户操作，将目标内容元素的显示代码，添加到目标内容元素所属网页的其他代码中，例如，用户可以通过复制操作，将该显示代码复制到其他代码中的指定位置处，或者，用户可以输入添加指令，该添加指令中包括该显示代码在其他代码中的添加位置，终端则可以根据该添加指令，将目标内容元素的显示代码，添加到目标内容元素所属网页的其他代码中，从而生成网页的前端代码。

方式二、获取目标内容元素的显示代码对应的模块地址；将模块地址添加到目标内容元素所属网页的其他代码中，得到网页的前端代码。

在实施中，终端还可以获取预先生成的该显示代码的模块地址，以及除目标内容元素以外的其他代码，然后可以自动将该模块地址，添加到目标内容元素所属网页的其他代码中，得到网页的前端代码。或者，终端可以根据用户操作，将该模块地址添加到目标内容元素所属网页的其他代码中，例如，用户可以通过复制操作，将该模块地址复制到其他代码中的指定位置处，或者，用户可以输入添加指令，该添加指令中包括该模块地址在其他代码中的添加位置，终端则可以根据该添加指令，将该模块地址添加到目标内容元素所属网页的其他代码中，从而生成网页的前端代码。

基于上述处理，可以实现代码组件化，极大的提升了代码的复用率，用户在编写前端代码时，只要输入的视图参数的参数值，终端就可以自动生成内容元素的显示代码，无需用户编写大量代码，方便快捷，并且操作过程非常简单，可以极大的节约人力成本和时间成本。

可选的，终端生成网页的前端代码后，可以将该网页的前端代码存储在服务器中，以便想要访问该网页的用户终端可以从服务器获取该网页的前端代码，从而显示该网页。对于通过上述方式一生成的前端代码，用户终端获取到该网页的前端代码后，可以直接运行该前端代码，显示该网页，对于通过上述方式二生成的前端代码，用户终端的处理过程可以如下：在运行网页的前端代码的过程中，根据目标内容元素的显示代码对应的模块地址，从服务器中获取目标内容元素的显示代码；基于获取到的目标内容元素的显示代码和其他代码，对网页进行显示。

在实施中，对于上述方式二生成的前端代码，用户终端在运行该前端代码的过程中，可以根据目标内容元素的显示代码对应的模块地址，从服务器中获取目标内容元素的显示代码。例如，上述终端可以生成目标内容元素的显示代码对应的json文件，用户终端则可以从服务器中下载该json文件，然后通过预先存储的解析sdk解析该json文件得到模块地址，进而获得目标内容元素的显示代码。用户终端可以运行获取到的目标内容元素的显示代码和该网页的其他代码，以显示该网页。

本公开实施例中，接收对应目标内容元素的基础代码的选择指令，基础代码中包含至少一个视图参数，获取预先存储的目标内容元素的基础代码，根据基础代码和用户输入的视图参数的参数值，生成目标内容元素的显示代码，根据目标内容元素的显示代码，生成目标内容元素所属网页的前端代码，这样，可以根据预设存储的基础代码和用户输入的视图参数的参数值，自动生成内容元素的显示代码，无需用户分别编写每个内容元素的显示代码，提高了生成前端代码的效率。

本公开又一示例性实施例提供了还提供了一种生成前端代码的装置，如图5所示，该装置包括：接收模块510，第一获取模块520和生成模块550。

接收模块510，用于接收对应目标内容元素的基础代码的选择指令，所述基础代码中包含至少一个视图参数；

第一获取模块520，用于获取预先存储的所述目标内容元素的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的显示代码；

生成模块530，用于根据所述目标内容元素的显示代码，生成所述目标内容元素所属网页的前端代码。

可选的，如图6所示，所述装置还包括：

第一显示模块540，用于基于所述目标内容元素的显示代码，对所述目标内容元素进行显示。

可选的，所述生成模块530，用于：

将所述目标内容元素的显示代码，添加到所述目标内容元素所属网页的其他代码中，得到所述网页的前端代码。

可选的，如图7所示，所述生成模块530，包括：

获取子模块531，用于获取所述目标内容元素的显示代码对应的模块地址；

添加子模块532，用于将所述模块地址添加到所述目标内容元素所属网页的其他代码中，得到所述网页的前端代码。

可选的，如图8所示，所述装置还包括：

第二获取模块550，用于在运行所述网页的前端代码的过程中，根据所述目标内容元素的显示代码对应的模块地址，从服务器中获取所述目标内容元素的显示代码；

第二显示模块560，用于基于获取到的所述目标内容元素的显示代码和所述其他代码，对所述网页进行显示。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本公开实施例中，接收对应目标内容元素的基础代码的选择指令，基础代码中包含至少一个视图参数，获取预先存储的目标内容元素的基础代码，根据基础代码和用户输入的视图参数的参数值，生成目标内容元素的显示代码，根据目标内容元素的显示代码，生成目标内容元素所属网页的前端代码，这样，可以根据预设存储的基础代码和用户输入的视图参数的参数值，自动生成内容元素的显示代码，无需用户分别编写每个内容元素的显示代码，提高了生成前端代码的效率。

需要说明的是：上述实施例提供的生成前端代码的装置在生成前端代码时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的生成前端代码的装置与生成前端代码的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本公开实施例还示出的一种终端的结构示意图。该终端可以是手机或平板电脑等移动终端。参照图9，终端800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(i/o)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制终端800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理部件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在终端800的操作。这些数据的示例包括用于在终端800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘或光盘。

电力组件806为终端800的各种组件提供电力。电力组件806可以包括电源管理系统，一个或多个电源，及其他与为音频输出设备800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述终端800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(lcd)和触摸面板(tp)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当终端800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(mic)，当音频输出设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。

i/o接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为终端800提供各个方面的状态评估。例如，传感器组件814可以检测到终端800的打开/关闭状态，组件的相对定位，例如所述组件为终端800的显示器和小键盘，传感器组件814还可以检测终端800或终端800一个组件的位置改变，用户与终端800接触的存在或不存在，终端800方位或加速/减速和终端800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如cmos或ccd图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于终端800和其他设备之间有线或无线方式的通信。终端800可以接入基于通信标准的无线网络，如wifi，2g或3g，或它们的组合。在一个示例性实施例中，通信部件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件816还包括近场通信(nfc)模块，以促进短程通信。例如，在nfc模块可基于射频识别(rfid)技术，红外数据协会(irda)技术，超宽带(uwb)技术，蓝牙(bt)技术和其他技术来实现。

在示例性实施例中，终端800可以被一个或多个应用专用集成电路(asic)、数字信号处理器(dsp)、数字信号处理设备(dspd)、可编程逻辑器件(pld)、现场可编程门阵列(fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由终端800的处理器820执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。

本公开实施例中，接收对应目标内容元素的基础代码的选择指令，基础代码中包含至少一个视图参数，获取预先存储的目标内容元素的基础代码，根据基础代码和用户输入的视图参数的参数值，生成目标内容元素的显示代码，根据目标内容元素的显示代码，生成目标内容元素所属网页的前端代码，这样，可以根据预设存储的基础代码和用户输入的视图参数的参数值，自动生成内容元素的显示代码，无需用户分别编写每个内容元素的显示代码，提高了生成前端代码的效率。

本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。