CN117707493A - 前端界面生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种前端界面生成方法、装置、电子设备及存储介质。属于Web前端技术领域，方法包括：根据用户生成目标业务界面的请求，获取各路由对应的接口数据；所述请求包括URL；每个路由对应目标业务界面对应的多个页面中的一个页面；基于预设的数据规则配置文件系统，确定各所述路由对应的数据规则配置文件；所述预设的数据规则配置文件系统包括多个数据规则配置模板文件；根据各所述路由对应的数据规则配置文件，对各所述路由对应的接口数据进行处理，确定目标数据；根据所述目标数据和各所述路由对应的预先配置的模板页面，生成目标业务界面。

Description

前端界面生成方法、装置、电子设备及存储介质

技术领域

本申请属于Web前端技术领域，具体涉及一种前端界面生成方法、装置、电子设备及存储介质。

背景技术

针对一个业务的不同业务场景，需要开发对应的多个万维网(World Wide Web，Web)前端页面。而开发每个场景对应的Web前端页面时，都需要一名开发人员研发大约两个月的时间，并且，每个开发人员的研发能力不同，为了保证开发的Web前端页面的质量，往往还需要花费大量时间培训。

由此可见，在开发对应的Web前端界面时，存在人力成本高，研发效率低的问题。

发明内容

本申请实施例提供一种前端界面生成方法、装置、电子设备及存储介质，能够解决在开发对应的Web前端界面时，存在人力成本高，研发效率低的问题。

第一方面，本申请实施例提供了一种前端界面生成方法，包括：根据用户生成目标业务界面的请求，获取各路由对应的接口数据；所述请求包括统一资源定位系统(uniformresource locator，URL)；每个路由对应目标业务界面对应的多个页面中的一个页面；基于预设的数据规则配置文件系统，确定各所述路由对应的数据规则配置文件；所述预设的数据规则配置文件系统包括多个数据规则配置模板文件；根据各所述路由对应的数据规则配置文件，对各所述路由对应的接口数据进行处理，确定目标数据；根据所述目标数据和各所述路由对应的预先配置的模板页面，生成目标业务界面。

第二方面，本申请实施例提供了一种前端界面生成方法装置，包括：获取模块，用于根据用户生成目标业务界面的请求，获取各路由对应的接口数据；所述请求包括URL；每个路由对应目标业务界面对应的多个页面中的一个页面；确定模块，用于基于预设的数据规则配置文件系统，确定各所述路由对应的数据规则配置文件；所述预设的数据规则配置文件系统包括多个数据规则配置模板文件；处理模块，用于根据各所述路由对应的数据规则配置文件，对各所述路由对应的接口数据进行处理，确定目标数据；生成模块，用于根据所述目标数据和各所述路由对应的预先配置的模板页面，生成目标业务界面。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括：处理器；以及被安排成存储计算机可执行指令的存储器，所述可执行指令被配置由所述处理器执行，所述可执行指令包括用于执行如第一方面所述的前端界面生成方法。

第四方面，本申请实施例提供了一种存储介质，所述存储介质用于存储计算机可执行指令，所述计算机可执行指令使得计算机执行如第一方面所述的前端界面生成方法。

在本申请实施例中，通过根据用户生成目标业务界面的请求，获取各路由对应的接口数据，请求包括统一资源定位系统URL，每个路由对应目标业务界面对应的多个页面中的一个页面；然后，基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据；再根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面；相比于直接使用vue.js进行多个场景的前端界面的开发，编写大量重复的逻辑代码，本方案开发人员通过使用预设的数据规则配置文件系统(包括多个数据规则配置模板文件)，可以避免编写大量重复的数据处理逻辑代码，能够对各路由对应的数据规则配置文件进行快捷地、高效地处理，提升了开发效率，并且，通过使用预先配置的模板页面，可以避免编写大量重复的页面逻辑代码，进一步地提升了开发效率。另外，通过使用各路由对应的数据规则配置文件和各路由对应的预先配置的模板页面，可以降低对开发人员的开发能力的要求，从而，无需花费大量的时间进行培训，降低了人力成本。

附图说明

图1是本申请实施例提供的一种前端界面生成方法的流程示意图；

图2是本申请实施例提供的另一种前端界面生成方法的流程示意图；

图3是本申请实施例提供的一种前端界面生成方法装置的结构示意图；

图4是本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

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

本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。

下面结合附图，通过具体的实施例及其应用场景对本申请实施例提供的前端界面生成方法、装置、电子设备及存储介质进行详细地说明。

