对比常见的Mock方案，配置JSON SERVER

最新推荐文章于 2025-05-24 10:27:41 发布

Call_me_small_pure

最新推荐文章于 2025-05-24 10:27:41 发布

阅读量481

点赞数

文章标签： Mock json-server 数据

路漫漫其修远兮，吾将上下而求索～

本文链接：https://blog.youkuaiyun.com/Call_me_small_pure/article/details/115331575

版权

本文介绍了在前端开发中如何使用json-server作为本地Mock工具，包括其优点、缺点和配置步骤。通过创建db.json文件并运行json-server，开发者可以在无需后端配合的情况下进行增删改查操作，方便快捷地模拟真实API环境。然而，这种方式不支持自动更新后端接口变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码侵入（直接在代码中写死Mock数据或请求本地JSON文件）

优点：无
缺点：

和其他方案比，Mock方案不好
与真实的server环境切换非常麻烦，一切需要侵入代码切换环境的行为都是不好的

请求拦截

代表：Mock.js
优点：与前端代码分离、可随机生成数据
缺点：随机假数据，无法真实模拟增删改查情况、只支持ajax，不支持fetch

接口管理工具

代表： rap 、swagger 、moco、yapi
优点：配置功能强大，接口管理与Mock管理一体，后端修改Mock也跟着改变，可靠。
缺点：

配置复杂，依赖后端，可能会出现后端不愿意出手或等配置完了，接口也开发出来了的情况
一般会作为大团队的基础建设而存在，没有这个条件的话，慎重考虑！

本地node服务器—推荐

代表：json-server
优点：

配置简单，json-server可以0代码30秒启动一个REST API Server
自定义程度高，一切尽在掌握
增删改查真实模拟

缺点：与接口管理工具相比，无法随着后端API的修改而修改

配置 json-server

 1. npm install json-server -g

测试：此步骤可忽略

根目录新建db.json文件，内容自定义，例如{ "users": [] }
运行命令行 json-server --watch db.json
复制地址http://localhost:3000/users，在postman里请求，增删改查遵照REST API规范
get请求得到一个空数组（因为在db.json中定义的users为空数组）
post请求，参数为{name: 'jack'},返回值为{name:'jack',id:1}，db.json文件中也成功添加一条数据

把json-server嵌入到项目中

2. yarn add json-server -D

a. 根目录新建'__json_server_mock__'文件夹，新建db.json文件,
   内容为 {"users": []}

b. 在package.json文件里的scripts对象中添加 "json-server": "json-server __json_server_mock__/db.json --watch" //（属性名自定义）

c. 运行"npm run json-server"

到此配置结束。