簡(jiǎn)介
JSON-Server 是一個(gè) Node 模塊，運(yùn)行 Express 服務(wù)器，你可以指定一個(gè) json 文件作為 api 的數(shù)據(jù)源。
一、安裝 JSON-Serve (Install JSON Server)
使用 npm 或 yarn 工具安裝
npm install -g json-server
yarn global add json-server
文件的目錄結(jié)構(gòu)：
啟動(dòng) json-server
json-server可以直接把一個(gè)json文件托管成一個(gè)具備全RESTful風(fēng)格的API,并支持跨域、jsonp、路由訂制、數(shù)據(jù)快照保存等功能的 web 服務(wù)器。
json-serve 命令參數(shù)，習(xí)慣使用help查看命令詳情
json-server --help
bin.js [options] <source>
選項(xiàng)：
-c, --config Path to config file[默認(rèn)值: "json-server.json"]
-p, --port Set port [默認(rèn)值: 3000]
-H, --host Set host [默認(rèn)值: "localhost"]
-w, --watch Watch file(s) [布爾]
-r, --routes Path to routes file
-m, --middlewares Paths to middleware files [數(shù)組]
-s, --static Set static files directory
--read-only, --ro Allow only GET requests [布爾]
--no-cors, --nc Disable Cross-Origin Resource Sharing [布爾]
--no-gzip, --ng Disable GZIP Content-Encoding [布爾]
-S, --snapshots Set snapshots directory [默認(rèn)值: "."]
-d, --delay Add delay to responses (ms)
-i, --id Set database id property (e.g. _id)
[默認(rèn)值: "id"]
--foreignKeySuffix, --fks Set foreign key suffix (e.g._id as in post_id)
[默認(rèn)值: "Id"]
-q, --quiet Suppress log messages from output [布爾]
-h, --help 顯示幫助信息 [布爾]
-v, --version 顯示版本號(hào) [布爾]
示例：
bin.js db.json
bin.js file.js
bin.js
http://example.com/db.json
https://Github.com/typicode/json-server
創(chuàng)建 db-api.json 文件內(nèi)容如下
{
"goods": [
{ "id": 1, "name": "蘋果", "price": 10 },
{ "id": 2, "name": "橘子", "price": 15 },
{ "id": 3, "name": "西瓜", "price": 8 },
{ "id": 4, "name": "橘子1", "price": 15 },
{ "id": 5, "name": "橘子2", "price": 15 },
{ "id": 6, "name": "橘子3", "price": 15 },
{ "id": 7, "name": "橘子4", "price": 15 },
{ "id": 8, "name": "橘子5", "price": 15 },
{ "id": 9, "name": "橘子6", "price": 15 }
],
"shoppingCart": [
{ "id": 3, "name": "西瓜", "price": 8, "amount": 1 },
{ "id": 2, "name": "橘子", "price": 15, "amount": 2 },
{ "id": 1, "name": "蘋果", "price": 10, "amount": 2 }
],
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" },
"getUserInfo": {
"username": "張三",
"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjpbeyJuYW1lIjoiaGt6In0seyJwd2QiOiIxMjM0NTYifV0sImlhdCI6MTY5ODM3ODE4OCwiZXhwIjoxNzY3MTEwMzk5LCJhdWQiOiIxMjM0NTYiLCJpc3MiOiJkZWx5Iiwic3ViIjoiMTIzNDU2In0.AXQRLBr7o71C8Uv5BzvcKX5osPkFgOKJwHTGzSvTOgE",
"refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjpbeyJuYW1lIjoiaGt6In0seyJwd2QiOiIxMjM0NTYifV0sImlhdCI6MTY5ODM3ODE4OCwiZXhwIjoxNzY3MTEwMzk5LCJhdWQiOiIxMjM0NTYiLCJpc3MiOiJkZWx5Iiwic3ViIjoiMTIzNDU2In0.AXQRLBr7o71C8Uv5BzvcKX5osPkFgOKJwHTGzSvTOgE",
"roles": ["common","admin","edit","update","select","delete" ]
},
"login": {
"data":{
"username": "張三",
"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjpbeyJuYW1lIjoiaGt6In0seyJwd2QiOiIxMjM0NTYifV0sImlhdCI6MTY5ODM3ODE4OCwiZXhwIjoxNzY3MTEwMzk5LCJhdWQiOiIxMjM0NTYiLCJpc3MiOiJkZWx5Iiwic3ViIjoiMTIzNDU2In0.AXQRLBr7o71C8Uv5BzvcKX5osPkFgOKJwHTGzSvTOgE",
"refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjpbeyJuYW1lIjoiaGt6In0seyJwd2QiOiIxMjM0NTYifV0sImlhdCI6MTY5ODM3ODE4OCwiZXhwIjoxNzY3MTEwMzk5LCJhdWQiOiIxMjM0NTYiLCJpc3MiOiJkZWx5Iiwic3ViIjoiMTIzNDU2In0.AXQRLBr7o71C8Uv5BzvcKX5osPkFgOKJwHTGzSvTOgE",
"roles": ["common","admin","edit","update","select","delete"]
},
"code":0,
"status":0,
"message":"成功"
},
"token": {
"header": { "alg": "HS256", "typ": "JWT" },
"payload": {
"data": { "name": "張三" , "pwd": "123456" },
"iat": 1698378188,
"exp": 1767110399,
"aud": "123456",
"iss": "zhangshan",
"sub": "123456"
}
}
}
運(yùn)行 json-server
json-server --watch db-api.json
json-server --watch db-api.json --port 8080
# 創(chuàng)建配置文件 config.json，內(nèi)容如下：
{
"port": 8989,
"watch": true,
"read-only": false,
"no-cors": false,
"no-gzip": false
}
# 指定配置文件
json-server --ro --watch -c config.json db-api.json
{_}/ hi!
Loading db-api.json
DoneResources
http://localhost:3000/goods
http://localhost:3000/shoppingCart
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
http://localhost:3000/getUserInfo
http://localhost:3000/login
http://localhost:3000/tokenHome
http://localhost:3000Type s + enter at any time to create a snapshot of the database
Watching...
打開瀏覽器，輸入: http://localhost:3000/ 顯示效果
全部查詢
點(diǎn)擊 /login object
http://localhost:3000/login
{
"data": {
"username": "張三",
"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjpbeyJuYW1lIjoiaGt6In0seyJwd2QiOiIxMjM0NTYifV0sImlhdCI6MTY5ODM3ODE4OCwiZXhwIjoxNzY3MTEwMzk5LCJhdWQiOiIxMjM0NTYiLCJpc3MiOiJkZWx5Iiwic3ViIjoiMTIzNDU2In0.AXQRLBr7o71C8Uv5BzvcKX5osPkFgOKJwHTGzSvTOgE",
"refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjpbeyJuYW1lIjoiaGt6In0seyJwd2QiOiIxMjM0NTYifV0sImlhdCI6MTY5ODM3ODE4OCwiZXhwIjoxNzY3MTEwMzk5LCJhdWQiOiIxMjM0NTYiLCJpc3MiOiJkZWx5Iiwic3ViIjoiMTIzNDU2In0.AXQRLBr7o71C8Uv5BzvcKX5osPkFgOKJwHTGzSvTOgE",
"roles": [
"common",
"admin",
"edit",
"update",
"select",
"delete"
]
},
"code": 0,
"status": 0,
"message": "成功"
}
條件查詢
http://localhost:3000/goods
[
{
"id": 1,
"name": "蘋果",
"price": 10
},
{
"id": 2,
"name": "橘子",
"price": 15
},
{
"id": 3,
"name": "西瓜",
"price": 8
}
]
http://localhost:3000/goods?id=1
[
{
"id": 1,
"name": "蘋果",
"price": 10
}
]
分頁查詢
默認(rèn)后臺(tái)處理分頁參數(shù)為： _page 第幾頁， _limit一頁多少條。
http://localhost:3000/goods?_page=2&_limit=5
[
{
"id": 6,
"name": "橘子3",
"price": 15
},
{
"id": 7,
"name": "橘子4",
"price": 15
},
{
"id": 8,
"name": "橘子5",
"price": 15
},
{
"id": 9,
"name": "橘子6",
"price": 15
}
]
排序
參數(shù)： _sort設(shè)定排序的字段, _order設(shè)定排序的方式（默認(rèn)升序 asc, desc）
http://localhost:3000/goods?_page=2&_limit=5&_sort=id
http://localhost:3000/goods?_page=2&_limit=5&_sort=id&_order=desc
http://localhost:3000/goods?_page=2&_limit=5&_sort=id&_order=asc
支持多個(gè)字段排序：
http://localhost:3000/goods?_page=2&_limit=5&_sort=id,price&_order=asc
http://localhost:3000/goods?_limit=5&_sort=price,id&_order=asc,asc
任意切片數(shù)據(jù)(Slice)
http://localhost:3000/goods?_start=3&_end=7
全文檢索
可以通過q參數(shù)進(jìn)行全文檢索
http://localhost:3000/goods?q=6
