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

在我们的项目里，前后端分离目前是符合当下趋势的，在过去前后端不分离的时代已经变成过去式，在实际项目开发中，在前期我们如何不依赖真实接口而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('');

})