CN114691128A - 一种前端页面生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明涉及一种前端页面生成方法、装置、电子设备及存储介质，所述方法包括：获取来自于前端交互页面的数据交互请求；在后端查询得到所述数据交互请求对应的目标视图模型；将所述数据交互请求传输至所述后端，以使所述后端根据所述数据交互请求对所述目标视图模型进行实例化，得到目标视图模型实体；将所述后端通过所述目标视图模型实体返回的回传模型数据传输至前端，以使所述前端根据所述回传模型数据对前端交互页面进行更新。本发明实施例提供的技术方案，开发过程中不必再定义前端的代码，开发过程中代码量减半，可以有效提高开发效率；同时，对于不熟悉前端开发的开发者，能够通过更熟悉的后端代码快速开发web程序，更加便于web程序的开发。

Description

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

技术领域

本发明涉及web技术领域，尤其涉及一种前端页面生成方法、装置、电子设备及存储介质。

背景技术

现有web开发框架流程普遍使用前后端分离开发，后端实现业务逻辑并以RestfulApi方式向前端提供接口；前端通过页面逻辑,不同功能编写相应JavaScript代码调用后端接口获取数据，通过数据模型，实现前端逻辑。

现有Vue前端框架是一套用于构建用户界面的渐进式框架，用户可在js代码中声明模型(model)，方法(method)等内容，在html中以绑定声明的模型，使用定义的方法。

基于现有web，vue前端框架可以很灵活的开发web程序，但为了实现页面上的逻辑，往往要在js中定义相应的模型(model)与方法(method)，同时后台也要定义业务逻辑接口与后台与前端对接的数据模型，当页面复杂度增大时，往往伴随着前端，和后端所定义的模型和方法一起变多，这对于开发者来说，需要同时维护两套代码(前端与后端)，代码量会大大提高，开发效率降低。

为此，急需一种可以有效提高前后端开发效率的技术方案，以应对上述前后端分离导致代码维护量多的技术问题。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本发明提供了一种前端页面生成方法、装置、电子设备以及存储介质。

第一方面，本发明提供了一种前端页面生成方法，所述方法包括：

获取来自于前端交互页面的数据交互请求；

在后端查询得到所述数据交互请求对应的目标视图模型；

将所述数据交互请求传输至所述后端，以使所述后端根据所述数据交互请求对所述目标视图模型进行实例化，得到目标视图模型实体；

将所述后端通过所述目标视图模型实体返回的回传模型数据传输至前端，以使所述前端根据所述回传模型数据对所述前端交互页面进行更新。

在本发明的可选实施方式中，所述在后端查询得到所述数据交互请求对应的目标视图模型，包括：

确定所述数据交互请求中的待更新视图模型ID；

在所述后端查询得到所述待更新视图模型ID对应的所述目标视图模型。

在本发明的可选实施方式中，所述将所述数据交互请求传输至所述后端，以使所述后端根据所述数据交互请求对所述目标视图模型进行实例化，得到目标视图模型实体，包括：

确定所述待更新视图模型ID对应的视图模型类型；

确定所述数据交互请求所需调用方法的方法名称以及目标模型；所述目标模型中包括用于筛选得到的需回传至所述前端交互页面的参数的特征字段；

在所述后端查询得到所述待更新视图模型ID对应的所述目标视图模型；以使所述后端根据所述视图模型类型对所述目标视图模型进行实例化，得到预设目标视图模型实体，将所述目标模型还原给所述预设目标视图模型实体，得到所述目标视图模型实体。

在本发明的可选实施方式中，所述根据所述后端通过所述目标视图模型实体返回的回传模型数据，包括：

获取所述后端通过目标方法，对所述目标模型对应的候选数据进行处理后，得到用于回传至所述前端交互页面的回传模型数据；所述目标方法为所述目标视图模型中，与所述方法名称对应的方法；

将所述回传模型数据传输至前端，以使所述前端根据所述回传模型数据对前端交互页面进行更新。

在本发明的可选实施方式中，还包括：

确定预设视图模型实体中的预设视图模型ID、预设方法、预设模型以及描述文件；所述预设视图模型实体为所述后端在获取来自于所述前端交互页面的访问请求之后，根据所述访问请求调取得到的所述前端交互页面上一次数据交互请求中的实体；

根据所述描述文件确定预设视图模型实体在所述前端交互页面中的目标位置信息；

