欧美变态另类xxxx,日韩精品无码熟人妻视频

我們新建一個test-demo項目后

我們新建一個商品列表的接口，接口路由暫定/api/shoplist

我們在設(shè)計上，并且選擇Mock環(huán)境，并且在200狀態(tài)下添加響應(yīng)字段
并且我們選擇了get請求
我們在query上添加了兩個入?yún)?shù)

我們注意到我們可以添加接口入?yún)?code>pageNum與pageSize,并且我們mock了返回的字段

調(diào)試接口

我們可以在調(diào)試中檢測自己的mock返回接口

注意我們在調(diào)試中，我們可以根據(jù)不同類型接口添加請求頭、Header、Query、body具體因接口類型而定

頁面測試

我們在apipost中在線調(diào)試了這個接口，我們在一個頁面中測試一下我們這個接口是否真實有用

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

我們看到頁面上請求

你就會發(fā)現(xiàn)你mock的接口數(shù)據(jù)在頁面就能正常的調(diào)用了

MOCK接口文檔

當我們成功的用APIPOST模擬出與后臺一樣的類似接口時，一般后端都會給出接口文檔，那么現(xiàn)在你可以像后端一樣，按照后端要求，你可以在MOCK中完善你的MOCK接口文檔

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

編輯以下，然后點擊保存

我們點擊分享

當我們復(fù)制打開這個鏈接時api/shoplist[3]

此時你會發(fā)現(xiàn)自動生成的文檔結(jié)構(gòu)非常的清晰，因此在項目中，你可以完全不依賴后端接口，并且可以引導(dǎo)后端接口的設(shè)計了，因此你也大可不必等待真實接口，而你也一樣可以在真實接口聯(lián)調(diào)的前期進行快速開發(fā)。

總結(jié)

我們使用apipost新建一個項目，新建了一個測試接口，并實時mock了一份在線數(shù)據(jù)
我們在實際頁面中，測試了apipost新建的接口數(shù)據(jù)，并且成功響應(yīng)
我們根據(jù)現(xiàn)有的接口，在線生成了一份MOCK接口文檔，我們通過MOCK可以很方便的看出哪些入?yún)⒛男┏鰠?，并且這份在線接口文檔是可以實時保存的
本文示例code example[4]