json-server是一款json數據服務器，可以對json文件、js腳本生成的json數據、遠程json數據進行RESTFUL風格的增刪改查操作，可以通過參數、分頁、排序、全文搜索、關聯查詢、范圍查詢等進行復雜查詢，對開發者特別是前端開發者是一款非常好用的開發工具。

官網：
https://www.npmjs.com/package/json-server

官網

下面我們來介紹具體的用法，

首先確保你本地安裝了node.js。

安裝json-server

npm install -g json-server

創建一個json文件 db.json

{
  "posts": [
    { "id": 1, "title": "測試標題1", "author": "張三" },
    { "id": 2, "title": "測試標題2", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "body": "這里是內容體1", "postId": 1 },
    { "id": 2, "body": "這里是內容體2", "postId": 2 }
  ],
  "profile": { "name": "測試json" }
}

指定json文件運行服務，命令行運行以下命令

json-server --watch db.json

運行服務

服務器就這么搭建好了，就是這么的快，可能還不要3分鐘。

增刪改查-請求示例

請求方式遵循restful風格，

• GET-查詢、
• POST-新增、
• PUT-修改、
• PATCH-修改屬性、
• DELETE-刪除

get請求-查詢

可以看到資源路徑都列在控制臺里了，瀏覽網址
http://localhost:3000/posts ，出現以下結果，posts路徑就是json文件里的key

[
  {
    "id": 1,
    "title": "測試標題1",
    "author": "張三"
  },
  {
    "id": 2,
    "title": "測試標題2",
    "author": "李四"
  }
]

POST請求-新增

使用POST請求會添加一條新記錄，如POST請求：
http://localhost:3000/posts，返回新記錄的id。

{
    "id": 3
}

json文件也被更改

