CN113946518A - 前端开发页面的调试系统、方法、电子设备及存储介质 - Google Patents

Abstract

本公开提供了一种前端开发页面的调试系统、方法、电子设备及存储介质，涉及计算机技术领域，尤其涉及前端开发技术领域，以及前端小程序页面开发技术领域。具体实现方案为：调试插件模块监听前端开发页面的接口调用请求，并在确定不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器；其中，接口调用请求中包含待调用接口的标识信息；模拟服务器接收调试插件模块发送的接口调用请求，并从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面。实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

Description

前端开发页面的调试系统、方法、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，进一步涉及前端开发技术领域，以及前端小程序页面开发技术领域，尤其涉及一种前端开发页面的调试系统、方法、电子设备及存储介质。

背景技术

应用程序等的开发通常分为前端页面和后端服务，前端页面的开发、调试通常强依赖于后端服务。即，通常作为前置任务的后端服务(比如，服务端接口功能和数据等)就绪后，作为后置任务的前端页面才能够启动开发。

发明内容

本公开提供了一种前端开发页面的调试系统、方法、电子设备及存储介质。

根据本公开的一方面，提供了一种前端开发页面的调试系统，所述调试系统包括：模拟服务器、调试插件模块，

所述调试插件模块，用于监听前端开发页面的接口调用请求，并在确定不对所述接口调用请求进行拦截的情况下，将所述接口调用请求发送给所述模拟服务器；其中，所述接口调用请求中包含待调用接口的标识信息；

所述模拟服务器，用于接收所述调试插件模块发送的所述接口调用请求，并从本地模拟数据中确定所述待调用接口的标识信息对应的目标响应数据，将所述目标响应数据返回给所述前端开发页面。

根据本公开的另一方面，提供了一种前端开发页面的调试系统，所述调试系统包括：模拟服务器，所述模拟服务器包括：模拟数据模块，路由模块，文件服务模块，

所述模拟数据模块，用于存储自定义响应数据；

所述路由模块，用于存储接口标识与响应数据的标识信息之间的对应关系；所述文件服务模块，用于对前端开发页面的接口调用请求进行监听，并在监听到所述接口调用请求时，基于待调用接口的标识信息，在所述路由模块中查询所述待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据所述目标响应数据的标识信息，从所述模拟数据模块中获取所述目标响应数据，并将所述目标响应数据返回给所述前端开发页面；其中，所述接口调用请求中包含待调用接口的标识信息。

根据本公开的另一方面，提供了一种前端开发页面的调试方法，应用于前端开发页面的调试系统，所述调试系统包括：模拟服务器、调试插件模块；所述方法包括：

所述调试插件模块监听前端开发页面的接口调用请求，并在确定不对所述接口调用请求进行拦截的情况下，将所述接口调用请求发送给所述模拟服务器；其中，所述接口调用请求中包含待调用接口的标识信息；

所述模拟服务器接收所述调试插件模块发送的所述接口调用请求，并从本地模拟数据中确定所述待调用接口的标识信息对应的目标响应数据，将所述目标响应数据返回给所述前端开发页面。

根据本公开的另一方面，提供了一种前端开发页面的调试方法，应用于前端开发页面的调试系统，所述调试系统包括：模拟服务器，所述模拟服务器包括：模拟数据模块，路由模块，文件服务模块；所述方法包括：

所述模拟数据模块存储自定义响应数据；

所述路由模块存储接口标识与响应数据的标识信息之间的对应关系；

所述文件服务模块对前端开发页面的接口调用请求进行监听，并在监听到所述接口调用请求时，基于待调用接口的标识信息，在所述路由模块中查询所述待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据所述目标响应数据的标识信息，从所述模拟数据模块中获取所述目标响应数据，并将所述目标响应数据返回给所述前端开发页面；其中，所述接口调用请求中包含待调用接口的标识信息。

根据本公开的另一方面，提供了一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本公开中任一项所述的前端开发页面的调试方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行本公开中任一项所述的前端开发页面的调试方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现本公开中任一项所述的前端开发页面的调试方法。

在本公开实施例中，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1是根据本公开前端开发页面的调试系统的一种示意图；

图2是根据本公开配置界面的一种示意图；

图3是根据本公开配置界面的另一种示意图；

图4是根据本公开前端开发页面的调试实施方式示意图；

图5是根据本公开前端开发页面的调试系统的另一种示意图；

图6是根据本公开前端开发页面的调试方法的一种示意图；

图7是根据本公开前端开发页面的调试方法的另一种示意图；

图8是用来实现本公开实施例的前端开发页面的调试方法的电子设备的框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

