CN105138448A - 一种在前端测试页面的方法和装置 - Google Patents

Abstract

本发明实施例提供了一种前端测试页面的方法及装置，所述前端与后端交互；所述的方法包括：所述模拟平台解析所述模拟文件获得测试模拟数据；将所述测试模拟数据和页面模板的文件路径发送至模板引擎；所述模板引擎用于依据所述文件路径读取所述页面模板，并依据所述测试模拟数据及页面模板生成页面；接收所述模板引擎发送的页面；当接收到测试请求时，采用所述测试请求测试所述页面。本发明实施例用以分离前端及后端，在前端测试生成最终所需的页面模板，减少副产品，并且该页面模板能够与后端无缝对接，从而使前端及后端的开发可并行进行，提高开发速度。

Description

一种在前端测试页面的方法和装置

技术领域

本发明涉及互联网应用技术领域，特别是涉及一种在前端测试页面的方法和一种在前端测试页面的装置。

背景技术

近些年来，基于企业宣传树立自身形象、丰富产品营销手段、加强与用户的沟通的便捷网页渠道等原因，对于网页开发的需求越来越多。网页开发是制作专业性较强的网页，比如ASP(ActiveServerPage，动态服务器页面)、PHP(PersonalHomePage，个人网页)、JSP(JavaServerPages，Java服务端网页)等动态网页。网页开发不仅仅是网页美工和内容，还涉及到域名注册查询、网页的功能的开发等，为了提高网页开发效率，较大的组织和企业，网页分别进行前端及后端的开发，以提高网页开发效率。

目前，传统的互联网网页开发流程主要有两种：

1、第一种是前端根据UI(UserInterface，用户界面)及UE(UserEquipment，用户设备)制作静态HTML(HypertextMarkupLanguage，超文本标记语言)页面，交付给后端转成页面模板进行联调开发。因此，后端需要能够了解前端的页面结构及代码业务逻辑，必要时需要与前端人员沟通协作完成套页面的工作。

2、第二种是后端开发完成数据接口，前端在本机部署运行项目开发页面模板，同时依赖于后端的数据接口和执行环境，包括数据库、文件系统、运行时环境或者其它项目系统接口等。

通常开发完成后，前端的页面及后端的业务功能实现需要同时测试，上述两种开发流程，前端及后端是都需要互相依赖，如果前端及后端有一方出现问题，那么另一方就可能得相应进行调整。

比如在第一种开发流程中，存在有如下问题：1)、前端开发的静态HTML页面不是最终生产页面，还需要在后端转成页面模板之后才可以使用，因此工作量更大，而且有一些副产出。2)、最终生产的页面上线后的后期维护，包括需求变更，页面改版等，前端修改静态HTML页面后，还需要在后端重复套页面工作，费时费力。尤其对于一些细节的修改，使得整个过程不敏捷。3)、在后端套页面时容易出现问题，并且由于涉及前端及后端中不同开发人员，沟通成本较高。4)、当前端及后端联调成功后，页面才可交给测试人员来进行测试，故开发后期的测试工作压力较大。

因此，目前需要本领域技术人员迫切解决的一个技术问题就是：提出一种在前端测试页面的机制，用以分离前端及后端，在前端测试生成最终所需的页面模板，减少副产品，并且该页面模板能够与后端无缝对接，从而使前端及后端的开发可并行进行，提高开发速度。

发明内容

本发明实施例所要解决的技术问题是提供一种在前端测试页面的方法，用以分离前端及后端，在前端测试生成最终所需的页面模板，减少副产品，并且该页面模板能够与后端无缝对接，从而使前端及后端的开发可并行进行，提高开发速度。

相应的，本发明实施例还提供了一种在前端测试页面的装置，用以保证上述方法的实现及应用。

为了解决上述问题，本发明公开了一种前端测试页面的方法，所述前端与后端交互；在所述前端包括模拟平台及模板引擎，所述模板引擎与所述后端的模板引擎相同；在所述模拟平台中包括模拟文件及页面模板，所述页面模板具有对应文件路径；