根据所述描述文件以及目标位置信息，对所述预设视图模型ID、预设方法以及预设模型进行渲染得到所述前端交互页面对应的代码。

在本发明的可选实施方式中，还包括：

获取待录入视图模型，以及所述待录入视图模型的存储位置信息；

确定所述待录入视图模型的待录入视图模型ID以及待录入类型；

将所述待录入视图模型ID、待录入类型以及存储位置信息写入预设的ID列表。

在本发明的可选实施方式中，所述确定所述数据交互请求中的待更新视图模型ID，包括：

获取作为所述数据交互请求的Ajax请求；

根据所述Ajax请求进行路由寻址，查询得到所述ID列表；

通过所述ID列表对所述Ajax请求进行解析，得到所述待更新视图模型ID。

第二方面，本发明提供了一种前端页面生成装置，包括：

获取模块，用于获取来自于前端交互页面的数据交互请求；

查询模块，用于在后端查询得到所述数据交互请求对应的目标视图模型；

处理模块，用于将所述数据交互请求传输至所述后端，以使所述后端根据所述数据交互请求对所述目标视图模型进行实例化，得到目标视图模型实体；

更新模块，用于将所述后端通过所述目标视图模型实体返回的回传模型数据传输至前端，以使所述前端根据所述回传模型数据对所述前端交互页面进行更新。

第三方面，本发明提供了一种电子设备，包括：至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行上述第一方面中任一项所述的前端页面生成方法。

第四方面，本发明实施例提供一种存储介质，所述存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述第一方面中任一项所述的前端页面生成方法。

本发明实施例提供的技术方案，开发过程中不必再定义前端的代码，开发过程中代码量减半，可以有效提高开发效率；同时，对于不熟悉前端开发的开发者，能够通过更熟悉的后端代码快速开发web程序，更加便于web程序的开发。

附图说明

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

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

图1为本发明实施例提供的一种前端页面生成方法的实施流程示意图；

图2为本发明另一实施例提供的一种前端页面生成方法的实施流程示意图；

图3为本发明另一实施例提供的一种前端页面生成方法的实施流程示意图；

图4为本发明实施例提供的一种前端页面生成装置的框图；

图5为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

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

如图1所示，为本发明实施例提供的一种前端页面生成的实施流程示意图，应用于进行web程序开发的vue框架中，并搭载有MVVM(即：Model-View-ViewModel)的中间层，该方法具体可以包括以下步骤：

本发明提供了一种前端页面生成方法，所述方法包括如下所述步骤S1至S4：

步骤S1，获取来自于前端交互页面的数据交互请求。

具体的，前端交互页面，可以是使用vue框架，开发的web程序的交互页面。

数据交互请求，可以是由前端的用户进行页面交互之后，生成的请求。

步骤S2，在后端查询得到数据交互请求对应的目标视图模型。

具体的，目标视图模型，是数据交互请求对应的视图模型(即：Model-View-ViewModel(MVVM)框架中的viewmode)，视图模型既是一个类(class)，类中可以定义前端所需要的所有模型(model)，与方法(method)；用户便无需再在前端定义与组合模型与方法。

后端，可以是用于用户编写ViewModel和View代码的服务端，其中，View一般为vue语法的文本；并且用占位符标记的方法，绑定ViewModel中的模型与方法，其中，占位符就是先占住一个固定的位置，等着你再往里面添加内容的符号。

可选的，数据交互请求中可以携带有目标视图模型的相关信息，以在后端查询到准确的目标视图模型。

在本发明的可选实施方式中，所述步骤S2在后端查询得到数据交互请求对应的目标视图模型，包括如下所述步骤S21和S22：

步骤S21，确定数据交互请求中的待更新视图模型ID。

具体的，前端交互页面中的每个控件可以对应有后端的视图模型，并且，控件可以通过绑定有视图模型的视图模型ID，以使生成数据交互请求时，可以基于视图模型ID查询得到对应的目标视图模型。

其中，待更新视图模型ID，可以是用户操作，并生成数据交互请求的控件所对应的视图模型的ID。

步骤S22，在后端查询得到待更新视图模型ID对应的目标视图模型。

具体的，中间层可以通过待更新视图模型ID在后端中进行视图模型的查询。

步骤S3，将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体。

具体的，中间层在获取数据交互请求之后，在后端确定需要访问的目标视图模型，然后，后端根据数据交互请求对，目标视图模型进行实例化，并得到目标视图模型实体。