相关技术中，为了实现在后端服务未完成开发的情况下进行前端页面的开发，或者实现前端页面与后端服务并行开发的需求，所采用的一种实现方案中，预先在本地创建数据文件，进而在前端页面开发时，通过import的方式直接将所创建的本地数据文件导入，该导入的数据文件作为后端服务返回的模拟接口数据，进一步实现前端页面的开发。使用import的方式导入数据文件需要修改当前项目代码(即在当前项目代码中添加模拟数据引入逻辑代码)，以适配前端页面开发的接口数据请求方式，使得数据导入时存在代码的倾入性，而在后端服务开发完成，能够接入已完成的后端服务代码时，需要将这些倾入的为导入模拟数据而添加的代码进行删除。且，对于大型前端开发项目而言，通常涉及的后端服务较多，例如接口等，因此涉及大量的分页数据，使得手动创建数据文件工作量较大。

为了解决上述问题，本公开实施例提供的前端开发页面的调试系统，利用调试插件模块监听前端开发页面的接口调用请求，并在确定不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器，可以在不修改代码的基础上，实现接口调用请求的接收、拦截和转发，进而，模拟服务器在接收到调试插件模块发送的接口调用请求时，从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

本公开的一实施例中提供了一种前端开发页面的调试系统，参见图1，前端开发页面的调试系统100包括：调试插件模块110、前端开发页面120以及模拟服务器130。

其中，调试插件模块110，前端开发页面120可以是与模拟服务器130工作在同一或不同物理机设备上的功能模块或软件模块，物理机设备可以属于同一或不同的集群系统中。其中，调试插件模块110，前端开发页面120以及模拟服务器130两两之间能够进行交互。

调试插件模块110，用于监听前端开发页面的接口调用请求，并在确定不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器；其中，接口调用请求中包含待调用接口的标识信息。

调试插件模块110可以是在Chrome插件的基础上进行开发拓展的插件，能够实现监听前端开发页面的接口调用请求，并在确定不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器的功能。

在一种可能的实施方式中，前端开发页面120可以为前端小程序开发页面。示例性的，该前端小程序开发页面可以是前端设备中任一小程序待进行开发的前端页面。

在前端开发页面120为前端小程序开发页面时，可以利用调试插件模块监听前端小程序开发页面的接口调用请求，进一步实现后端服务未完成开发的情况下进行前端小程序开发页面的开发，或者实现前端小程序开发页面与后端服务并行开发的需求。

在一种可能的实施方式中，调试插件模块110可以向前端开发页面120中注入目标脚本文件，以使目标脚本文件创建针对前端开发页面120的目标代理对象，进而，获取目标代理对象监听到的前端开发页面120的接口调用请求。

示例性的，目标脚本文件可以是JavaScript脚本文件(简称JS脚本文件)，该脚本文件能够创建目标代理对象。该目标代理对象可以是XMLHttpRequest对象，简称XHR对象，XHR对象可以用于与服务器进行交互，通过XHR可以在不刷新页面的情况下请求特定统一资源定位符(Uniform Resource Locator，URL)，进而获取该URL对应的数据。

本公开实施例中，调试插件模块110向前端开发页面120中注入JS脚本文件，该脚本文件可以理解为一个安装程序(例如URL链接等)，其可以运行在前端设备上，以创建针对前端开发页面120的目标代理对象XHR，XHR能够监听并获取前端开发页面120的接口调用请求，进而调试插件模块110获取XHR监听到的前端开发页面120的接口调用请求。具体的，可以是调试插件模块110接收XHR所发送的、监听并获取到的前端开发页面120的接口调用请求。

通过调试插件模块110向前端开发页面120中注入目标脚本文件，以在前端设备中创建目标代理对象，进而利用目标代理对象监听并获取前端开发页面120的接口调用请求，实现对前端开发页面120的接口调用请求的实时监听。

示例性的，上述接口调用请求中所包含的待调用接口的标识信息，可以是待调用接口的URL标识，或者待调用接口的域名/地址以及端口号等。接口调用请求可以是针对后端服务器的接口调用请求，用于获取后端服务器的接口响应数据。

调试插件模块110在监听到前端开发页面120的接口调用请求后，可以进一步确定是否拦截该接口调用请求。具体的，确定是否拦截该接口调用请求可以是：判断该接口调用请求中所包含的待调用接口的标识信息是否存在于调试插件模块110中。如果存在，表明调试插件模块110中存储了待调用接口的标识信息对应的响应数据，即调试插件模块110能够返回对应的响应数据至前端开发页面120，故而无需再将接口调用请求发送给模拟服务器130。否则，表明调试插件模块110中没有存储该接口调用请求对应的响应数据，此时，将该接口调用请求发送给模拟服务器130。

模拟服务器130，用于接收调试插件模块110发送的接口调用请求，并从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面120。

模拟服务器130中可以存储本地模拟数据，该本地模拟数据包含不同接口标识对应的响应数据。进而，模拟服务器130在接收到调试插件模块110发送的接口调用请求后，可以从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面120。

本公开实施例中，利用调试插件模块监听前端开发页面的接口调用请求，并在确定不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器，可以在不修改代码的基础上，实现接口调用请求的接收、拦截和转发，进而，模拟服务器在接收到调试插件模块发送的接口调用请求时，从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

