jsonserver怎么使用

JSON-Server 快速上手：轻松搭建 Mock 服务器，前后端开发更高效

在前后端分离开发中,后端接口尚未完成时，前端开发者常需要模拟数据接口进行开发和调试，手动维护模拟数据文件不仅繁琐，还难以动态响应不同请求，JSON-Server 作为一款轻量级工具，能基于 JSON 文件快速搭建功能完整的 RESTful API 服务器，无需编写后端代码即可实现 Mock 服务，本文将详细介绍 JSON-Server 的使用方法，助你高效解决前后端联调难题。

什么是 JSON-Server？

JSON-Server 是一个基于 Node.js 的开源工具，核心功能是通过一个 JSON 文件自动生成 RESTful API 接口，它支持 GET、POST、PUT、DELETE 等 HTTP 方法，能模拟数据的增删改查、分页、排序、关联查询等真实接口行为，同时支持自定义路由、中间件、跨域配置等高级功能，让前端开发可以独立于后端进行，提升开发效率。

环境准备：安装 JSON-Server

使用 JSON-Server 的前提是安装 Node.js 环境（因其基于 npm 包管理），安装步骤如下：

安装 Node.js

访问 Node.js 官网下载并安装 LTS（长期支持）版本，安装完成后，打开终端（Windows 下为 CMD 或 PowerShell，macOS/Linux 下为 Terminal），输入以下命令验证安装：

node -v  # 查看 Node.js 版本
npm -v   # 查看 npm 版本

若显示版本号,说明安装成功。

全局安装 JSON-Server

在终端中执行以下命令,全局安装 JSON-Server（安装后可在任意目录使用）：

npm install -g json-server

快速上手：5 分钟搭建第一个 Mock 服务器

创建 JSON 数据文件

在项目根目录下创建一个 db.json 文件，定义模拟数据，创建一个包含用户列表和文章列表的 JSON 文件：

{
  "users": [
    { "id": 1, "name": "张三", "email": "zhangsan@example.com" },
    { "id": 2, "name": "李四", "email": "lisi@example.com" }
  ],
  "posts": [
    { "id": 1, "title": "JSON-Server 教程", "content": "如何使用 JSON-Server", "userId": 1 },
    { "id": 2, "title": "前端开发技巧", "content": "提升效率的 5 个方法", "userId": 2 }
  ]
}

注意：JSON-Server 要求 db.json 文件中的每个顶级键（如 users、posts）会对应一个资源路由（如 /users、/posts），且每个资源对象必须有唯一标识符（默认为 id 字段）。

启动 Mock 服务器

在终端中进入 db.json 所在目录，执行以下命令启动服务器：

json-server --watch db.json

--watch 参数：监听 db.json 文件变化，修改数据后服务器会自动更新，无需重启。
启动成功后,终端会显示类似信息：
```
\{^_^}/ hi!
  Loading db.json...
  Done
  Resources:
  http://localhost:3000/users
  http://localhost:3000/posts
  Home:
  http://localhost:3000
```
JSON-Server 已在 http://localhost:3000 启动，你可以通过浏览器或 API 工具（如 Postman）访问接口。

测试接口

JSON-Server 自动为 db.json 中的每个资源生成 RESTful 接口，支持以下操作：

（1）查询数据

获取所有用户：GET http://localhost:3000/users 返回：

[
  { "id": 1, "name": "张三", "email": "zhangsan@example.com" },
  { "id": 2, "name": "李四", "email": "lisi@example.com" }
]

获取单个用户（通过 id）：GET http://localhost:3000/users/1 返回：
```
{ "id": 1, "name": "张三", "email": "zhangsan@example.com" }
```

获取关联数据（通过 _embed）：GET http://localhost:3000/users/1?_embed=posts 返回用户及其发布的文章：

{
  "id": 1,
  "name": "张三",
  "email": "zhangsan@example.com",
  "posts": [
    { "id": 1, "title": "JSON-Server 教程", "content": "如何使用 JSON-Server", "userId": 1 }
  ]
}

（2）新增数据

添加用户：POST http://localhost:3000/users，请求体为：

{ "name": "王五", "email": "wangwu@example.com" }

返回新用户（自动生成 id）：

{ "id": 3, "name": "王五", "email": "wangwu@example.com" }

（3）修改数据

更新用户：PUT http://localhost:3000/users/1，请求体为：

{ "name": "张三（已更新）", "email": "zhangsan_new@example.com" }

返回更新后的用户：

{ "id": 1, "name": "张三（已更新）", "email": "zhangsan_new@example.com" }

（4）删除数据

删除用户：DELETE http://localhost:3000/users/2 返回空响应（状态码 200），表示删除成功。

进阶配置：让 Mock 服务更贴近真实场景

自定义端口（默认 3000）

若 3000 端口被占用，可通过 --port 参数指定端口：

json-server --watch db.json --port 8080

此时服务器地址变为 http://localhost:8080。

自定义路由（Route）

JSON-Server 允许通过 routes.json 定义自定义路由，将特定路径映射到实际资源，将 /api/users 映射到 /users：创建 routes.json 文件：

{
  "/api/*": "/$1",
  "/users/:id/posts": "/posts?userId=:id"
}

启动服务器时添加 --routes 参数：

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

此时访问 /api/users 等同于访问 /users，/users/1/posts 可直接获取用户 1 的文章列表（无需 _embed）。

添加中间件（Middleware）

若需要处理请求头、身份验证等逻辑，可通过中间件实现，创建 middleware.js 文件：

module.exports = (req, res, next) => {
  // 添加 CORS 头，解决跨域问题
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
};

启动服务器时添加 --middlewares 参数：

json-server --watch db.json --middlewares middleware.js

使用脚本文件（Scripts）

对于更复杂的逻辑（如动态生成数据、自定义响应），可通过 --scripts 参数指定 JavaScript 脚本文件，创建 scripts.js 文件：

module.exports = {
  // 初始化数据库时执行
  initialized: (db) => {
    // 为每个用户添加 createdAt 时间戳
    db.users.forEach(user => {
      user.createdAt = new Date().toISOString();
    });
  },
  // 处理 POST 请求时执行
  postCreated: (route, req, res) => {
    // 新增用户时记录日志
    console.log(`新增用户：${JSON.stringify(req.body)}`);
  }
};

启动服务器时添加 --scripts 参数：

json-server --watch db.json --scripts scripts.js

生成随机数据（json-server-generator）

若需要大量模拟数据,可结合 json-server-generator（简称 json-server-generate）插件动态生成，安装插件：

npm install -g json-server-generator

创建 generate.js 文件定义数据结构：

module.exports = {
  users: 10, // 生成 10 个用户
  posts: 20, // 生成 20 �

企鹅直播企鹅直播足球直播爱奇艺直播爱奇艺足球直播足球直播足球直播

正文