CN115809057A - 前端页面处理方法及装置 - Google Patents

Abstract

本申请实施例提供一种前端页面处理方法及装置，所述方法包括：确定目标模板，其中，所述目标模板为与待生成的目标前端页面的布局相匹配的模板，获取所述目标前端页面对应的数据配置文件，将所述数据配置文件导入所述目标模板，得到填充后的目标模板，导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码。本申请提高了前端页面的开发效率。

Description

前端页面处理方法及装置

技术领域

本申请实施例涉及数据处理技术领域，尤其涉及一种前端页面处理方法及装置。

背景技术

随着网络技术的发展，用户对前端页面的要求越来越高。

现有技术中，前端开发方式中部分功能的实现逻辑基本相同，即部分功能的实现方式只改变变量，对于业务逻辑的改变较少，因此，可能存在大量可重用的过程。

然而，现有的开发方式一般为开发人员根据新的业务需求编写对应的前端代码，若该业务需求与之前已经实现的业务需求相类似，则需要开发人员做很多重复性的工作，增加了人力物力的消耗，同时也降低了前端页面的开发效率。

发明内容

本申请实施例提供一种前端页面处理方法及装置，以提高前端页面的开发效率。

第一方面，本申请实施例提供一种前端页面处理方法，包括：

确定目标模板，其中，所述目标模板为与待生成的目标前端页面的布局相匹配的模板；

获取所述目标前端页面对应的数据配置文件；

将所述数据配置文件导入所述目标模板，得到填充后的目标模板；

导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码。

可选的，所述确定目标模板，包括：

生成并显示模板选择提示，其中，所述模板选择提示中包含至少一触控按键，每个触控按键对应一模板；

响应作用于所述模板选择提示中任一触控按键的触控操作，确定目标模板。

可选的，所述将所述数据配置文件导入所述目标模板，得到填充后的目标模板，包括：

根据所述数据配置文件生成配置规则；

根据所述配置规则将所述数据配置文件导入所述目标模板，得到填充后的目标模板。

可选的，所述根据所述数据配置文件生成配置规则，包括：

确定所述数据配置文件中包含的字段信息，其中，所述字段信息包括字段名称、字段内容、字段类型、字段长度、是否可编辑、是否展示中的一种或多种；

根据所述字段信息生成配置规则。

可选的，所述导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码，包括：

确定目标存储路径，并在所述目标存储路径对应的存储位置处生成一空白文档；

导出所述填充后的目标模板对应的代码至所述空白文档，得到所述目标前端页面对应的代码。

可选的，在所述将所述数据配置文件导入所述目标模板，得到填充后的目标模板之前，还包括：

根据第一预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的完整性；

根据第二预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的合法性。

第二方面，本申请实施例提供一种前端页面处理装置，包括：

确定模块，用于确定目标模板，其中，所述目标模板为与待生成的目标前端页面的布局相匹配的模板；

获取模块，用于获取所述目标前端页面对应的数据配置文件；

处理模块，用于将所述数据配置文件导入所述目标模板，得到填充后的目标模板；

所述处理模块，还用于导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码。

第三方面，本申请实施例提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；

所述存储器存储计算机执行指令；

所述处理器执行所述存储器存储的计算机执行指令，实现如上第一方面以及第一方面各种可能的设计所述的前端页面处理方法。

第四方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上第一方面以及第一方面各种可能的设计所述的前端页面处理方法。

第五方面，本申请实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时，实现如上第一方面以及第一方面各种可能的设计所述的前端页面处理方法。

本申请实施例提供了一种前端页面处理方法及装置，采用上述方案后，可以先确定与待生成的目标前端页面的布局相匹配的目标模板，然后可以获取目标前端页面对应的数据配置文件，并将数据配置文件导入目标模板，得到填充后的目标模板，再导出填充后的目标模板对应的代码，得到目标前端页面对应的代码，通过预先设置好的目标模板来实现目标前端页面，且一个目标模板可以用于实现多个前端页面的方式，简化了目标前端页面的实现过程，减少了人力物力的消耗，同时也提高了前端页面的开发效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的前端页面处理方法的应用系统的架构示意图；

