作為一個前端開發工程師，在後端還沒有給我們接口的時候，我們大多數情況都是寫一些死資料來作為占位，但這樣我們無法測試是否真的能調用資料，我們可以利用json-server起一個本地的服務，到時候後端給我們接口的時候，我們在把API換成後端給我們的接口。我們隻需要提供一個json檔案，填充一些資料就可以模拟出RESTful API的接口。
一、啟動伺服器
node環境安裝
json-server 需要通過 npm 下載下傳，npm 依賴在 node 中。
注意：node 版本一定要 12 以上。不然會報以下錯誤：
json-server requires at least version 12 of Node, please upgrade
全局安裝json-server
建議全局安裝，因為以後你可能會對 json-server 産生依賴。全局安裝方式：
npm install -g json-server
建立資料庫
建立一個 json 檔案，再填入資料即可。建立的json檔案中，必須要有id屬性，否則後續發送請求時會報錯。
啟動服務
進入目前目錄，打開終端輸入以下指令即可
json-server --watch stu.json --port 5656
二、伺服器接口的調用
2.1 查（get）
json-server 查詢資料需要使用 GET 方法。剛剛我們建立了2個接口，我們可以直接在浏覽器、postman或者自己寫JS代碼擷取資料。
例如：
http://localhost:5656/stus
ID查詢
http://localhost:5656/stus/{id}
條件查詢
1.單一條件查詢
查找 name 為 徐飛 的所有資料。
http://localhost:5656/stus?name=徐飛
2.多條件查詢（且）
這次要篩選的是 name = 張飛 且 age = 12 的資料，符合條件篩選的時候，使用 & 号添加條件。
http://localhost:5656/stus?name=張飛&age=12
3.多條件查詢（或）
這次要篩選的是 age = 12 和 age = 13 這兩條資料出來。重複使用 age ，會把符合條件的都篩查出來。
http://localhost:5656/stus?age=12&age=13
分頁查詢
使用 _page 和 _limit(可選) 對資料進行分頁。需要注意，_page 和 _limit 前面都要有下劃線。_page：頁碼，_limit：每頁的資料量。
需要擷取第2頁的資料，每頁3條：
http://localhost:5656/stus?_page=2&_limit=3
2.2 增（post）
json-server 新增資料需要使用 POST 方法。
這裡使用 post 方法向 /stus 接口傳輸資料，/stus 原本的資料結構是包含 id、name、age、class 四個字段，id 預設是自增主鍵，不傳的話會預設增加。
需要注意的是：
json-server 預設情況下并不會限制你上傳的資料格式和類型，是以需要你嚴格遵循自己設計的資料格式來添加和修改。
2.3 删（delete）
json-server 删除資料需要使用 DELETE 方法。
http://localhost:5656/stus/{id}
傳回的data此時為一個空對象。
此時打開 db.json 就會發現剛剛删除的那條資料已經沒了。
需要注意的是：删除成功 Status 會傳回 200；如果删除的資料不存在會傳回 404。
2.4 改（put 和 patch）
修改資料分為2個方法：
put ：覆寫
patch ：更新
http://localhost:5656/stus/{id}
當發送put請求時
例：把 id 為 01 的資料改成 { "name": "李浩","age":12, "class": "211班" }
此時打開 stu.json 就可以看到 id 為 01 的資料已經發生變化。
注意：原本的資料包含 name、age 和 class ，使用 put 時必須把這三個字段都寫上，不然會删掉沒傳的字段。這就是 “覆寫” 的意思。
當發送patch請求時
例：使用 patch 方法把 id 為 02 的資料 age 字段的值更改成 23。
打開 stu.json 檔案檢視一下，會發現隻改了 id 為 02 的 age 值，并沒有删掉其他字段的資料。
總結
顧名思義，json-server就是個存儲json資料的server。json-server主要的作用是搭建一台JSON伺服器，測試一些業務邏輯，便于調試調用。前後端分離的開發模式下前端使用 json-server模拟資料接口, 這時候 後端接口還沒有開發出來, 前端又需要資料進行開發。這種情況下就需要前端先行模拟資料, 等後端接口寫好進行 targetUrl 進行替換。