『前端必备』本地数据接口—json-server 详细介绍（进阶篇）

已于 2022-07-14 09:47:47 修改
阅读量4.4k 收藏 45
点赞数 10
分类专栏： 前端本地接口 文章标签： json node.js 前端
于 2022-07-13 13:38:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou139856/article/details/125760197
版权

目录

前言

启动参数

配置

端口

主机地址

查询的常用操作

普通查询

id查询

条件查询

单一条件查询

多条件查询（且）

多条件查询（或）

深度属性查询

分页查询

排序查询

升序

降序

 多字段排序

切片查询

范围查询

大于等于 _get

 小于等于 _lte

 不等于 _ne

模糊查询

全文查询

外键关联查询

关系拼装

包含子资源 _embed

 包含父资源 _expand

配置路由

静态资源

配置

多媒体资源

其他

生成动态数据

查询整个数据库

远程模式

前言

Ajax 是前端必学的一个知识点，但刚接触 Ajax 的同学可能会因为没接口测试而烦恼。

本文是 接着上一篇 用5分钟带你实现测试数据的 增删改查 操作，满足入门测试使用，解决 没接口测试 这个烦恼，而且不需要你具备后端知识。

启动参数

我们之前使用 json-server --watch db.json 这条命令启动了接口项目

json-server 是服务启动的命令

--watch 是参数

db.json 是目标文件

使用下面这条命令可以 查看配置项：

json-server --help

# 或使用简写方式
json-server -h

参数

简写

说明

--config

-c

指定配置文件

--port

-p

端口号

--host

-H

主机地址

--watch

-w

监听文件

--routes

-r

指定路由文件

--middlewares

-m

指定中间件

--static

-s

设置静态文件

--read-only

--ro

只读

--no-cors

--nc

禁用跨源资源共享

--no-gzip

--ng

禁止GZIP

--snapshots

-S

设置快照目录

--delay

-d

设置反馈延时（ms）

--id

-i

设置数据的id属性（e.g. _id）

--foreignKeySuffix

--fks

设置外键后缀（如post_id中的_id）

--quiet

-q

禁止输出日志消息

--help

-h

显示帮助信息

--version

-v

显示版本号

配置

使用 json-server --help 可以查看到所有配置项。

端口

使用 -p 或者 --port 配置端口号，例如自定义配置 6666 端口

json-server -p 6666 db.json

启动后若出现以下内容则表示启动成功

\{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:6666/posts
http://localhost:6666/comments
http://localhost:6666/profile

Home
http://localhost:6666

主机地址

json-server --host 172.0.0.0 db.json

这里设置了 172.0.0.0 ，之后通过本机 IP 来访问即可。同一个局域网内的其他设备也可以通过这个地址来访问。

查询的常用操作

普通查询

 在db.json 文件中录入以下数据

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

查询 /posts 所有数据

 http://localhost:3000/posts

查询 /comments 所有数据

 http://localhost:3000/comments

查询 /profile 所有数据

http://localhost:3000/profile

id查询

将 db.json 的内容修改一下

{
  "posts": [
    {
      "id": 1,
      "title": "文章111",
      "author": "张三"
    },
    {
      "id": 2,
      "title": "文章222",
      "author": "李四"
    }
  ]
}

此时只有 posts 接口，里面有2条数据，id 分别为 1 和 2。

查询的公式是：

http://localhost:3000/posts/{id}

查询 id 为 2 的数据

http://localhost:3000/posts/2

条件查询

准备以下数据

{
  "posts": [
    {
      "id": 1,
      "title": "文章111",
      "author": "张三"
    },
    {
      "id": 2,
      "title": "文章222",
      "author": "李四"
    },
    {
      "id": 3,
      "title": "文章333",
      "author": "张三"
    }
  ]
}

可以看到里面有 2条张三 的数据，1条李四 的数据。

单一条件查询

查找 author 为 张三 的所有数据。

查询 author 是 张三 的数据

http://localhost:3000/posts?author=张三

 在 http://localhost:3000/posts 后面加一个 ? ，然后写上需要筛选条件的即可。

多条件查询（且）

上面的数据，有2条张三

这次要筛选的是 author = 张三 且 title = 文章333 的数据

http://localhost:3000/posts?author=张三&title=文章333

符合条件筛选的时候，使用 & 号添加条件。

多条件查询（或）

这次要筛选的是 title = 222 和 title = 333 这两条数据出来。

http://localhost:3000/posts?title=文章222&title=文章333

 重复使用 title ，会把符合条件的都筛查出来。

当然，我们还可以使用 模糊查询 来达到类似的效果，下面会讲到。

深度属性查询

准备另一份数据，数据内容如下：

{
  "posts": [
    {
      "id": 1,
      "title": "文章111",
      "authorInfo": {
        "name": "张三",
        "age": 20
      }
    },
    {
      "id": 2,
      "title": "文章222",
      "authorInfo": {
        "name": "李四",
        "age": 24
      }
    }
  ]
}

可以看到 authorInfo 里面还有子属性。

查询 authorInfo.name = 张三 的数据

http://localhost:3000/posts?authorInfo.name=张三

 这里需要使用 . 的方式来访问子级数据，有点像 js 用点语法访问对象属性。

分页查询

使用 _page 和 _limit(可选) 对数据进行分页。需要注意，_page 和 _limit 前面都要有下划线。

  • _page：页码
  • _limit：每页的数据量

修改 db.json 里的数据方便测试分页功能，如下所示

{
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 4, "body": "some comment 4", "postId": 3 },
    { "id": 5, "body": "some comment 5", "postId": 1 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 7, "body": "some comment 7", "postId": 3 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 10, "body": "some comment 10", "postId": 2 },
    { "id": 11, "body": "some comment 11", "postId": 3 },
    { "id": 12, "body": "some comment 11", "postId": 1 }
  ]
}

