代码拉取完成，页面将自动刷新
npm install -g json-serverjson-server --watch db.jsonjson-server --watch db.json --port 5000(要修改的端口号)npm init vite@latest查询所有http://localhost:3000/car
[
{
"id": 1,
"name": "奔驰"
},
{
"id": 2,
"name": "宝马"
},
{
"id": 3,
"name": "奥迪"
}
]
查询某类汽车
http://localhost:3000/car/3 返回的是对象
{
"id": 3,
"name": "奥迪"
}
http://localhost:3000/car?id=3 返回的是数组 根据业务需求选择
[
{
"id": 3,
"name": "奥迪"
}
]
http://localhost:3000/car?name=奔驰
[
{
"id": 1,
"name": "奔驰"
}
]
全局模糊搜索
查询全局带有关键字的数据 ==> 使用?q=模糊搜索内容
http://localhost:3000/car?q=奔驰 全局在car下搜索带奔驰的内容
[
{
"id": 1,
"name": "奔驰"
},
{
"id": 4,
"name": "奔驰"
},
{
"id": 7,
"name": "奔驰"
}
]
分页查询
_page：第几页，_limit：每页多少条
第1页，每页2条内容 http://localhost:3000/car?_page=1&_limit=2
[
{
"id": 1,
"name": "奔驰"
},
{
"id": 2,
"name": "宝马"
}
]
第2页，每页5条内容 http://localhost:3000/car?_page=2&_limit=5
[
{
"id": 6,
"name": "奥迪"
},
{
"id": 7,
"name": "奔驰"
},
{
"id": 8,
"name": "宝马"
},
{
"id": 9,
"name": "奥迪"
}
]
分页加排序
按什么字段排序：_sort,排序方式：desc降序，asc升序
分页后按id升序排http://localhost:3000/car?_page=2&_limit=5&_sort=id&_order=asc
[
{
"id": 6,
"name": "奥迪"
},
{
"id": 7,
"name": "奔驰"
},
{
"id": 8,
"name": "宝马"
},
{
"id": 9,
"name": "奥迪"
}
]
截取
从第1个开始截取（不包含第1个）截取到第3个(包含第3个)：http://localhost:3000/car?_start=1&_end=3
可以简单理解为：包尾不包头
[
{
"id": 2,
"name": "宝马"
},
{
"id": 3,
"name": "奥迪"
}
]
从第1个开始截取（不包括第1个）往后面截取3个数据 http://localhost:3000/car?_start=1&_limit=3
[
{
"id": 2,
"name": "宝马"
},
{
"id": 3,
"name": "奥迪"
},
{
"id": 4,
"name": "奔驰"
}
]
范围过滤条件
_gte大于，_lte小于。用于设置一个取值范围
如选择id在5-8之间到数据:http://localhost:3000/car?id_gte=5&id_lte=8
[
{
"id": 5,
"name": "宝马"
},
{
"id": 6,
"name": "奥迪"
},
{
"id": 7,
"name": "奔驰"
},
{
"id": 8,
"name": "宝马"
}
]
可以使用_ne剔除某个数据
如剔除id为5和8的数据，剔除后也可以做分页，这里不再做演示：http://localhost:3000/car?id_ne=5&id_ne=8
[
{
"id": 1,
"name": "奔驰"
},
{
"id": 2,
"name": "宝马"
},
{
"id": 3,
"name": "奥迪"
},
{
"id": 4,
"name": "奔驰"
},
{
"id": 6,
"name": "奥迪"
},
{
"id": 7,
"name": "奔驰"
},
{
"id": 9,
"name": "奥迪"
}
]
局部模糊搜索
使用_like ,如查询字段name带有“奔”子的数据，==> name_like=奔
http://localhost:3000/car?name_like=奔
[
{
"id": 1,
"name": "奔驰"
},
{
"id": 4,
"name": "奔驰"
},
{
"id": 7,
"name": "奔驰"
},
{
"id": 10,
"name": "奔奔"
}
]
实现类似多表查询
数据准备: animal中的id和skills中的animalId一样对应
{
"animal":[
{
"id":1,
"name":"兔子"
},
{
"id":2,
"name":"猴子"
},
{
"id":3,
"name":"狗子"
}
],
"skills":[
{
"id":1,
"body":"兔子吃萝卜",
"animalId":1
},
{
"id":3,
"body":"狗子汪汪叫",
"animalId":3
},
{
"id":2,
"body":"猴子吃香蕉",
"animalId":2
}
]
}
embed因为意思就说嵌入，在animal表数据中嵌入skills表数据，通过animal中的id和skills中的animalId作关联：http://localhost:3000/animal?_embed=skills
[
{
"id": 1,
"name": "兔子",
"skills": [
{
"id": 1,
"body": "兔子吃萝卜",
"animalId": 1
}
]
},
{
"id": 2,
"name": "猴子",
"skills": [
{
"id": 2,
"body": "猴子吃香蕉",
"animalId": 2
}
]
},
{
"id": 3,
"name": "狗子",
"skills": [
{
"id": 3,
"body": "狗子汪汪叫",
"animalId": 3
}
]
}
]
post添加的数据会直接加入db.json里面，id可以不写，是自增的。
btn.addEventListener("click", function() {
axios.post("http://localhost:3000/car", {
"name": "雷克萨斯",
}).then(res => {
console.log(res.data);
})
})
修改skills数据，如果出入body和animalId则覆盖原来两个字端的内容，如果只传body的修改，animalId会被删掉，反之亦然。
修改一个字段
btn.addEventListener("click", function() {
axios.put("http://localhost:3000/skills", {
"body": "呵呵",
}).then(res => {
console.log(res.data);
})
})
// 使用put只修改原来的body字段，发现animalId不见了，其实是body修改覆盖了原来的body和animalId
{
"body": "呵呵",
"id": 1
},
修改全部字段
btn.addEventListener("click", function() {
axios.put("http://localhost:3000/skills", {
"body": "呵呵",
"animalId":1
}).then(res => {
console.log(res.data);
})
})
// 修改的body和animalId把原来的body和animalId进行覆盖
{
"body": "呵呵",
"animalId": "1",
"id": 1
},
patch方法和put方法不一样，patch值修改body不会把animalId删除掉
btn.addEventListener("click", function() {
axios.patch("http://localhost:3000/skills", {
"body": "小兔子爱吃萝卜",
}).then(res => {
console.log(res.data);
})
})
{
"body": "小兔子爱吃萝卜",
"animalId": "1",
"id": 1
},
btn.addEventListener("click", function() {
axios.delete("http://localhost:3000/skills/1").then(res => {
console.log(res.data);
})
})
创建json_server_config.json文件
运行：json_server --watch db.json json_server_config.json
{
"port":"3001",
"watch":true, // 开启后修改db.json数据不需要重启服务器
"static":"./public", //可以放图片 访问http://localhost/image/1.jpg
"read-only":false,
"no-cors":false,
"no-gzip":false
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