所述的方法包括：

所述模拟平台解析所述模拟文件获得测试模拟数据；

将所述测试模拟数据和页面模板的文件路径发送至模板引擎；所述模板引擎用于依据所述文件路径读取所述页面模板，并依据所述测试模拟数据及页面模板生成页面；

接收所述模板引擎发送的页面；

当接收到测试请求时，采用所述测试请求测试所述页面。

优选地，所述模拟平台为采用节点网络开发语言node.js开发的前端开发FED平台，所述FED平台中具有FED工具；所述模拟文件为模拟mock文件，所述模拟平台解析所述模拟文件获取测试模拟数据的步骤包括：

在所述FED平台采用所述FED工具对所述模拟mock文件进行解析；

将所述解析结果作为测试模拟数据。

优选地，所述模板引擎为FreeMarker模板引擎；所述将测试模拟数据和文件路径发送至模板引擎的步骤包括：

创建子进程；

采用所述子进程将所述测试模拟数据和文件路径发送至所述FreeMarker模板引擎。

优选地，所述页面为超文本标记语言HTML静态页面；所述当接收到测试请求时，采用所述测试请求测试所述页面的步骤包括：

所述模拟平台接收到超文本传输协议HTTP测试请求；

依据所述HTTP测试请求将所述HTML静态页面发送至显示器；所述显示器用于将所述HTML静态页面进行展示。

优选地，在所述当接收到测试请求时，采用所述测试请求测试所述页面的步骤之后，还包括：

修改所述模拟mock文件中的测试模拟数据。

本发明实施例还公开了一种前端测试页面的装置，所述前端与后端交互；在所述前端包括模拟平台及模板引擎，所述模板引擎与所述后端的模板引擎相同；在所述模拟平台中包括模拟文件及页面模板，所述页面模板具有对应文件路径；

所述的装置包括：

解析模块，用于所述模拟平台解析所述模拟文件获得测试模拟数据；

发送模块，用于将所述测试模拟数据和页面模板的文件路径发送至模板引擎；所述模板引擎用于依据所述文件路径读取所述页面模板，并依据所述测试模拟数据及页面模板生成页面；

接收模块，用于接收所述模板引擎发送的页面；

测试模块，用于当接收到测试请求时，采用所述测试请求测试所述页面。

优选地，所述模拟平台为采用节点网络开发语言node.js开发的前端开发FED平台，所述FED平台中具有FED工具；所述模拟文件为模拟mock文件，所述解析模块包括：

文件解析子模块，用于在所述FED平台采用所述FED工具对所述模拟mock文件进行解析；

数据获得子模块，用于将所述解析结果作为测试模拟数据。

优选地，所述模板引擎为FreeMarker模板引擎；所述发送模块包括：

进程创建子模块，用于创建子进程；

数据发送子模块，用于采用所述子进程将所述测试模拟数据和文件路径发送至所述FreeMarker模板引擎。

优选地，所述页面为超文本标记语言HTML静态页面；所述测试模块包括：

请求接收子模块，用于所述模拟平台接收到超文本传输协议HTTP测试请求；

页面发送子模块，用于依据所述HTTP测试请求将所述HTML静态页面发送至显示器；所述显示器用于将所述HTML静态页面进行展示。

优选地，所述装置还包括：

修改模块，用于修改所述模拟mock文件中的测试模拟数据。

与现有技术相比，本发明实施例包括以下优点：

本发明实施例中将后端对于页面模板的具有编译功能的模板引擎抽取出来，提供给前端一个通用的、最小化的，可像后端一样对页面模板进行编译和解析页面模板代码的环境，使得在前端生成最终项目所需要的、生产环境中的页面模板，并且还可以进行进一步的开发和调试。在前端生成的页面模板，可以直接集成入最终的项目工程中，与实现后端无缝对接。由于从而使前端及后端的开发可彼此可以各不相干地并行进行，因此提高了页面的开发速度。在后期维护时，如果前端需求变更，前端也可独立开发和调试页面模板，不需要依赖后端。由于在前端可独立开发和调试页面模板，故省去了传统开发流程中在后端套页面的中间开发环节，提高了页面的开发效率。