如图2所示，其中一种可选的实现方式中，该步骤S3将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体，包括如下所述步骤S31和S32：

步骤S31，确定待更新视图模型ID对应的视图模型类型；

具体的，中间层中可以存储有用于表征每个视图模型ID对应的视图模型类型的ID列表。

步骤S32，确定数据交互请求所需调用方法的方法名称以及目标模型；目标模型中包括用于筛选得到的需回传至前端交互页面的参数的特征字段。

具体的，前端交互页面生成的数据交互请求中，除了包括待更新视图模型ID之外，还包括所需调用方法的方法名称，以及需要在前端交互页面展示的参数的特征字段。

特征字段，用于在预设数据库进行数据匹配的字段。

其中一种可选的实现方式中，在vue的方法定义部分中，前端可以定义方法invoke_viewmodel_method(viewmodelid,method)，并在实现中，将viewmodelid(即：待更新视图模型ID)，method(即：方法名称)，与该viewmodelid对应的目标模型，一并打包，通过Ajax调用，返回给服务端中间层。

步骤S33，在后端查询得到待更新视图模型ID对应的目标视图模型；以使后端根据视图模型类型对目标视图模型进行实例化，得到预设目标视图模型实体，将目标模型还原给预设目标视图模型实体，得到目标视图模型实体。

具体的，当中间层接收得到待更新视图模型ID之后，可以在后端的所有视图模型中进行查询，并将视图模型ID与待更新视图模型ID一致的视图模型记为目标视图模型。当查询到目标视图模型之后，可以通过前述实施例中获取的视图模型类型对该目标视图模型进行实例化，得到预设目标视图模型实体，当将目标模型还原给预设目标视图模型实体，即可得到目标视图模型实体。进一步的，将目标模型还原给预设目标视图模型实体的方式可以是：首先前端返回给后台的各种绑定参数，会在前端页面构造成后端绑定的viewmodel类的子集json结构，然后将此json结构序列化成字符串作为参数传给后端，后端接受到该参数，使用路由找到的对应的viewmodel类型，并通过json反序列化的方式将此字符串反序列化成viewmodel实例(即：目标视图模型实体)。

步骤S4，将后端通过目标视图模型实体返回的回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

具体的，回传模型数据，是由目标视图模型实体，返回至前端的数据。

并且中间层在接收到回传模型数据之后，将其转发至前端，前端将该次Ajax调用所返回的回传模型数据，更新给该待更新视图模型标识对应的模型，由于使用vue框架，此时前端交互页面的展示效果会同步更新。

在本发明的可选实施方式中，将后端通过目标视图模型实体返回的回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新，包括如下所述步骤S41和S42：

步骤S41，获取后端通过方法名称对应的目标方法，对目标模型对应的候选数据进行处理后，得到用于回传至前端交互页面的回传模型数据；目标方法为目标视图模型中，与方法名称对应的方法。

具体的，由于每个视图模型中都包括多个方法，因此可以根据方法名称在目标视图模型中确定需要使用的方法。

当通过目标模型对应的候选数据进行处理后，即可得到用于回传至前端交互页面的回传模型数据。

步骤S42，将回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

通过本实施例中的方法，开发过程中不必再定义前端的代码，开发过程中代码量减半，可以有效提高开发效率；同时，对于不熟悉前端开发的开发者，能够通过更熟悉的后端代码快速开发web程序，更加便于web程序的开发。

如图3所示，在本发明的可选实施方式中，还包括如下所述步骤P1至P3：

步骤P1，确定预设视图模型实体中的预设视图模型ID、预设方法、预设模型以及描述文件；预设视图模型实体为后端在获取来自于前端交互页面的访问请求之后，根据访问请求调取得到的前端交互页面上一次数据交互请求中的实体；

步骤P2，根据描述文件，预设视图模型实体在前端交互页面中的目标位置信息；

步骤P3，根据描述文件以及目标位置信息，对预设视图模型ID、预设方法以及预设模型进行渲染得到前端交互页面对应的代码。

具体的，前端可以通过发起URL请求，对后端进行访问，后端可以将view中绑定的预设视图模型中的预设模型，渲染成前端vue框架定义模型的部分；同时，通过增加预设视图模型ID，以便前端在对后端进行数据交互请求，进行方法调用时，能够根据预设视图模型ID提取得到对应的视图模型以及对应的方法。