在一种可能的实施方式中，调试插件模块110，还可以用于：

获取用户在第一接口输入框中输入的目标接口信息，确定目标接口信息对应的接口服务器是否完成开发，在目标接口信息对应的接口服务器完成开发，且响应数据的下载启用开关打开的情况下，下载并存储目标接口信息对应的接口服务器的响应数据；

获取用户在第二接口输入框中输入的自定义接口信息，以及在第二接口输入框对应的响应数据输入框中输入的响应数据，并将自定义接口信息对应的接口标识以及响应数据存储至调试插件模块中。

本公开实施例中，调试插件模块110可以设置配置界面，该配置界面可以用于配置第一接口输入框，端口输入框，以及针对第一接口输入框设置的响应数据的下载启用开关按钮(图2中下载JSON文件的选择框)，增加和删除按钮等，如图2所示。用户可以通过第一接口输入框输入目标接口信息，通过端口输入框输入目标端口信息，以及选择是否打开响应数据的下载启用开关按钮。其中，目标接口信息可以是接口服务器的域名或地址等信息，已完成开发的接口服务器对应有响应数据。

调试插件模块110中还可以存储已完成开发的接口服务器的标识信息。进而，调试插件模块110可以通过上述配置界面，获取用户在第一接口输入框中输入的目标接口信息，进一步，基于所存储的已完成开发的接口服务器的标识信息，确定该目标接口信息对应的接口服务器是否完成开发，并在目标接口信息对应的接口服务器完成开发，且响应数据的下载启用开关打开的情况下，下载并存储该目标接口信息对应的接口服务器的响应数据。示例性的，下载并存储的目标接口信息对应的接口服务器的响应数据所对应的数据文件格式可以是：JSON数据文件等。

本公开实施例中，调试插件模块110设置的配置界面中，还可以配置第二接口输入框，以及第二接口输入框对应的响应数据输入框，以及针对该第二接口输入框和对应的响应数据输入框中内容的启动开关按钮，删除和增加按钮等，如图3所示。用户可以通过第二接口输入框输入自定义接口信息，通过第二接口输入框对应的响应数据输入框输入自定义接口信息对应的响应数据，以及选择是否启用该自定义接口信息及其对应的响应数据。

进而，调试插件模块110可以通过上述配置界面，获取用户在第二接口输入框中输入的自定义接口信息，以及在第二接口输入框对应的响应数据输入框中输入的响应数据。其中，自定义接口信息可以包含已完成或未完成开发的接口服务器的接口信息，如果自定义接口信息对应的是已完成开发的接口服务器的接口信息，那么所获取的在第二接口输入框对应的响应数据输入框中输入的响应数据为：对已完成开发的接口服务器的响应数据的修改或重新设置；如果自定义接口信息对应的是未完成开发的接口服务器的接口信息，那么所获取的在第二接口输入框对应的响应数据输入框中输入的响应数据为：对未完成开发的接口服务器的响应数据的设置。进一步，将所获取的自定义接口信息对应的接口标识以及响应数据存储至调试插件模块110中，并在选择启用该自定义接口信息及其对应的响应数据的情况下，能够在调试插件模块110监听到接口调用情况时，优先从所存储的自定义接口信息及其对应的响应数据中，获取待调用接口的标识信息对应的目标响应数据，返回给前端开发页面120。

图2和图3中的增加和删除按钮，分别可以实现对已完成开发的接口服务器的响应数据的单个或批量下载和存储，以及，对未完成开发的接口服务器的响应数据的单个或批量设置和存储。

本公开实施例中，可以通过上述配置界面，实现对已完成开发的接口服务器的响应数据的单个或批量下载和存储，以及，实现对已完成开发的接口服务器的响应数据的修改和存储，对未完成开发的接口服务器的响应数据的单个或批量设置和存储，以使得在监听到前端开发页面120的接口调用请求后，能够基于所存储的各响应数据，向前端开发页面120返回接口调用请求对应的目标响应数据。

在一种可能的实施方式中，上述调试插件模块110，还可以用于：

在启用请求拦截时，基于待调用接口的标识信息，以及调试插件模块中存储的自定义接口信息对应的接口标识，确定是否对接口调用请求进行拦截，如果是，则从调试插件模块中确定待调用接口的标识信息对应的目标响应数据，并将目标响应数据返回给前端开发页面。

本公开实施例中，将用户配置的自定义接口信息对应的接口标识以及响应数据存储至调试插件模块110中，还可以在调试插件模块110中配置请求拦截启动开关。进而，在启用请求拦截的情况下，接收到接口调用请求，可以判断接口调用请求中待调用接口的标识信息，与调试插件模块110中存储的自定义接口信息对应的接口标识是否相同，如果相同，则确定对接口调用请求进行拦截，进一步，从调试插件模块110中确定待调用接口的标识信息对应的目标响应数据，并将目标响应数据返回给前端开发页面120，进而无需进一步将该接口调用请求发送至模拟服务器获取目标响应数据。