图1示出本发明的一个实施例提供的一种前端界面生成方法，该方法可以由电子设备执行，该电子设备可以包括：服务器和/或终端设备，其中终端设备可以例如车载终端或手机终端等。换言之，该方法可以由安装在电子设备的软件或硬件来执行，该方法包括如下步骤：

S102：根据用户生成目标业务界面的请求，获取各路由对应的接口数据；请求包括URL；每个路由对应目标业务界面对应的多个页面中的一个页面。

目标业务可以是银行、信托、信贷等金融相关行业的业务，目标业务在此不作具体限定。

URL，是因特网的万维网服务程序上用于指定信息位置的表示方法。

具体的，目标业务界面对应多个页面，每个路由指向一个页面。通过URL可以找到用于生成目标业务界面的远程资源(接口数据)。

S104：基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件。

具体的，多个数据规则配置模板文件是抽象出的多个场景中通用的规则文件，用于对各路由对应的接口数据进行处理。例如，贷款业务，可以包括消费贷款、房贷、产业贷等多个业务场景，这些业务场景不同，但存在一定的共性，对这些存在共性的部分的数据处理规则抽象成文件。

数据规则配置文件系统，为在存储设备上负责管理和存储多个数据规则配置模板文件的软件机构。开发人员通过数据规则配置文件系统，可以快速检索出需要的数据规则配置模板文件，从而提升开发人员的开发效率。可以设置对应的关键词检索表，用于检索，对于具体检索的方式，在此不作具体限定。

具体的，可以设置各路由时，将路由路径path与规则配置模板文件关联，从而在实际应用时，通过各路由包括的路由path找到对应的规则配置模板文件。

S106：根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据。

上述S102中获取到的各路由对应的接口数据是杂乱的、无序的，通过各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，得到的目标数据，可以结合各路由对应的预先配置的模板页面使用。

S108：根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面。

每个路由对应的预先配置的模板页面，为在模板页面的基础上配置生成的，而模板页面可以是基于渐进式JavaScript框架vue.js生成的。Vue.js，是一款用于构建用户界面的JavaScript框架。它基于标准超文本标记语言(Hyper Text Markup Language，HTML)、层叠样式表(Cascading Style Sheets，CSS)和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。其中，JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

将每个路由对应的目标数据与每个路由对应的预先配置的模板页面结合，生成目标业务界面。

可选地，结合方式可以为使用模板、双向绑定或计算属性等。其中，双向绑定是每个路由对应的目标数据与每个路由对应的预先配置的模板页面绑定，若目标数据发生变动，使用该目标数据的相应页面(目标业务界面对应的多个页面中的一个)也发生变动，若页面发生变动，相应目标数据也会发生变动。

本发明实施例提供的前端界面生成方法，通过根据用户生成目标业务界面的请求，获取各路由对应的接口数据，请求包括统一资源定位系统URL，每个路由对应目标业务界面对应的多个页面中的一个页面；然后，基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据；再根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面；相比于直接使用vue.js进行多个场景的前端界面的开发，编写大量重复的逻辑代码，本方案开发人员通过使用预设的数据规则配置文件系统(包括多个数据规则配置模板文件)，可以避免编写大量重复的数据处理逻辑代码，能够对各路由对应的数据规则配置文件进行快捷地、高效地处理，提升了开发效率，并且，通过使用预先配置的模板页面，可以避免编写大量重复的页面逻辑代码，进一步地提升了开发效率。另外，通过使用各路由对应的数据规则配置文件和各路由对应的预先配置的模板页面，可以降低对开发人员的开发能力的要求，从而，无需花费大量的时间进行培训，降低了人力成本。

在一种实现方式中，基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件(即S104)，可以具体执行为如下步骤A1：

步骤A1，基于预设的数据规则配置文件系统和用户对各路由对应的数据规则配置模板文件的输入信息，配置各路由对应的数据规则配置文件。

其中，输入信息包括需要传递的参数名称和规则组件标识。

一般情况下，获取的各路由对应的接口数据中的参数名称并非使用本产品的开发人员命名的，而通过使用数据规则配置模板文件，无需与其他人员预先约定参数名称的命名，修改数据规则配置模板文件中要传递的参数名称即可。各路由对应的数据规则配置模板文件中包括抽象出的规则组件，例如，单位转换组件，换算组件等，单位转换组件用于增添单位，换算组件用于从千分位换算到百分位。供开发人员选择对某个参数是进行单位的增添，还是进行单位的换算。

