首页 > 其他分享 >【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)

时间:2023-09-19 11:36:36浏览次数:45  
标签:API body name 16 ApiPost age 接口 api Mock


释义:
Mock:模仿,仿造。可理解为虚拟环境 模拟数据

Mock服务:模拟服务器提供API访问服务

Mock服务使用

路径:接口下面和Header、Query、Body、认证…Mock服务,如下图:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_开发流程设计

使用前准备

环境选择必须是Mock环境

非mock环境 mock服务是不起作用的。

环境设置如下:

路径:在小眼睛左边

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_前端_02


默认情况下是有一个官方自带的环境列表:

  1. 默认环境
  2. mock环境

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_API_03

如果想自定义环境可以在这里进行新建环境,这个可参考【接口工具ApiPost】环境变量(10):

域名地址

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_后端_04


笔者使用的是自带的,好像也没必要自定义。

相对地址自定义

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_API_05


固定域名后,进行自定义相对地址。这样在切换环境的时候

例如:定义环境变量{{host}}

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_测试_06


【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_前端_07


当切换环境的时候{{host}}的值随环境变化:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_测试_08


以上是举个例子,实际上固定的域名地址是写入上面的。相对的地址才作为环境变量。比如Mock环境自带一个URl固定地址

如下图:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_开发流程设计_09


避免误导使用,这里特此说明一下。

刷新、美化、复制链接按钮、导出响应示例等操作略过。

响应数据编辑

数据编辑框 & 预览数据框
比如数据如下填写:

{
	"id": "87ef1Dbb-b4eB-549F-EbdF-C69F6369bADB",
	"name": "李四",
	"phone": "13718425555"
}

预览效果如下图:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_测试_10


看到这里可能觉得奇怪,一样的有些多此一举哈!不用急这里是固定响应数据是一样的。后面还有随机动态响应数据

到这里所有的Mock服务准备工作完成。

举个例子(前后端使用)

然后在接口里输入相对地址:register,然后点击发送即可看到实时响应数据,如下图:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_后端_11


这个例子相对简单一些。但进行模拟api响应很完整。到这里可以体会到在后端还没有准备好服务的情况下,使用这个来提供api服务,前端开发会很开心。后面还有几个小技巧会让前端、后端、测试分离工作各不依赖。有点类似填充式作业方式哈!

固定基本数据使用(前后端使用)

{
	code:1000,
	msg:"sucess"
	,data:{
	"id": "87ef1Dbb-b4eB-549F-EbdF-C69F6369bADB",
	"name": "李四",
	"phone": "13718425555"
	}
}

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_前端_12


这个例子看上去更符合响应数据结构规范哈!

随机动态数据(前后端使用)

一个简单的title例子如下:

{
    title:"@ctitle"
}

实际预览效果是:

{
	"title": "真里就共成成"
}

如下图所示:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_后端_13


再来一个复杂一些的:

这里定义一个动态列表数据

{
  "code": "0",
  "data": {
    "list|10": [{
      "name": "@name",
      "age": "@integer(2)"
    }],
    "url": "https://echo.apipost.cn"
  },
  "desc": "成功"
}

实际效果如下:

{
	"code": "0",
	"data": {
		"list": [
			{
				"name": "Susan Williams",
				"age": 4202047804417013
			},
			{
				"name": "Cynthia Martinez",
				"age": 7836460292479682
			},
			{
				"name": "Joseph Rodriguez",
				"age": 7904378098119320
			},
			{
				"name": "Susan Perez",
				"age": 2839392309833828
			},
			{
				"name": "Scott White",
				"age": 8529217801206224
			},
			{
				"name": "David Allen",
				"age": 3507736869454853
			},
			{
				"name": "Jennifer Brown",
				"age": 186237858137008
			},
			{
				"name": "Margaret Anderson",
				"age": 7679312547559736
			},
			{
				"name": "Brenda Lee",
				"age": 105486912822656
			},
			{
				"name": "Brian Jackson",
				"age": 1856742232963432
			}
		],
		"url": "https://echo.apipost.cn"
	},
	"desc": "成功"
}

