我正在参加「掘金·启航计划」
json-server可以实现本地增删改查，满足基本测试使用
一.环境搭建
- 安装 :
npm install -g json-server - 帮助 :
json-server --help - 启动 :
json-server --watch db.json
cyq@caiyongqingdeMacBook-Air json-server-mockjs % json-server --watch db.json
{^_^}/ hi!
Loading db.json
Oops, db.json doesn't seem to exist
Creating db.json with some default data
Done
Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
自动生成了db.json文件
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
- 修改端口 :
json-watch --watch db.json --port 3001
二.数据请求
1.get(查)
- 根据
id方式一 http://localhost:3000/posts/1
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
- 根据
id方式二 http://localhost:3000/posts?id=1
[
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
]
- 多个条件
http://localhost:3000/posts?id=1&title=json-server
[
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
]
obj.key方式http://localhost:3000/posts?name.nickname=myName- 字段不存在的时候会返回全部数据
[
{
"id": 1,
"title": "json-server",
"author": "typicode",
"name": {
"nickname": "myName"
}
}
]
q模糊搜索（全局）http://localhost:3000/posts?q=json-server
[
{
"id": 1,
"title": "json-server",
"author": "typicode",
"name": {
"nickname": "myName"
}
},
{
"id": 2,
"title": "json-server2",
"author": "typicode2"
}
]
_page _limit分页搜索_page设置页码_limit控制每页显示的条数（默认 10）http://localhost:3000/posts?_page=1&_limit=2
_sort _order排序_sort指定字段_order设置升序降序（默认升序 asc）[asc\desc]http://localhost:3000/posts?_sort=id&_order=2
_start _end _limit截取_start开始索引_end结束索引_limit从开始索引向后取的个数http://localhost:3000/posts?_start=0&_end=5http://localhost:3000/posts?_start=0&_limit=5
_gte _lte取值范围_gte大于等于_lte小于等于http://localhost:3000/posts?id_gte=3&_lte=5
_ne非_ne排除id = 1的数据http://localhost:3000/posts?id_ne=1http://localhost:3000/posts?id_ne=1&id_ne=2
_like模糊http://localhost:3000/posts?id_like=1
- 关联查询
http://localhost:3000/posts/1/comments
[
{
"id": 1,
"body": "some comment",
"postId": 1
}
]
_embed _expand关系拼装(注意单词复数和单数)_embed包含子资源_expand包含父资源http://localhost:3000/posts?_embed=comments
[
{
"id": 1,
"title": "json-server",
"author": "typicode",
"name": {
"nickname": "myName"
},
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
]
},
{
"id": 2,
"title": "json-server2",
"author": "typicode2",
"comments": []
}
]
http://localhost:3000/comments?_expand=post
[
{
"id": 1,
"body": "some comment",
"postId": 1,
"post": {
"id": 1,
"title": "json-server",
"author": "typicode",
"name": {
"nickname": "myName"
}
}
}
]
2.post(增)
const params = {
id: 3, // id 可不传 , 自动生成
title: "json-server3",
author: "typicode3",
};
axios.post("http://localhost:3000/posts", params).then((res) => {
console.log(res.data); // 返回params的数据
});
3.delete(删)
axios.delete("http://localhost:3000/posts/3").then((res) => {
console.log(res.data);
});
4.put、patch(改)
put全覆盖,不传的字段会被删掉
const params = {
title: "json-server333",
author: "typicode333",
};
axios.put("http://localhost:3000/posts/3", params).then((res) => {
console.log(res.data);
});
patch存在则修改，不存在则新增
const params = {
title: "json-server333-patch",
// author: "typicode333",
};
axios.patch("http://localhost:3000/posts/3", params).then((res) => {
console.log(res.data);
});
三.静态资源
- 静态资源包含
html、css、js、图片、视频等资源。 - 根目录新建 json-server-config.json
{
"port": 3000,
"watch": true,
"static": "./public",
"read-only": false,
"no-cors": true,
"no-gzip": false
}
- 重启服务
- 可以直接访问根目录
public下面的静态文件 http://localhost:3000/test.htmlhttp://localhost:3000/test.png
