首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >上手玩一下 json-server(一)了解篇

上手玩一下 json-server(一)了解篇

作者头像
celineWong7
修改2023-09-23 19:32:01
2.1K0
修改2023-09-23 19:32:01
举报
文章被收录于专栏:web前端踩坑web前端踩坑

json-server 是什么? 我把这个词抛给一个后端好友时,他没用过查了下回复说:哦,原来是个mock 工具。 mock这词本意是 模拟、糊弄 的意思。mock server工具,通俗来说,就是模拟服务端接口数据,一般用在前后端分离后,前端人员可以不依赖API开发,而在本地搭建一个JSON服务,自己产生测试数据。 顾名思义,json-server就是个存储json数据的server~

先献祭上json-server的github : github地址

1 下载安装

使用npm全局安装json-server:

npm install -g json-server

可以通过查看版本号,来测试是否安装成功:

json-server -v

2 创建json数据——db.json

既然是造数据,就需要创建一个json数据。

在任意一个文件夹下(此处假设我创建了一个myserver文件夹),进入到该文件夹里面,执行代码:

json-server --watch db.json

执行json-server --watch db.json后

原本空空如也的文件夹里,就会多出一个db.json文件。

同时,根据执行代码结果的提示,我们可以访问 http://localhost:3000 (启动json-server后,点击才有效),看到如下页面:

JSON Server

可以分别点击/posts/comment/profile/db链接,看看页面跳转后,观察地址栏变化和页面内容,你看到了什么?

没错,就是各自的json数据。

db.json - posts

db.json

再比对myserver/db.json文件的数据,就可以发现: /db就是整个的db.json数据包,而/posts /comment /profile 分别是db.json里面的子对象。

所以说,json-server把db.json 根节点的每一个key,当作了一个router。我们可以根据这个规则来编写测试数据。


json-server 默认是 3000 端口,我们也可以自己指定端口,指令如下:

json-server --watch db.json --port 3004

嗯,如果你很懒,觉得启动服务的这段代码有点长,还可以考虑db.json同级文件夹(也就是myserver文件夹)新建一个package.json,把配置信息写在里头:

{
    "scripts": {
        "mock": "json-server db.json --port 3004"
    }
}

之后启动服务,只需要执行如下指令就可以了:

npm run mock

3 操作数据

我们先自己倒腾下 db.json 数据,比如现在是个水果商城,放点 用户信息水果价格 信息:

{
  "fruits": [
    {
      "id": 1,
      "name": "apple",
      "price": "33"
    },
    {
      "id": 2,
      "name": "orange",
      "price": "8.88"
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"dachui"
      },
      "pwd": "123456"
    }
  ]
}

要注意,数据格式符合JSON格式(尤其注意最后一个键值对后面不要有逗号)。如果数据格式有误,命令窗口会报错,可以根据错误提示进行修整。

接下来我们就可以GET, POST, PUT, PATCH or DELETE 方法来对数据进行操作。

(1)GET

首先,我们先来看GET操作。(以下会根据官方文档对所有GET操作做详细说明。)

浏览器地址访问就可以看做GET操作,所以不用写任何代码,我们就可以先来测试下 url -GET 操作。

常规获取

http://localhost:3004/fruits

可以得到所有水果数据(对象数组):