本公开实施例中，在启用请求拦截时，优先从调试插件模块110中确定待调用接口的标识信息对应的目标响应数据，将所确定的目标响应数据返回给前端开发页面120，以快速得到接口调用请求对应的目标响应数据，进一步提高前端开发的效率。

在一种可能的实施方式中，上述模拟服务器130可以包括：模拟数据模块，路由模块，文件服务模块，上述模拟服务器130接收调试插件模块110发送的接口调用请求，并从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面120的实现过程可以包括：

模拟数据模块，可以用于对调试插件模块下载的目标接口信息对应的接口服务器的响应数据进行存储，以及存储自定义响应数据。其中，该自定义响应数据可以包含用户自定义设置的接口标识及其对应的响应数据，还可以包含模拟服务器130从其他设备上获取的接口标识及其对应的响应数据，本公开实施例对此不作限定。

路由模块，可以用于存储接口标识与响应数据的标识信息之间的对应关系。示例性的，路由模块，可以存储调试插件模块110下载并存储至模拟数据模块中的目标接口信息对应的接口服务器的响应数据，与目标接口标识之间的对应关系，以及模拟数据模中存储的自定义响应数据，与该自定义响应数据对应的接口标识之间的对应关系等。

文件服务模块，用于对接口调用请求进行监听，并在监听到接口调用请求时，基于待调用接口的标识信息，在路由模块中查询待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据目标响应数据的标识信息，从模拟数据模块中获取目标响应数据，并将目标响应数据返回给前端开发页面。

本公开实施例中，模拟服务器在调试插件模块没有匹配到接口调用请求对应的响应数据的情况下，利用文件服务模块监听到接口调用请求后，查询路由模块中存储的接口标识与响应数据的标识信息之间的对应关系，得到待调用接口的标识信息所对应的目标响应数据的标识信息，进而，从模拟数据模块中获取目标响应数据，并将目标响应数据返回给前端开发页面，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

在一种可能的实施方式中，上述模拟服务器130还可以包括文件系统模块。

文件系统模块，用于对模拟数据模块中存储的响应数据是否发生变更进行监听，并在模拟数据模块中存储的响应数据发生变更时，向路由模块发送数据变更信息；

路由模块，还用于在接收到数据变更信息时，更新接口标识与响应数据的标识信息之间的对应关系。

实际应用中，模拟服务器启动后，可能会有文件的增删等，故而，利用文件系统模块对模拟数据模块中存储的响应数据是否发生变更进行监听，以在模拟数据模块中存储的响应数据发生变更时，更新路由模块中存储的接口标识与响应数据的标识信息之间的对应关系，使得路由模块中存储的接口标识与响应数据的标识信息之间的对应关系，能够随模拟数据模块中存储的响应数据实时更新，无需重复启动模拟服务器，以便于更准确的获取接口调用请求对应的目标响应数据。

示例性的，如图4所示，调试插件模块可以进行插件数据配置，该插件数据配置可以包括：上述获取的用户在第二接口输入框中输入的自定义接口信息，以及在第二接口输入框对应的响应数据输入框中输入的响应数据；还可以包括：上述获取的用户在第一接口输入框中输入的目标接口信息，以及在目标接口信息对应的接口服务器完成开发，且响应数据的下载启用开关打开的情况下，所下载的目标接口信息对应的接口服务器的响应数据(即图4中下载JSON文件)。其中，所获取的自定义接口信息及其对应的响应数据存储在调试插件模块中，所下载的目标接口信息对应的接口服务器的响应数据存储在模拟服务器的模拟数据模块(图4中Mock数据以及本地/Downloads目录)中。

调试插件模块可以是Chrome插件中的拓展bdmock插件。调试插件模块向前端开发页面中注入JS脚本文件，以使JS脚本文件创建针对前端开发页面的代理XHR对象，获取XHR对象监听到的前端开发页面的接口调用请求。进而，在启用请求拦截时，基于待调用接口的标识信息，以及调试插件模块中存储的自定义接口信息对应的接口标识，确定是否对接口调用请求进行拦截，在拦截的情况下，从调试插件模块中确定待调用接口的标识信息对应的目标响应数据，并将目标响应数据返回给前端开发页面。

调试插件模块在不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器。

模拟服务器的模拟数据模块中存储有自定义响应数据，以及调试插件模块所下载的目标接口信息对应的接口服务器的响应数据。模拟服务器的路由模块中存储有接口标识与响应数据的标识信息之间的对应关系。模拟服务器的文件服务模块在监听到接口调用请求时，基于接口调用请求中包含的待调用接口的标识信息，在路由模块中查询待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据目标响应数据的标识信息，从模拟数据模块中获取目标响应数据，并将目标响应数据返回给前端开发页面。

模拟服务器的文件系统模块，对模拟数据模块中存储的响应数据是否发生变更进行监听，并在模拟数据模块中存储的响应数据发生变更时，向路由模块发送数据变更信息，进而，路由模块更新接口标识与响应数据的标识信息之间的对应关系。