图2为本申请实施例提供的前端页面处理方法的流程示意图；

图3为本申请另一实施例提供的前端页面处理方法的流程示意图；

图4为本申请实施例提供的前端页面处理装置的结构示意图；

图5为本申请实施例提供的电子设备的硬件结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例还能够包括除了图示或描述的那些实例以外的其他顺序实例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

相关技术中，由于各业务系统前端需求多样，在页面布局、层叠样式等方面有差别，因此，前端开发人员需要针对不同的业务系统开发不同的前端页面。然而，前端开发方式中部分功能的实现逻辑基本相同，即部分功能的实现方式只改变变量，对于业务逻辑的改变较少，因此，可能存在大量可重用的过程。但是，现有的开发方式一般为开发人员根据新的业务需求编写对应的前端代码，若该业务需求与之前已经实现的业务需求相类似，则需要开发人员做很多重复性的工作，增加了人力物力的消耗，同时也降低了前端页面的开发效率。

基于上述技术问题，本申请通过预先设置好的目标模板来实现目标前端页面，且一个目标模板可以用于实现多个前端页面的方式，达到了既简化了目标前端页面的实现过程，减少了人力物力的消耗，同时也提高了前端页面的开发效率的技术效果。

图1为本申请实施例提供的前端页面处理方法的应用系统的架构示意图，如图1所示，所述应用系统可以包括：数据库以及服务器，数据库中可以存储有一个或多个模板，每个模板对应一种前端页面布局。此外，数据库中还可以存储有不同前端页面对应的数据配置文件。服务器可以从数据库中的一个或多个模板中选择目标模板，然后可以获取与目标前端页面对应的数据配置文件，并将数据配置文件导入至目标模板中，得到填充后的目标模板，然后可以导出填充后的目标模板对应的代码，得到目标前端页面对应的代码。

其中，服务器可以为单独的服务器，也可以为服务器集群。

下面以具体地实施例对本申请的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

图2为本申请实施例提供的前端页面处理方法的流程示意图，本实施例的方法可以由服务器执行。如图2所示，本实施例的方法，可以包括：

S201：确定目标模板，其中，目标模板为与待生成的目标前端页面的布局相匹配的模板。

在本实施例中，在生成目标前端页面对应的代码之前，可以先确定与该目标前端页面的布局相匹配的目标模板，然后根据该目标模板生成目标前端页面对应的代码。

进一步的，所述确定目标模板，具体可以包括：

生成并显示模板选择提示，其中，所述模板选择提示中包含至少一触控按键，每个触控按键对应一模板。

响应作用于所述模板选择提示中任一触控按键的触控操作，确定目标模板。

具体的，模板可以有一个或多个，每个模板可以对应不同的页面布局，在生成页面对应的代码时，可以先选择对应的模板，然后根据选择的模板来生成页面对应的代码。

此外，选择模板的方式可以有多种。可选的，可以在预先部署的开发环境中生成并显示模板选择提示，然后可以响应作用于模板选择提示中任一触控按键的触控操作，确定选中的目标模板。其中，模板选择提示中可以包含至少一触控按键，每个触控按键对应一模板，通过该触控按键，可以选中对应的目标模板。示例性的，开发环境可以为node环境，可以在node环境中引入文件系统模块(也可称为fs模块)，该文件系统模块为node.js提供的现有模块，然后可以通过调用文件系统模块中的fs.readdir()来读取文件列表，进而可以从设备本地读取各种格式的文件(如模板等)，并转化为node环境中可用的字符串格式。

