json-server怎么用

json-server怎么用：快速搭建Mock API的利器

在前后端分离的开发模式中，前端开发常常需要依赖后端API接口进行调试，而后端接口往往还未开发完成，这时，一个能够快速模拟真实API的工具就显得尤为重要。json-server 就是这样一款轻量级、零配置的Mock服务器工具，它能基于JSON文件快速生成RESTful API，让前端开发者在无需后端支持的情况下，独立、高效地完成接口调试和开发，本文将详细介绍json-server的安装、配置、使用方法及常见技巧,助你快速上手。

json-server简介

json-server是一个基于Node.js的命令行工具，其核心功能是通过读取一个JSON文件（或多个JSON文件），自动将其转换为RESTful API接口，它支持完整的CRUD（增删改查）操作，数据变更会实时同步到JSON文件中，且支持跨域请求、数据关联、自定义路由等高级功能，堪称前端开发者的“接口神器”。

核心优势

零配置：无需编写复杂配置,一个JSON文件即可启动API服务。
RESTful支持：自动生成GET、POST、PUT、DELETE等标准接口。
实时同步：数据修改后自动保存到JSON文件,无需重启服务。
轻量级：无需数据库依赖，仅依赖Node.js环境,启动速度快。
扩展性强：支持自定义路由、中间件、数据过滤、分页等功能。

安装与环境准备

使用json-server前，需确保你的电脑已安装Node.js（建议版本≥14.0.0），Node.js自带npm包管理器，可通过以下步骤安装json-server：

全局安装json-server

打开终端（Windows下为CMD或PowerShell，Mac/Linux下为Terminal）,执行以下命令：

npm install -g json-server

-g参数表示全局安装，安装后可在任何目录下使用json-server命令。

验证安装

安装完成后,输入以下命令检查是否安装成功：

json-server --version

若返回版本号（如json-server/1.0.0-beta.3）,则表示安装成功。

快速上手：第一个Mock API

创建JSON数据文件

在项目目录下创建一个db.json文件（文件名可自定义，但需后续命令中指定）,用于存储模拟数据。

{
  "posts": [
    { "id": 1, "title": "json-server入门教程", "author": "张三" },
    { "id": 2, "title": "Mock API开发技巧", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "postId": 1, "content": "很实用，感谢分享！" },
    { "id": 2, "postId": 2, "content": "期待更多干货~" }
  ],
  "profile": {
    "name": "前端小王",
    "email": "wang@example.com"
  }
}

db.json的结构可以是任意合法的JSON对象，json-server会自动遍历其顶级键（如posts、comments、profile）,并为每个键生成对应的资源接口。

启动Mock服务

在终端中进入db.json所在目录,执行以下命令：

json-server --watch db.json

--watch参数：监听JSON文件变化，数据修改后自动同步到API（建议始终添加）。
启动成功后,终端会显示类似以下信息：
```
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
Home
http://localhost:3000
```
这表示json-server已启动，默认运行在http://localhost:3000端口，并自动为db.json中的每个顶级键生成了RESTful API。

测试API接口

打开浏览器或使用API工具（如Postman、curl）访问接口,验证Mock服务是否正常：

（1）获取所有资源

访问 http://localhost:3000/posts，返回posts数组：

[
  { "id": 1, "title": "json-server入门教程", "author": "张三" },
  { "id": 2, "title": "Mock API开发技巧", "author": "李四" }
]

（2）获取单个资源

访问 http://localhost:3000/posts/1，返回id为1的posts对象：

{ "id": 1, "title": "json-server入门教程", "author": "张三" }

（3）新增资源

使用POST方法请求 http://localhost:3000/posts，发送JSON数据：
json-server会自动生成id（默认基于当前最大id+1）,并返回新增的数据：
```
{ "id": 3, "title": "前端开发工具推荐", "author": "王五" }
```

（4）修改资源

使用PUT或PATCH方法请求 http://localhost:3000/posts/1，发送更新数据：
返回更新后的数据：
```
{ "id": 1, "title": "json-server入门教程（更新版）", "author": "张三" }
```

（5）删除资源

使用DELETE方法请求 http://localhost:3000/posts/1，返回空对象,表示删除成功。

进阶功能：自定义与扩展

json-server不仅支持基础CRUD，还提供了丰富的自定义功能,满足复杂场景需求。

自定义端口

默认端口为3000，若需修改，可通过--port参数指定：

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

自定义路由

通过--routes参数可指定路由配置文件，实现更灵活的API映射，创建routes.json文件：

{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id"
}

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

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

访问http://localhost:3000/api/posts等同于访问http://localhost:3000/posts，访问http://localhost:3000/posts/1/show等同于访问http://localhost:3000/posts/1。

数据关联与嵌套

json-server支持通过_embed和_expand实现数据关联查询。

关联查询：获取posts及其对应的comments，访问 http://localhost:3000/posts/1?_embed=comments，返回：

{
  "id": 1,: "json-server入门教程",
  "author": "张三",
  "comments": [
    { "id": 1, "postId": 1, "content": "很实用，感谢分享！" }
  ]
}

扩展查询：获取comments及其关联的posts，访问 http://localhost:3000/comments/1?_expand=posts，返回：

{
  "id": 1,
  "postId": 1,
  "content": "很实用，感谢分享！",
  "posts": {
    "id": 1,
    "title": "json-server入门教程",
    "author": "张三"
  }
}

过滤、排序与分页

json-server内置了查询参数支持，方便前端调试分页、筛选等功能：

过滤：GET /posts?author=张三（获取author为“张三”的posts）
排序：GET /posts?_sort=id&_order=desc（按id降序排列）
分页：GET /posts?_page=1&_limit=10（第1页,每页10条）

添加中间件

通过--middlewares参数可添加自定义中间件，实现请求拦截、日志记录等功能，创建middlewares.js文件：

function logRequests(req, res, next) {
  console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
  next();
}
module.exports = logRequests;

启动服务时添加中间

正文

json-server怎么用