开发人员仅需对各路由对应的数据规则配置模板文件输入需要传递的参数名称和规则组件标识(输入信息)。

需要说明的是，该数据规则配置模板文件在多个场景中通用，仅需根据该场景中与其他场景不同，输入需要传递的参数名称和规则组件标识。使用该数据规则配置模板文件，能够灵活、快捷的配置不同场景的数据规则配置文件。

本实施例中，通过预设的数据规则配置文件系统中包括多个数据规则配置模板文件，使开发人员在开发不同场景时，通过使用该数据规则配置模板文件，可以仅需对各路由对应的数据规则配置模板文件输入需要传递的参数名称和规则组件标识(输入信息)，就能对各路由对应的接口数据(目标业务界面对应的多个页面的数据)进行处理。当想要生成的目标业务界面发生变动，对应的页面需要调整时，无需进行大量的代码修改，并且由于使用该数据规则配置模板文件生成的代码脚本的一致性高，能够高效统一的维护。

在一种实现方式中，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据(即S106)，可以具体执行为如下步骤B1至步骤B3：

步骤B1，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行数据处理，得到处理后的接口数据；数据处理包括以下中的一项或多项：数据清洗处理、数据转换处理和聚合处理。

具体的，数据清洗处理，用于删除该路由对应的接口数据中该路由对应的页面不需要的数据。

例如，以消费贷款场景中的预约单列表页面为例，预约单列表页面要展示的信息包括：约单的名称、客户经理、约定时间和业务分类。该路由对应的接口数据包括当月所有的数据，会包括上述要展示的信息，还包括：约单创建时间和用户身份证号等。数据清洗处理就是通过对应规则将约单创建时间和用户身份证号等这些额外信息删除。

数据转换处理，用于根据数据规则配置文件对数据进行转换。例如，对某参数，数据规则配置文件中配置的是单位转换规则组件，则对该参数进行单位类型的转换。单位类型的转换，例如，在某参数后面添加元、角和/或分。

聚合处理，用于将该路由对应的接口数据中多种类型的数据转换成同一类型的数据并聚合。例如，该路由对应的接口数据包括单条类型的数据、以列表类型的数据或数组类型的数据。

步骤B2，获取本地数据，本地数据用于生成目标业务界面。

本地数据不是无序的，无需进行处理。

步骤B3，确定目标数据，目标数据包括处理后的接口数据和本地数据。

在一种实现方式中，根据用户生成目标业务界面的请求，获取各路由对应的接口数据(即S102)，可以具体执行为如下步骤C1至步骤C2：

步骤C1，浏览器接收到URL。

步骤C2，浏览器根据URL，加载在vue.js中设置的各路由对应的各个初始页面，并调用后端接口获取各路由对应的接口数据；以及，加载模板页面配置库和预设的数据规则配置文件系统；模板页面配置库包括多个模板页面。

其中，后端接口用于调用服务器中的数据。

可选地，可以使用网络请求库Axios，或，异步JavaScript和XML(AsynchronousJavascript And XML，Ajax)等调用后端接口。Axios是一个基于promise的网络请求库，可以用于浏览器和node.js。其中，Promise是一个脚本程序设计语言(European ComputerManufacturers Association，ECMAScript)提供的类，目的是更加优雅地书写复杂的异步任务。Node.js是一个基于谷歌浏览器Chrome的JavaScript运行环境。

各路由可以是开发人员在vue.js中设置的。浏览器根据URL，加载各路由对应的页面，各路由对应页面初始化。同时，浏览器根据URL，调用后端接口获取各路由对应的接口数据。

在一种实现方式中，根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面(即S108)，可以具体执行为如下步骤D1至步骤D2：

步骤D1，根据目标数据和各路由对应的预先配置的模板页面，加载vue.js中对应的组件脚本，生成目标业务界面文件。

步骤D2，根据目标业务界面文件，生成目标业务界面。

模板页面，可以是基于vue.js生成的，而各路由对应的预先配置的模板页面，在模板页面的基础上，也可以根据vue.js生成，相应的，加载vue.js中对应的组件脚本，即可生成目标业务界面文件。

在一种实现方式中，上述模板页面包括组件模块、公共逻辑模块、组件模板模块、交互模块和封装模块。

在一种实现方式中，调用后端接口获取各路由对应的接口数据(即步骤C2)，可以具体执行为如下步骤：

