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:3000JSON-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 �


还没有评论,来说两句吧...