使用 json-server 來建立一個模擬 API
在本教程中，您會看到如何通過 json-server 來設定和使用模擬的 REST API，並可以使用它來完成移動應用或 Web 應用程式的開發。本教程假定您具備基本的 JSON 和 HTTP 請求相關的知識。
什麼是 REST？
REST 是 Representational State Transfer（具象狀態傳輸） 的縮寫。它是一種用於傳遞資訊的架構風格。它使通過簡單的 HTTP 來在不同的軟體或程式中互相專遞資訊變成可能。 我們針對一個 URL 通過不同型別的 HTTP 請求來對對應的使用者資訊（資源）進行對應的請求（例如 GET 為獲取，POST 為建立，DELETE 為刪除，等），而不是使用不同的 URL 對資源進行直接的請求。
舉個例子，如果需要刪除一個使用者。我們需要做的僅僅是對 /user/10 發出一個 `DELETE` 的請求，而不是對 /deleteuser?id=10 發出一個 GET 請求。 （這樣的操作更簡潔也更有意義）
為什麼我們需要一個模擬 API？
REST API 提供了移動應用以及 Web 應用的後端支援。有些時候當你在進行開發時，你需要的後端介面可能還沒有完成對於開發所需要的支援。 我們需要一個模擬 API 提供一些偽造資料來模擬真實環境下的移動應用和 Web 應用的使用場景。
這就是我們為什麼需要模擬 REST API 的原因，然而 json-server 可以很輕易的滿足我們的這些需求。
讓我們開始吧
在我們開始之前我們需要通過 Node 來安裝 json-server
| 1 | npm install -g json-server |
接下來我們需要建立一個 JSON 檔案，它包含著我們開發所需要的偽造資料。比如我需要一些 JSON 資料，其中包含了了一些基礎的使用者資訊例如 ID，姓名，地址等等。我們將新建一個包含這些資訊的檔案並將其命名為 info.json。
| 0102030405060708091011 | {"users": [{"id": 1,"name": "roy","location": "india"}, {"id": 2,"name": "sam","location": "wales"}]} |
下面的命令在終端執行 json-server 並將 info.json 設定為資料來源，這時模擬 API 應該已經允許在 http://localhost:3000 埠。
| 1 | json-server info.json |
測試 REST API 終端
我們的虛擬 API 已經可以使用，接下來讓我們來看看如何在一個客戶端中使用這個 REST API。在下面的例子中我將使用 Postman REST Client （一款 Chrome App） 來發起 API 請求。
GET 請求
我們首先對 REST API 發起一個 GET 請求。在資料來源檔案（JSON 檔案）中定義了一個 users 的終端，其中包好了使用者相關的資訊。 對 http://localhost:3000/users 發起 GET 請求會顯示現在已經存在的資訊。
| 010203040506070809101112 | [{"id": 1,"name": "roy","location": "india"},{"id": 2,"name": "sam","location": "wales"}] |
POST 請求
我們可以通過向 http://localhost:3000/users 發起 POST 請求來新增心的資料到已有的資料來源中。下面是一個 POST 請求的例項：
再做一次 GET 請求你會發現我們剛剛新建的資料已經存在於 info.json 檔案中了。
| 010203040506070809101112131415161718192021222324252627 | [{"id": 1,"name": "roy","location": "india"},{"id": 2,"name": "sam","location": "wales"},{"name": "ii","location": "la","id": 7},{"name": "Shona","location": "LA","id": 8},{"name": "Shona","location": "LA","id": 9}] |
DELETE 請求
你只需要對 API 終端發起一個包好使用者 ID 的 DELETE 請求就可以從 json-server 的資料中刪除對應使用者的條目。 比如，如果你想刪除使用者 ID 為 1 的使用者，你只需要對 http://localhost:3000/users/1 發起一個 DELETE 的 請求即可。但你完成刪除後，再發起一個 GET 請求，你會發現這個使用者已經不在返回的資料當中了。
PATCH 請求
你可以通過 PATCH 請求來更新一個條目，我們需要在請求中包含需要更新條目的所有資訊。比如，如果你想更新一個使用者 ID 為 2 的使用者，你需要對 http://localhost:3000/users/2 發出下面一樣 PATCH 請求：
搜尋 json-server 可用的 REST API
使用 json-server REST API，你可以基於某些條件搜尋要查詢資料的資料。例如，要查詢具有某個特定名稱的使用者，你需要對 REST API URL 發起一個像下面一樣的 GET 請求︰
如上圖所示，對 http://localhost:3000/users?name=Shona 發起一個 GET 請求將會返回所有使用者名稱為 Shona 的使用者資料。同理你也可以搜尋其他的資料鍵。
對 REST API 終端進行全文搜尋你需要在搜尋字串新增引數 q。例如，如果你要鎖搜使用者資訊中包含 s的使用者，你的請求會像下面一樣。
處理分頁
在顯示分頁的資料時，你需要可以基於分頁需獲取一些資料。在這種情況下，json-server 提供的了 JSON 資料的分頁功能。 預設情況下，計數從 json-server 返回的資料條目數是 10。我們可以設定此限制使用 _limit 引數。
http://localhost:3000/users?_limit=5
對上面的 URL 的 GET 請求會返回五條記錄。現在要對資料進行分頁，我們需要新增另一個引數 _page 到 URL 中。_page 定義了頁面所需要獲取返回的資料頁數。
http://localhost:3000/users?_limit=5&_page=2
對上面的 URL 發起 GET 請求會返回所有資料分頁後第二頁中的五條記錄。通過改變 _page 變數，我們可以獲取所需的頁記錄。
處理排序
json-server 提供了將檢索的資料進行排序的功能。我們可以通過提供需要排序的列名稱和需要排序的順序對資料進行排序。 在預設情況下，資料按升序排序。我們可以在 URL 終端中使用關鍵字 _sort 和定義使用關鍵字 _order 來調整順序。下面是一個示例 URL:
http://localhost:3000/users?_sort=id&_order=DESC
上面的 URL 將基於 ID，對資料進行排序並它將按降序排列。
處理操作符
json-server 還提供了實用運算子找到 ID 匹配特定的正則表示式的條目或尋找兩個值範圍內條目的功能。
為了尋找一個特定範圍內的條目，我們可使用的 _gte 和 _lte 的操作符。例如，若要查詢使用者 ID 大於 1 且小於 2，發起一個 GET 請求 http://localhost:3000/users?id_gte=1&id_lte=2，如圖所示︰
如果我們想要搜尋某個特定字母開頭的名字，我們可以使用正則表示式。例如，要搜尋的名字開頭字母 sa，我們可以使用運算子 _like 使用併發起像下面一樣的 GET 請求 http://localhost:3000/users?name_like=^sa
注：translation by Xinyang Li
原文連結：
https://code.tutsplus.com/tutorials/fake-rest-api-up-and-running-using-json-server--cms-27871?ec_unit=translation-info-language
在本教程中，您知道了如何使用 json-server REST API 來建立一個模擬的資料庫並快速使用它來進行開發的需求。你也學會了如何開始使用 json-server 和對 URL 進行增刪改查的資料操作。 你知道了如何分頁，排序和搜尋偽造資料。你也知道了如何通過正則表示式來搜尋資料。
你開始使用 json-server 或者其他的模擬 REST API 伺服器來進行偽造資料建立了嗎？你有什麼感覺？請在下面的評論中告訴我們你的感受。
公眾號
前端達人
長按識別左邊二維碼關注我