在一种可能的实施方式中，如图5所示前端开发页面的调试系统的另一种示意图，前端开发页面的调试系统200可以包括：前端开发页面210以及模拟服务器220，其中，模拟服务器220可以包括：模拟数据模块221，路由模块222，以及文件服务模块223。

模拟数据模块221，用于存储自定义响应数据。其中，该自定义响应数据可以包含用户自定义设置的接口标识及其对应的响应数据，还可以包含模拟服务器220从其他设备上获取的接口标识及其对应的响应数据，本公开实施例对此不作限定。

路由模块222，用于存储接口标识与响应数据的标识信息之间的对应关系。其中，模拟数据模块221中存储自定义响应数据，相应的，路由模块222中存储的是接口标识与自定义响应数据的标识信息之间的对应关系。

文件服务模块223，用于对前端开发页面210的接口调用请求进行监听，并在监听到接口调用请求时，基于待调用接口的标识信息，在路由模块222中查询待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据目标响应数据的标识信息，从模拟数据模块221中获取目标响应数据，并将目标响应数据返回给前端开发页面210；其中，接口调用请求中包含待调用接口的标识信息。

实际应用中，文件服务模块223可以对前端开发页面210中携带的代理XHR对象进行监听，以获取前端开发页面210的接口调用请求，进而获取该接口调用请求对应的目标响应数据。一种实施方式中，前端开发页面可以为前端小程序开发页面。

本公开实施例中，在模拟服务器的模拟数据模块中存储自定义响应数据，进而在文件服务模块监听到接口调用请求时，可以根据接口调用请求中包含的待调用接口的标识信息，在路由模块中查询待调用接口的标识信息所对应的目标响应数据的标识信息，进而从模拟数据模块中获取目标响应数据，并将目标响应数据返回给前端开发页面，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

在一种可能的实施方式中，上述模拟服务器220还可以包括文件系统模块(图中未示出)。文件系统模块，可以用于对模拟数据模块221中存储的自定义响应数据是否发生变更进行监听，并在模拟数据模块221中存储的自定义响应数据发生变更时，向路由模块222发送数据变更信息。

路由模块222，还用于在接收到数据变更信息时，更新接口标识与响应数据的标识信息之间的对应关系。

实际应用中，模拟服务器启动后，可能会有文件的增删等，故而，利用文件系统模块对模拟数据模块中存储的自定义响应数据是否发生变更进行监听，以在模拟数据模块中存储的自定义响应数据发生变更时，更新路由模块中存储的接口标识与响应数据的标识信息之间的对应关系，使得路由模块中存储的接口标识与响应数据的标识信息之间的对应关系，能够随模拟数据模块中存储的自定义响应数据实时更新，无需重复启动模拟服务器，以便于更准确的获取接口调用请求对应的目标响应数据。

在一种可能的实施方式中，前端开发页面的调试系统可以包括调试插件模块。该调试插件模块可以向前端开发页面中注入目标脚本文件，以使目标脚本文件创建针对前端开发页面的目标代理对象；并获取目标代理对象监听到的前端开发页面的接口调用请求，该接口调用请求中包含待调用接口的标识信息。

调试插件模块，还可以获取用户在第二接口输入框中输入的自定义接口信息，以及在第二接口输入框对应的响应数据输入框中输入的响应数据，并对所获取的自定义接口信息对应的接口标识以及响应数据进行存储。具体的，调试插件模块获取并存储自定义接口信息对应的接口标识以及响应数据的实施方式可参见上文描述，本公开实施例在此不再赘述。

进一步的，调试插件模块可以在启用请求拦截时，基于待调用接口的标识信息，以及调试插件模块中存储的自定义接口信息对应的接口标识，确定是否对接口调用请求进行拦截，如果是，则从调试插件模块中确定待调用接口的标识信息对应的目标响应数据，并将目标响应数据返回给前端开发页面。

本公开实施例中，调试插件模块能够实现对已完成开发的接口服务器的响应数据的修改和存储，对未完成开发的接口服务器的响应数据的单个或批量设置和存储，以在监听到前端开发页面的接口调用请求后，从调试插件模块中确定待调用接口的标识信息对应的目标响应数据，将所确定的目标响应数据返回给前端开发页面，以快速得到接口调用请求对应的目标响应数据，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

本公开实施例还提供了一种前端开发页面的调试方法，参见图6，应用于上述第一种前端开发页面的调试系统，该前端开发页面的调试系统包括：模拟服务器、调试插件模块；该方法包括：

S301，调试插件模块监听前端开发页面的接口调用请求，并在确定不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器；其中，接口调用请求中包含待调用接口的标识信息；

S302，模拟服务器接收调试插件模块发送的接口调用请求，并从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面。

