[开发工具] APIPOST入门+认识接口（前后端分离）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发工具 -> APIPOST入门+认识接口（前后端分离） -> 正文阅读

[开发工具]APIPOST入门+认识接口（前后端分离）

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/vue@2.5.21/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("27218793@qq.com").
                    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("27218793@qq.com").
                    userName("yt").password("1234").gender(1).createDate(new Date()).build();
            return baseEntity.success(yt);
        } else {
            return baseEntity.failed("用户名或密码错误123");
        }

    }