前言:
整理下笔记,打好基础,daydayup!!!
接口文档
什么是接口文档?
目前主流的开发模式为前后端分离式开发,为了方便前后端的对接,就需要使用接口文件进行统一规范。
接口文档记载什么信息?
1,基本信息:请求路径,请求方式,接口描述
2,参数信息:参数名,参数类型,参数样例等
3,响应数据:相应数据的格式,相应数据的样例等
示例如下:

(图片来源:黑马程序员)
接口文档的创建
接口文档创建有很多方法,但使用YApi平台可以方便高效地进行创建
YApi
YApi是高效,易用的api管理平台。主要包括两个功能:1,API接口管理;2,Mock服务(模拟真实接口,生成接口的模拟测试数据,方便前端测试。即使后端没有完成,前端也可以通过模拟的接口进行测试)
YApi的使用
YApi的使用主要有三个步骤:1,添加项目;2,添加分类;3,添加接口
1,添加项目

进入界面后

随后在项目中,点击添加分类

随后在添加的分类中,点击"+"进行添加接口。

随后填写希望实现的功能与路径

提交后,在编辑里进行设置

随后进行json数据的设定,示例如下:

输入完成后,可以再一次完善下信息,最后点击最下方的保存

随后点击高级Mock,然后点击添加期望

随后在期望中修改json数据,然后点击确认

随后可以在预览中查看该测试内容

最后使用Axios中进行下测试:可以在控制台中成功获取数据
Axios相关可以看这篇:Web前端开发------Ajax,Axios概述及在Vue框架中的使用

整理结束,撒花!!!