json-server
目录
在本地模拟后端接口,这种做法称之为构建前端mock
通过 json-server 就可以在本地根据 json 文件快速创建一个模拟的功能齐全的 api 接口
全局安装 json- serve 模块
npm install -g json-server
或者
yarn global add json-server
准备一个 json 文件
data.json
{
"list": [
{
"name": "张三",
"age": "20",
"id": 1
},
{
"name": "李四",
"age": "5",
"id": 2
},
{
"name": "王五",
"age": "30",
"id": 3
},
{
"name": "赵六",
"age": "18",
"id": 4
}
]
}
启动 json-server
-w 表示时刻监听 json 文件的数据,实现双向的动态更新
-p 可以指定接口开启使用的端口
json-server data.json -w -p 4000
GET 请求数据列表
查询 list 表所有数据
http://localhost:4000/list
查询 list 表指定ID为的2数据
http://localhost:4000/list/2
查询 list 表中 name 为王五 且 age 为 30 的项
http://localhost:4000/list?name=王五&age=30
查询的数据分页
http://localhost:4000/list?_page=1&_limit=2
查询的数据排序
asc 升序
desc 降序
http://localhost:4000/list?_sort=age&_order=asc
查询区间数据
***_gte 大于等于
***_lte 小于等于
http://localhost:4000/list?age_gte=20&age_lte=40
查询包含相关文本的数据
http://localhost:4000/list?q=张三
POST 添加数据
http://localhost:4000/list
{
"name": "小明",
"age": "88",
}
id 可以不用加,json-server 会自动添加
DELETE 删除数据
删除 id 为 5 的数据
http://localhost:4000/list/5
PATCH 更新数据
修改 id 为 4 的数据的name为小明
http://localhost:4000/list/4
{
"name": "小明",
}
以上就是关于 json-server 的简单快速上手使用,如有不对,欢迎指出
更多细节扩展请前往:json-server官网