前端接口数据模拟方法、装置及系统

技术领域

本发明涉及前端开发技术领域，具体而言，涉及一种前端接口数据模拟方法、装置及系统。

背景技术

在前后端分离的技术背景下，前后端的联系通常仅涉及接口，因此在开发前端部分时，通常会采用模拟数据的方式进行单独开发。目前大部分在使用的模拟数据方案为，在前端工程内直接引入mock.js来实现，它的原理是通过重写XMLHttpRequest对象的方式拦截所有请求并代理至本地，因此在调试时浏览器控制台不会监控到任何请求。这种方式带来两个问题：1、调试不便。由于在浏览器控制台看不到任何请求，因此想知道对应接口返回了何种数据仅能通过console.log的方式或者手动Debug才可以；2兼容问题。由于mock.js的实现原理是重写XMLHttpRequest对象，导致一些底层依赖XMLHttpRequest对象产生兼容性问题。

因此，现有技术缺少一种即便于调试又不会产生兼容性问题的模拟数据方案。

发明内容

本发明为了解决上述背景技术中的技术问题，提出了一种前端接口数据模拟方法、装置及系统。

为了实现上述目的，根据本发明的一个方面，提供了一种前端接口数据模拟方法，该方法包括：

接收前端发起的接口请求；

若所述接口请求中请求的接口与MockServer服务端绑定，则将所述接口请求转发到所述MockServer服务端，以使所述MockServer服务端将与所述接口请求中请求的接口对应的模拟数据返回至所述前端，其中，所述MockServer服务端部署在所述前端本地。

可选的，在所述接收前端发起的接口请求之前，还包括：

构建所述前端并同时启动所述MockServer服务端，其中，所述MockServer服务端在启动时与所述前端的目标接口进行绑定，并从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

可选的，所述MockServer服务端对所述前端的各功能代码文件中的与所述目标接口对应的模拟数据进行监听，并在监听到数据变化时先清空本地缓存的模拟数据，再从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

可选的，所述构建所述前端并同时启动所述MockServer服务端，具体包括：

通过webpack工具构建所述前端并同时利用所述webpack工具的webpack-dev-server功能通过钩子函数启动所述MockServer服务端。

为了实现上述目的，根据本发明的另一方面，提供了一种前端接口数据模拟装置，该装置包括：

接口请求接收模块，用于接收前端发起的接口请求；

接口请求转发模块，用于若所述接口请求中请求的接口与MockServer服务端绑定，则将所述接口请求转发到所述MockServer服务端，以使所述MockServer服务端将与所述接口请求中请求的接口对应的模拟数据返回至所述前端，其中，所述MockServer服务端部署在所述前端本地。

可选的，该前端接口数据模拟装置，还包括：

启动模块，用于构建所述前端并同时启动所述MockServer服务端，其中，所述MockServer服务端在启动时与所述前端的目标接口进行绑定，并从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

可选的，所述MockServer服务端对所述前端的各功能代码文件中的与所述目标接口对应的模拟数据进行监听，并在监听到数据变化时先清空本地缓存的模拟数据，再从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

可选的，所述启动模块，具体用于通过webpack工具构建所述前端并同时利用所述webpack工具的webpack-dev-server功能通过钩子函数启动所述MockServer服务端。

为了实现上述目的，根据本发明的另一方面，提供了一种前端接口数据模拟系统，该系统包括：webpack工具和MockServer服务端，所述MockServer服务端部署在前端本地；

所述webpack工具，用于在前端发起的接口请求中请求的接口与所述MockServer服务端绑定时，将所述接口请求转发到所述MockServer服务端；

所述MockServer服务端，用于将与所述接口请求中请求的接口对应的模拟数据返回至所述前端。

可选的，所述webpack工具，还用于构建所述前端并同时启动所述MockServer服务端；所述MockServer服务端，还用于在启动时与所述前端的目标接口进行绑定，并从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

可选的，所述MockServer服务端，还用于对所述前端的各功能代码文件中的与所述目标接口对应的模拟数据进行监听，并在监听到数据变化时先清空本地缓存的模拟数据，再从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

可选的，所述webpack工具，具体用于在构建所述前端的同时利用webpack-dev-server功能通过钩子函数启动所述MockServer服务端。

为了实现上述目的，根据本发明的另一方面，还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述前端接口数据模拟方法中的步骤。

为了实现上述目的，根据本发明的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序在计算机处理器中执行时实现上述前端接口数据模拟方法中的步骤。

