简介
JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。
一、安装 JSON-Serve (Install JSON Server)
使用 npm 或 yarn 工具安装
npm install -g json-server
yarn global add json-server
文件的目录结构:
启动 json-server
json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。
json-serve 命令参数,习惯使用help查看命令详情
json-server --help
bin.js [options] <source>
选项:
-c, --config Path to config file[默认值: "json-server.json"]
-p, --port Set port [默认值: 3000]
-H, --host Set host [默认值: "localhost"]
-w, --watch Watch file(s) [布尔]
-r, --routes Path to routes file
-m, --middlewares Paths to middleware files [数组]
-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 [默认值: "."]
-d, --delay Add delay to responses (ms)
-i, --id Set database id property (e.g. _id)
[默认值: "id"]
--foreignKeySuffix, --fks Set foreign key suffix (e.g._id as in post_id)
[默认值: "Id"]
-q, --quiet Suppress log messages from output [布尔]
-h, --help 显示帮助信息 [布尔]
-v, --version 显示版本号 [布尔]
示例:
bin.js db.json
bin.js file.js
bin.js
http://example.com/db.json
https://Github.com/typicode/json-server
创建 db-api.json 文件内容如下
{
"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"
}
}
}
运行 json-server
json-server --watch db-api.json
json-server --watch db-api.json --port 8080
# 创建配置文件 config.json,内容如下:
{
"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/ 显示效果
全部查询
点击 /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
}
]
分页查询
默认后台处理分页参数为: _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
}
]
排序
参数: _sort设定排序的字段, _order设定排序的方式(默认升序 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
支持多个字段排序:
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
任意切片数据(Slice)
http://localhost:3000/goods?_start=3&_end=7
全文检索
可以通过q参数进行全文检索
http://localhost:3000/goods?q=6