{
  "posts": [
    {
      "id": 1,
      "title": "測試標題1",
      "author": "張三"
    },
    {
      "id": 2,
      "title": "測試標題2",
      "author": "李四"
    },
    {
      "id": 3
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "這里是內容體1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "這里是內容體2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "測試json"
  }
}

PUT請求-修改

PUT請求會修改一條記錄，如請求：
http://localhost:3000/posts/3，我們在請求body里輸入以下修改內容：

{
    "title":"這是修改的內容",
    "author":"王五"
}

json文件變成了

{
  "posts": [
    {
      "id": 1,
      "title": "測試標題1",
      "author": "張三"
    },
    {
      "id": 2,
      "title": "測試標題2",
      "author": "李四"
    },
    {
      "title": "這是修改的內容",
      "author": "王五",
      "id": 3
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "這里是內容體1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "這里是內容體2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "測試json"
  }
}

PATCH請求-修改單個屬性

PATCH與PUT的區別在于，PUT的請求內容需要包含整個對象除id外的所有屬性，PATCH的請求內容可以是單個屬性。

比如我們PATCH請求：
http://localhost:3000/posts/3 ，body為

{
    "title":"這是修改的內容xxxx"
}

json文件里id為3的記錄僅title屬性發生改變，其他字段不變

{
  "posts": [
    {
      "id": 1,
      "title": "測試標題1",
      "author": "張三"
    },
    {
      "id": 2,
      "title": "測試標題2",
      "author": "李四"
    },
    {
      "title": "這是修改的內容xxxx",
      "author": "王五",
      "id": 3
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "這里是內容體1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "這里是內容體2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "測試json"
  }
}

DELETE請求-刪除

DELETE請求會刪除一條數據，如請求：
http://localhost:3000/posts/3 。

刪除后的json文件內容發生改變，可以看到id為3的記錄沒了：

{
  "posts": [
    {
      "id": 1,
      "title": "測試標題1",
      "author": "張三"
    },
    {
      "id": 2,
      "title": "測試標題2",
      "author": "李四"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "這里是內容體1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "這里是內容體2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "測試json"
  }
}

過濾id

瀏覽
http://localhost:3000/posts/1 ，代表讀取post里id為1的那條數據，注意不是代表第1條，而是id為1的那條。

{
  "id": 1,
  "title": "測試標題1",
  "author": "張三"
}

過濾參數

瀏覽
http://localhost:3000/posts?author=張三

[
  {
    "id": 1,
    "title": "測試標題1",
    "author": "張三"
  }
]

如果有多級也可以用“.”+屬性名查詢如
http://localhost:3000/posts?author.name=張三。

排序

通過“_sort”指定排序屬性和“_order”指定asc順序還是desc倒序查詢，如：
http://localhost:3000/posts?_sort=id&_order=desc 。

分頁

通過“_page”和“_limit”進行分頁查詢，如查詢第一頁，每頁20條查詢寫法：
http://localhost:3000/posts?_page=1&_limit=20

截取部分

通過“_start”、“_end”和“_limit”參數查詢，如從20條開始查詢10條數據：
http://localhost:3000/posts/1/comments?_start=20&_limit=10

不等于查詢

通過“屬性名_ne”寫法如：
http://localhost:3000/posts?id_ne=1

[
  {
    "id": 2,
    "title": "測試標題2",
    "author": "李四"
  }
]

大于等于/小于等于查詢

通過“屬性名_gte”查詢大于等于，通過“屬性名_lte”查詢小于等于，寫法如：
http://localhost:3000/posts?views_gte=10&views_lte=20

[]

like查詢

通過“屬性名_like”的寫法查詢如
http://localhost:3000/posts?title_like=標題1

[
  {
    "id": 1,
    "title": "測試標題1",
    "author": "張三"
  }
]

全文搜索

通過q查詢參數如：
http://localhost:3000/posts?q=標題

[
  {
    "id": 1,
    "title": "測試標題1",
    "author": "張三"
  },
  {
    "id": 2,
    "title": "測試標題2",
    "author": "李四"
  }
]

關聯查詢

通過_embed參數請求如：
http://localhost:3000/posts?_embed=comments ，代表posts關聯comments。

[
  {
    "id": 1,
    "title": "測試標題1",
    "author": "張三",
    "comments": [
      {
        "id": 1,
        "body": "這里是內容體1",
        "postId": 1
      }
    ]
  },
  {
    "id": 2,
    "title": "測試標題2",
    "author": "李四",
    "comments": [
      {
        "id": 2,
        "body": "這里是內容體2",
        "postId": 2
      }
    ]
  }
]

指定端口

命令增加 --port參數

json-server --watch db.json --port 3004

使用js腳本生成數據代替json

創建一個index.js文件用于生成數據

module.exports = () => {
  const data = { users: [] }
  // Create 1000 users
  for (let i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}

運行服務指定js文件

json-server index.js

使用遠程地址加載數據

json-server http://example.com/file.json
json-server http://jsonplaceholder.typicode.com/db

作為靜態文件服務器

創建一個public目錄，創建一個內容為hello world的index.html文件。

mkdir public
echo 'hello world' > public/index.html
json-server db.json

訪問 http://localhost:3000/ ，根路徑會默認顯示public目錄下的內容，會顯示index.html的內容。

'hello world'

也可以通過--static參數指定其他路徑的目錄

json-server db.json --static ./some-other-dir

自定義請求路由

創建一個 routes.json文件用于定義請求路由，每個路徑都由 / 開頭。

{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles\?id=:id": "/posts/:id"
}

啟動服務時指定請求路由定義文件

json-server db.json --routes routes.json

以下訪問左邊的路徑分別對應右邊的原始請求效果

• /api/posts ==》 /posts
• /api/posts/1 ==》 /posts/1
• /posts/1/show ==》 /posts/1
• /posts/JAVAscript ==》 /posts?category=JavaScript
• /articles?id=1 ==》 /posts/1

更多功能可以通過json-server的官網查閱，希望本文對你有所幫助。