通过axios调用后端接口获取各路由对应的接口数据。

图2是本申请实施例提供的另一种前端界面生成方法的流程示意图。如图2所示，该方法包括：

步骤202，根据用户生成目标业务界面的请求，获取各路由对应的接口数据；请求包括URL；每个路由对应目标业务界面对应的多个页面中的一个页面；

步骤204，基于预设的数据规则配置文件系统和用户对各路由对应的数据规则配置模板文件的输入信息，配置各路由对应的数据规则配置文件；输入信息包括需要传递的参数名称和规则组件标识。

步骤206，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行数据处理，得到处理后的接口数据；数据处理包括以下中的一项或多项：数据清洗处理、数据转换处理和聚合处理。

步骤208，获取本地数据，本地数据用于生成目标业务界面。

步骤210，确定目标数据，目标数据包括处理后的接口数据和本地数据。

步骤212，根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面。

本实施例中，通过根据用户生成目标业务界面的请求，获取各路由对应的接口数据，请求包括统一资源定位系统URL，每个路由对应目标业务界面对应的多个页面中的一个页面；然后，基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据；再根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面；相比于直接使用vue.js进行多个场景的前端界面的开发，编写大量重复的逻辑代码，本方案开发人员通过使用预设的数据规则配置文件系统(包括多个数据规则配置模板文件)，可以避免编写大量重复的数据处理逻辑代码，能够对各路由对应的数据规则配置文件进行快捷地、高效地处理，提升了开发效率，并且，通过使用预先配置的模板页面，可以避免编写大量重复的页面逻辑代码，进一步地提升了开发效率。另外，通过使用各路由对应的数据规则配置文件和各路由对应的预先配置的模板页面，可以降低对开发人员的开发能力的要求，从而，无需花费大量的时间进行培训，降低了人力成本。

对应上述实施例提供的前端界面生成方法，基于相同的技术构思，本发明实施例还提供了一种前端界面生成方法装置，图3是根据本发明实施例的前端界面生成方法装置的结构示意图，该前端界面生成方法装置用于执行图1至图2描述的前端界面生成方法，如图3所示，前端界面生成方法装置包括：获取模块310、确定模块320、处理模块330和生成模块340。

获取模块310，用于根据用户生成目标业务界面的请求，获取各路由对应的接口数据；请求包括URL；每个路由对应目标业务界面对应的多个页面中的一个页面；

确定模块320，用于基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件；

处理模块330，用于根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据；

生成模块340，用于根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面。

在一种实现方式中，该确定模块320，具体用于：

基于预设的数据规则配置文件系统和用户对各路由对应的数据规则配置模板文件的输入信息，配置各路由对应的数据规则配置文件；

其中，输入信息包括需要传递的参数名称和规则组件标识。

在一种实现方式中，该处理模块330，具体用于：

根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行数据处理，得到处理后的接口数据；数据处理包括以下中的一项或多项：数据清洗处理、数据转换处理和聚合处理；

获取本地数据，本地数据用于生成目标业务界面；

确定目标数据，目标数据包括处理后的接口数据和本地数据。

在一种实现方式中，获取模块310，具体用于：

浏览器接收到URL；

浏览器根据URL，加载在vue.js中设置的各路由对应的各个初始页面，并调用后端接口获取各路由对应的接口数据；以及，加载模板页面配置库和预设的数据规则配置文件系统；模板页面配置库包括多个模板页面；

其中，后端接口用于调用服务器中的数据。

在一种实现方式中，该生成模块340，具体用于：

根据目标数据和各路由对应的预先配置的模板页面，加载vue.js中对应的组件脚本，生成目标业务界面文件；

根据目标业务界面文件，生成目标业务界面。

在一种实现方式中，上述模板页面包括组件模块、公共逻辑模块、组件模板模块、交互模块和封装模块。

在一种实现方式中，上述获取模块310，具体用于：

通过axios调用后端接口获取各路由对应的接口数据。

本实施例中，通过根据用户生成目标业务界面的请求，获取各路由对应的接口数据，请求包括统一资源定位系统URL，每个路由对应目标业务界面对应的多个页面中的一个页面；然后，基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据；再根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面；相比于直接使用vue.js进行多个场景的前端界面的开发，编写大量重复的逻辑代码，本方案开发人员通过使用预设的数据规则配置文件系统(包括多个数据规则配置模板文件)，可以避免编写大量重复的数据处理逻辑代码，能够对各路由对应的数据规则配置文件进行快捷地、高效地处理，提升了开发效率，并且，通过使用预先配置的模板页面，可以避免编写大量重复的页面逻辑代码，进一步地提升了开发效率。另外，通过使用各路由对应的数据规则配置文件和各路由对应的预先配置的模板页面，可以降低对开发人员的开发能力的要求，从而，无需花费大量的时间进行培训，降低了人力成本。