本发明的有益效果为：本发明实施例通过在前端本地部署MockServer服务端，在前端发起的接口请求中请求的接口与MockServer服务端绑定时将所述接口请求转发到所述MockServer服务端，进而MockServer服务端将与所述接口请求中请求的接口对应的模拟数据返回至所述前端。由此开发人员可以非常方便的在前端工程内的MockServer服务端以熟悉的代码方式完成模拟数据的规则编写，不再需要登陆到额外的模拟数据平台进行繁琐的接口登记操作，并且可以直接从MockServer服务端得到接口返回的数据，便于调试。而且在接口有调整时，本发明也可以方便的在本工程内进行代码调整，减轻了开发人员的负担。此外，本发明方法并未对XMLHttpRequest对象进行重写，因此避免了兼容问题。由此可见本发明提供了一种便于调试又不会产生兼容性问题的模拟数据方案，有助于提高前端开发效率。

附图说明

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

图1是本发明实施例前端接口数据模拟方法的流程图；

图2是本发明实施例热更新流程示意图；

图3是本发明实施例前端接口数据模拟系统与前端交互示意图；

图4是本发明实施例模拟数据服务启动流程示意图；

图5是本发明实施例模拟数据热更新流程示意图；

图6是本发明实施例前端接口数据模拟装置的结构框图；

图7是本发明实施例计算机设备示意图。

具体实施方式

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

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。

本发明一个方面提出了一种前端接口数据模拟系统，该前端接口数据模拟系统包括：webpack工具和MockServer服务端，其中，所述MockServer服务端部署在前端本地。

所述webpack工具，用于在前端发起的接口请求中请求的接口与所述MockServer服务端绑定时，将所述接口请求转发到所述MockServer服务端。在本发明实施例中，所述webpack工具为前端常用的一种打包工具。

所述MockServer服务端，用于将与所述接口请求中请求的接口对应的模拟数据返回至所述前端。具体的，MockServer服务端从本地缓存中确定出所述接口请求中请求的接口对应模拟数据，进而将该对应的模拟数据返回至所述前端。

图3是本发明实施例前端接口数据模拟系统与前端交互示意图，如图3所示，在本发明实施例中，所述webpack工具，还用于构建所述前端并同时启动所述MockServer服务端。具体的，所述webpack工具可以在构建所述前端的同时利用webpack-dev-server功能通过钩子函数启动所述MockServer服务端。所述webpack工具可以根据前端的各功能代码文件构建前端，所述前端可以为WEB前端或者其他类型的前端。

所述MockServer服务端，还用于在启动时与所述前端的目标接口进行绑定，并从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。在本发明实施例中，模拟数据使用特定命名，分散在前端的各功能代码文件夹内，以便使各功能的相关代码收敛在一处，方便开发人员进行编辑和移植。

所述webpack工具中存储MockServer服务端与接口的绑定信息，进而根据绑定信息进行接口请求转发，即根据绑定信息确定哪些接口要拦截至MockServer服务端。

在本发明实施例中，所述MockServer服务端，还用于对所述前端的各功能代码文件中的与所述目标接口对应的模拟数据进行监听(模拟数据通常采用特定文件名，例如viewMock.js，以便进行监听)，并在监听到数据变化时先清空本地缓存的模拟数据，再从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

由此可见，本发明实现了一个在前端本地的MockServer，并利用前端常用的打包工具webpack提供的webpack-dev-server功能将该MockServer服务端随前端工程启动时一起启动。MockServer服务端监听对应模拟数据文件，当模拟数据有修改时，自动刷新接口mock信息实现热更新效果。

图4是本发明实施例模拟数据服务启动流程示意图，如图4所示，在前端工程启动时，首先随着前端开发模式指令执行，webpack工具会启动前端工程的开发模式，即构建前端，在启动中webpack会执行webpack-dev-server功能，然后通过钩子函数，webpack-dev-server会启动MockServer服务端。

其次在MockServer服务端中会完成三项工作，分别是绑定对应接口、加载模拟数据文件并注册接口信息、设置对模拟数据文件的监听。在上述内容执行后，MockServer服务端启动完成，此时开发人员可以在浏览器对前端接口进行调试，MockServer服务端也会做出预设的响应，在浏览器控制台也可以看到真实发出的请求信息。由此，开发人员可以方便的在前端工程内编写模拟数据，并在调试时在浏览器控制台方便查看到真实的报文反馈。

在开发人员对前端工程内的模拟数据文件做出修改或新增模拟数据文件时，会触发热更新动作，具体执行流程如图5所示。由于MockServer服务端的工作机制会保存已加载文件的缓存信息，执行文件加载指令会导致命中缓存中止加载过程，导致最新数据不能生效，因此需要先判断是否存在缓存信息，如果存在，则需清除对应的缓存。

本发明的另一个方面提出了一种前端接口数据模拟方法，由于前端接口数据模拟方法解决问题的原理与上述前端接口数据模拟系统类似，因此前端接口数据模拟方法的实施例可以参见上述前端接口数据模拟系统的实施例，重复之处不再赘述。

图1是本发明实施例前端接口数据模拟方法的流程图，实施主体为上述前端接口数据模拟系统中的webpack工具，如图1所示，本实施例的前端接口数据模拟方法包括步骤S101和步骤S102。

