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;
启动服务时添加中间



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