本领域的技术人员应可理解，上述前端界面生成方法装置能够用来实现前文的前端界面生成方法，其中的细节描述应与前文方法部分描述类似，为避免重复，此处不再赘述。

基于相同的技术构思，本申请实施例还提供了一种电子设备，该电子设备用于执行上述的前端界面生成方法，图4为实现本申请各个实施例的一种电子设备的结构示意图。电子设备可因配置或性能不同而产生比较大的差异，可以包括处理器(processor)410、通信接口(Communications Interface)420、存储器(memory)430和通信总线440，其中，处理器410，通信接口420，存储器430通过通信总线440完成相互间的通信。处理器410可以调用存储在存储器430上并可在处理器410上运行的计算机程序，以执行下述步骤：

根据用户生成目标业务界面的请求，获取各路由对应的接口数据；请求包括URL；每个路由对应目标业务界面对应的多个页面中的一个页面；

基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件；

根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据；

根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面。

本实施例中，通过根据用户生成目标业务界面的请求，获取各路由对应的接口数据，请求包括统一资源定位系统URL，每个路由对应目标业务界面对应的多个页面中的一个页面；然后，基于预设的数据规则配置文件系统，确定各路由对应的数据规则配置文件；预设的数据规则配置文件系统包括多个数据规则配置模板文件，根据各路由对应的数据规则配置文件，对各路由对应的接口数据进行处理，确定目标数据；再根据目标数据和各路由对应的预先配置的模板页面，生成目标业务界面；相比于直接使用vue.js进行多个场景的前端界面的开发，编写大量重复的逻辑代码，本方案开发人员通过使用预设的数据规则配置文件系统(包括多个数据规则配置模板文件)，可以避免编写大量重复的数据处理逻辑代码，能够对各路由对应的数据规则配置文件进行快捷地、高效地处理，提升了开发效率，并且，通过使用预先配置的模板页面，可以避免编写大量重复的页面逻辑代码，进一步地提升了开发效率。另外，通过使用各路由对应的数据规则配置文件和各路由对应的预先配置的模板页面，可以降低对开发人员的开发能力的要求，从而，无需花费大量的时间进行培训，降低了人力成本。

具体执行步骤可以参见上述前端界面生成方法实施例的各个步骤，且能达到相同的技术效果，为避免重复，这里不再赘述。

需要说明的是，本申请实施例中的电子设备包括：服务器、终端或除终端之外的其他设备。

以上电子设备结构并不构成对电子设备的限定，电子设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置，例如，输入单元，可以包括图形处理器(Graphics Processing Unit，GPU)和麦克风，显示单元可以采用液晶显示器、有机发光二极管等形式来配置显示面板。用户输入单元包括触控面板以及其他输入设备中的至少一种。触控面板也称为触摸屏。其他输入设备可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。

存储器可用于存储软件程序以及各种数据。存储器可主要包括存储程序或指令的第一存储区和存储数据的第二存储区，其中，第一存储区可存储操作系统、至少一个功能所需的应用程序或指令(比如声音播放功能、图像播放功能等)等。此外，存储器可以包括易失性存储器或非易失性存储器，或者，存储器可以包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(Read-Only Memory，ROM)、可编程只读存储器(Programmable ROM，PROM)、可擦除可编程只读存储器(Erasable PROM，EPROM)、电可擦除可编程只读存储器(Electrically EPROM，EEPROM)或闪存。易失性存储器可以是随机存取存储器(Random Access Memory，RAM)，静态随机存取存储器(Static RAM，SRAM)、动态随机存取存储器(Dynamic RAM，DRAM)、同步动态随机存取存储器(Synchronous DRAM，SDRAM)、双倍数据速率同步动态随机存取存储器(Double Data Rate SDRAM，DDRSDRAM)、增强型同步动态随机存取存储器(Enhanced SDRAM，ESDRAM)、同步连接动态随机存取存储器(Synchlink DRAM，SLDRAM)和直接内存总线随机存取存储器(Direct Rambus RAM，DRRAM)。