步骤S101，接收前端发起的接口请求。

步骤S102，若所述接口请求中请求的接口与MockServer服务端绑定，则将所述接口请求转发到所述MockServer服务端，以使所述MockServer服务端将与所述接口请求中请求的接口对应的模拟数据返回至所述前端，其中，所述MockServer服务端部署在所述前端本地。

在本发明一个实施例中，在上述步骤S101之前，本发明方法还包括以下步骤：

构建所述前端并同时启动所述MockServer服务端，其中，所述MockServer服务端在启动时与所述前端的目标接口进行绑定，并从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

该步骤的实施主体为上述前端接口数据模拟系统中的webpack工具。

在本发明一个实施例中，上述构建所述前端并同时启动所述MockServer服务端，具体包括：通过webpack工具构建所述前端并同时利用所述webpack工具的webpack-dev-server功能通过钩子函数启动所述MockServer服务端。

图2是本发明实施例热更新流程示意图，如图2所示，在本发明一个实施例中，本发明的热更新包括步骤S201和步骤S202。

步骤S201，所述MockServer服务端对所述前端的各功能代码文件中的与所述目标接口对应的模拟数据进行监听。

步骤S202，在监听到数据变化时先清空本地缓存的模拟数据，再从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

由以上实施例可以看出，本发明至少实现了以下有益效果：

1、本发明解决了mock.js方案中由于重写XMLHttpRequest对象带来的第三方库兼容性问题以及开发人员的调试问题。由于本发明中并未对XMLHttpRequest对象进行重写，因此避免了与之相关的第三方库的开发阶段兼容问题。同时由于浏览器发出了真实的请求，因此在浏览器控制台中可以看到所有的请求信息，方便开发人员进行调试，不再需要进行繁琐的console.log和Debug操作，提高了开发效率。

2、本发明解决了独立的模拟数据平台带来的开发成本问题。使用本发明的方案后，开发人员可以非常方便的在本工程内以熟悉的代码方式完成模拟数据的规则编写，不再需要登陆到额外的模拟数据平台进行繁琐的接口登记操作。而且在接口有调整时，也可以方便的在本工程内进行代码调整，减轻了开发人员的负担。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

基于同一发明构思，本发明实施例还提供了一种前端接口数据模拟装置，可以用于实现上述实施例所描述的前端接口数据模拟方法，如下面的实施例所述。由于前端接口数据模拟装置解决问题的原理与前端接口数据模拟方法相似，因此前端接口数据模拟装置的实施例可以参见前端接口数据模拟方法的实施例，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图6是本发明实施例前端接口数据模拟装置的结构框图，如图6所示，本发明实施例前端接口数据模拟装置包括：

接口请求接收模块1，用于接收前端发起的接口请求；

接口请求转发模块2，用于若所述接口请求中请求的接口与MockServer服务端绑定，则将所述接口请求转发到所述MockServer服务端，以使所述MockServer服务端将与所述接口请求中请求的接口对应的模拟数据返回至所述前端，其中，所述MockServer服务端部署在所述前端本地。

在本发明一个实施例中，本发明的前端接口数据模拟装置，还包括：

启动模块，用于构建所述前端并同时启动所述MockServer服务端，其中，所述MockServer服务端在启动时与所述前端的目标接口进行绑定，并从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

在本发明一个实施例中，所述MockServer服务端对所述前端的各功能代码文件中的与所述目标接口对应的模拟数据进行监听，并在监听到数据变化时先清空本地缓存的模拟数据，再从所述前端的各功能代码文件中加载所述目标接口对应的模拟数据到本地进行缓存。

在本发明一个实施例中，所述启动模块，具体用于通过webpack工具构建所述前端并同时利用所述webpack工具的webpack-dev-server功能通过钩子函数启动所述MockServer服务端。

为了实现上述目的，根据本申请的另一方面，还提供了一种计算机设备。如图7所示，该计算机设备包括存储器、处理器、通信接口以及通信总线，在存储器上存储有可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述实施例方法中的步骤。

处理器可以为中央处理器(Central Processing Unit，CPU)。处理器还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及单元，如本发明上述方法实施例中对应的程序单元。处理器通过运行存储在存储器中的非暂态软件程序、指令以及模块，从而执行处理器的各种功能应用以及作品数据处理，即实现上述方法实施例中的方法。

存储器可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储处理器所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

所述一个或者多个单元存储在所述存储器中，当被所述处理器执行时，执行上述实施例中的方法。

上述计算机设备具体细节可以对应参阅上述实施例中对应的相关描述和效果进行理解，此处不再赘述。

为了实现上述目的，根据本申请的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序在计算机处理器中执行时实现上述前端接口数据模拟方法中的步骤。本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(RandomAccessMemory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

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