使用 json-server 來建立一個模擬 API

在本教程中,您會看到如何經過 json-server 來設置和使用模擬的 REST API,並可使用它來完成移動應用或 Web 應用程序的開發html

 

什麼是 REST?

REST 是 Representational State Transfer(具象狀態傳輸) 的縮寫。它是一種用於傳遞信息的架構風格。它使經過簡單的 HTTP 來在不一樣的軟件或程序中互相專遞信息變成可能。 咱們針對一個 URL 經過不一樣類型的 HTTP 請求來對對應的用戶信息(資源)進行對應的請求(例如 GET 爲獲取,POST 爲建立,DELETE 爲刪除,等),而不是使用不一樣的 URL 對資源進行直接的請求。正則表達式

舉個例子,若是須要刪除一個用戶。咱們須要作的僅僅是對 /user/10 發出一個 `DELETE` 的請求,而不是對 /deleteuser?id=10 發出一個 GET 請求。 (這樣的操做更簡潔也更有意義)npm

爲何咱們須要一個模擬 API?

REST API 提供了移動應用以及 Web 應用的後端支持。有些時候當你在進行開發時,你須要的後端接口可能尚未完成對於開發所須要的支持。 咱們須要一個模擬 API 提供一些僞造數據來模擬真實環境下的移動應用和 Web 應用的使用場景。json

這就是咱們爲何須要模擬 REST API 的緣由,然而 json-server 能夠很輕易的知足咱們的這些需求。後端

讓咱們開始吧

在咱們開始以前咱們須要經過 Node 來安裝 json-serverapi

npm install -g json-server

 接下來咱們須要建立一個 JSON 文件,它包含着咱們開發所須要的僞造數據。好比我須要一些 JSON 數據,其中包含了了一些基礎的用戶信息例如 ID,姓名,地址等等。咱們將新建一個包含這些信息的文件並將其命名爲 info.json。架構

 

{
    "users": [{
        "id": 1,
        "name": "kobe",
        "location": "los"
    }, {
        "id": 2,
        "name": "james",
        "location": "los"
    }]
}

 下面的命令在終端運行 json-server 並將 info.json 設置爲數據源,這時模擬 API 應該已經容許在 http://localhost:3000 端口。併發

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 請求會顯示如今已經存在的信息。spa

 

 

POST 請求

咱們能夠經過向  http://localhost:3000/users 發起 POST 請求來添加心的數據到已有的數據源中。下面是一個 POST 請求的實例:

 

 

再作一次 GET 請求你會發現咱們剛剛新建的數據已經存在於 info.json 文件中了。

 

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=james 發起一個 GET 請求將會返回全部用戶名爲 james 的用戶數據。同理你也能夠搜索其餘的數據鍵。

對 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,如圖所示︰

 

若是咱們想要搜索某個特定字母開頭的名字,咱們可使用正則表達式。例如,要搜索的名字開頭字母 james,咱們可使用運算符 _like 使用併發起像下面同樣的 GET 請求 http://localhost:3000/users?name_like=^james

 

 參考資料

https://code.tutsplus.com/tutorials/fake-rest-api-up-and-running-using-json-server--cms-27871?ec_unit=translation-info-language

相關文章
相關標籤/搜索