JSON Sever 簡介

JSON Sever[1] 是一個可以快速幫助你建設(shè)一個基于 JSON 文件的數(shù)據(jù)庫服務(wù)。

安裝完 json-server 依賴后，你只需要提供一個 db.json 文件，就能擁有一個功能完善的 REST API 資源服務(wù)。非常適合 Mock 數(shù)據(jù)服務(wù)的搭建和處理工作。目前已在 Github 上收獲超 72.2k 顆星了。

圖片

著名的 JSONPlaceholder 模擬服務(wù)[2]就是基于 JSON Sever 搭建而成的免費(fèi)服務(wù)。

圖片

下面就來介紹。

項目初始化和啟動

初始化項目：

mkdir json-server-demo
cd mkdir json-server-demo
pnpm init

安裝 My JSON Server 服務(wù)器，并使用 VS Code 打開：

pnpm install json-server
code .

項目中添加數(shù)據(jù)庫文件 db.json：

{
  "posts": [
    {
      "id": "1",
      "title": "a title",
      "views": 100
    },
    {
      "id": "2",
      "title": "another title",
      "views": 200
    }
  ],
  "comments": [
    {
      "id": "1",
      "text": "a comment about post 1",
      "postId": "1"
    },
    {
      "id": "2",
      "text": "another comment about post 1",
      "postId": "1"
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

這里我們定義了 3 個終端資源：posts、comments 和 profile，你可以把這 3 個資源簡單理解成是關(guān)系型數(shù)據(jù)庫里的 3 個表格。

編輯 package.json 添加腳本，啟動項目：

{
  "scripts": {
    "server": "json-server db.json"
  },
}

npm run server

終端輸出：

圖片

可以看到 db.json 中的 3 個終端資源分別映射成了 3 個終端路由：/posts、/comments、/profile。接下來，我們就可以針對這 3 個終端路由進(jìn)行 CURL（增刪改查了）了。

增刪改查 /posts 路由

3 個終端資源我們就不全部舉例了，就以 /posts 為例。攜帶 posts 數(shù)據(jù)的 db.json 在 json-server 啟動后，開箱就會提供以下路由的支持：

# 獲取全部資源
GET    /posts
# 獲取某個資源
GET    /posts/:id
# 創(chuàng)建資源
POST   /posts
# 更新資源（全量）
PUT    /posts/:id
# 更新資源（局部）
PATCH  /posts/:id
# 刪除資源
DELETE /posts/:id

下面在終端使用 curl 測試。

1、獲取資源（全部）

curl http://localhost:3000/posts

[
  {
    "id": "1",
    "title": "a title",
    "views": 100
  },
  {
    "id": "2",
    "title": "another title",
    "views": 200
  }
]

2、獲取資源（某一個）

curl http://localhost:3000/posts/1

{
  "id": "1",
  "title": "a title",
  "views": 100
}

3、創(chuàng)建資源

curl -X POST -H "Content-Type: application/json" -d "{\"id\":\"3\", \"title\":\"foo\", \"views\": 0}" http://localhost:3000/posts

發(fā)現(xiàn)，db.json 中增加了 1 條 id 為 3 的記錄。

圖片

注意，如果重復(fù)執(zhí)行以上 curl 創(chuàng)建指令會在 db.json 中增加 2 條同樣的記錄。JSON Sever 并不會幫我們做校驗處理，所以在創(chuàng)建資源是要保證你的數(shù)據(jù) id 的唯一性。

4、更新資源（全量）

curl -X PUT -H "Content-Type: application/json; charset=UTF-8" -d "{\"title\": \"foo\", \"views\": 101}" http://localhost:3000/posts/1

發(fā)現(xiàn)，db.json 中 id 為 1 的記錄被更新了。

圖片

5、更新資源（局部）

curl -X PATCH -H "Content-Type: application/json; charset=UTF-8" -d "{\"title\": \"bar\"}" http://localhost:3000/posts/1

db.json 中 id 為 1 的記錄被更新了。

圖片

6、刪除資源

curl -X DELETE http:/localhost:3000/posts/1

db.json 中 id 為 1 的記錄被刪除了。

圖片

高級用法

當(dāng)然，除了簡單的增刪改查之外。這些資源還支持過濾、分頁等功能。

1、過濾

比如根據(jù)用戶 id 過濾：

curl -X GET http://localhost:3000/posts?id=3

[
  {
    "id": "3",
    "title": "foo",
    "views": 0
  }
]

甚至支持范圍過濾：

curl -X GET http://localhost:3000/posts?views_gt=3

[
  {
    "id": "2",
    "title": "another title",
    "views": 200
  }
]

_gt 表示“great than”，也就是 > 的意思。?views_gt=3 就表示過濾出閱讀量過 3 的 post。

全部的過濾符號包括：

• _gt → >
• _lt → <
• _lte → <=
• _gte → >=
• _ne → !=

2、分頁

JSON Server 還支持以 page、per_page（默認(rèn) 10） 參數(shù)的形式查詢分頁數(shù)據(jù)。

瀏覽器訪問 http://localhost:3000/posts?_page=1&_per_page=1

查看效果：

圖片

如此，我們便查詢到了第 1 頁數(shù)據(jù)。返回的分頁數(shù)據(jù)放在 data 中，數(shù)據(jù)中總共有 2 條數(shù)據(jù)（items），按照每頁一條數(shù)據(jù)總共 2 頁數(shù)據(jù)（pages），下一頁是第 2 頁（next）。

其他更多用法[3]，大家可以參照官方倉庫的 README 進(jìn)行查看，常用功能就是以上這些了。

總結(jié)

本文向大家介紹 JSON Sever 這一個基于 JSON 文件幫助你快速搭建 REST API 服務(wù)的工具庫。

JSON Sever 的安裝和使用起來起來非常方便，數(shù)據(jù)的增刪改查都是通過修改背后的 db.json 文件內(nèi)容實(shí)現(xiàn)的，非常適合 Mock 數(shù)據(jù)服務(wù)的搭建。

當(dāng)然，我甚至認(rèn)為，一定程度上它也可以作為一個小型、簡易的數(shù)據(jù)存儲使用。

好了，希望本文的介紹會對你的工作或者生活有所幫助，感謝你的閱讀，再見。

參考資料

[1]JSON Sever: https://github.com/typicode/json-server

[2]JSONPlaceholder 模擬服務(wù): https://jsonplaceholder.typicode.com/guide/

[3]其他更多用法: https://github.com/typicode/json-server?tab=readme-ov-file#params