此外，由于view采用与前端vue框架语法一致的定义，基于view中描述文件(用于控制前端交互页面的展示方式以及所需调用的方法的文件)，确定预设视图模型实体在前端交互页面中的目标位置信息；

渲染器根据目标位置信息以及描述文件，预设视图模型ID、预设方法以及预设模型进行渲染得到前端交互页面对应的字符串，并传输至前端交互页面，以使前端交互页面中能够实现固定的方法调用，定义固定的参数协议：invoke_viewmodel_method(viewmodelid,method)；其中viewmodelid为：所要调用的viewmodel标识；method为：所要调用的viewmodel中的方法名称。

在本发明的可选实施方式中，还包括如下所述步骤A1至A3：

步骤A1，获取待录入视图模型，以及待录入视图模型的存储位置信息；

步骤A2，确定待录入视图模型的待录入视图模型ID以及待录入类型；

步骤A3，将待录入视图模型ID、待录入类型以及存储位置信息写入预设的ID列表。

具体的，后端研发人员可以编写ViewModel(待录入视图模型)和View代码；View可用于绑定ViewModel中的模型与方法。

存储位置信息，可以是待录入视图模型的存储位置。

待录入视图模型ID，为待录入视图模型的视图模型ID。

将待录入视图模型ID、待录入类型以及存储位置信息写入预设的ID列表之后，可以便于前端交互页面与后端进行交互时，快速通过存储位置信息调取得到对应的待录入视图模型，以及通过待录入类型对待录入视图模型进行实例化。

在本发明的可选实施方式中，确定数据交互请求中的待更新视图模型ID，包括如下所述步骤B1至B3：

步骤B1，获取作为数据交互请求的Ajax请求；

步骤B2，根据Ajax请求进行路由寻址，查询得到ID列表；

步骤B3，通过ID列表对Ajax请求进行解析，得到待更新视图模型ID。

具体的，Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

因此，当数据交互请求为Ajax请求之后，可以只对前端交互页面中的部分页面进行更新。

并且可以通过路由器接收得到Ajax请求，路由器在接收到Ajax请求之后，可以主动路由寻址查询得到ID列表。同时将Ajax请求传输至ID列表。

ID列表在接收得到Ajax请求之后，可以解析得到Ajax请求中携带的待更新视图模型ID，进而可以便于在后端查询得到待更新视图模型ID对应的目标视图模型以其类型。

与上述方法实施例相对应，本发明实施例还提供了一种前端页面生成装置，如图4所示，该装置包括：

获取模块1，用于获取来自于前端交互页面的数据交互请求；

查询模块2，用于在后端查询得到数据交互请求对应的目标视图模型；

处理模块3，用于将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体；

更新模块4，用于将后端通过目标视图模型实体返回的回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

前端页面生成装置包括处理器和存储器，上述获取模块1、查询模块2、处理模块3、更新模块4等均作为程序模块存储在存储器中，由处理器执行存储在存储器中的上述程序模块来实现相应的功能。

本发明实施例还提供了一种存储介质(计算机可读存储介质)。这里的存储介质存储有一个或者多个程序。其中，存储介质可以包括易失性存储器，例如随机存取存储器；存储器也可以包括非易失性存储器，例如只读存储器、快闪存储器、硬盘或固态硬盘；存储器还可以包括上述种视图模型的存储器的组合。

当存储介质中一个或者多个程序可被一个或者多个处理器执行，以实现上述在前端页面生成设备侧执行的前端页面生成方法。

所述处理器用于执行存储器中存储的前端页面生成程序，以实现以下在前端页面生成设备侧执行的前端页面生成方法的步骤：

获取来自于前端交互页面的数据交互请求；

在后端查询得到数据交互请求对应的目标视图模型；

将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体；

将后端通过目标视图模型实体返回的回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

在本发明的可选实施方式中，在后端查询得到数据交互请求对应的目标视图模型，包括：

确定数据交互请求中的待更新视图模型ID；

在后端查询得到待更新视图模型ID对应的目标视图模型。

在本发明的可选实施方式中，将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体，包括：

确定待更新视图模型ID对应的视图模型类型；

确定数据交互请求所需调用方法的方法名称以及目标模型；目标模型中包括用于筛选得到的需回传至前端交互页面的参数的特征字段；

