安装
$ npm install -g json-server
资源的使用
1. json文件源
$ json-server db.json
$ json-server --host 192.168.1.102 -p 6000 db.json
注意：如不使用--host则只绑定在localhost上
- 必须是对象格式
- 需要有id,名字默认是id
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
2. url 源
$ json-server http://example.com/file.json
$ json-server http://jsonplaceholder.typicode.com/db
- 必须是对象格式
- 需要有id,名字默认是id
3. js模块源
格式：
// 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
}
启动：
$ json-server index.js
过滤方式（Filter）
GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode
分页方式（Paginate）
GET /posts?_page=7
GET /posts?_page=7&_limit=20
排序
GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc
// 多排序
GET /posts?_sort=user,views&_order=desc,asc
切片(Slice)
GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10
全文检索（Full-text search）
GET /posts?q=internet
静态网页服务器
- 直接使用
./public文件夹下的静态资源即可
mkdir public
echo 'hello world' > public/index.html
json-server db.json
- 指定静态资源：
json-server db.json --static ./some-other-dir
映射成为新的url资源
- Create a
routes.jsonfile：
{
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/posts/:category": "/posts?category=:category",
"/articles\\?id=:id": "/posts/:id"
}
- Start json-server:
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
定制请求和响应
// hello.js
module.exports = (req, res, next) => {
res.header('X-Hello', 'World')
next()
}
启动方式：
json-server db.json --middlewares ./hello.js
json-server db.json --middlewares ./first.js ./second.js
启动选项列表：
以下选项，多数可以使用json-server的配置文件（./json-server.json）完成配置
json-server [options] <source>
Options:
--config, -c Path to config file [default: "json-server.json"]
--port, -p Set port [default: 3000]
--host, -H Set host [default: "localhost"]
--watch, -w Watch file(s) [boolean]
--routes, -r Path to routes file
--middlewares, -m Paths to middleware files [array]
--static, -s Set static files directory
--read-only, --ro Allow only GET requests [boolean]
--no-cors, --nc Disable Cross-Origin Resource Sharing [boolean]
--no-gzip, --ng Disable GZIP Content-Encoding [boolean]
--snapshots, -S Set snapshots directory [default: "."]
--delay, -d Add delay to responses (ms)
--id, -i Set database id property (e.g. _id) [default: "id"]
--foreignKeySuffix, --fks Set foreign key suffix, (e.g. _id as in post_id)
[default: "Id"]
--quiet, -q Suppress log messages from output [boolean]
--help, -h Show help [boolean]
--version, -v Show version number [boolean]
一个json-server.json的配置示例：
{
"port": 8080,
"id": "_id",
"delay": 1000,
"routes": "routes.json"
}
示例数据：
- 咖啡
{
"cafe": [
{ "id":1,"name": "美式", "price": 28.5, "stock": 5 },
{ "id":2,"name": "espresso", "price": 32.00, "stock": 6 },
{ "id":3,"name": "卡布", "price": 39.3, "stock": 2 },
{"id":4, "name": "焦玛", "price": 41.0, "stock": 0 },
{"id":5, "name": "<span>拿铁</span>", "price": 36.8, "stock": 1 }
]
}
- 唱片：
{
"albums":[
{
"id": 1,
"name": "勇气",
"singer": [
"梁静茹"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000001DEgPu1004bl_1.jpg?max_age=2592000"
},
{
"id": 2,
"name": "年少有为",
"singer": [
"李荣浩"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000004QnEHc3zjC7J_1.jpg?max_age=2592000"
},
{
"id": 3,
"name": "当真",
"singer": [
"蒋蒋",
"曲肖冰"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000000RgBrK06p5mH_1.jpg?max_age=2592000"
},
{
"id": 4,
"name": "Sugar",
"singer": [
"Maroon 5"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000001QUxsr2KyrU0_1.jpg?max_age=2592000"
},
{
"id": 5,
"name": "浅橘色孤岛 (Live)",
"singer": [
"戴燕妮",
"段艺璇",
"宋昕冉",
"许馨文",
"徐紫茵",
"张钰",
"左卓"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000001AqDHy2gFHum_1.jpg?max_age=2592000"
},
{
"id": 6,
"name": "Stuck with U",
"singer": [
"Ariana Grande",
"Justin Bieber"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000004SFY3Y3Cr3q4_1.jpg?max_age=2592000"
},
{
"id": 7,
"name": "点歌的人",
"singer": [
"海来阿木"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000001NvtHt3hFmxE_1.jpg?max_age=2592000"
},
{
"id": 8,
"name": "句号",
"singer": [
"G.E.M. 邓紫棋"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M0000049MVh824D7bM_1.jpg?max_age=2592000"
},
{
"id": 9,
"name": "后来",
"singer": [
"刘若英"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000003RFvvb1K3vxF_1.jpg?max_age=2592000"
},
{
"id": 10,
"name": "飘洋过海来看你",
"singer": [
"梁静茹",
"艾怡良"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000004CsWWe0Z6gFR_1.jpg?max_age=2592000"
},
{
"id": 11,
"name": "平凡之路 (《后会无期》电影主题曲)",
"singer": [
"朴树"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000002aRnZM0garaC_1.jpg?max_age=2592000"
},
{
"id": 12,
"name": "告白气球",
"singer": [
"周杰伦"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000003RMaRI1iFoYd_1.jpg?max_age=2592000"
},
{
"id": 13,
"name": "春娇与志明",
"singer": [
"街道办GDC",
"欧阳耀莹"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000000lrXyA0MlEEo_1.jpg?max_age=2592000"
},
{
"id": 14,
"name": "稻香",
"singer": [
"周杰伦"
],
"img": "https://y.gtimg.cn/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000"
}
]
}
