使用 Mockoon 快速建立 Mock APIs

因為前後端架構的問題，身為前端需要自己研究開設本地 API，否則做個畫面都得問東問西的，開發效率低到谷底。查了一下資料，發現大家幾乎都是用 JSON Server 居多，有些是使用 Postman。不過剛好發現了 Mockoon 這個工具，嘗試之後覺得真的不錯，很簡單就能上手，記錄一下操作方法。

Create mock APIs in seconds with Mockoon

先到 Mockoon 官方網站的 Download Page 下載安裝檔，安裝完成後開啟應用程式，此時就會出現預設的範例，包含 GET、POST、PUT 三種。

點選左上角的綠色箭頭 Start server 就能開啟本地端的 API 了，其中像是 Path 或是使用的 Port 都能自己修改。

CORS Option

這邊可能會遇到常見的 CORS 問題。

點擊右上方齒輪進入環境設定的頁面，將 CORS 的「Enable」選項打勾，然後點擊「Add CORS headers to environment headers below」就會自動將相關的環境設定加到下面的 Environment headers 裡面。

這樣就解決 CORS 跨域的問題囉。

範例：串接 JSONPlaceholder 資料

最下方的 Body 是填寫預設回應的地方，我們可以放入使用 JSONPlaceholder 產生的 JSON 資料來幫助測試。

例如：將 Listing all resources 這個 API 所提供的回傳資料作為我這次開發的 Mock API 的預設回應。

最後我們就來串接這支 Mock API 來撰寫一個簡單的範例吧！

透過 GET 我們本地端的 API，取得回應後對陣列資料做 forEach，我把每一筆資料的 title 取出來製作成 <li> 並且累加字串，最終組合成一個完整的列表清單。

// https://jsonplaceholder.typicode.com/posts
axios
  .get("http://localhost:3001/user")
  .then((response) => {
    const result = response.data;
    const wrapper = document.querySelector(".user-data");
    let list = "";
    result.forEach((item) => {
      list += `<li>${item.title}</li>`;
    });
    wrapper.innerHTML = list;
  })
  .catch((error) => {
    console.log(error);
  });

使用 VS Code 插件 Live Server 在本地打開來，就能看到運行畫面出現我們 Mock API 裡面的資料哩！

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