在后端查询得到待更新视图模型ID对应的目标视图模型；以使后端根据视图模型类型对目标视图模型进行实例化，得到预设目标视图模型实体，将目标模型还原给预设目标视图模型实体，得到目标视图模型实体。

在本发明的可选实施方式中，根据后端通过目标视图模型实体返回的回传模型数据，包括：

获取后端通过目标方法，对目标模型对应的候选数据进行处理后，得到用于回传至前端交互页面的回传模型数据；目标方法为目标视图模型中，与方法名称对应的方法；

将回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

在本发明的可选实施方式中，还包括：

确定预设视图模型实体中的预设视图模型ID、预设方法、预设模型以及描述文件；预设视图模型实体为后端在获取来自于前端交互页面的访问请求之后，根据访问请求调取得到的前端交互页面上一次数据交互请求中的实体；

根据描述文件确定预设视图模型实体在前端交互页面中的目标位置信息；

根据描述文件以及目标位置信息，对预设视图模型ID、预设方法以及预设模型进行渲染得到前端交互页面对应的代码。

在本发明的可选实施方式中，还包括：

获取待录入视图模型，以及待录入视图模型的存储位置信息；

确定待录入视图模型的待录入视图模型ID以及待录入类型；

将待录入视图模型ID、待录入类型以及存储位置信息写入预设的ID列表。

在本发明的可选实施方式中，确定数据交互请求中的待更新视图模型ID，包括：

获取作为数据交互请求的Ajax请求；

根据Ajax请求进行路由寻址，查询得到ID列表；

通过ID列表对Ajax请求进行解析，得到待更新视图模型ID。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行：获取来自于前端交互页面的数据交互请求；在后端查询得到数据交互请求对应的目标视图模型；将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体；将后端通过目标视图模型实体返回的回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

图5为本发明实施例提供的一种电子设备的结构示意图，图5所示的电子设备60包括：至少一个处理器601、以及与处理器601连接的至少一个存储器602、总线603；其中，处理器601、存储器602通过总线603完成相互间的通信；处理器用于调用存储器中的程序指令，以执行上述的前端页面生成方法。本文中的电子设备可以是服务器、PC、PAD、手机等。

本发明还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

获取来自于前端交互页面的数据交互请求；

在后端查询得到数据交互请求对应的目标视图模型；

将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体；

将后端通过目标视图模型实体返回的回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

在本发明的可选实施方式中，在后端查询得到数据交互请求对应的目标视图模型，包括：

确定数据交互请求中的待更新视图模型ID；

在后端查询得到待更新视图模型ID对应的目标视图模型。

在本发明的可选实施方式中，将数据交互请求传输至后端，以使后端根据数据交互请求对目标视图模型进行实例化，得到目标视图模型实体，包括：

确定待更新视图模型ID对应的视图模型类型；

确定数据交互请求所需调用方法的方法名称以及目标模型；目标模型中包括用于筛选得到的需回传至前端交互页面的参数的特征字段；

在后端查询得到待更新视图模型ID对应的目标视图模型；以使后端根据视图模型类型对目标视图模型进行实例化，得到预设目标视图模型实体，将目标模型还原给预设目标视图模型实体，得到目标视图模型实体。

在本发明的可选实施方式中，根据后端通过目标视图模型实体返回的回传模型数据，包括：

获取后端通过目标方法，对目标模型对应的候选数据进行处理后，得到用于回传至前端交互页面的回传模型数据；目标方法为目标视图模型中，与方法名称对应的方法；

将回传模型数据传输至前端，以使前端根据回传模型数据对前端交互页面进行更新。

在本发明的可选实施方式中，还包括：

确定预设视图模型实体中的预设视图模型ID、预设方法、预设模型以及描述文件；预设视图模型实体为后端在获取来自于前端交互页面的访问请求之后，根据访问请求调取得到的前端交互页面上一次数据交互请求中的实体；

根据描述文件确定预设视图模型实体在前端交互页面中的目标位置信息；

根据描述文件以及目标位置信息，对预设视图模型ID、预设方法以及预设模型进行渲染得到前端交互页面对应的代码。

在本发明的可选实施方式中，还包括：

获取待录入视图模型，以及待录入视图模型的存储位置信息；

确定待录入视图模型的待录入视图模型ID以及待录入类型；

将待录入视图模型ID、待录入类型以及存储位置信息写入预设的ID列表。

在本发明的可选实施方式中，确定数据交互请求中的待更新视图模型ID，包括：