界面效果如下图:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_开发流程设计_14

RESTFUL逻辑动态数据响应(前后端使用)

这个需要js编程哈!如果后端会这个就很nice了

{
  "code": "0000",
  "data": {
    "verifySuccess": function() {
      let body = _req.body;
      console.log(body);
      return body.phone === '13718425555' && body.pwd === '123456';
    },
    "userInfo": function() {
      let body = _req.body;
      if (body.phone === '13718425555' && body.pwd === '123456') {
        return Mock.mock({
          "id": "87ef1Dbb-b4eB-549F-EbdF-C69F6369bADB",
	"name": "李四",
	"phone": "13718425555"
        });
      } else {
        return null;
      }
    },
  },
  "desc": "成功"
}

如下图:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_开发流程设计_15


下面的是测试使用的哈!

在使用Mock服务的时候同时使用断言(官网没有这个骚操作,笔者在实际开发过程中体悟的,在开发之前就进行断言测试,后端童鞋想搞错都很困难)

使用获取用户信息这个mock服务接口来举例说明:
在后执行脚本里添加断言定义如下:

apt.assert('response.raw.responseTime>=50');
apt.assert('response.raw.type=="json"');

apt.assert('response.json.hasOwnProperty("code")');

apt.assert('response.json.hasOwnProperty("msg")');
apt.assert('response.json.hasOwnProperty("data")');

如图所示:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_开发流程设计_16


下面是运行效果图:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_API_17


看到这里相信前后端童鞋应该品味出笔者为什么这么干了。嘿嘿!文档可以出错,api接口有可能搞错结构。但是只要用断言进行统一。至少返回的数据结构字段名不一样立马就知道了。尤其是团队大,协作人多的时候。没有断言测试来保障,谁敢动谁的api服务代码。因为也许并不知道这个api给了多少个业务组使用。牵一发动全身哈哈!

同时也是能有效重构API的利器!!!!

同时也是能有效重构API的利器!!!!

同时也是能有效重构API的利器!!!!

以上的过程再结合接口流程测试,会有一种快乐加倍

上面的过程再加上自动化接口测试那就有一种起飞的赶脚了。

如果再加上定时周期性的自动化接口回归测试那开发测试运维都要飞起了。

以上是笔者的一种开发流程设计。后续会一点点补充上。

结语

灵活使用Mock服务,前端不用依赖后端API接口。测试脚本提前锁定字段以及字段值范围。实现API设计、测试、数据模型前置。API服务后置。解耦API服务。这样前端迭代可以加倍加速。如有不理解咨询我哦!

自研产品推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具,由于开发人力就作者一个所以人力有限,因此v1.0.0版本功能进行精简,大功能项有:

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

为了更好服务大家把之前的公众号和软件激活结合,如有疑问请大家反馈到公众号即可,下个版本30%以上的更新会来自公众号的反馈。

嗯!先解释不上服务端原因,API调试工具的绝大多数时候就是一个数据模型、数据处理、数据模型理解共识的问题解决工具,所以作者结合自己十多年开发使用的一些痛点来打造的,再加上服务端开发一般是面向企业的,作者目前没有精力和时间去打造企业服务。再加上没有资金投入所以服务端开发会滞后,至于什么时候会进行开发,这个要看募资情况和用户反馈综合考虑。虽然目前国内有些比较知名的api工具了,但作者使用后还是觉得和实际使用场景不符。如果有相关吐槽也可以在作者的公众号里反馈蛤!

下面是一段smartApi使用介绍:

【接口工具ApiPost】使用Mock服务前端不用依赖后端接口实现API解耦(16)---(强力推荐本章内容;前后端测试都适用)_测试_18

下载地址:

链接: https://pan.baidu.com/s/1Wp-u8KhVt5CNAfynweP0qg 提取码: Mock


标签:API,body,name,16,ApiPost,age,接口,api,Mock
From: https://blog.51cto.com/u_16264967/7523814

