【Mock】JSON Server常用使用教程(自动生成遵循restful风格的API)

1.安装

npm全局安装

npm install -g json-server

yarn 全局安装

yarn global add json-server

npm基于特定项目的本地安装

npm install json-server

yarn基于特定项目的本地安装

yarn add json-server

如何过编写项目的话建议只在项目本地安装,因为全局安装可能会导致一些问题,例如版本冲突或者环境变量问题.

2.快速使用

2.1准备db.json文件(名字可以随意,当必须是.json结尾)

db.json

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

2.2启动JSON Server

启动命令

json-server --watch db.json --port 8000

可选参数

json-server [选项] <代码路径>

选项	描述	默认值
–config, -c	配置文件路径	“json-server.json”
–port, -p	设置端口号	3000
–host, -H	设置主机名	“localhost”
–watch, -w	监视文件变化	无
–routes, -r	路由文件路径	无
–middlewares, -m	中间件文件路径	无
–static, -s	静态文件目录	无
–read-only, --ro	仅允许GET请求	无
–no-cors, --nc	禁用跨域资源共享	无
–no-gzip, --ng	禁用GZIP内容编码	无
–snapshots, -S	快照目录	“.”
–delay, -d	响应延迟时间（毫秒）	无
–id, -i	数据库ID属性名（例如_id）	“id”
–foreignKeySuffix, --fks	外键后缀（例如post_id）	“Id”
–quiet, -q	静默模式，不输出日志信息	无
–help, -h	显示帮助信息	无
–version, -v	显示版本号	无

示例

  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

访问(验证是否成功)

浏览器中打开: http://localhost:8000
看到下面页面证明成功了

在这里插入图片描述

2.3调用API

你可以使用接口测试工具,比如postman,jmeter.
下面我会使用axios去请求代码如下:

axiosDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button id="get">GET</button>
    <button id="post">POST</button>
    <button id="put">PUT</button>
    <button id="deleteFunction">DELETE</button>
    <button id="patch">PATCH</button>

    <div id="contents"></div>
    
    <!-- <script src="./axios/axios.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        get.onclick = () => {
            axios.get('http://localhost:8000/posts').then(res => {
                console.log(res.data);
                contents.innerText = JSON.stringify(res.data);
            })
        }

        post.onclick = () => {
            axios.post('http://localhost:8000/posts', {
                "title": "json-server1",
                "author": "typicode"
            })
        }

        put.onclick = () => {
            axios.put(`http://localhost:8000/posts/1`, {
                "title": "json-server1"
            })
        }

        deleteFunction.onclick = () => {
            axios.delete(`http://localhost:8000/posts/1`)
        }

        patch.onclick = () => {
            axios.patch(`http://localhost:8000/posts/2`, {
                "title": "hahahaha"
            })
        }
    </script>
</body>
</html>

2.3.1 GET请求

获取所有数据, URL: http://localhost:8000/posts
请求结果

2.3.2 POST请求

想posts添加一条数据,代码如下
在db.json文件中去检查一下
结果: 可以看到db.json文件中的posts新增了一条数据,并且我们能观察到id会只增,我梦并没有传递id.

2.3.3 PUT请求

请求代码如下,我们只修改了title,然后通过路由传参
在db.json文件中检查一下
结果: 可以看到,我们的数据确实被修改了,但是put请求是全局替换,尽管你只修改了title,但是它会将其它没有设置的替换为空,如果想要局部修改你可以看下面的patch方法.

2.3.4 DELETE请求

代码如下, 通过路由传参,将posts的第一条数据删除.
在db.json文件中检查一下
结果: 可以看到数据已经被删除了

2.3.5 PATCH请求

代码如下, 使用patch请求我们可以进行局部修改,就是我们只需要修改某一些数据就好了,不用将它全部替换.
在db.json文件中检查一下
结果: 可以看到title已经修改了.

3.详细使用

3.1 传参的方式

3.1.1 通过路由传参

代码,我们可以看到在posts后面更了“/1”,而这个1代表的是id,意思就是我们查询出id=1的数据
结果: 我们可以看到请求回了id=1的数据

3.1.2 通过parmas传参

代码, 我们在“?”后面加上我们的参数title=hahahaha的,意思就是我们要查询出title=hahahaha的数据
结果

3.1.3 通过payload传参

代码, 当然你在get中不要这样使用,这种方式你可以用来请求post, put, patch

3.2嵌套属性查询

如果我们的数据类型是下面这种结构:

{
    "posts": [
        {
            "title": "hahahaha",
            "author": "typicode",
            "like": {
                "name": "woman"
            },
            "id": 1
        },
        {
            "title": "hahahaha",
            "author": "typicode",
            "id": 2
        }
    ],
    "comments": [],
    "profile": {
        "name": "typicode"
    }
}

如果我们要查询posts数据下like的name是“woman”的数据,我们可以通过下面的方式请求

GET /posts?like.name=woman

查询结果如下

[
  {
    "title": "hahahaha",
    "author": "typicode",
    "like": {
      "name": "woman"
    },
    "id": 1
  }
]

总结: 当我们要访问嵌套属性的时候,直接使用“.”就好了

3.3进行分页

使用_page和_limit可以对数据进行分页
_page: 当前页码
_limit: 每页数据

GET /posts?_page=7
GET /posts?_page=7&limit=20

默认返回10条数据

3.4实现排序

_sort和_order(默认是升序)
_sort: 需要排序的字段,可以传入多个
_order: 升序(asc),降序(desc)

单个字段排序

GET /posts?_sort=id&_order=asc

多个字段排序

GET /posts?_sort=id,name&_order=desc,asc

3.5筛选条件(大于,小于,排除,模糊匹配)

3.5.1大于和小于

使用_gte(大于)和_lte(小于)

GET /posts?id_gte=1&id_lte=2

3.5.2排除

使用_ne进行排除

GET /posts?id_ne=1

3.5.3模糊匹配

使用_like进行模糊匹配(支持正则匹配)

GET /posts?title_like=server

3.6全文搜索

使用q

GET /posts?q=internaet

3.7关联查询(一对多,多对一,多对多)

3.7.1一对多

查询的结果包含子内容,使用"_embed"

GET /posts?_embed=comments

3.7.2多对一

查询包含父资源的数据,使用“_expand”

GET /comments?_expand=post

3.7.3多对多

在使用过程中转换成一对多或者多对一查询就可以了

3.8查询数据库结构

GET /db

文章目录

1.安装

2.快速使用

2.1准备db.json文件(名字可以随意,当必须是.json结尾)

2.2启动JSON Server

2.3调用API

2.3.1 GET请求

2.3.2 POST请求

2.3.3 PUT请求

2.3.4 DELETE请求

2.3.5 PATCH请求

3.详细使用

3.1 传参的方式

3.1.1 通过路由传参

3.1.2 通过parmas传参

3.1.3 通过payload传参

3.2嵌套属性查询

3.3进行分页

3.4实现排序

3.5筛选条件(大于,小于,排除,模糊匹配)

3.5.1大于和小于

3.5.2排除

3.5.3模糊匹配

3.6全文搜索

3.7关联查询(一对多,多对一,多对多)

3.7.1一对多

3.7.2多对一

3.7.3多对多

3.8查询数据库结构