文章目錄

• 建立db.json
• 使用WebStorm的REST Client操作JSON Server
• 資料查詢
• 插入資料
• 修改資料
• 刪除操作
• 生成資料儲存快照

建立db.json

  在我們使用JSON Server時非常簡單，只需要在專案根目錄中建立一個獨立的db.json檔案即可。其原始碼如下：

{
  "people":[
    {
      "id":0
    ,"name":"John"
    }
  ]
}

使用WebStorm的REST Client操作JSON Server

  在我們的WebStorm中雙擊shift按鍵，在開啟的搜尋框中輸入REST即可在相應的搜尋結果中檢視到REST Client，如下圖所示：

  選擇圖示選項，其開啟的操作面板如下所示：

  在控制檯中輸入JSON Server的啟動命令，其啟動命令如下：

json-server db.json

  其啟動的結果如下：

資料查詢

  使用REST Client進行資料查詢時，是在Host/port文字框中輸入http://localhost:3000/people點選左側的執行圖示，其展示的結果如下：

  從上面我們可以看出，REST Client

插入資料

  點選REST Client的Request面板，在Headers面板中輸入name值為Content-Type，Value值為application/json；將HTTP method的請求方式由GET改成POST；將Request Body面板選中Text，在其中輸入{"name":"Henry"}，其內容如下所示：

  點選左側的執行按鈕，其結果如下：

  點選開啟db.json檔案，我們在這裡可以看到，剛才的POST

  如果我們多點選幾次，我們會發現，其會在db.json中插入多條id值不同的資料，這說明我們的插入操作id是能夠實現自增的。

修改資料

  與上面的POST請求操作相似，假如說我們想要修改db.json中的第三條資料，我們這裡這麼做：將此處的POST請求更改成PUt；將之前的Request Body內容更改成現在的{"name":"Frank"}；將Host/port的請求路徑更改成http://localhost:3000/people/2如下所示：

  點選執行按鈕，其展示的結果如下：

  當我們再次檢視db.json檔案時，其內容變更為如下：

{
  "people": [
    {
      "id": 0,
      "name": "John"
    },
    {
      "name": "Henry",
      "id": 1
    },
    {
      "name": "Frank",
      "id": 2
    }
  ]
}

刪除操作

  執行刪除操作非常簡單，就是在上面的修改操作的基礎上，將請求方式由PUT更改成DEKETE。這樣，上面的第三條資料將會被刪除

  刪除後的結果如下：

{
  "people": [
    {
      "id": 0,
      "name": "John"
    },
    {
      "name": "Henry",
      "id": 1
    }
  ]
}

生成資料儲存快照

  在我們上面的CRUD資料操作過程中，如果我們想要將中間的資料過程進行相應的儲存，那也是可以的，JSON Server給我們提供了一個生成儲存快照的方法：

  通過在控制檯中輸入s字串，然後點選回車按鈕，即可將當前的資料狀態儲存為快照，如下圖所示：