前端 Mock 数据不用等！5 分钟搭建完整 RESTful API，json-server太香了

作为前端开发者，你是否经常遇到这些问题：后端接口还没写完，前端开发卡壳；联调时数据格式频繁变动，改代码改到崩溃；想测试异常场景，却只能等后端配合？

今天给大家安利一款「前端 Mock 神器」——JSON-Server，只需一个 JSON 文件，5 分钟就能搭建出一套完整的 RESTful API，接口、数据、静态资源一站式搞定，彻底摆脱对后端的依赖！

PART 01

为什么 JSON-Server 是 Mock 天花板？

JSON-Server 是由知名开发者 typicode 打造的轻量级工具（没错，就是那个做 JSONPlaceholder 的作者），核心定位是「快速生成 REST API」。它的优势简直戳中前端痛点：

✅ 零学习成本：不用写一行后端代码，会写 JSON 就能用；

✅ 功能全：支持 GET/POST/PUT/PATCH/DELETE 等所有 RESTful 接口，分页、关联查询、排序、过滤样样行；

✅ 实时更新：修改 JSON 文件自动生效，无需重启服务；

✅ 兼容 JSON5：允许写注释、省略引号，数据文件更易维护；

✅ 静态服务：既能提供 API，又能托管前端静态文件，一套工具搞定全流程。

目前 JSON-Server 已更新到 beta v1 版本，相比老版本，v1 优化了 ID 类型（强制字符串）、调整了分页参数，还默认开启了文件监听，体验更丝滑。

PART 02

手把手教你用 JSON-Server

话不多说，直接上实操，全程不超过 5 分钟：

1. 准备数据文件

新建一个 db.json 文件，写入你需要的模拟数据：

{
  "posts": [
    { "id": "1", "title": "JSON-Server真香", "views": 999 },
    { "id": "2", "title": "前端Mock技巧", "views": 666 }
  ],
  "comments": [
    { "id": "1", "text": "终于不用等后端了", "postId": "1" }
  ]
}

如果觉得 JSON 格式太严格，还可以用 JSON5（支持注释、逗号结尾），后缀改成 .json5 即可。

2. 启动服务

无需安装，直接用 npx 运行：

npx json-server db.json

3. 调用接口

现在你可以像调用真实接口一样使用它：

# 获取所有文章
curl http://localhost:3000/posts
# 获取单篇文章
curl http://localhost:3000/posts/1
# 新增文章（POST请求）
curl -X POST http://localhost:3000/posts -d '{"title":"新文章"}' -H "Content-Type: application/json"

PART 03

这些高级玩法，效率翻倍

JSON-Server 远不止基础 CRUD，这些功能能让你的 Mock 更接近真实场景：

✅ 分页查询：用 page 和 perpage 实现分页，比如 /posts?page=1&perpage=10 ；

✅ 关联查询：通过 embed 关联多表数据，比如 /posts/1?embed=comments 能同时返回文章和评论；

✅ 静态文件：把前端打包后的文件放到 ./public 目录，JSON-Server 会自动托管，接口 + 静态资源一站式服务；

✅ 自定义端口 / 主机：通过 -p 指定端口， -h 指定主机，比如

json-server -p 8080 db.json 。

PART 04

适合谁用？

前端开发：接口未就绪时独立开发，再也不用等后端；

测试人员：快速搭建测试接口，验证各种数据场景；

产品经理：快速验证产品原型，直观展示功能逻辑；

新手开发者：学习 RESTful API 的最佳实践工具，无需搭建复杂后端。

PART 05

总结

作为前端开发者，效率工具的选择直接决定开发体验。JSON-Server 以极简的方式解决了 Mock 数据的核心痛点，无需后端知识、无需复杂配置，让前端开发真正做到「不被卡脖子」。

无论是日常开发、原型验证还是技术学习，JSON-Server 都值得加入你的工具箱。赶紧试试吧，5 分钟就能解锁高效开发新姿势！