本发明实施例实现了将项目的前端(页面展现部分)与后端(数据接口和业务逻辑实现)开发相分离，明确各自开发范围，两者在开发时不再互相依赖，接口约定明确的前提下前端及后端可同时分别进行开发。正由于此，本发明实施例中前端及后端可以分别测试，比如对后端可只针对与前端的数据接口测试，对前端只需要准备好测试模拟数据，并将页面模板导入实际运行环境中进行测试，因此页面开发更加敏捷快速，同时可更快速地响应需求变更。

附图说明

图1是一种传统的网页开发流程示意图；

图2是一种理想的网页开发流程示意图；

图3是本发明的一种在前端测试页面的方法实施例的步骤流程图；

图4是本发明的一种在前端测试页面的流程示意图；

图5是本发明的一种在前端测试页面的装置实施例的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

参照图1所示的一种传统的网页开发流程示意图，前端根据用户界面UI及UE制作静态HTML页面，然后交付给后端转成页面模板再进行联调开发，前端严重依赖于后端数据接口，因此传统的网页开发流程的缺点是：

1、页面模块无法复用，一旦遇到需求变更，公共模块的修改需要依次手动修改所有引用页面，操作费时繁琐且容易出错；

2、页面中无法定义模板变量，最终在后端转成的页面模板中通常需要定义一些模板变量诸如基础路径、图片路径等，目前的做法是在转模板时人工替换；

3、开发时访问的页面路径与真实上线后的路径不同，页面中链接标签中设定的地址在转成页面模板时需要再一次修改；

4、后期需求变更时，目前通常做法是直接修改页面模板，此时便需要前端开发者需要在本机跑起整个项目，搭建环境及部署运行项目，而前端通常不需要修改后端代码。

总而言之，前端编写静态HTML页面，无论对于前端还是后端，开发、调试、需求变更和后期维护均不方便、不敏捷、不友好。

参照图2所示的一种理想的网页开发流程示意图，具体过程如下所示：

1、前端开发时直接编写页面模板，最终交付后端时的页面模板不需要做任何改动，与后端接口自然无缝对接；

2、前端开发时不需要运行整个项目，甚至不需要配置后端环境及签出整个项目的代码；

3、前端在开发过程中完全不依赖后端，双方遵循接口约定隔离开发；

4、同样的流程适用需求变更时。

在理想的网页开发流程中，减少了中间环节，开发流程变得简单高效，前端开发者直接输出最终页面模板，直接对项目最终界面效果负责。由此，本发明实施例的核心构思之一在于，分离前端及后端，其中后端负责提供数据，前端负责界面展现。后端不需要关心前端代码如何组织、页面结构怎样及怎样与用户交互，前端及后端彼此可以各不相干地开发。在前端直接编写页面模板，并在前端进行开发调试，不再需要本机部署运行整个项目。该页面模板可以集成到最终项目中，能够与后端无缝对接，故前端及后端的开发可并行进行，不需要互相等待，提高了整体的开发速度。

参照图3，示出了本发明的一种在前端测试页面的方法实施例的步骤流程图，所述前端与后端交互；在所述前端包括模拟平台及模板引擎，所述模板引擎与所述后端的模板引擎相同；在所述模拟平台中包括模拟文件及页面模板，所述页面模板具有对应文件路径；

所述的方法可以包括如下步骤：

步骤301，所述模拟平台解析所述模拟文件获得测试模拟数据；

在本发明的一种优选实施例中，所述前端可以包括前端开发FED工具，所述模拟平台为采用节点网络开发语言node.js开发的前端开发FED平台，所述FED平台中具有FED工具；所述模拟文件为模拟mock文件，所述步骤301可以包括如下子步骤：

