Json-server 的使用教程

---

前言

json-server 可以让前端人员不用去编写后端的代码，就能在本地搭建一个 json 服务，可用于测试一些业务逻辑，便于调试调用。

在前后端分离的开发模式下前端使用 json-server 模拟数据接口, 这时候 后端接口还没有开发出来, 前端又需要数据进行开发，这种情况下就需要前端先行模拟数据, 等后端接口写好进行 targetUrl 进行替换。

---

一、简介

github 地址：https://github.com/typicode/json-server

npm 地址：https://www.npmjs.com/package/json-server

json-server 是一个零代码快速搭建本地 RESTful API 的工具，具有以下几个主要特点和功能：

• json-server 使用 JSON 文件作为数据源，通过提供一组简单的路由和端点来模拟后端服务器的行为
• 它允许前端开发人员在不依赖后端 API 的情况下进行开发，通过本地搭建一个 JSON 服务来快速生成 REST API 风格的后端服务

功能特性：

• 跨平台兼容：一个可执行文件即可在多种操作系统上运行
• 简单易用：只需访问特定 URL，即可查看数据列表并开始通信
• 安全可靠：允许通过防火墙设置，只开放指定的端口，保护用户数据安全
• Websocket 与 Web 服务器一体化：内置Web服务器，支持在任何地方与设备建立 WebSocket 连接
• 易于集成：通过 JSON 格式交换数据，便于前后端开发
• 支持跨域、jsonp、路由订制、数据快照保存等功能

---

二、安装与配置

1. 安装 node-js

json-server 基于 npm 进行安装，需要先安装 Node.js，因为 npm 是 Node.js 的包管理器

node-js 下载：https://nodejs.org/en/download/

一般会选择在 LTS 下进行下载，因为 LTS 是稳定版本的，然后根据自己电脑的系统选择安装，比方说我电脑是 windows-64x 的，那我就点击 Windows Installer（.msi） > 64-bit 就会开始下载

如果想要下载旧版本可在 Previous Release 中查询

点击 Releases 就能跳转到对应的下载界面

或者直接在地址上面输入，点击 enter 也能获取

PS：建议 node-js 的版本最好在 16 以上

点击对应的包即可下载完成

下载好安装程序包之后，只需要双击打开即可进行安装

node 的安装也是傻瓜式的，一直 next 即可

然后点击 finsh

检测 node-js 是否安装成功，只需要 win + R 调起 运行命令框，输入 cmd 打开 cmd窗口，再输入 node -v 查看 node 的版本，如果有显示版本信息，就表明 node-js 安装成功了

npm 是 node-js 的包管理和分发工具，当安装完成 node-js 后 npm 也随之安装完成，可以通过 npm -v 来校验是否安装成功

---

2. npm 镜像设置

在 vue 中经常会使用 npm 来安装一些包，而 npm 的下载镜像是在国外，所以使用 npm 下载会非常的慢，这里有两种方式来解决这个问题：

• 方式一：使用 yarn 进行安装

  使用 yarn 安装就需要保证当前系统有下载过 yarn，同样可以在 cmd窗口 中输入 yarn -v 来检测是否安装过 yarn

  

  如果没有就下载，输入：npm i -g yarn，下载完成之后仍旧可以输入 yarn -v 来进行检测

  

• 方式二：设置 npm 镜像为国内的

  可以在 cmd窗口 中通过 npm config get registry 命令来查询 npm 所使用的镜像

  

  默认使用的镜像是：https://registry.npmjs.org/，如果你 npm 所使用的镜像是这个的话，就换成国内的，比如：

  （1）https://registry.npm.taobao.org/

  （2）https://registry.npmmirror.com

  比如我使用 https://npmmirror.com/ 所提供的镜像 https://registry.npmmirror.com

  

  那就可以通过 npm config set registry https://registry.npmmirror.com 这行命令将镜像设置为 https://registry.npmmirror.com 即可

  

---

3. 安装 json-server

Win + R 调出运行对话框，输入 cmd 打开命令窗口

再输入以下命令进行全局安装：

npm install -g json-server

输入以下命令查看是否安装成功

json-server --version

如果安装成功会显示版本信息

---

三、使用

---

1. 创建本地数据源

首先需要创建一个本地数据源，格式是 json 形式的，例如：

{
    "users": [
        {
            "id": "1",
            "name": "Mico",
            "age": 18
        },
        {
            "id": "2",
            "name": "Rose",
            "age": 21
        },
        {
            "id": "3",
            "name": "Jack",
            "age": 22
        },
        {
            "id": "4",
            "name": "Jon",
            "age": 19
        }
    ]
}

---

2. 启动 Json Server

语法：

json-server [options] <source>

其它参数说明：

参数	简写	说明	默认值
--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	指定延迟返回时长(ms)
--id	-i	指定数据库的ID属性	id
--foreignKeySuffix	–fks	指定外键前缀	id
--quiet	-q	抑制来自输出的日志消息
--help	-h	显示帮助
--version	-v	显示版本号

打开命令窗口

输入以下命令启动 json server

json-server --watch db.json

默认端口号为 3000，如果想要修改端口号，在启动时添加 --port 端口号 即可，例如：

json-server --watch db.json --port 9527

也可以将参数写在配置文件（json-server.json）中，例如：

{
    "port": 4396,
    "watch": true,
    "static": "./static",
    "read-only": false,
    "no-cors": false,
    "no-gzip": false
}

指定配置文件启动：

json-server --watch db.json --config json-server.json

启动成功之后就能在游览器或 Postman 上进行访问了，例如：

---

3. 操作数据

以上述 db.json 中的数据为例，展示 json-server 如何通过 API 来操作数据

---

（1）查询数据

查询数据需要用 GET 方法

• 查询所有数据

GET localhost:3000/users

• 根据 ID 查询数据

GET localhost:3000/users/1

• 条件查询

GET localhost:3000/users?age=22

GET localhost:3000/users?age=22&name=%ck

• 分页查询

可以使用 _page 和 _limit 对数据进行分页

GET localhost:3000/users?_page=1&_limit=2

---

（2）新增数据

新增数据需要用 POST 方法

POST localhost:3000/users

json：

{
    "id": "5",
    "name": "Tom",
    "age": 23
}

验证：

---

（3）修改数据

修改数据需要用 PUT 方法

PUT localhost:3000/users/3

json：

{
    "id": "3",
    "name": "Mike",
    "age": 23
}

验证：

---

（4）删除数据

修改数据需要用 DELETE 方法

DELETE localhost:3000/users/3

验证：