本公开实施例中，利用调试插件模块监听前端开发页面的接口调用请求，并在确定不对接口调用请求进行拦截的情况下，将接口调用请求发送给模拟服务器，可以在不修改代码的基础上，实现接口调用请求的接收、拦截和转发，进而，模拟服务器在接收到调试插件模块发送的接口调用请求时，从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

在一种可能的实施方式中，调试插件模块监听前端开发页面的接口调用请求，包括：

调试插件模块向前端开发页面中注入目标脚本文件，以使目标脚本文件创建针对前端开发页面的目标代理对象；获取目标代理对象监听到的前端开发页面的接口调用请求。

在一种可能的实施方式中，上述方法还包括：

调试插件模块获取用户在第一接口输入框中输入的目标接口信息，确定目标接口信息对应的接口服务器是否完成开发，在目标接口信息对应的接口服务器完成开发，且响应数据的下载启用开关打开的情况下，下载并存储目标接口信息对应的接口服务器的响应数据；

调试插件模块获取用户在第二接口输入框中输入的自定义接口信息，以及在第二接口输入框对应的响应数据输入框中输入的响应数据，并将自定义接口信息对应的接口标识以及响应数据存储至调试插件模块中。

在一种可能的实施方式中，上述方法还包括：

调试插件模块在启用请求拦截时，基于待调用接口的标识信息，以及调试插件模块中存储的自定义接口信息对应的接口标识，确定是否对接口调用请求进行拦截，如果是，则从调试插件模块中确定待调用接口的标识信息对应的目标响应数据，并将目标响应数据返回给前端开发页面。

在一种可能的实施方式中，上述模拟服务器包括：模拟数据模块，路由模块，文件服务模块，其中，上述步骤S302模拟服务器接收调试插件模块发送的接口调用请求，并从本地模拟数据中确定待调用接口的标识信息对应的目标响应数据，将目标响应数据返回给前端开发页面，包括：

文件服务模块对接口调用请求进行监听，并在监听到接口调用请求时，基于待调用接口的标识信息，在路由模块中查询待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据目标响应数据的标识信息，从模拟数据模块中获取目标响应数据，并将目标响应数据返回给前端开发页面；其中，模拟数据模块中存储有调试插件模块下载的目标接口信息对应的接口服务器的响应数据，以及自定义响应数据；路由模块中存储有接口标识与响应数据的标识信息之间的对应关系。

在一种可能的实施方式中，上述模拟服务器还包括文件系统模块，上述方法还包括：

文件系统模块对模拟数据模块中存储的响应数据是否发生变更进行监听，并在模拟数据模块中存储的响应数据发生变更时，向路由模块发送数据变更信息；

路由模块在接收到数据变更信息时，更新接口标识与响应数据的标识信息之间的对应关系。

本公开实施例还提供了另一种前端开发页面的调试方法，参见图7，应用于上述第二种前端开发页面的调试系统，该前端开发页面的调试系统包括：模拟服务器；该模拟服务器包括：模拟数据模块，路由模块，文件服务模块；该方法包括：

S401，模拟数据模块存储自定义响应数据；

S402，路由模块存储接口标识与响应数据的标识信息之间的对应关系；

S403，文件服务模块对前端开发页面的接口调用请求进行监听，并在监听到接口调用请求时，基于待调用接口的标识信息，在路由模块中查询待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据目标响应数据的标识信息，从模拟数据模块中获取目标响应数据，并将目标响应数据返回给前端开发页面；其中，接口调用请求中包含待调用接口的标识信息。

本公开实施例中，在模拟服务器的模拟数据模块中存储自定义响应数据，进而在文件服务模块监听到接口调用请求时，可以根据接口调用请求中包含的待调用接口的标识信息，在路由模块中查询待调用接口的标识信息所对应的目标响应数据的标识信息，进而从模拟数据模块中获取目标响应数据，并将目标响应数据返回给前端开发页面，实现了后端服务未完成开发的情况下，启动前端页面的开发调试，达到前端页面与后端服务并行开发的效果，提高前端开发的效率。

在一种可能的实施方式中，上述模拟服务器还包括文件系统模块，上述方法还包括：

文件系统模块对模拟数据模块中存储的自定义响应数据是否发生变更进行监听，并在模拟数据模块中存储的自定义响应数据发生变更时，向路由模块发送数据变更信息；

路由模块在接收到数据变更信息时，更新接口标识与响应数据的标识信息之间的对应关系。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

本公开还提供了一种电子设备，包括：

至少一个处理器；以及

与至少一个处理器通信连接的存储器；其中，

存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行本公开中任一项的方法。

本公开还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，计算机指令用于使计算机执行本公开中任一项的方法。

本公开还提供了一种计算机程序产品，包括计算机程序，计算机程序在被处理器执行时实现本公开中任一项的方法。

图8示出了可以用来实施本公开的实施例的示例电子设备500的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图8所示，设备500包括计算单元501，其可以根据存储在只读存储器(ROM)502中的计算机程序或者从存储单元508加载到随机访问存储器(RAM)503中的计算机程序，来执行各种适当的动作和处理。在RAM 503中，还可存储设备500操作所需的各种程序和数据。计算单元501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

