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

Maic

发布于 2023-09-20 19:27:42

7260

发布于 2023-09-20 19:27:42

文章被收录于专栏：Web技术学苑Web技术学苑

在我们的项目里，前后端分离目前是符合当下趋势的，在过去前后端不分离的时代已经变成过去式，在实际项目开发中，在前期我们如何不依赖真实接口而Mock一份真实接口数据呢？希望看完本篇能在实际项目中带来一些思考和帮助

正文开始...

开始第一个例子

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

首先我们登录控制台后，我们新建一个项目

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

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

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

我们注意到我们可以添加接口入参pageNum与pageSize,并且我们mock了返回的字段

调试接口

我们可以在调试中检测自己的mock返回接口

注意我们在调试中，我们可以根据不同类型接口添加请求头、Header、Query、body具体因接口类型而定

页面测试

我们在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('');
})

我们看到页面上请求