子步骤S11，在所述FED平台采用所述FED工具对所述模拟mock文件进行解析；

子步骤S12，将所述解析结果作为测试模拟数据。

在具体实现中，在前端搭建包括有采用node.js语言开发的FED(TheFront-EndDevelopKitchen，前端开发)平台和采用JAVA语言开发的模板引擎的FED，其中，所述模板引擎将后端对于页面模板的编译功能抽取出来，提供给前端可像后端一样编译和解析页面模板代码的环境，因此前端可直接编写最终项目所需要的、生产环境中的页面模板，并且进行开发和调试。所述FED平台是可以采用FED工具模拟后端对前端的页面模板的解析平台，FED平台的主要功能是使前端开发的页面模板可以在无后端的环境中被解析，从而能够处理页面模板转换的最终页面。由于所有的文件，包括模拟mock文件、页面模板、静态文件等都可以在同一个机器上，故修改很方便。当修改完之后，可以利用FED工具来读取本地机器中的文件。

FED平台采用Node.js语言编写而成，是一个模拟后端的Javascript的运行环境(支持的系统包括*nux、Windows等)，可以编写系统级或者服务器端的Javascript代码，交给FED平台来解释执行。与用户的交互及工具的业务实现采用Node.js技术，可以使模拟mock文件定义更加清晰和方便，由于都是采用JavaScript语言对前端的开发人员而言也更加友好，并且在模拟mock文件中也可实现简单的业务逻辑，以更接近真实地模拟后端接口的响应逻辑。另外，采用node.js语言创建FED平台，可以让模拟后端的环境搭建也更加轻量和方便，执行速度更快，保证了开发速度。

FED平台可供前端编写简单的后端接口及相关工具，以调试页面模板。前端可以在此环境下，使用真实的URL(UniformResourceLocator，统一资源定位符)进行访问，并可嫁接于其它服务器调试页面模板，对于页面模板代码使用测试模拟数据调试输出，最终可生成与后端无缝对接的页面模板。

采用FED工具对页面模板进行测试，重新划分项目开发中前端及后端分工，明确各自开发范围，可以提高项目并行开发效率，降低前端及后端开发的耦合度；同时为前端开发提供了可测的工具平台，使之在无后端实现情况下也可模拟后端接口及数据，进行页面模板的测试。

通过使用FED工具，可以降低对前端开发环境的需求(不需要使用Eclipse编程工具，不需要结合前端及后端来运行整个项目)，提高前端开发效率，压缩开发和调试成本；不依赖后端接口，前端开发时更加灵活，更能够迅速地完成需求变更；减少开发环节，提高前端开发者编码转换率，降低开发成本；构建了页面测试的平台基础，有助于前端的自动化测试实现。

在本发明实施例中，前端与后端可以预先沟通确定数据接口(包括请求方式，页面模板中所需要的数据格式等)，再编写数据接口的描述文件(模拟mock文件，定义了数据接口的请求方式，数据格式及开发和测试所用的测试模拟数据)，测试模拟数据是页面中需要动态展示(实际中是从后端获取)的数据，例如：用户名，用户头像，文章内容等等。

具体而言，测试模拟数据是以一种既定的格式写在模拟mock文件中。在FED平台中采用FED工具从模拟mock文件中读取解析出测试模拟数据，据此模拟出了后端运行环境，包括WEB运行容器、后端接口及数据、页面模板解析环境等，使前端可以在一种模拟开发环境内，进行与有后端程序运行相同，但更加方便和快速的开发调试体验。因此可以与测试页面的测试人员一样，并不需要关注后端的业务逻辑实现，可手动修改模拟mock文件中的测试模拟数据，实现对测试模拟数据的精准定义，从而可以更加方便和快速地专注于页面展现的测试中。

步骤302，将所述测试模拟数据和页面模板的文件路径发送至模板引擎；所述模板引擎用于依据所述文件路径读取所述页面模板，并依据所述测试模拟数据及页面模板生成页面；