设备500中的多个部件连接至I/O接口505，包括：输入单元506，例如键盘、鼠标等；输出单元507，例如各种类型的显示器、扬声器等；存储单元508，例如磁盘、光盘等；以及通信单元509，例如网卡、调制解调器、无线通信收发机等。通信单元509允许设备500通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元501可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元501的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元501执行上文所描述的各个方法和处理，例如前端开发页面的调试方法。例如，在一些实施例中，前端开发页面的调试方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元508。在一些实施例中，计算机程序的部分或者全部可以经由ROM 502和/或通信单元509而被载入和/或安装到设备500上。当计算机程序加载到RAM 503并由计算单元501执行时，可以执行上文描述的前端开发页面的调试方法的一个或多个步骤。备选地，在其他实施例中，计算单元501可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行前端开发页面的调试方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (20)

1.一种前端开发页面的调试系统，所述调试系统包括：模拟服务器、调试插件模块，

所述调试插件模块，用于监听前端开发页面的接口调用请求，并在确定不对所述接口调用请求进行拦截的情况下，将所述接口调用请求发送给所述模拟服务器；其中，所述接口调用请求中包含待调用接口的标识信息；

所述模拟服务器，用于接收所述调试插件模块发送的所述接口调用请求，并从本地模拟数据中确定所述待调用接口的标识信息对应的目标响应数据，将所述目标响应数据返回给所述前端开发页面。

2.根据权利要求1所述的系统，其中，所述调试插件模块，具体用于：

向所述前端开发页面中注入目标脚本文件，以使所述目标脚本文件创建针对所述前端开发页面的目标代理对象；获取所述目标代理对象监听到的所述前端开发页面的接口调用请求。

3.根据权利要求1所述的系统，所述调试插件模块，还用于：

获取用户在第一接口输入框中输入的目标接口信息，确定所述目标接口信息对应的接口服务器是否完成开发，在所述目标接口信息对应的接口服务器完成开发，且响应数据的下载启用开关打开的情况下，下载并存储所述目标接口信息对应的接口服务器的响应数据；

获取用户在第二接口输入框中输入的自定义接口信息，以及在所述第二接口输入框对应的响应数据输入框中输入的响应数据，并将所述自定义接口信息对应的接口标识以及响应数据存储至所述调试插件模块中。

4.根据权利要求3所述的系统，其中，所述调试插件模块，还用于：

在启用请求拦截时，基于所述待调用接口的标识信息，以及所述调试插件模块中存储的所述自定义接口信息对应的接口标识，确定是否对所述接口调用请求进行拦截，如果是，则从所述调试插件模块中确定所述待调用接口的标识信息对应的目标响应数据，并将所述目标响应数据返回给所述前端开发页面。

5.根据权利要求3所述的系统，所述模拟服务器包括：模拟数据模块，路由模块，文件服务模块，其中，

所述模拟数据模块，用于对所述调试插件模块下载的所述目标接口信息对应的接口服务器的响应数据进行存储，以及存储自定义响应数据；

所述路由模块，用于存储接口标识与响应数据的标识信息之间的对应关系；

所述文件服务模块，用于对所述接口调用请求进行监听，并在监听到所述接口调用请求时，基于所述待调用接口的标识信息，在所述路由模块中查询所述待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据所述目标响应数据的标识信息，从所述模拟数据模块中获取所述目标响应数据，并将所述目标响应数据返回给所述前端开发页面。

6.根据权利要求5所述的系统，所述模拟服务器还包括文件系统模块，

所述文件系统模块，用于对所述模拟数据模块中存储的响应数据是否发生变更进行监听，并在所述模拟数据模块中存储的响应数据发生变更时，向所述路由模块发送数据变更信息；

所述路由模块，还用于在接收到所述数据变更信息时，更新所述接口标识与响应数据的标识信息之间的对应关系。

7.根据权利要求1-6任一所述的系统，其中，所述前端开发页面为前端小程序开发页面。

8.一种前端开发页面的调试系统，所述调试系统包括：模拟服务器，所述模拟服务器包括：模拟数据模块，路由模块，文件服务模块，

所述模拟数据模块，用于存储自定义响应数据；

所述路由模块，用于存储接口标识与响应数据的标识信息之间的对应关系；

所述文件服务模块，用于对前端开发页面的接口调用请求进行监听，并在监听到所述接口调用请求时，基于待调用接口的标识信息，在所述路由模块中查询所述待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据所述目标响应数据的标识信息，从所述模拟数据模块中获取所述目标响应数据，并将所述目标响应数据返回给所述前端开发页面；其中，所述接口调用请求中包含待调用接口的标识信息。

9.根据权利要求8所述的系统，所述模拟服务器还包括文件系统模块，

