簡介

本教學將教您如何使用 Mirage 模擬任何 HTTP API 的基本原理。雖然 Mirage 可以用來模擬 GraphQL API，但本教學將涵蓋基本的 REST API。

您將透過模擬一個提醒應用程式的 API 來學習 Mirage。該應用程式以 React 撰寫，但您不需要了解 React 即可跟著學習，因為您只會撰寫 Mirage 程式碼。

目前沒有實際的 API 伺服器在運行，因此該應用程式一開始無法運作。當您實作每個 API 端點時，您將恢復該應用程式的功能。

以下是最終結果的範例

mirage-tutorial.vercel.app (原始碼)

設定

首先，讓我們準備好您的開發環境。您需要安裝 Node.js，並且您將使用您自己的文字編輯器和終端應用程式。

接下來，下載本教學並安裝其相依性

npx degit github:miragejs/tutorial mirage-tutorial
cd mirage-tutorial
yarn install

# You can also use npm:
npm install

然後在您的編輯器中開啟專案並啟動您的應用程式

yarn start

# or npm run start

這應該會在 port 3000 上運行一個開發伺服器。

在您的瀏覽器中開啟 http://localhost:3000，您應該會看到一個如下所示的頁面

Reminders app

如果您看到，您就可以開始模擬了！