开发利器:接口代理和接口模拟工具

本文介绍了如何解决前端开发中接口滞后问题,通过一款基于Vue3.0和SpringBoot的工具,利用MockServer实现接口模拟和代理,提供便捷的调试环境。详细讲解了工具的工作原理、使用步骤和下载链接。

前端开发过程往往需要和后端对接接口,而且一般开发都是前后端同步开发,这就难免出现接口提供滞后的问题,从而导致我们前端开发 UI 开发完成而无法调试的问题。面对这种问题,一般我们会有很多种方式处理,比如在代码中写一些模拟数据,或者打断点调试,或者用代理工具 Fidder 等工具去拦截请求并设设置返回内容。然后这些工具要么对程序侵入性太强,要么就是繁琐不好管理。基于这些问题,所以开发出这个模拟接口和代理接口的工具用来方便前端开发调试程序和调试接口。


本篇文章分三部分

  1. 工具的原理
  2. 工具的使用
  3. 工具下载

一、工具原理

1、工具的技术架构为 Vue3.0 + SpringBoot 。

2、工具包含两部分。一是前端管理页面,用于显示代理的接口请求和管理模拟的接口数据。二是 Java 后端,用于开启代理模拟接口服务和数据的处理,并将代理模拟数据处理后返回给前端页面。

本工具后端模拟代理服务基于开源框架 Mock Server(https://www.mock-server.com/#what-is-mockserver,具体框架为 mockserver-netty-5.14.0) 开发完成。核心功能有两个(代理和模拟)。

1、代理功能由调用 mockserver-netty-5.14.0 中类 org.mockserver.integration.ClientAndServer 的 startClientAndServer(Integer… port) 方法实现。

2、模拟功能由接口 ExpectationInitializer 的 initializeExpectations() 方法和类 org.mockserver.client.MockServerClient 的 upsert(Expectation… expectations) 方法实现。具体方式是将我们需要模拟的接口封装成 Expectation 然后装载到 MockServerClient 中。

二、工具使用

1、工具就是一个 jar 文件,目前最新版本是 V1.0.1

image.png

为了方便在 Windows 系统上运行,写了启动和关闭的两个脚本,最终的文件如下:

image.png

将上面三个文件放入一个文件夹内,用编辑器打开 MockServer启动脚本.bat 文件,修改其中的 jdk 路径 和 jar 文件的路径。

@echo off
set path=jdk bin 文件路径
START "MockServerHelper" "%path%javaw" -jar jar运行文件的路径 2>&1>systemRunLog.log
START chrome --new-window http://localhost:8899
pause

2、完成了上述操作就可以直接双击 MockServer启动脚本.bat 文件启动工具。之后如果你系统里安装了 Chrome 浏览器就会自动打开工具的页面,如果没有 Chrome 可以打开任意浏览器在其中打开 http://localhost:8899 即可。

3、关闭服务只需要双击 MockServer关闭脚本.bat 来结束服务

4、如果是 Mac OS 的话可以通过以下命令开启服务,然后在浏览器中输入 http://localhost:8899

nohup Java -jar <jar 地址> > <日志地址> &

5、Mac OS 关闭服务可以通过 ps -ef|grep java 查询进程ID,然后再通过 kill -9 进程号 来结束服务

6、打开浏览器可以看到这个页面

image.png

image.png

只需要在 控制面版 中开启代理服务开关就能够运行代理服务了,如果你需要更改端口,修改完开启即可。代理服务启动后,如果我们需要代理手机的请求,就将手机连至电脑同一个局域网内,然后在网络代理中设置代理服务器为控制面板中显示的代理 IP 和端口号

7、设置完成后就能看到手机的请求已经被代理了,通过点击列表中的请求可以查看具体的网络请求数据

image.png

8、模拟接口可以通过两种方式来完成

  1. 一种是在代理接口的列表里选中某一个你需要模拟的请求然后点击模拟按钮,会弹出如下一个弹窗,按要求编辑弹窗内容即可

image.png
然后点击保存,接下来你再次请求就是会返回你设置的模拟数据

  1. 另一种方式是点击上面的 模拟菜单 点击创建项目,然后按要求创建一个项目,

image.png

image.png

项目创建后会在列表中显示如下,然后点击接口数量上的 0

image.png

点击后会打开这个页面,在这个页面中点击创建模拟服务的接口

image.png

image.png

image.png

image.png

接下来你再请求就会发现收到的数据是你模拟的。

以上就是整个工具的使用介绍。

三、下载地址

运行程序下载地址 https://download.youkuaiyun.com/download/android_hdh/88218906

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值