在本发明的一种优选实施例中，所述模板引擎可以为FreeMarker模板引擎；所述步骤302可以包括如下子步骤：

子步骤S21，创建子进程；

子步骤S22，采用所述子进程将所述测试模拟数据和文件路径发送至所述FreeMarker模板引擎。

在本发明实施例中，在前端的FreeMarker模板与后端的FreeMarker模板是相同的，对于页面模板具有编译功能，提供给前端可像后端一样编译和解析页面模板代码的环境。

FreeMarker模板引擎(包括用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的，它可以生成特定格式的文档，用于WEB开发的FreeMarker模板引擎模板引擎就会生成一个标准的HTML静态页面。

在FED平台及FreeMarker模板引擎之间创建子进程进行通信。在FED平台将测试模拟数据和文件路径通过子进程发送至FreeMarker模板引擎，所述FreeMarker模板引擎可以模拟后端调试页面模板的行为，根据从模拟mock文件中获取的测试模拟数据对页面模板进行编译生成HTML静态页面。

需要说明的是，FED平台与JavaFreeMarker模板引擎实现通信也可以采用其他方法，比如使用FED平台的NPM包node-java，或者通过创建HTTP服务，使用HTTP协议进行本地通信，或者通过编写C++插件Addon，在底层与JAVA实现调用等，本发明实施例对此不作限制。

在实际应用中，FreeMarker模板引擎对于页面模板的编译部分仍由Java实现，其所用到的解析引擎与真实项目中所用的一致，从而可以保证页面模板解析结果与实际在后端的解析结果相一致，从底层上确保由前端独立开发的页面模板可直接接入后端使用，实现前端与后端的无缝对接。

需要说明的是，在本发明实施例中还可以使用Node.js重新实现FreeMarker模板引擎。采用Node.js语言重新实现FreeMarker模板引擎语法的解析，用Node.js语言完全重新实现FreeMarker的功能，本发明实施例对此不作限制。

步骤303，接收所述模板引擎发送的页面；

步骤304，当接收到测试请求时，采用所述测试请求测试所述页面。

在本发明的一种优选实施例中，所述页面为超文本标记语言HTML静态页面；所述步骤304可以包括如下子步骤：

子步骤S31，所述模拟平台接收到超文本传输协议HTTP测试请求；

子步骤S32，依据所述HTTP测试请求将所述HTML静态页面发送至显示器；所述显示器用于将所述HTML静态页面进行展示。

在具体实现中，当FreeMarker模板引擎生成HTML静态页面后，可以将其发送FED平台，并对该HTML静态页面进行测试。

例如，当FED平台接收到HTTP测试请求时，可以将该HTML静态页面发送至显示器，采用所述显示器测试HTML静态页面是否能够正常进行展示。

参照图4所述的本发明的一种在前端测试页面的流程示意图，在前端中包括采用node.js语言开发的FED平台及采用JAVA语言开发的FreeMarker模板引擎，在前端中还包括有FED工具以及模拟mock文件，以及存储于指定目录中的页面模板，模拟mock文件中包括模拟测试数据。

前端根据设计图及策划文档，直接编写页面模板代码，负责内容展现相关的一切，包括页面HTML结构，相关样式文件及前端的交互逻辑实现，后端不再需要修改与页面相关的代码。后端负责业务逻辑的实现及前端页面所需的数据，然后读取页面模板与数据组合编译产生最终的页面，返回给浏览器端显示。

具体地，在FED平台采用FED工具解析模拟mock文件获得模拟测试数据后，将其及页面模板对应的文件路径发送给FreeMarker模板引擎，所述FreeMarker模板引擎开始模拟后端调试页面模板，根据从模拟mock文件中获取的测试模拟数据对页面模板进行编译生成HTML静态页面，当FreeMarker模板引擎生成HTML静态页面后，可以将其发送FED平台进行测试。当FED平台接收到HTTP测试请求时，将该HTML静态页面发送至显示器，采用所述显示器测试HTML静态页面是否能够正常进行展示。

在实际应用中，在前端开发过程不可能不依赖后端的数据。因此前端及后端对接需要会需要约定接口，并按照该约定接口进行开发。新的前端及后端的开发流程使得接口约定更明确，让彼此开发更隔离，前端专注于页面，后端专注于数据，于是更高效。本发明实施例通过解耦和流程优化，可以让项目开发更加灵活，前后端协作更加顺畅，并且降低成本，提高效率。

在本发明的一种优选实施例中，在所述模拟平台解析所述模拟文件获得测试模拟数据的步骤之前，还包括：

修改所述模拟mock文件中的测试模拟数据。

在开发页面模板时，所用到的数据都是可以自行灵活定义的临时测试模拟数据，并且存储测试模拟数据的模拟mock文件与FED平台及Freemaker模板引擎等都存储在同一机器中，因此在开发时可以更方便地修改数据以满足开发时对不同数据情况的调试，而不必再通过后端修改数据源来实现调试。同时开发时输出的页面都是临时页面，仅用于开发调试或测试的。最终开发完成后，只有完成的页面模板可集成到项目中。

模拟mock文件既是本发明实施例中所需要解析的文件，同时也是对前后端数据接口的完整定义文档，是应该长期维护并根据需求的变更进行更新的，对于项目组的新成员更快的理解项目工程的前端及后端接口有很大帮助。

在具体实现中，FED的模拟mock文件编写比较简单，模拟mock文件改动会立即生效，并且模拟mock文件中的测试模拟数据可被重复利用。模拟mock文件将前端的页面与数据分离，更加方便开发和调试，抽离出的数据可以被重复使用，同时模拟mock文件作为前后端接口的完整描述，使前端的开发人员易于读懂项目，即使更换开发人员，也不需要担心整个项目变得混乱。

在具体实现中，本发明实施例还可以为前端提高“可测的工具平台”。所述“可测的工具平台”是可以为测试人员在需要对页面展现不同的数据(格式、类型、范围等)时修改数据提供更方便的方法。比如做数据的极限测试时，在测试文章标题字段100字以上时页面是否显示正常，传统方法是进入管理后台，修改相应的数据源，然后刷新页面查看展现效果，而现在只需要修改模拟mock文件中定义的数据即可；另外，某些情况下数据源修改起来可能会更加麻烦。因此，本发明实施例可以有效减少人力和物力资源的耗费，另外，由于可不依赖后端而单独进行页面的测试工作，而且更加方便和快捷。

具体地，测试人员可以直接通过修改模拟mock文件从而改变用以模拟后端输出的测试模拟数据，并最终使前端页面展示不同的数据，以供测试。这里“可测的工具平台”是指整个FED提供的功能，对于测试来说同样具有提高测试效率的意义。

应用本发明实施例中，在前端开发页面模板之前，前端的开发人员与后端的开发人员先可以预先协商确定数据接口，根据该数据接口决定后端返回给前端页面的数据格式，并将约定好的数据接口写入到模拟mock文件中。在前端开发页面模板之时，可以从模拟mock文件中获取模拟后端的模拟测试数据，而不需要与后端一起才能进行联调开发。由于是采用预先协商确定数据接口来模拟从后端获取数据的过程，故在前端的该页面模板是最终项目所需要的、生产环境中的页面模板。

前端页面的开发与后端的开发是并行的，因此开发前端页面时，也在同时进行后端的开发，在开发前端页面时，由于采用了模拟mock文件作为支持的后端数据，因而可以在前端生成页面，并且在前端对于该页面进行测试，给前端页面模板的开发人员的测试工作带来很大的便利，从而前端页面的开发和测试效率提高。

在本发明实施例中，FED工具还提供了一些更加实用的功能以更方便前端开发。比如自动热重启应用模拟mock文件，自动刷新浏览器，自动编译less和coffee-script文件等，另外还设计了插件扩展机制，并可集成进前端开发自动构建工具Grunt中。

为了使本领域技术人员更好地理解本发明实施例，以下采用具体的示例进行说明。在本示例使用Java及FreeMarker模板引擎的项目中，随时可以引入FED工具。

本地准备好采用Node.js语言搭建模拟后端环境，并使用NPM命令安装FED：

npminstall–gfed

定义配置文件，该配置文件的位置可以放在任意目录下，只要启动FED时把它的路径以参数形式传入。

具体地：配置文件定义如下：

在配置文件中分别指定页面模板(view)的位置，模拟mock文件(mock)及静态文件目录(public)等，其中，在静态文件目录(public)中包括项目中的一些静态文件，比如HTML文件，图片，样式文件，JS文件等等。

启动命令：

fedserver-w-p8910./configs/index.json

启动FED，通过浏览http://localhost:8910来访问页面了。其中，-w参数是指监视文件变化，-p8910是指定端口8910，configs/index.json则表示配置文件位置。

上述命令完成后，还可以在模拟mock文件中添加新的模拟测试数据，例如：

采用上述代码，请求http://localhost:8910/index地址时，返回index.ftl模板文件的编译结果，编译时所用的数据有Title项，替换变量为“hello！”字符串。这时便可以访问地址：http://localhost:8910/index看到index.ftl模板的解析结果。

应用本发明实施例，前端及后端事先约定下接口，然后彼此各不相干地开发。其中，在前端的开发过程中，摒弃了静态HTML页面这种“副产物”，让前端开发的代码直接成为最终“产品代码”。简化了前端开发环境，使前端开发调试更加迅速、高效、可靠，不依赖后端代码及数据，实现真正的并行开发。模拟mock文件作为统一的后端接口描述，使前端更容易易手项目，降低人员变动成本。当页面进行测试，可以通过模拟mock文件的接口测试前端页面，提高了测试效率。

参照图5，示出了本发明一种前端测试页面的装置实施例的结构框图，所述前端与后端交互；在所述前端可以包括模拟平台及模板引擎，所述模板引擎可以与所述后端的模板引擎相同；在所述模拟平台中可以包括模拟文件及页面模板，所述页面模板可以具有对应文件路径；

所述的装置可以包括如下模块：

解析模块501，用于所述模拟平台解析所述模拟文件获得测试模拟数据；

在本发明的一种优选实施例中，所述装置还可以包括如下模块：

修改模块，用于修改所述模拟mock文件中的测试模拟数据。

在本发明的一种优选实施例中，所述模拟平台可以为采用节点网络开发语言node.js开发的前端开发FED平台，所述FED平台中具有FED工具；所述模拟文件可以为模拟mock文件，所述解析模块501可以包括如下子模块：

文件解析子模块，用于在所述FED平台采用所述FED工具对所述模拟mock文件进行解析；

数据获得子模块，用于将所述解析结果作为测试模拟数据。

发送模块502，用于将所述测试模拟数据和页面模板的文件路径发送至模板引擎；所述模板引擎用于依据所述文件路径读取所述页面模板，并依据所述测试模拟数据及页面模板生成页面；

在本发明的一种优选实施例中，所述模板引擎可以为FreeMarker模板引擎；所述发送模块502可以包括如下子模块：

进程创建子模块，用于创建子进程；

数据发送子模块，用于采用所述子进程将所述测试模拟数据和文件路径发送至所述FreeMarker模板引擎。

接收模块503，用于接收所述模板引擎发送的页面；

测试模块504，用于当接收到测试请求时，采用所述测试请求测试所述页面。

在本发明的一种优选实施例中，所述页面为超文本标记语言HTML静态页面；所述测试模块504可以包括如下子模块：

请求接收子模块，用于所述模拟平台接收到超文本传输协议HTTP测试请求；

页面发送子模块，用于依据所述HTTP测试请求将所述HTML静态页面发送至显示器；所述显示器用于将所述HTML静态页面进行展示。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

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

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

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种在前端测试页面的方法和一种在前端测试页面的装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种前端测试页面的方法，其特征在于，所述前端与后端交互；在所述前端包括模拟平台及模板引擎，所述模板引擎与所述后端的模板引擎相同；在所述模拟平台中包括模拟文件及页面模板，所述页面模板具有对应文件路径；

所述的方法包括：

所述模拟平台解析所述模拟文件获得测试模拟数据；

将所述测试模拟数据和页面模板的文件路径发送至模板引擎；所述模板引擎用于依据所述文件路径读取所述页面模板，并依据所述测试模拟数据及页面模板生成页面；

接收所述模板引擎发送的页面；

当接收到测试请求时，采用所述测试请求测试所述页面。

2.根据权利要求1所述的方法，其特征在于，所述模拟平台为采用节点网络开发语言node.js开发的前端开发FED平台，所述FED平台中具有FED工具；所述模拟文件为模拟mock文件，所述模拟平台解析所述模拟文件获取测试模拟数据的步骤包括：

在所述FED平台采用所述FED工具对所述模拟mock文件进行解析；

将所述解析结果作为测试模拟数据。

3.根据权利要求1或2所述的方法，其特征在于，所述模板引擎为FreeMarker模板引擎；所述将测试模拟数据和文件路径发送至模板引擎的步骤包括：

创建子进程；

采用所述子进程将所述测试模拟数据和文件路径发送至所述FreeMarker模板引擎。

4.根据权利要求3所述的方法，其特征在于，所述页面为超文本标记语言HTML静态页面；所述当接收到测试请求时，采用所述测试请求测试所述页面的步骤包括：

所述模拟平台接收到超文本传输协议HTTP测试请求；

依据所述HTTP测试请求将所述HTML静态页面发送至显示器；所述显示器用于将所述HTML静态页面进行展示。

5.根据权利要求1或4所述的方法，其特征在于，在所述当接收到测试请求时，采用所述测试请求测试所述页面的步骤之后，还包括：

修改所述模拟mock文件中的测试模拟数据。

6.一种前端测试页面的装置，其特征在于，所述前端与后端交互；在所述前端包括模拟平台及模板引擎，所述模板引擎与所述后端的模板引擎相同；在所述模拟平台中包括模拟文件及页面模板，所述页面模板具有对应文件路径；

所述的装置包括：

解析模块，用于所述模拟平台解析所述模拟文件获得测试模拟数据；

发送模块，用于将所述测试模拟数据和页面模板的文件路径发送至模板引擎；所述模板引擎用于依据所述文件路径读取所述页面模板，并依据所述测试模拟数据及页面模板生成页面；

接收模块，用于接收所述模板引擎发送的页面；

测试模块，用于当接收到测试请求时，采用所述测试请求测试所述页面。

7.根据权利要求6所述的装置，其特征在于，所述模拟平台为采用节点网络开发语言node.js开发的前端开发FED平台，所述FED平台中具有FED工具；所述模拟文件为模拟mock文件，所述解析模块包括：

文件解析子模块，用于在所述FED平台采用所述FED工具对所述模拟mock文件进行解析；

数据获得子模块，用于将所述解析结果作为测试模拟数据。

8.根据权利要求6或7所述的装置，其特征在于，所述模板引擎为FreeMarker模板引擎；所述发送模块包括：

进程创建子模块，用于创建子进程；

数据发送子模块，用于采用所述子进程将所述测试模拟数据和文件路径发送至所述FreeMarker模板引擎。

9.根据权利要求8所述的装置，其特征在于，所述页面为超文本标记语言HTML静态页面；所述测试模块包括：

请求接收子模块，用于所述模拟平台接收到超文本传输协议HTTP测试请求；

页面发送子模块，用于依据所述HTTP测试请求将所述HTML静态页面发送至显示器；所述显示器用于将所述HTML静态页面进行展示。

10.根据权利要求6或9所述的装置，其特征在于，还包括：

修改模块，用于修改所述模拟mock文件中的测试模拟数据。