前端如何在线mock数据,并生成API接口文档

技术博客 (289) 2023-11-17 09:01:02

前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第1张 在我们的项目里,前后端分离目前是符合当下趋势的,在过去前后端不分离的时代已经变成过去式,在实际项目开发中,在前期我们如何不依赖真实接口而Mock一份真实接口数据呢?希望看完本篇能在实际项目中带来一些思考和帮助

正文开始...

开始第一个例子

在以前我们可以借助EazyMock在线创建接口数据,在大多时候这是我们首选,简单,方便,并提供了非常好的mock接口工具,但是笔者想介绍另外一个比较好用的在线mock工具,apipost

首先我们登录控制台后,我们新建一个项目 前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第2张

我们新建一个test-demo项目后

我们新建一个商品列表的接口,接口路由暂定/api/shoplist

前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第3张

  • 我们在设计上,并且选择Mock环境,并且在200状态下添加响应字段
  • 并且我们选择了get请求
  • 我们在query上添加了两个入参参数

前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第4张 我们注意到我们可以添加接口入参pageNumpageSize,并且我们mock了返回的字段

调试接口

我们可以在调试中检测自己的mock返回接口 前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第5张 注意我们在调试中,我们可以根据不同类型接口添加请求头HeaderQuerybody具体因接口类型而定

页面测试

我们在apipost中在线调试了这个接口,我们在一个页面中测试一下我们这个接口是否真实有用

  <div id="app"></div>
<script> const appDom = document.getElementById('app'); const baseUrl = 'https://console-mock.apipost.cn/mock/cd19ff79-1221-4f2b-8671-ac0c6e19e6b7' const getData = async () => { const res = await fetch(`${baseUrl}/api/shoplist?pageNum=1&pageSize=10`) const {status} = res; if (status === 200) { return res.json(); } } getData().then(({data}) => { const html = data.map(item => { return ` <div class="item"> <p>${item.name}</p> <p>${item.age}</p> </div>` }); appDom.innerHTML = html.join(''); }) 

我们看到页面上请求 前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第6张

你就会发现你mock的接口数据在页面就能正常的调用了

MOCK接口文档

当我们成功的用APIPOST模拟出与后台一样的类似接口时,一般后端都会给出接口文档,那么现在你可以像后端一样,按照后端要求,你可以在MOCK中完善你的MOCK接口文档

APIPOST中提供了一份非常强大的自定生成接口文档功能

编辑以下,然后点击保存 前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第7张

我们点击分享 前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第8张

当我们复制打开这个链接时api/shoplist

前端如何在线mock数据,并生成API接口文档 (https://mushiming.com/) 技术博客 第9张

此时你会发现自动生成的文档结构非常的清晰,因此在项目中,你可以完全不依赖后端接口,并且可以引导后端接口的设计了,因此你也大可不必等待真实接口,而你也一样可以在真实接口联调的前期进行快速开发。

总结

  • 我们使用apipost新建一个项目,新建了一个测试接口,并实时mock了一份在线数据

  • 我们在实际页面中,测试了apipost新建的接口数据,并且成功响应

  • 我们根据现有的接口,在线生成了一份MOCK接口文档,我们通过MOCK可以很方便的看出哪些入参哪些出参,并且这份在线接口文档是可以实时保存的

  • 本文示例code example

THE END

发表回复