APIPOST入门+认识接口（前后端分离）
文章目录
啥是API接口？
前端调用API接口？？
什么叫做API
application programming interface
应用程序接口
接口就是两个接口相互连接的地方
我们的电视机 本身是不能播放音频的 这个是毋庸置疑的
但是如果我们电视机插入了接口 那就可以播放这个电视
接口其实就是给数据的 可以这么大致理解
用户是直接操作硬件吗
肯定不是 其实是操作系统在进行处理
那么我们用户
和硬件直接的接口就是操作系统（你不需要知道具体是如何进行操作的 你只需要知道怎么用就行 真的细节是被隐藏了）
什么是APIpost
是一个支持模拟post get put 等常见的http请求，支持团队协作，并可以直接生成导出接口文档的api调试管理工具
postman是一款国外软件（纯英文）（印度软件）
总之这个APIpost可以完美的支持生成完美的软件
apipost可以快速生成我们的接口文档
接口分为硬件接口和软件接口
)]
笑话小案例
其实接口 可以当做是给我们前台提供数据 进行数据渲染，很多时候我们的数据都是通过后台提供接口将我们的数据，由我们前端通过Ajax或者是使用axios进行请求拦截，将我们的数据渲染到我们的前端页面提供数据的渲染。
下面以一个小笑话的案例，来演示 前端如何通过axios获取到我们的接口的数据
并渲染到我们的前台的数据
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke" class="get">
<p>{
{joke}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
joke: "hello"
},
methods: {
getJoke: function () {
var that = this;//这个this就是获取到我们的app这个实例对象
axios.get("https://autumnfish.cn/api/joke").then(function (reponse) {
console.log(reponse.data)
that.joke = reponse.data;
})
}
}
})
/*
实现随机笑话
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
这个就是使用简单的·axios进行拦截我们的响应，然后使用vue里面的渲染将我们的数据放到前台
这样我们就可以通过点击这个按钮就可以将我们的数据
这里给大家推荐这个很多免费的接口
大家可以在这里吗获取到海量的数据
也就是这些接口是我们自己写好的，我们直接去获取就行，但是在我们实际开发过程中，我们可以通过后台书写接口，然后将我们的数据传给前台，前端可以进行拦截我们发送的请求。
编写mock数据
利用mock服务自己书写一个模拟的数据，（可以说是一个接口）用于我们的数据渲染
下面我们开始自己书写我们的mock模拟数据，这块内容其实是前端成员在后端未将自己的接口开发完成之前，但是由急于需要数据，临时出现的一个接口，这个接口就是相当于是一个临时出现的数据，当我们后端将接口写出来之后，我们就不需要使用我们的mock数据了
下面我们利用我们的apipost里面的mock服务书写一个测试接口，这个接口也是可以进行我们的模版的渲染
这里面的我们采用的是mock.js的基础语法进行的书写，就是使用了一些随机的数据，
然后我们就可以获取到我们的这个url地址，然后我们前台的伙伴们就可以利用这个数据进行渲染，
因为这个时候我们数据是可以利用axios进行拦截到我们的这个接口的数据了
但是我们自己实际开发过程中要是真的想自己写接口给后端进行使用的话，我们还得进一步去解决跨域的问题，因为这个不解决的话，我们的前端没法访问我们的后端数据。
如何解决跨域问题（后续要解决的）
这个是我们后续要解决的问题，就是如何将我们后端写的接口真的可以让我们的前端进行拦截。
记录本次的问题，也是我们实现前后端分离的必须要走的一步。
实战二维码
这个目的在于让我们的使用者知道如何向一个接口发送我们请求，在发送请求的过程中如何传递参数进去。
然后这里的接口都是写好的，我们是可以直接进行使用的，只需要传递一些参数进去就好
这个就是比较简单的一个操作
API_API数据接口_免费数据调用_API接口平台-聚合数据 (juhe.cn)
从这里面获取我们想要的接口
我们只需要传入确定的参数进去就可以了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hIpXpyV-1646126883080)(
)]
驾照题库实战项目
也是通过我们的这个网站获取我们的接口信息
API_API数据接口_免费数据调用_API接口平台-聚合数据 (juhe.cn)
然后进行调整处理
和上面进行二维码的处理 差不多
也是按照人家api文档要求你要写的东西你进去书写就好
这个是官方提供的参数 也就是我们要填入里面的数据，然后我们照做就好
自己写一个接口
我们看来上面的那么多的案例其实我们也是可以自己写一个接口处理，就是仿照人家写的接口进行模仿，
那么我们其实可以自己写一个接口 而且也是具有我们的接口的文档
**这个接口文档我们就可以借助我们的apipost帮助我们一键生成，极大简化了我们开发的效率，我们就不需要再去现写接口文档进行发愁，**那么大家其实可以先看一下 我们下面写的一个接口
我们做一个类似于的登陆的接口
这个是我们的实体类
下面这个是我们状态代码类
就是汇报我们有没有成功，打印一下状态码
public class baseEntity<T> implements Serializable {
private T data;//这个是等待传入的实体 使用泛型进行接收
private boolean success;
private int code;
private String error;
//请求成功
public static <T> baseEntity<T> success(T t) {
baseEntity<T> base = new baseEntity<>();
base.setCode(200);
base.setData(t);
base.setSuccess(true);
return base;
}
public static <T> baseEntity<T> failed(int code, String error) {
baseEntity<T> base = new baseEntity<>();
base.setCode(400);
base.setData(null);
base.setSuccess(false);
base.setError(error);
return base;
}
public static <T> baseEntity<T> failed(String error) {
return failed(606, error);
}
//请求失败
}
这里是我们控制器 controller层进行的任务
@RestController
@RequestMapping("/app")
public class JsonController {
@RequestMapping(value = "/version", method = RequestMethod.GET)
public baseEntity<VersionEntity> getVersion() {
VersionEntity versionEntity = VersionEntity.builder().id(1)
.version(2).versionStr("2.001").
downLoad("http://come.yt").build();
return baseEntity.success(versionEntity);
}
@PostMapping(value = "/login")
//参数的注解
public baseEntity<UserEntity> login(@RequestParam String username, @RequestParam String password) {
if (!StringUtils.hasLength(username)) {
return baseEntity.failed("用户名为空");
}
if (!StringUtils.hasLength(password)) {
return baseEntity.failed("密码为空");
}
///模拟从数据库查询的结果
if (username.equalsIgnoreCase("yt") && password.equalsIgnoreCase("1234")) {
UserEntity yt = UserEntity.builder().id(1).age(18).email("[email protected]").
userName("yt").password("1234").gender(1).createDate(new Date()).build();
return baseEntity.success(yt);
} else {
return baseEntity.failed("用户名或密码错误123");
}
}
}
这样我们就可以生成一个接口文档
我们直接在apipost里面直接一键生成就可以啦
这个就是我们的一个接口文档 自己的，也方便前端人员知道需要传递什么参数进去
2.post和get请求的区别
1.get
什么是http请求
http消息是由客户端到服务端的请求以及服务端到客户端的响应组成的。
简单来说就是：http请求是由请求和响应组成的
最直观的区别就是
get是把参数包含在URL里面的
post是通过requestbody传递参数的
这个是post请求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-swADTbiN-1646126883093)(
)]
这个是get请求[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
具体细节差别
apipost如何使用mock服务
为什么要使用mock服务
什么叫做mock？？
如何使用mock服务，
mock服务就是提供假的数据进行检测的
首先讲一下
简单的搭建一个springboot项目
什么是get post 接口 什么是json格式
搭建springboot项目 以及我们的pom.xml文件的详解
spring项目结构 实现我们的前后端未分离的操作
1.新建HTML
2.新建controller
3.定义方法（interface）
4.网页访问（断点）
//前后端分离 如何书写我们的
get post接口 以及我们的json的返回
这些都是很重要的
就是实际上 我们的的接口其实似乎由我们的后台进行提供出来的 这个接口提供出来之后是由我们的前端可以进行访问的
然后进行传递参数进去
就比如说下面这一段代码
@RestController
@RequestMapping("/app")
public class JsonController {
@RequestMapping(value = "/version", method = RequestMethod.GET)
public baseEntity<VersionEntity> getVersion() {
VersionEntity versionEntity = VersionEntity.builder().id(1)
.version(2).versionStr("2.001").
downLoad("http://come.yt").build();
return baseEntity.success(versionEntity);
}
@PostMapping(value = "/login")//从这里开始就是我们的代码入口处 我们从这里进行处理的操作
//我们通过传入参数进行处理 如果成功的话就会返回相应的数据
//参数的注解
//下面两个其实就是我们的参数 一个是username 一个是password 我们
public baseEntity<UserEntity> login(@RequestParam String username, @RequestParam String password) {
if (!StringUtils.hasLength(username)) {
return baseEntity.failed("用户名为空");
}
if (!StringUtils.hasLength(password)) {
return baseEntity.failed("密码为空");
}
///模拟从数据库查询的结果
if (username.equalsIgnoreCase("yt") && password.equalsIgnoreCase("1234")) {
UserEntity yt = UserEntity.builder().id(1).age(18).email("[email protected]").
userName("yt").password("1234").gender(1).createDate(new Date()).build();
return baseEntity.success(yt);
} else {
return baseEntity.failed("用户名或密码错误123");
}
}
下面的数据就是我们通过访问我们后端提供出来的接口，然后获取到的数据
apipost中的变量？
什么是变量为什么要使用变量
就是为了达到一处改变多处进行改变的特性
如何定义变量？
怎么随时查看
使用变量可以达到一处改变 处处改变的效果
这里就相当于是创建我们的环境变量的创建一样就是和java配置环境变量差不多的意思
如何定义变量
1.就是通过我们的预执行脚本（使用预处理脚本）
2.就是通过我们配置我们的环境变量（使用环境管理器）
4.mock就是随机生成一些变量出来
大家可以理解一下就是 我们的mock数据就是可以帮助我们随机生成一些数据 帮助我们进行测试
这里所提供给我们的数据都是可以进行很好的进行测试的时候进行使用我们的数据进行分析处理
这里可以清晰的看到我们的随机的数据，我们每次进行请求的时候就会获取到不同的值
第三个变量就是我们的apipost的内置变量
1.request对象
2.response对象
就是响应的结果
我们同样可以在我们的
3.navigator对象
这两种方式进行处理
什么是脚本？？
脚本分为预执行脚本和后执行脚本
1.预执行脚本
预执行脚本
如何利用预执行脚本动态的添加请求头
其实是进行了一个加密的过程处理md5加密
如何动态的添加请求头
我们从我们的预处理脚本里面进行添加我们数据
这里是我们的body，其实这里就是我们传入的参数
然后我们可以将我们的数据进行处理
在这里将我们的body里面的数据进行封装处理
此时我们加密处理之后 ，我们需要携带一个参数token，token由请求body的所有参数通过键值升序后，md5计算得到
即
token=md5（123+“小明”+456）
如何利用后执行脚本实现断言校验
这里就是 进行我们的后执行脚本 我们可以在断言里面进行查看我们的数据
就是可以在断言里面进行查看 我们的状态是否成功
什么是接口参数依赖
接口参数依赖又被叫做接口依赖，简单点说就是后面的接口要用到前面接口产生的数据。
比如：我们一个接口B需要接口A的参数token作为自己的请求参数。
常见的场景如：访问一个需要登陆才能浏览的接口。
apipost如何处理参数依赖
get_token接口
请求地址：http://dev.apipost.cn/tech/get_token.php
他将返回一个token参数
然后这个参数是我们need_token需要的一个数据
need_token接口：
请求地址：http://dev.apipost.cn/tech/need_token.php
它需要get_need接口返回的token参数作为自己的请求参数
一个简单的流程测试
这个就是我们的一个简单的数据测试处理，我们一定要注意一下 我们的请求的先后顺序是很有必要的
顺序搞错是请求不到东西的
cookie管理器的使用
1.cookie的使用场景
登陆识别大多数都是采取的cookie进行我们的身份进行验证的
第一次访问网站的时候，浏览器会发送请求，服务器响应请求后，会将我们的cookie放到我们的响应请求中
在浏览器再次发送请求的时候，会把cookie带过去，服务器会根据cookie辨别用户身份
cookie存在客户端
session存在于服务端的
cookie的一个登陆实例
一下实例都是假定我们的后端的登陆是基于我们的cookie实现的，
比如说：我们需要调试我们接口（我的收藏列表），那么必须先登陆才能请求，否则该接口肯定不会返回正确的信息，
所以此时的步骤就是先登录接口，再访问收藏列表
就是这么一个顺序 我们必须要注意才行
在这里我们先进行登陆
登陆成功之后 我们打开我们的cookie管理器
就会发现多了一个cookie
那么我们下次再次进行访问的时候 我们就会带着这个cookie进行发送我们的请求