获取作为数据交互请求的Ajax请求；

根据Ajax请求进行路由寻址，查询得到ID列表；

通过ID列表对Ajax请求进行解析，得到待更新视图模型ID。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

在一个典型的配置中，设备包括一个或多个处理器(CPU)、存储器和总线。设备还可以包括输入/输出接口、网络接口等。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他视图模型型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

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

本领域技术人员应明白，本发明的实施例可提供为方法、系统或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本发明的实施例而已，并不用于限制本发明。对于本领域技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。

Claims (10)

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

获取来自于前端交互页面的数据交互请求；

在后端查询得到所述数据交互请求对应的目标视图模型；

将所述数据交互请求传输至所述后端，以使所述后端根据所述数据交互请求对所述目标视图模型进行实例化，得到目标视图模型实体；

将所述后端通过所述目标视图模型实体返回的回传模型数据传输至前端，以使所述前端根据所述回传模型数据对所述前端交互页面进行更新。

2.根据权利要求1所述的方法，其特征在于，所述在后端查询得到所述数据交互请求对应的目标视图模型，包括：

确定所述数据交互请求中的待更新视图模型ID；

在所述后端查询得到所述待更新视图模型ID对应的所述目标视图模型。

3.根据权利要求2所述的方法，其特征在于，所述将所述数据交互请求传输至所述后端，以使所述后端根据所述数据交互请求对所述目标视图模型进行实例化，得到目标视图模型实体，包括：

确定所述待更新视图模型ID对应的视图模型类型；

确定所述数据交互请求所需调用方法的方法名称以及目标模型；所述目标模型中包括用于筛选得到的需回传至所述前端交互页面的参数的特征字段；

在所述后端查询得到所述待更新视图模型ID对应的所述目标视图模型；以使所述后端根据所述视图模型类型对所述目标视图模型进行实例化，得到预设目标视图模型实体，将所述目标模型还原给所述预设目标视图模型实体，得到所述目标视图模型实体。

4.根据权利要求3所述的方法，其特征在于，所述根据所述后端通过所述目标视图模型实体返回的回传模型数据，包括：

获取所述后端通过目标方法，对所述目标模型对应的候选数据进行处理后，得到用于回传至所述前端交互页面的回传模型数据；所述目标方法为所述目标视图模型中，与所述方法名称对应的方法；

将所述回传模型数据传输至前端，以使所述前端根据所述回传模型数据对前端交互页面进行更新。

5.根据权利要求1所述的方法，其特征在于，还包括：

确定预设视图模型实体中的预设视图模型ID、预设方法、预设模型以及描述文件；所述预设视图模型实体为所述后端在获取来自于所述前端交互页面的访问请求之后，根据所述访问请求调取得到的所述前端交互页面上一次数据交互请求中的实体；

根据所述描述文件确定预设视图模型实体在所述前端交互页面中的目标位置信息；

根据所述描述文件以及目标位置信息，对所述预设视图模型ID、预设方法以及预设模型进行渲染得到所述前端交互页面对应的代码。

6.根据权利要求1所述的方法，其特征在于，还包括：

获取待录入视图模型，以及所述待录入视图模型的存储位置信息；

确定所述待录入视图模型的待录入视图模型ID以及待录入类型；

将所述待录入视图模型ID、待录入类型以及存储位置信息写入预设的ID列表。

7.根据权利要求2所述的方法，其特征在于，所述确定所述数据交互请求中的待更新视图模型ID，包括：

获取作为所述数据交互请求的Ajax请求；

根据所述Ajax请求进行路由寻址，查询得到所述ID列表；

通过所述ID列表对所述Ajax请求进行解析，得到所述待更新视图模型ID。

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

获取模块，用于获取来自于前端交互页面的数据交互请求；

查询模块，用于在后端查询得到所述数据交互请求对应的目标视图模型；

处理模块，用于将所述数据交互请求传输至所述后端，以使所述后端根据所述数据交互请求对所述目标视图模型进行实例化，得到目标视图模型实体；

更新模块，用于将所述后端通过所述目标视图模型实体返回的回传模型数据传输至前端，以使所述前端根据所述回传模型数据对所述前端交互页面进行更新。

9.一种电子设备，其特征在于，包括：至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行权利要求1～7中任一项所述的方法。

10.一种存储介质，其特征在于，所述存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现权利要求1～7中任一项所述的方法。

Images