利用json-server搭建本地資料接口

1、簡介

前端在開發前後端分離項目中，往往後端接口沒有那麼快提供，此時前端同學就需要根據後端提供的接口文檔來模拟接口的json資料，此時就可以利用json-server搭建一個本地的資料接口。

json-erver 是一個 Node 子產品，運作 Express 伺服器，在前端開啟的本地服務，提供json資料。

包位址：https://www.npmjs.com/package/json-server。

2、安裝

建立檔案夾json-server-demo(不要使用json-server)，初始化package,json檔案：

npm init --yes           

安裝json-server

npm i json-server --save           

打開package,json，修改scripts内容：

"dev": "json-server --watch db.json"           

3、建立db.json

在根目錄json-server-demo下db.json

加入測試内容：

{
  "users": [
    {
      "id": 1,
      "name": "jason",
      "phone": "17700991122",
      "age": "31"
    },
    {
      "id": 2,
      "name": "river",
      "phone": "15600225566",
      "age": "28"
    },
    {
      "id": 3,
      "name": "lucy",
      "phone": "13155889966",
      "age": "29"
    },
    {
      "id": "4",
      "name": "grance",
      "phome": "13355669988",
      "age": "22"
    }
  ]
}           

4、開啟json-server

npm run dev           

如上圖服務啟動成功！

浏覽器輸入：http://localhost:3000，通路到目前服務首頁：

浏覽器輸入：http://localhost:3000/db，通路所有json資料：

浏覽器輸入：http://localhost:3000/users，通路users資料：

5、資料查詢

5.1 按id過濾

http://localhost:3000/users/1

5.2 分頁查詢

http://localhost:3000/users?_page=1&_limit=2

5.3 模糊查詢

http://localhost:3000/users?q=ja

6、新增資料-POST

使用postman請求接口：http://localhost:3000/users

請求頭：Content-Type：application/json

請求方式：POST

body選擇raw，JSON格式。

請求資料如下：

{
  "id": 4,
  "name": "Lucy",
  "phone": "18977882233",
  "age": "22"
}           

如圖，發送請求添加成功，此時再通路http://localhost:3000/users，會多一條剛才新增的資料。

7、修改資料-PUT、PATCH

請求接口：http://localhost:3000/users/4

請求頭：Content-Type：application/json

請求方式：POST

body選擇raw，JSON格式。

請求資料如下：

{
  "id": 4,
  "name": "Lily",
  "phone": "18977880000",
  "age": "25"
}           

put可以将資料改為指定json資料，如果隻更改單個字段值，可以使用patch。

如果指向更改age，将請求方式改為patch，請求資料：

{
  "age": "25"
}           

8、删除資料-DELETE

請求接口：http://localhost:3000/users/4

請求方式：DELETE

即可删除id=4的json資料

9、總結

利用json-server搭建的本地資料接口接口滿足前端開發時所需資料，以上示例即可滿足大多數場景，若幹想要造更多的資料，可以結合mockjs一起使用。

以上代碼可托管在gitee：https://gitee.com/river106/json-server-demo

原文連結：利用json-server搭建本地資料接口 - river's blog