准备了12条数据。

若此时需要获取去第2页的数据，并且每页3条：

http://localhost:3000/comments?_page=2&_limit=3

 除了要返回的数据外，还会在 Headers 里返回 总数；第一个、前一个、下一个、最后一个的链接。我用 axios 发个请求演示一下。

axios.get('http://localhost:3000/comments', {
  params: {
   _page: 2,
   _limit: 3
  }
})
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

返回结果如下所示

x-total-count 存放总数。

link 字段里存放的是 第一个、前一个、下一个、最后一个 的链接地址

"
<http://localhost:3000/comments?_page=1&_limit=3>; rel=\"first\", <http://localhost:3000/comments?_page=1&_limit=3>; rel=\"prev\", <http://localhost:3000/comments?_page=3&_limit=3>; rel=\"next\", <http://localhost:3000/comments?_page=4&_limit=3>; rel=\"last\"
"

排序查询

需要添加 **排序的标记 ( _sort )**，然后设置 **排序规则 ( _order )**

排序规则：

  • 升序 ( asc )
  • 降序 ( desc ) 
http://localhost:3000/{接口名}?_sort=要排序的字段名&_order=排序规则

以这份数据为例：

{
  "comments": [
    { "id": 11, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 10, "body": "some comment 4", "postId": 3 },
    { "id": 7, "body": "some comment 5", "postId": 1 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 5, "body": "some comment 7", "postId": 3 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 4, "body": "some comment 10", "postId": 2 },
    { "id": 1, "body": "some comment 11", "postId": 3 },
    { "id": 12, "body": "some comment 11", "postId": 1 }
  ]
}

id 的排序是乱的，如果使用普通的方式请求回来的数据是原模原样返回的。

升序

以 id 为参考字段进行升序排列返回给客户端。

普通升序排列的话，_order=asc 可以不传。只需指定 参考字段 ( _sort ) 即可

http://localhost:3000/comments?_sort=id

或

http://localhost:3000/comments?_sort=id&_order=asc

 返回的结果就会以 id 为参考字段升序排好。

降序

降序必须填好 _order=desc 

http://localhost:3000/comments?_sort=id&_order=desc

 多字段排序

这次的需求是： 

  1. 首先按 postId 升序排列
  2. 在 postId 升序 的基础上再对 id 进行倒序排列

多个字段用 , 分格。

http://localhost:3000/comments?_sort=postId,id&_order=asc,desc

返回结果：

