如何用 Mockoon 快速建立 Mock APIs Server

/

本篇要解決的問題

之前寫過一篇〈如何用 Postman Mock Server 快速建立 API Server〉,用 Postman 雖然方便,但不知道是 Augustus 眼殘,還是 Postman 真的沒有這功能,就是暫停 Mock Server。變成只要 Postman 是打開的狀態下,Mock Server 就會一直運作。

最近因為接的 API 需要多一個身份驗證,在本機開發時很卡,在懶的用 Postman 的狀況下,常常會用上傳到測試機才看結果這種很笨的開發方式。

前陣子在社群上看到有人推薦 Mockoon,可以快速建立一個假的 API Server,重點是,它是開源免費的!

本篇就是介紹一下 Mockoon 這個工具要怎麼使用。


下載 Mockoon

Mockoon 的官方網址在這:https://mockoon.com/

進到官網後,按下那個大顆的「Download」按鈕,就會下載了。

Mockoon 支援 Windows、Linux、macOS。

下載後就照各個作業系統的安裝方式進行安裝。


使用 Mockoon

打開 Mockoon,會看見預設有一組 API 出現在介面上,算是使用範例:

Mockoon Demo
Mockoon Demo

可以看到上面示範了 GET、POST、PUT。

這份 Demo 可以不用刪,之後如果有特殊需求可以直接點來看有沒有示範的寫法,就不用一頁頁去看文件。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

建立新環境

我們要先新增一個 environment,才能在上面新增 API,點擊左側選單上方的「+」按鈕:

Add environment
Add environment

點擊後就會自動新增了,接著 App 的介面會像這樣子:

新增 environment 成功
新增 environment 成功

左上角的「New environment」是這個環境的名稱,可以改一個讓自己知道是什麼功能的名稱,像是 member、shop 之類。

上方的「3124」就是 Port 通訊埠,可以更改成我們自己想要的,但一些常用的記得避開,像 3000、8000 之類。

選擇方法、Path

選擇方法、Path
選擇方法、Path

這邊可以自己選調用這個 API 的方法,跟寫上 Path。

嗯……好像沒什麼需要特別寫的,因為就是這麼直覺 😝。

給預設回應

前端調用 API 後,接著會收到 response,要用 Mockoon 給回應的方式就是填在 Body:

Body 裡填上回應
Body 裡填上回應

這邊 Augustus 直接從 JSONPlaceholder 上 copy 一份貼上去,像這樣:

Body 裡填上回應
Body 裡填上回應

開啟 CORS

前端常常會遇到一個麻煩的東西,就是 CORS,一般 API 會死的第一步都是死在這,我們要先開啟允許所有網域都可以調用的設定才行。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

點擊右上角的 Environment settings:

點擊 Environment settings
點擊 Environment settings

然後點擊 Add CORS headers to environment headers below:

點擊 Add CORS headers to environment headers below
點擊 Add CORS headers to environment headers below

下方的 Environment headers 就會自動新增允許跨網域的設定:

Environment headers 新增允許跨網域設定
Environment headers 新增允許跨網域設定

Start server

都準備好了以後,最後按下左上角的播放按鈕,這個 API Mock Server 就可以開始使用:

按下 Start server
按下 Start server

調用 API

調用 API 的 URL 就是本機的 IP + 設定的 Port + Path,比方:

http://172.0.0.1:3124/test

如果不知道 IP,也可以直接用 localhost:

http://localhost:3124/test

一個簡單的 GET 如下:

fetch('http://localhost:3124/test')
      .then(res => res.json())
      .then(res => {
        console.log(res)
      })

瀏覽器的 Console 上就可以看到成功取回我們設定的回應:

取得回應
取得回應

筆記後心得

Mockoon 真的好用到炸,還可以想開就開,想關就關,開啟的速度也很快,可以說是前端開發時的神器。

推薦這套開源工具給大家,祝大家開發愉快~ 🙂

Summary
如何用 Mockoon 快速建立 Mock APIs Server
Article Name
如何用 Mockoon 快速建立 Mock APIs Server
Description
本篇大綱:本篇要解決的問題。下載 Mockoon。使用 Mockoon、建立新環境、選擇方法、Path、給預設回應、開啟 CORS、Start server。調用 API。筆記後心得。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Sheets

Google Sheets 略過空白格重整資料

API

用 Performance API 檢測檔案讀取時間

Bot Telegram

Telegram Login Widget,製作用 Telegram 登入功能

Forms Google

Google 表單 用網址改變題目預設值

API

GitHub API:取 Issue、Comments

Vue

Vue transition 製作簡單的 Carousel / Slider / 輪播功能

PWA

PWA學習筆記-1:cache、workbox基本使用

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

WordPress

WordPress SEO 有幫助的 2 個外掛

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
1 Comment
最舊
最新
Inline Feedbacks
看所有留言
Mark
Mark
8 天 之前

感謝版主的教學文章,剛試了一下搭配ngrok一起使用,可以讓外網也能抓到資料
非常實用:)

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.