相关文章

  • 从接口设计看业务分层
    最近在做功能更改时,发现一个接口设计很有趣,其中涉及一些代码设计方面的值得思考的内容。背景以下是一个相对简单的优惠券列表功能。不同的优惠券具有不同的描述,而描述内容会受到一定的业务规则影响。例如,满5元可用的兑换券将显示为"满5.01可用",而无订单限制的兑换券将显示为"仅......
  • 【API接口工具】postman-Workspaces工作空间 VS Scratch Pad草稿面板
    ScratchPad是一个可以在未连接到Postman服务器的情况下工作的空间。当您未登录或没有网络连接时,您仍然可以离线访问某些Postman功能,例如创建集合和请求,或发送请求。ScratchPad中的所有工作都存储在本地,不会与Postman在线同步。在便笺簿中工作后,您可以稍后在登录后将工作移......
  • Atcoder Regular Contest 165(A~E)
    赛时45min切A~C,降智不会D,罚坐1h,喜提rk70+->rk170+。A-SumequalsLCM可证明结论:若\(N\)只含有一种质因子则无解,否则有解。B-SlidingWindowSort2这么多cornercase的题竟然10min一发入魂,类目了。由于操作是升序排序,且要求最终字典序最大,所以如果存在一个......
  • 9-微信小程序的网站的接口调用(直接调用)
    微信小程序除了在第三方调用接口,还可以直接从网站调用接口,但是每个网站都有保护措施,所以要寻找那些没有防护的,可以来直接调用的网站。 案例:豆瓣电影的接口调用1.百度豆瓣电源,找寻需要调用的页面 2.右键检查,或F12 3.回车,再次发起请求,查看网站接口 微信小程序作为新兴......
  • [代码随想录]Day48-动态规划part16
    题目:583.两个字符串的删除操作思路:还是最长公共子序列,假设最长公共子序列长度是l;那么需要删除的次数是len(s1)-l+len(s2)-l代码:funcminDistance(word1string,word2string)int{lens1:=len(word1)lens2:=len(word2)dp:=make([][]int,lens1+......
  • 8-微信小程序的网站的接口调用
    案例:查询天气预报1.需要使用到的接口网址,在百度搜索聚合数据:https://www.juhe.cn/  聚合数据是一个请求接口的网站 准备工作做好后,就开始打开微信小程序编译器wxml:<view class="top" >    <text>查看天气预报</text></view><form bindsubmit="submit" >......
  • 快速了解Apipost
    随着数字化转型的加速,API(应用程序接口)已经成为企业间沟通和数据交换的关键。而在API开发和管理过程中,API文档、调试、Mock和测试的协作显得尤为重要。Apipost正是这样一款一体化协作平台,旨在解决这些问题,提高API开发效率和质量。Apipost提供API文档管理功能,让后端开发人员可以在开......
  • 《优化接口设计的思路》系列:第三篇—留下用户调用接口的痕迹
    前言大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。作为一名从业已达六年的老码农,我的工作主要是开发后端Java业务系统,包括各种管理后台和小程序等。在这些项目中,我设计过单/多租户......
  • 人人都能学的数据分析体系课(16周完整版+源码+PDF课件)
    点击下载——人人都能学的数据分析体系课(16周完整版+源码+PDF课件)  提取码:nsep 人人都能学的数据分析体系课(16周完整版+源码+PDF课件),数据也称为观测值,是实验、测量、观察、调查等的结果。数据分析中所处理的数据分为定性数据和定量数据。只能归入某一类而不能用数值进行测度的数......
  • ARC165F Make Adjacent
    D1a5y。记录\(x(1\lex\len)\)出现位置分别为\(l_x,r_x(l_x<r_x)\),讨论一下发现当两个数\(x,y\)满足\(l_x<l_y,r_x<r_y\)时操作后\(x\)一定出现在\(y\)前面,不然可以交换位置以达到更优步数。否则发现无论怎么操作发现都不影响答案。所以我们将\(x\)描述为平面上......