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.jsonjson-server http://jsonplaceholder.typicode.com/db
作為靜態文件伺服器
創建一個public目錄，創建一個內容為hello world的index.html文件。
mkdir publicecho 'hello world' > public/index.htmljson-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的官網查閱，希望本文對你有所幫助。