我是靠谱客的博主 危机乌冬面,最近开发中收集的这篇文章主要介绍使用WebStorm的REST Client操作JSON Server创建db.json使用WebStorm的REST Client操作JSON Server生成数据存储快照,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

文章目录

  • 创建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 ClientRequest面板,在Headers面板中输入name值为Content-TypeValue值为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生成数据存储快照所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(42)

评论列表共有 0 条评论

立即
投稿
返回
顶部