所述文件系统模块，用于对所述模拟数据模块中存储的自定义响应数据是否发生变更进行监听，并在所述模拟数据模块中存储的自定义响应数据发生变更时，向所述路由模块发送数据变更信息；

所述路由模块，还用于在接收到所述数据变更信息时，更新所述接口标识与响应数据的标识信息之间的对应关系。

10.一种前端开发页面的调试方法，应用于前端开发页面的调试系统，所述调试系统包括：模拟服务器、调试插件模块；所述方法包括：

所述调试插件模块监听前端开发页面的接口调用请求，并在确定不对所述接口调用请求进行拦截的情况下，将所述接口调用请求发送给所述模拟服务器；其中，所述接口调用请求中包含待调用接口的标识信息；

所述模拟服务器接收所述调试插件模块发送的所述接口调用请求，并从本地模拟数据中确定所述待调用接口的标识信息对应的目标响应数据，将所述目标响应数据返回给所述前端开发页面。

11.根据权利要求10所述的方法，其中，所述调试插件模块监听前端开发页面的接口调用请求，包括：

所述调试插件模块向所述前端开发页面中注入目标脚本文件，以使所述目标脚本文件创建针对所述前端开发页面的目标代理对象；获取所述目标代理对象监听到的所述前端开发页面的接口调用请求。

12.根据权利要求10所述的方法，所述方法还包括：

所述调试插件模块获取用户在第一接口输入框中输入的目标接口信息，确定所述目标接口信息对应的接口服务器是否完成开发，在所述目标接口信息对应的接口服务器完成开发，且响应数据的下载启用开关打开的情况下，下载并存储所述目标接口信息对应的接口服务器的响应数据；

所述调试插件模块获取用户在第二接口输入框中输入的自定义接口信息，以及在所述第二接口输入框对应的响应数据输入框中输入的响应数据，并将所述自定义接口信息对应的接口标识以及响应数据存储至所述调试插件模块中。

13.根据权利要求12所述的方法，所述方法还包括：

所述调试插件模块在启用请求拦截时，基于所述待调用接口的标识信息，以及所述调试插件模块中存储的所述自定义接口信息对应的接口标识，确定是否对所述接口调用请求进行拦截，如果是，则从所述调试插件模块中确定所述待调用接口的标识信息对应的目标响应数据，并将所述目标响应数据返回给所述前端开发页面。

14.根据权利要求12所述的方法，所述模拟服务器包括：模拟数据模块，路由模块，文件服务模块，其中，所述模拟服务器接收所述调试插件模块发送的所述接口调用请求，并从本地模拟数据中确定所述待调用接口的标识信息对应的目标响应数据，将所述目标响应数据返回给所述前端开发页面，包括：

所述文件服务模块对所述接口调用请求进行监听，并在监听到所述接口调用请求时，基于所述待调用接口的标识信息，在所述路由模块中查询所述待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据所述目标响应数据的标识信息，从所述模拟数据模块中获取所述目标响应数据，并将所述目标响应数据返回给所述前端开发页面；其中，所述模拟数据模块中存储有所述调试插件模块下载的所述目标接口信息对应的接口服务器的响应数据，以及自定义响应数据；所述路由模块中存储有接口标识与响应数据的标识信息之间的对应关系。

15.根据权利要求14所述的方法，所述模拟服务器还包括文件系统模块，所述方法还包括：

所述文件系统模块对所述模拟数据模块中存储的响应数据是否发生变更进行监听，并在所述模拟数据模块中存储的响应数据发生变更时，向所述路由模块发送数据变更信息；

所述路由模块在接收到所述数据变更信息时，更新所述接口标识与响应数据的标识信息之间的对应关系。

16.一种前端开发页面的调试方法，应用于前端开发页面的调试系统，所述调试系统包括：模拟服务器，所述模拟服务器包括：模拟数据模块，路由模块，文件服务模块；所述方法包括：

所述模拟数据模块存储自定义响应数据；

所述路由模块存储接口标识与响应数据的标识信息之间的对应关系；

所述文件服务模块对前端开发页面的接口调用请求进行监听，并在监听到所述接口调用请求时，基于待调用接口的标识信息，在所述路由模块中查询所述待调用接口的标识信息所对应的目标响应数据的标识信息，以及根据所述目标响应数据的标识信息，从所述模拟数据模块中获取所述目标响应数据，并将所述目标响应数据返回给所述前端开发页面；其中，所述接口调用请求中包含待调用接口的标识信息。

17.根据权利要求16所述的方法，所述模拟服务器还包括文件系统模块，所述方法还包括：

所述文件系统模块对所述模拟数据模块中存储的自定义响应数据是否发生变更进行监听，并在所述模拟数据模块中存储的自定义响应数据发生变更时，向所述路由模块发送数据变更信息；

所述路由模块在接收到所述数据变更信息时，更新所述接口标识与响应数据的标识信息之间的对应关系。

18.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求10-17中任一项所述的方法。

19.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求10-17中任一项所述的方法。

20.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求10-17中任一项所述的方法。

Images