处理器可包括一个或多个处理单元；可选的，处理器集成应用处理器和调制解调处理器，其中，应用处理器主要处理涉及操作系统、用户界面和应用程序等的操作，调制解调处理器主要处理无线通信信号，如基带处理器。可以理解的是，上述调制解调处理器也可以不集成到处理器中。

本申请实施例还提供一种存储介质，所述存储介质上存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现上述前端界面生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

其中，所述处理器为上述实施例中所述的电子设备中的处理器。所述存储介质，包括计算机可读存储介质，如计算机只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

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

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

Claims (10)

1.一种前端界面生成方法，其特征在于，包括：

根据用户生成目标业务界面的请求，获取各路由对应的接口数据；所述请求包括统一资源定位系统URL；每个路由对应目标业务界面对应的多个页面中的一个页面；

基于预设的数据规则配置文件系统，确定各所述路由对应的数据规则配置文件；所述预设的数据规则配置文件系统包括多个数据规则配置模板文件；

根据各所述路由对应的数据规则配置文件，对各所述路由对应的接口数据进行处理，确定目标数据；

根据所述目标数据和各所述路由对应的预先配置的模板页面，生成目标业务界面。

2.根据权利要求1所述的方法，其特征在于，所述基于预设的数据规则配置文件系统，确定各所述路由对应的数据规则配置文件，包括：

基于所述预设的数据规则配置文件系统和用户对各所述路由对应的数据规则配置模板文件的输入信息，配置各所述路由对应的数据规则配置文件；

其中，所述输入信息包括需要传递的参数名称和规则组件标识。

3.根据权利要求1或2所述的方法，其特征在于，所述根据各所述路由对应的数据规则配置文件，对各所述路由对应的接口数据进行处理，确定目标数据，包括：

根据各所述路由对应的数据规则配置文件，对各所述路由对应的接口数据进行数据处理，得到处理后的接口数据；所述数据处理包括以下中的一项或多项：数据清洗处理、数据转换处理和聚合处理；

获取本地数据，所述本地数据用于生成目标业务界面；

确定目标数据，所述目标数据包括所述处理后的接口数据和所述本地数据。

4.根据权利要求1所述的方法，其特征在于，所述根据用户生成目标业务界面的请求，获取各路由对应的接口数据，包括：

浏览器接收到所述URL；

所述浏览器根据所述URL，加载在渐进式JavaScript框架vue.js中设置的所述各路由对应的各个初始页面，并调用后端接口获取各所述路由对应的接口数据；以及，加载模板页面配置库和所述预设的数据规则配置文件系统；所述模板页面配置库包括多个模板页面；

其中，所述后端接口用于调用服务器中的数据。

5.根据权利要求1所述的方法，其特征在于，所述根据所述目标数据和各所述路由对应的预先配置的模板页面，生成目标业务界面，包括：

根据所述目标数据和各所述路由对应的预先配置的模板页面，加载vue.js中对应的组件脚本，生成目标业务界面文件；

根据所述目标业务界面文件，生成目标业务界面。

6.根据权利要求1至5任一项所述的方法，其特征在于，所述所述模板页面包括组件模块、公共逻辑模块、组件模板模块、交互模块和封装模块。

7.根据权利要求4所述的方法，其特征在于，所述调用后端接口获取各所述路由对应的接口数据，包括：

通过网络请求库axios调用所述后端接口获取各所述路由对应的接口数据。

8.一种前端界面生成方法装置，其特征在于，包括：

获取模块，用于根据用户生成目标业务界面的请求，获取各路由对应的接口数据；所述请求包括URL；每个路由对应目标业务界面对应的多个页面中的一个页面；

确定模块，用于基于预设的数据规则配置文件系统，确定各所述路由对应的数据规则配置文件；所述预设的数据规则配置文件系统包括多个数据规则配置模板文件；

处理模块，用于根据各所述路由对应的数据规则配置文件，对各所述路由对应的接口数据进行处理，确定目标数据；

生成模块，用于根据所述目标数据和各所述路由对应的预先配置的模板页面，生成目标业务界面。

9.一种前端界面生成方法设备，其特征在于，所述设备包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令被配置由所述处理器执行，所述可执行指令包括用于执行如权利要求1-7任一项所述的前端界面生成方法。

10.一种存储介质，其特征在于，所述存储介质用于存储计算机可执行指令，所述计算机可执行指令使得计算机执行如权利要求1-7任一项所述的前端界面生成方法。