[
  {
    "id": 1,
    "name": "apple",
    "price": "33"
  },
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

过滤获取 Filter

http://localhost:3004/fruits/1

可以得到指定id为1的水果(对象):

{
  "id": 1,
  "name": "apple",
  "price": "33"
}

当然,指定id为1的获取指令还可以用如下指令,但要注意,此时返回的数据是一个数组

http://localhost:3004/fruits?id=1
[
  {
    "id": 1,
    "name": "apple",
    "price": "33"
  }
]

以此类推,我们也可以通过水果名称,或者是价格来获取数据:

http://localhost:3004/fruits?name=orange
[
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

也可以指定多个条件,用&符号连接:

http://localhost:3004/fruits?name=orange&price=8.88
[
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

你甚至还可以使用对象取属性值 obj.key 的方式:

http://localhost:3004/users?name.nickname=dachui
[
  {
    "name": {
      "username": "admin",
      "nickname": "dachui"
    },
    "pwd": "123456"
  }
]

以上看着是不是特别眼熟,不就是HTTP中GET请求方式嘛~

嗯,更好玩的还在后面

分页 Paginate

为了能演示分页效果,我们在db.json文件里的fruits里面多添加了几种水果。

{
  "fruits": [
    {
      "id": 1,
      "name": "apple1",
      "price": "33"
    },
    {
      "id": 2,
      "name": "apple2",
      "price": "2"
    },
    {
      "id": 3,
      "name": "apple3",
      "price": "3"
    },
    {
      "id": 4,
      "name": "apple4",
      "price": "4"
    },
    {
      "id": 5,
      "name": "apple5",
      "price": "5"
    },
    {
      "id": 6,
      "name": "orange",
      "price": "8.88"
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"dachui"
      },
      "pwd": "123456"
    }
  ]
}

编辑过db.json(db.json数据有变动),都要关闭服务重新启动。(注意:不要用 CTRL + C 来停止服务,因为这种方式会导致 node.js 依旧霸占着3004端口,导致下一次启动失败。简单粗暴关闭窗口即可! —— 个人window系统,其他系统可能没有这样的烦恼。

分页采用 _page 来设置页码, _limit 来控制每页显示条数。如果没有指定 _limit ,默认每页显示10条。

http://localhost:3004/fruits?_page=2&_limit=2
[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  }
]

排序 Sort

排序采用 _sort 来指定要排序的字段, _order 来指定排序是正排序还是逆排序(asc | desc ,默认是asc)。

http://localhost:3004/fruits?_sort=id&_order=desc
[
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 1,
    "name": "apple1",
    "price": "33"
  }
]

也可以指定多个字段排序,一般是按照id进行排序后,相同id的再跟进name排序(此块没有具体造数据格式,猜测如此):

http://localhost:3004/fruits?_sort=id,name&_order=desc,asc

取局部数据 Slice

slice的方式,和 Array.slice() 方法类似。采用 _start 来指定开始位置, _end 来指定结束位置、或者是用_limit来指定从开始位置起往后取几个数据。

http://localhost:3004/fruits?_start=2&_end=4
[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  }
]
http://localhost:3004/fruits?_start=2&_limit=4
[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

取符合某个范围 Operators

(1)采用 _gte _lte 来设置一个取值范围(range):

http://localhost:3004/fruits?id_gte=4&id_lte=6
[
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

(2)采用_ne来设置不包含某个值:

http://localhost:3004/fruits?id_ne=1
[
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

(3)采用_like来设置匹配某个字符串(或正则表达式):

http://localhost:3004/fruits?name_like=apple
[
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  }
]

全文搜索 Full-text search

采用 q 来设置搜索内容:

http://localhost:3004/fruits?q=oran
[
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

关联关系 Relationships

(1)采用 _embed 来设置(创建或包含)一个子资源。

http://localhost:3004/users?_embed=personInfo
[
  {
    "name": {
      "username": "admin",
      "nickname": "dachui"
    },
    "pwd": "123456",
    "personInfo": []
  }
]

(2)采用 _expand 来设置是否包含某个父资源。(测试数据的局限性,我没太懂这条指令的意思了,之后在试试看。)

http://localhost:3004/fruits?_expand=users
[
  {
    "id": 1,
    "name": "apple1",
    "price": "33"
  },
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

(3)获取嵌套资源(测试数据局限性,这条指令是虚拟的。)

http://localhost:3004/fruit/1/shops

以上主要介绍GET的功能,通过浏览器请求数据。

下一篇 上手玩一下json-server(二)操作数据篇——POST/PATCH/DELETE,我们将用ajax方式来获取/修改数据。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 下载安装
  • 2 创建json数据——db.json
  • 3 操作数据
    • (1)GET
    相关产品与服务
    Elasticsearch Service
    腾讯云 Elasticsearch Service(ES)是云端全托管海量数据检索分析服务,拥有高性能自研内核,集成X-Pack。ES 支持通过自治索引、存算分离、集群巡检等特性轻松管理集群,也支持免运维、自动弹性、按需使用的 Serverless 模式。使用 ES 您可以高效构建信息检索、日志分析、运维监控等服务,它独特的向量检索还可助您构建基于语义、图像的AI深度应用。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档