此外，模板可以为预先存储于数据库中的模板，也可以为自定义的模板。自定义的模板可以为开发人员根据页面需求修改或编写的模板，示例性的，可以修改模板的格式，将模板的格式修改为目标前端页面的代码相对应的格式(例如，若目标前端页面的代码为VUE格式，则可以在模板中添加VUE格式对应的相关代码，使得模板可以兼容VUE格式，RECAT格式与ANGULAR格式同理)。此外，还可以增加或删减模板中的模块，使得模板的布局与目标前端页面的布局相匹配，提高模板应用的灵活性与便利性。

示例性的，模板可以与待生成的目标前端页面对应的代码的格式和/或类型相同，可以由开发人员对vue、react、angular等类型的代码进行抽象处理，将需要用户配置的内容标记为变量，进而形成对应格式的模板。

例如，以vue代码模板为例，可以通过<template><div class＝"deduction">

<header>％stitles％</header><main>…</main></div></template>

<script><import axios from"axios"；const CONFIG＝{

method:"％methods"，geturl:"％geturl％"}

const datalist＝"％dataLists"；export default{data(){return{tableData:[]，tableDataHeader:[]}</script>来实现目标模板的选择。

其中，目标模板可以包含：使目标代码文件正常运行的基本内容，如vue代码须包含的<template>和<script>标签等；通用的页面内容及样式，即<main>标签、tableData变量等；用户需要自定义的内容，表示为”％”包裹的变量名称，即图中的页面标题title，查询接口路径变量geturl。此外，用户还可以按实际需求选择模板，或者修改模板便于后续使用。

S202：获取目标前端页面对应的数据配置文件。

在本实施例中，在生成目标前端页面对应的代码时，除了需要确定目标模板之外，还可以确定目标前端页面对应的数据配置文件，然后可以根据目标模板以及数据配置文件生成目标前端页面对应的代码。其中，数据配置文件可以表明待实现的功能(例如，增删改查、保存、提交等)，还可以包含配置模板中包含的变量，和/或用户自定义设置的变量，即该数据配置文件中可以包含模板中所有的变量名称以及对应的内容，和/或用户自定义设置的变量名称以及对应的内容。

此外，数据配置文件的获取方式可以有多种。可选的，可以先生成数据配置文件导入提示，然后可以响应作用于数据配置文件导入提示中触控按键的触控操作，确定待导入的数据配置文件。此外，数据配置文件可以为开发人员根据确定的目标模版或待生成的目标前端页面预先构建的，且该数据配置文件可以在现有数据库的基础上生成，即可以通过从现有数据库中提取数据来生成数据配置文件，也可以直接构建该数据配置文件。

示例性的，表1为数据配置文件对应的表格，在该表中，数据配置文件可以包含目标模板中涉及到的变量名称以及对应的数据值。

表1数据配置文件对应的表格

此外，还可以通过调用现有的函数来获取数据配置文件。示例性的，可以调用xlsx.readFile()来读取数据配置文件。此外，数据配置文件的类型可以有多种，示例性的，可以为表结构文档或者JSON类型的文档。若数据配置文件的类型为表结构文档，则可以通过预先部署的EXCEL表格处理模块将xlsx、xls等类型的数据配置文件转换为node环境可处理的js对象格式，然后再对转换后的数据配置文件进行后续处理。通过设置不同格式的数据配置文件，可以增加数据配置文件的多样性。进而提高前端页面的实现效率。

S203：将数据配置文件导入目标模板，得到填充后的目标模板。

在本实施例中，在获取到数据配置文件之后，可以将获取到的数据配置文件导入预先选择好的目标模板中，得到填充后的目标模板。

进一步的，所述将所述数据配置文件导入所述目标模板，得到填充后的目标模板，具体可以包括：

根据所述数据配置文件生成配置规则。

根据所述配置规则将所述数据配置文件导入所述目标模板，得到填充后的目标模板。

具体的，在将数据配置文件导入至目标模板中时，可以先生成配置规则，然后可以根据配置规则将数据配置文件导入目标模板中，得到填充后的目标模板。示例性的，可以使用字符串替换的方式，将目标模板中的变量替换为数据配置文件的相同的字段信息对应的内容。

更进一步的，所述根据所述数据配置文件生成配置规则，具体可以包括：

确定所述数据配置文件中包含的字段信息，其中，所述字段信息包括字段名称、字段内容、字段类型、字段长度、是否可编辑、是否展示中的一种或多种。

根据所述字段信息生成配置规则。

具体的，在根据数据配置文件生成配置规则时，可以先确定数据配置文件中包含的字段信息，然后根据包含的字段信息来生成对应的配置规则。该配置规则可以包含各字段信息的导入方式以及导入顺序，可以根据实际应用场景自定义进行设置。示例性的，数据配置文件中不同的字段信息可以对应不同的组件，可以根据数据配置文件中各字段信息对应的组件的状态，来确定各组件的配置方式，进而得到配置规则，即生成自定义的组件(可以为一段定制化的代码)。

此外，字段信息也可以根据实际应用场景自定义进行设置，示例性的，字段信息可以包括字段名称、字段内容、字段类型、字段长度、是否可编辑、是否展示中的一种或多种。

S204：导出填充后的目标模板对应的代码，得到目标前端页面对应的代码。

在本实施例中，在将数据配置文件导入目标模板，得到填充后的目标模板之后，可以直接导出填充后的目标模板对应的代码，进而得到目标前端页面对应的代码。可选的，导出的填充后的目标模板对应的代码格式可以根据实际应用场景自定义进行设置。

进一步的，所述导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码，具体可以包括：

确定目标存储路径，并在所述目标存储路径对应的存储位置处生成一空白文档。

导出所述填充后的目标模板对应的代码至所述空白文档，得到所述目标前端页面对应的代码。

具体的，在导出填充后的目标模板对应的代码时，可以先确定目标存储路径，然后可以在该目标存储路径对应的存储位置处生成一空白文档，并导出填充后的目标模板对应的代码至空白文档(示例性的，可以为txt类型或Word类型的文档)，进而得到目标前端页面对应的代码。

可选的，确定目标存储路径的方式可以有多种，示例性的，可以由开发人员选择待存储代码对应的文件夹，然后可以调用现有的路径生成函数(例如，fs.mkdirSync())生成目标存储路径。此外，一般生成的代码对应的名称与数据配置文件的名称相同，还可以调用现有的判断函数(例如，fs.existsSync(filePath))判断目标存储路径下是否存在与数据配置文件同名的文件，如果不存在，则可以在目标存储路径对应的位置处生成空白文档。如果存在，则可以生成同名文件存在提示，进而提醒开发人员查看具体情况，保证了空白文档生成的准确性。

此外，在生成空白文档之后，还可以调用现有的写入函数，将填充后的目标模板对应的代码写入至空白文档中，得到目标前端页面对应的代码。

此外，在导出填充后的目标模板对应的代码，得到目标前端页面对应的代码之后，还可以在目标运行环境中运行填充后的目标模板对应的代码。其中，目标运行环境为与目标模板对应的代码相匹配的运行环境。

此外，也可以直接导出填充后的目标模板对应的代码至目标存储路径对应的位置。

另外，本申请可以在生成数据配置文件后以完全离线的方式生成目标前端页面对应的代码，提高了代码生成的便利性。

采用上述方案后，可以先确定与待生成的目标前端页面的布局相匹配的目标模板，然后可以获取目标前端页面对应的数据配置文件，并将数据配置文件导入目标模板，得到填充后的目标模板，再导出填充后的目标模板对应的代码，得到目标前端页面对应的代码，通过预先设置好的目标模板来实现目标前端页面，且一个目标模板可以用于实现多个前端页面的方式，简化了目标前端页面的实现过程，减少了人力物力的消耗，同时也提高了前端页面的开发效率。

基于图2的方法，本说明书实施例还提供了该方法的一些具体实施方案，下面进行说明。

在另一实施例中，在所述将所述数据配置文件导入所述目标模板，得到填充后的目标模板之前，还可以包括：

根据第一预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的完整性。

根据第二预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的合法性。

在本实施例中，在将数据配置文件导入目标模板之前，还可以对数据配置文件进行校验，校验通过之后再将数据配置文件导入目标模板。

此外，在对数据配置文件进行校验时，可以对数据配置文件的完整性以及合法性进行校验，且对数据配置文件进行校验的方式可以有多种。

可选的，可以通过第一预设校验规则对数据配置文件进行校验，确定数据配置文件的完整性。还可以通过第二预设校验规则对数据配置文件进行校验，确定数据配置文件的合法性。此外，第一预设校验规则和第二预设校验规则可以为现有的规则，在此不再详细进行论述。

示例性的，表2为数据配置文件中包含的参数信息表，如表2中所示，数据配置文件中可以包含字段名称、字段内容、字段类型、字段长度、是否可编辑、是否展示等。

表2数据配置文件中包含的参数信息表

对应的，在对数据配置文件进行校验时，可以通过现有的校验规则来校验表结构数据是否包含字段名、内容等必要内容，字段类型、字段长度、是否可编辑、是否展示等内容，且确定包含的各内容是否合法合规，例如，表2中的DATA_TYPE是否为特定字典值，EDIT、DISPLAY是否为0(表示否)或1(表示是)等。

此外，在另一实施例中，在所述确定目标模板之前，所述方法还可以包括：部署开发环境，并引入开源模块用于数据处理。可选的，开发环境可以为node环境。对应的，可以在node环境中引入文件系统模块(fs)，用于从本地读取不同格式的文件(例如，模板等)并转化为node环境中可用的字符串格式，以及校验用户输入的文件路径是否存在等。还可以引入路径模块(path)，用于将工程中的相对路径以及用户输入的路径处理为用户本地绝对路径。还可以引入EXCEL表格处理模块(xlsx)，用于将xlsx、xls等表格文档(例如，数据配置文件)处理为node环境可处理的js对象格式。

此外，传统的前端技术方案存在请求重复资源、频繁操作DOM导致性能降低等问题。随着Web应用对性能要求的不断提高与前端开发工程化的持续发展，jQuery等前端库已经无法满足性能要求，主流开发工具也转化为能构建SPA应用的Vue、React、Angular等。然而目前已有的前端代码生成工具主要生成原生JS或jQuery代码，缺乏生成SPA前端框架代码的工具。业务需求中部分基本功能只改变内容，业务逻辑变化较少，存在大量可重用的增、删、改、查逻辑。前端开发人员根据新的需求更改代码中的业务相关数据，需要做很多重复劳动和复制粘贴的工作，还需要通过人工校验正确性、容易产生错误，与前端开发组件化、模块化的思想不符。为了解决上述问题，本文针对前端开发中的常见场景，还可以基于Node环境，提出一种全新的SPA(Single Page web Application，单页Web应用)前端代码生成方案。即本申请提出的方案通过Node命令行操作，实现开发人员根据需求选择模板，然后导入数据配置文件，进而实现定制化生成SPA前端代码文件的过程。

其中，Node：Node.js是一个开源与跨平台的JavaScript(JS)运行时环境。它是一个可用于几乎任何项目的流行工具。Node.js在浏览器外运行V8JavaScript引擎。Node.js使得浏览器编写JS的前端开发者在除了客户端代码之外还可以编写服务器端代码，而无需学习完全不同的语言。目前Vue、React等大都需要在Node环境开发构建，SPA应用前端开发人员大都需要配置Node环境。

SPA：单页Web应用(Single Page web Application)，是只有一个Web页面的应用，只加载单个HTML页面并在用户与应用程序交互时动态更新该页面。浏览器一开始会加载必需的HTML、CSS和JS，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

JSON：JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，有效地提升网络传输效率。

jQuery：是一个快速、小型且功能丰富的JavaScript库。通过API遍历和操作HTML文档。

Vue：是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

React：是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成复杂的UI界面。

综上，通过使用前端代码模板能够批量生成目标代码，可以有效减少开发人员的重复劳动，提升研发效率，同时降低前端开发技术门槛，让没有前端技术背景的后端开发人员也能够快速生成所需代码，同时兼具了一定程度的灵活性(自定义模板)与易用性(多种格式的输入方式)。

图3为本申请另一实施例提供的前端页面处理方法的流程示意图，本实施例的方法可以由服务器执行。如图3所示，本实施例的方法，可以包括：可以先部署开发环境。然后可以确定目标模板，并判断目标模板是否已经预先设置完成且合规，若目标模板存在且合规，则可以导入。否则，则可以生成异常提示，提醒开发人员进行维护。在导入目标模板之后，可以获取数据配置文件，并对数据配置文件进行校验，若数据配置文件通过校验，则可以将数据配置文件导入至目标模板中，得到填充后的目标模板。然后可以导出填充后的目标模板对应的代码，得到目标前端页面对应的代码。

此外，在得到目标前端页面对应的代码之后，还可以对目标前端页面对应的代码进行测试，即运行目标前端页面对应的代码，若目标前端页面对应的代码均可以正常实现，则表明目标前端页面已实现。否则，则可以生成异常提示，提醒开发人员进行维护。

采用上述方案后，可以直接应用前端开发人员提供的代码模板，减少前端开发过程中的重复工作，降低前端开发技术门槛。且本申请提出的方法通过后端开发过程中产出的技术文档，即数据配置文件，可将后端的数据库设计文档简单修改后使用，在命令行进行简单的选择操作后生成前端代码文件，减少了前端开发过程中的重复工作，同时提升了准确性，极大地提高了研发效率，同时降低了前端开发技术门槛，让没有前端技术背景的后端开发人员也能够快速生成所需代码，进而减少开发人员的重复劳动，提升前端代码的开发效率。

基于同样的思路，本说明书实施例还提供了上述方法对应的装置，图4为本申请实施例提供的前端页面处理装置的结构示意图，如图4所示，本申请实施例提供的装置，可以包括：

确定模块401，用于确定目标模板，其中，所述目标模板为与待生成的目标前端页面的布局相匹配的模板。

在本实施例中，所述确定模块401，还用于：

生成并显示模板选择提示，其中，所述模板选择提示中包含至少一触控按键，每个触控按键对应一模板。

响应作用于所述模板选择提示中任一触控按键的触控操作，确定目标模板。

获取模块402，用于获取所述目标前端页面对应的数据配置文件。

处理模块403，用于将所述数据配置文件导入所述目标模板，得到填充后的目标模板。

在本实施例中，所述处理模块403，还用于：

根据所述数据配置文件生成配置规则。

根据所述配置规则将所述数据配置文件导入所述目标模板，得到填充后的目标模板。

进一步的，所述处理模块403，还用于：

确定所述数据配置文件中包含的字段信息，其中，所述字段信息包括字段名称、字段内容、字段类型、字段长度、是否可编辑、是否展示中的一种或多种。

根据所述字段信息生成配置规则。

所述处理模块403，还用于导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码。

在本实施例中，所述处理模块403，还用于：

确定目标存储路径，并在所述目标存储路径对应的存储位置处生成一空白文档。

导出所述填充后的目标模板对应的代码至所述空白文档，得到所述目标前端页面对应的代码。

此外，在另一实施例中，所述处理模块403，还用于：

根据第一预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的完整性。

根据第二预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的合法性。

本申请实施例提供的装置，可以实现上述如图2所示的实施例的方法，其实现原理和技术效果类似，此处不再赘述。

图5为本申请实施例提供的电子设备的硬件结构示意图。如图5所示，本实施例提供的设备500包括：处理器501，以及与所述处理器通信连接的存储器。其中，处理器501、存储器502通过总线503连接。

在具体实现过程中，处理器501执行所述存储器502存储的计算机执行指令，使得处理器501执行上述方法实施例中的方法。

处理器501的具体实现过程可参见上述方法实施例，其实现原理和技术效果类似，本实施例此处不再赘述。

在上述的图5所示的实施例中，应理解，处理器可以是中央处理单元(英文：Central Processing Unit，简称：CPU)，还可以是其他通用处理器、数字信号处理器(英文：Digital Signal Processor，简称：DSP)、专用集成电路(英文：Application SpecificIntegrated Circuit，简称：ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合发明所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

存储器可能包含高速RAM存储器，也可能还包括非易失性存储NVM，例如至少一个磁盘存储器。

总线可以是工业标准体系结构(Industry Standard Architecture，ISA)总线、外部设备互连(Peripheral Component Interconnect，PCI)总线或扩展工业标准体系结构(Extended Industry Standard Architecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，本申请附图中的总线并不限定仅有一根总线或一种类型的总线。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现上述方法实施例的前端页面处理方法。

本申请实施例还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时，实现如上所述的前端页面处理方法。

上述的计算机可读存储介质，上述可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。可读存储介质可以是通用或专用计算机能够存取的任何可用介质。

一种示例性的可读存储介质耦合至处理器，从而使处理器能够从该可读存储介质读取信息，且可向该可读存储介质写入信息。当然，可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(Application Specific IntegratedCircuits，简称：ASIC)中。当然，处理器和可读存储介质也可以作为分立组件存在于设备中。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (10)

1.一种前端页面处理方法，其特征在于，包括：

确定目标模板，其中，所述目标模板为与待生成的目标前端页面的布局相匹配的模板；

获取所述目标前端页面对应的数据配置文件；

将所述数据配置文件导入所述目标模板，得到填充后的目标模板；

导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码。

2.根据权利要求1所述的方法，其特征在于，所述确定目标模板，包括：

生成并显示模板选择提示，其中，所述模板选择提示中包含至少一触控按键，每个触控按键对应一模板；

响应作用于所述模板选择提示中任一触控按键的触控操作，确定目标模板。

3.根据权利要求1所述的方法，其特征在于，所述将所述数据配置文件导入所述目标模板，得到填充后的目标模板，包括：

根据所述数据配置文件生成配置规则；

根据所述配置规则将所述数据配置文件导入所述目标模板，得到填充后的目标模板。

4.根据权利要求3所述的方法，其特征在于，所述根据所述数据配置文件生成配置规则，包括：

确定所述数据配置文件中包含的字段信息，其中，所述字段信息包括字段名称、字段内容、字段类型、字段长度、是否可编辑、是否展示中的一种或多种；

根据所述字段信息生成配置规则。

5.根据权利要求1所述的方法，其特征在于，所述导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码，包括：

确定目标存储路径，并在所述目标存储路径对应的存储位置处生成一空白文档；

导出所述填充后的目标模板对应的代码至所述空白文档，得到所述目标前端页面对应的代码。

6.根据权利要求1-5任一项所述的方法，其特征在于，在所述将所述数据配置文件导入所述目标模板，得到填充后的目标模板之前，还包括：

根据第一预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的完整性；

根据第二预设校验规则对所述数据配置文件进行校验，确定所述数据配置文件的合法性。

7.一种前端页面处理装置，其特征在于，包括：

确定模块，用于确定目标模板，其中，所述目标模板为与待生成的目标前端页面的布局相匹配的模板；

获取模块，用于获取所述目标前端页面对应的数据配置文件；

处理模块，用于将所述数据配置文件导入所述目标模板，得到填充后的目标模板；

所述处理模块，还用于导出所述填充后的目标模板对应的代码，得到所述目标前端页面对应的代码。

8.一种电子设备，其特征在于，包括：处理器，以及与所述处理器通信连接的存储器；

所述存储器存储计算机执行指令；

所述处理器执行所述存储器存储的计算机执行指令，以实现如权利要求1至6任一项所述的前端页面处理方法。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如权利要求1至6任一项所述的前端页面处理方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的前端页面处理方法。

Images