{
  "comments": [
    { "id": 12, "body": "some comment 11", "postId": 1 },
    { "id": 11, "body": "some comment 1", "postId": 1 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 7, "body": "some comment 5", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 4, "body": "some comment 10", "postId": 2 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 10, "body": "some comment 4", "postId": 3 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 5, "body": "some comment 7", "postId": 3 },
    { "id": 1, "body": "some comment 11", "postId": 3 }
  ]
}

切片查询

切片的意思是指定 头 和 尾 ；也可以指定 头 和 片段长度 。

用到的关键字有：

  • _start：开始位置（下标，从0开始）
  • _end：结束位置
  • _limit：片段长度

总数 会放在 headers 里。

以这份数据为例

{
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 4, "body": "some comment 4", "postId": 3 },
    { "id": 5, "body": "some comment 5", "postId": 1 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 7, "body": "some comment 7", "postId": 3 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 10, "body": "some comment 10", "postId": 2 },
    { "id": 11, "body": "some comment 11", "postId": 3 },
    { "id": 12, "body": "some comment 11", "postId": 1 }
  ]
}

需求：返回下标从 2-6 的数据

使用 _start 和 _end 的方式

http://localhost:3000/comments?_start=2&_end=6

使用 _start 和 _limit 的方式

http://localhost:3000/comments?_start=2&_limit=4

范围查询

范围查询包括 大于等于、小于等于、不等于 三种情况。

大于等于 _get

大于等于 使用的关键字是 _get 。注意，前面有个下划线的。

需求：查询 comments 接口 id 大于等于 4 的数据

http://localhost:3000/comments?id_gte=4

 小于等于 _lte

小于等于 使用的关键字是 _lte 。注意，前面有个下划线的。

需求：查询 comments 接口 id 小于等于 4 的数据

http://localhost:3000/comments?id_lte=4

 联合一起使用

需求：查询 comments 接口 id 大于等于 4 且 小于等于 6 的数据

http://localhost:3000/comments?id_gte=4&id_lte=6

 不等于 _ne

需求：查询 comments 接口 id 不等于 2 的数据

http://localhost:3000/comments?id_ne=2

模糊查询

模糊查询的关键字是 _like。

需求：查询 comments 接口 body 包含 1 的数据

全文查询

全文查询的关键字是 q

准备以下数据比较好演示

{
  "authors": [
    { "id": 1, "name": "zhangsan", "age": 18},
    { "id": 2, "name": "lisi", "age": 21},
    { "id": 3, "name": "wangwu", "age": 24}
  ]
}

查询所有字段中包含 2 的数据出来

http://localhost:3000/authors?q=2

 因为 id 为 3 的那条数据里 age 是 24 ，也算是包含了 2 。

外键关联查询

外键查询需要 2个接口 关联查询。

准备以下数据方便演示

{
  "posts": [
    { "id": 1, "title": "文章111", "author": "张三" },
    { "id": 2, "title": "文章222", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 }
  ]
}

posts 里有2条数据。

comments 里有3条数据，其中每条数据都有一个 postId，是对应 posts 每条数据的 id。

需求：查询 posts 里 id 为 1 的所有 comments 内容

http://localhost:3000/posts/1/comments

关系拼装

关系拼装可以把关联的2个接口的数据拼接起来并返回。

其中有2种查询关系：

  • 包含子资源 _embed
  • 包含父资源 _expand

准备以下数据方便演示

{
  "posts": [
    { "id": 1, "title": "文章111", "author": "张三" },
    { "id": 2, "title": "文章222", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 }
  ]
}

包含子资源 _embed

http://localhost:3000/posts?_embed=comments

 还可以拼接多个条件。

需求：在 comments 里，把 posts 里 id 为 2 的数据找出来并拼接起来

http://localhost:3000/posts/2?_embed=comments

 包含父资源 _expand

http://localhost:3000/comments?_expand=post

配置路由

有时候我们的 api地址 可能不像上面所有案例中那么简单，此时就可以使用 自定义路由 的方法来模拟。

比如模拟下面这个接口：

http://localhost:3000/api/users/1

实现的步骤如下所示：

  1. 创建 routes.json 文件（文件名自定义）
  2. 启动服务时使用 --routes 参数

1、创建 routes.json ，并输入以下内容。

{
  "/api/*": "/$1"
}

2、启动服务

json-server db.json --routes routes.json

3、访问

