概述
文章目录
- 创建db.json
- 使用WebStorm的REST Client操作JSON Server
- 数据查询
- 插入数据
- 修改数据
- 删除操作
- 生成数据存储快照
创建db.json
在我们使用JSON Server
时非常简单,只需要在项目根目录中创建一个独立的db.json
文件即可。其源码如下:
{
"people":[
{
"id":0
,"name":"John"
}
]
}
使用WebStorm的REST Client操作JSON Server
在我们的WebStorm
中双击shift
按键,在打开的搜索框中输入REST
即可在相应的搜索结果中查看到REST Client
,如下图所示:
选择图示选项,其打开的操作面板如下所示:
在控制台中输入JSON Server
的启动命令,其启动命令如下:
json-server db.json
其启动的结果如下:
数据查询
使用REST Client
进行数据查询时,是在Host/port
文本框中输入http://localhost:3000/people
点击左侧的运行图标,其展示的结果如下:
从上面我们可以看出,REST Client
通过使用GET
方式请求http://localhost:3000/people
路径,其能够将我们存储在db.json
中的people
数据查询并展示出来。
插入数据
点击REST Client
的Request
面板,在Headers面板中输入name
值为Content-Type
,Value
值为application/json
;将HTTP method
的请求方式由GET
改成POST
;将Request Body
面板选中Text
,在其中输入{"name":"Henry"}
,其内容如下所示:
点击左侧的运行按钮,其结果如下:
点击打开db.json
文件,我们在这里可以看到,刚才的POST
请求确实是在这里插入了一条数据。现在其展示的结果如下:
如果我们多点击几次,我们会发现,其会在db.json
中插入多条id
值不同的数据,这说明我们的插入操作id
是能够实现自增的。
修改数据
与上面的POST
请求操作相似,假如说我们想要修改db.json
中的第三条数据,我们这里这么做:将此处的POST
请求更改成PUt
;将之前的Request Body
内容更改成现在的{"name":"Frank"}
;将Host/port
的请求路径更改成http://localhost:3000/people/2
如下所示:
点击运行按钮,其展示的结果如下:
当我们再次查看db.json
文件时,其内容变更为如下:
{
"people": [
{
"id": 0,
"name": "John"
},
{
"name": "Henry",
"id": 1
},
{
"name": "Frank",
"id": 2
}
]
}
删除操作
执行删除操作非常简单,就是在上面的修改操作的基础上,将请求方式由PUT
更改成DEKETE
。这样,上面的第三条数据将会被删除
删除后的结果如下:
{
"people": [
{
"id": 0,
"name": "John"
},
{
"name": "Henry",
"id": 1
}
]
}
生成数据存储快照
在我们上面的CRUD
数据操作过程中,如果我们想要将中间的数据过程进行相应的存储,那也是可以的,JSON Server
给我们提供了一个生成存储快照的方法:
通过在控制台中输入s
字符串,然后点击回车按钮,即可将当前的数据状态存储为快照,如下图所示:
最后
以上就是危机乌冬面为你收集整理的使用WebStorm的REST Client操作JSON Server创建db.json使用WebStorm的REST Client操作JSON Server生成数据存储快照的全部内容,希望文章能够帮你解决使用WebStorm的REST Client操作JSON Server创建db.json使用WebStorm的REST Client操作JSON Server生成数据存储快照所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复