http://localhost:3000/api/posts

静态资源

静态资源包含 html 、css 、js 、图片、视频等资源。

配置

配置方式分2种：

  • 默认配置
  • 指定资源位置

默认配置

需要在根目录下创建 public 文件夹，里面放入 html 等文件。

 然后在浏览器访问一下 http://localhost:3000/

你也可以加入自己的 css 和 js 进行设计交互。

指定资源位置

json-server 配资静态资源的默认方式是在根目录下创建 public 文件夹，然后里面放入静态资源。

但如果你不想使用 public 作为静态资源的文件夹，也可以自己另起一个名字，然后在启动环境时使用 --static 来指定目标目录就行了。

比如我创建了一个 some-other-dir 作为静态资源的目录，使用以下命令指定以下即可。

json-server db.json --static ./some-other-dir

多媒体资源

除了放 html 、css 和 js 资源外，还可以放图片和视频。

我以图片为例，我在 public 目录下添加一个图片

直接在 http://localhost:3000/ 后面跟着 图片文件名 即可。

其他

生成动态数据

如果我们要模拟100条数据，甚至更多的话，创建 json 文件然后一条一条录入的方式真的很不合时。

此时我们可以使用 js 通过循环的方式来实现数据创建。

1、首先在根目录下创建一个 db.js 的文件。

2、输入一下内容

module.exports = () => {
  const data = { users: [] }
  // 创建 100 个 users
  for (let i = 0; i < 100; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}

3、运行 js 文件

json-server db.js

4、查询一下

 http://localhost:3000/users

100条数据就直接生成了。

 需要什么字段可以自己在 js 文件里配置。

查询整个数据库

访问以下地址可以获得整个数据库的数据。

 http://localhost:3000/db

远程模式

如果想使用互联网上的数据，也可以直接运行 json-server 然后加上远端的地址即可。

$ json-server http://example.com/file.json
$ json-server http://jsonplaceholder.typicode.com/db

 添加自定义路由

创建一个routes.json文件。注意每条路线都以/.

{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles\\?id=:id": "/posts/:id"
}

使用--routes选项启动 JSON 服务器。

json-server db.json --routes routes.json

 现在就可以使用其他路线访问资源。

/api/posts # → /posts
/api/posts/1  # → /posts/1
/posts/1/show # → /posts/1
/posts/javascript # → /posts?category=javascript
/articles?id=1 # → /posts/1

周橘
关注
专栏目录
ESP32-Web-Server ESP-IDF 开发系列介绍
wangyx1234的博客
10-17 976
使用ESP-IDF在ESP32上构建 HTTP Web 服务器或 WebSocket Web 服务器。带你玩转物联网小项目开发系列之～玩转 Web server 开发。
json服务器
02-15
json服务器
json server服务器
weixin_33804582的博客
05-21 178
json文件可以理解为数据库 一、json-server快速搭建RESTAPI 安装： sudo cnpm install -g json-server 启动（使用）： json-server指向json文件所在位置 data.json文件： { "roles": [ { "id": 0, "name": "SuperUser" ...
JSON教程（非常详细）(1)
最新发布
2401_87300302的博客
09-22 1336
使用 Ajax 异步加载的数据；RPC 远程调用；前后端分离，后端返回的数据；开发 API，例如百度、高德的一些开放接口。这些接口一般都会提供一个接口文档，说明接口调用的方法、需要的参数以及返回数据的介绍等。JSON 是一种轻量级的数据交换格式，它是基于 JavaScript 的一个子集，采用完全独立于编程语言的格式来表示数据，可以跨语言、跨平台使用。简洁清晰的层次结构使得 JSON 逐渐替代了 XML，成为了最理想的数据交换格式，广泛应用于 Web 开发领域。
json-server 详解
derfyfxh588690的博客
06-07 1135
JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。 安装json-server npm install -g json-server 启动 json-server json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保...
json-server详解
热门推荐
李宥的博客
07-30 1万+
- Json-server 是一个`零代码快速搭建本地 RESTful API 的工具`。它使用 `JSON 文件作为数据源`，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。
json-server
m0_62956518的博客
04-23 1万+
jsonserver,前端非常实用的一个技术，vue3可以对json中的数据进行操作
json-server的使用从入门到精通
weixin_57547803的博客
04-01 2838
建议全局安装，因为以后你可能会对 `json-server` 产生依赖：npm install -g json-server
**前端进阶必备** node.js新手入门—教你写属于自己的接口get和post请求基础详解
weixin_45745641的博客
01-23 1276
前言 想要进阶前端开发，必须要掌握一门后端语言，那么这是node.js就是首选了，可以轻轻松松的写出自己想要的接口，熟悉服务端接口开发，就能让自己具备核心竞争力。 本文教大家初步入门node，编写简单的get和post请求 本篇系列的文章会教大家由浅入深学习node，还不赶快关注一波，持续更新~ 安装node 第一步当然是安装环境，安装的教程很多而且容易，这里就不叙述了，附上node官网下载链接： Node.js官网下载由此进 开始整活 node初体验 新建js文件，我们先来写第一个最简单的实例感受一下 c
Vue完整项目构建(进阶篇)
08-28
Vue完整项目构建(进阶篇)是针对有一定前端基础的学习者设计的教程，旨在帮助开发者深入理解如何使用Vue.js框架构建复杂的应用。这个教程要求学习者具备JavaScript、HTML5、CSS3的基础知识，同时理解ES2015的Module...
攻防世界-web高手进阶区
zji
04-25 6646
文章目录攻防世界-web高手进阶区一、baby_web二、Training-WWW-Robots1.引入库2.读入数据总结 攻防世界-web高手进阶区 提示：这里是记录web的题目，这里我基本不讲很多细节，请自行下载Burpsuite，web使用的等等工具。 一、baby_web 非常的简单，bp抓包直接把1.php去掉后，就看的flag了。 二、Training-WWW-Robots 非常的简单，点网页进去后，看到了robots.txt进去看到一个可以看到他有一个不允许访问的文件f10g.php，在
服务器端的JSON
04-13
NULL 博文链接：https://hoochiang.iteye.com/blog/1717813
json-server:简单的JSON服务器示例
05-21
json服务器 JSON服务器Gulp任务的简单示例 起床并跑步 从https://github.com/emb0624/json-server.git克隆此仓库 从根目录运行npm install 运行gulp （可能需要全局安装Gulp npm install gulp -g ） 您的浏览器将自动打开并定向到浏览器同步代理地址 将URL更改为 ，它将打开一个用于检查JSON对象的简单UI。 现在gulp正在运行，服务器也已启动，并正在/build目录中提供文件。 Gulp将自动处理/src目录中的任何更改，并将这些更改注入到指向代理地址的所有打开的浏览器中。
前端接口json-server的使用
weixin_45012866的博客
11-17 400
一、什么是json-server json-server是一个很好的可以替我们完成这一工作的工具。我们只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。模拟后端数据接口的工具。 二、json-server的使用 json-server的安装 在命令行管理中使用npm的方式进行安装： 、 查看安装的json-server的版本： json-server的运行 在一个文件夹里面新建一个db.json文件： db.json文件： { "
JSON服务器（json-server）
从零开始的教程世界
07-17 2814
Today we will look into a very handy tool json-server, which can give you a mock rest json server in a minute. 今天，我们将研究一个非常方便的工具json-server，它可以在一分钟内为您提供一个模拟剩余的json服务器。 In a regular enterprise applica...
json-server服务器
qq_45261364的博客
08-02 293
在练习axios进行json-server服务器搭建，运行时报错
jsonserver
吴彦祖山东分组
07-02 739
jsonserver安装卸载模拟数据 学习前端框架时，想模拟一下真实数据，又不想写大段的增删改查代码，可以借助jsonserver来搭建本地的数据接口。 安装 安装全局的json-server： npm install -g json-server 查看版本号判断是否安装成功： json-server -v 卸载 npm uninstall -g json-server 模拟数据 新建...
JSON Server
songxiugongwang的博客
02-19 258
Table of contents https://github.com/iisunnyboy/user-app Sponsorship Getting started Routes Plural routes Singular routes Filter Paginate Sort Slice Operators Full-text search Rel...
『前端必备』本地数据接口—json-server 详细介绍（入门篇）
zhou139856的博客
07-13 6065
前端必备的本地接口数据之 json-server 详细介绍
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周橘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值