对于前端开发者而言，Mock 服务是一项极为实用的工具，能够在后端接口尚未就绪时，提前模拟数据调试页面，或测试各种边界场景。那么如何快速在本地搭建一个 Mock 服务？本文以轻量级工具 JSON Server 为例，仅需三步即可完成，无需数据库，只需一个 JSON 文件即可轻松搞定。

一、准备工作

1. 安装 Node.js

首先确保本地已安装 Node.js——可前往官网下载对应版本，或在终端中执行 node -v 和 npm -v 命令，若正确显示版本号则说明环境已准备就绪。

2. 安装 JSON Server

在 VSCode 或其他编辑器中打开终端，输入一行命令即可完成安装：

npm install -g json-server

若遇到权限报错，可在命令前添加 sudo 以管理员身份执行。

二、三步搭建 Mock 服务

第 1 步：创建模拟数据文件

新建一个文件夹（例如 mock-demo），并在其中创建 db.json 文件，内容如下：

{
"users": [
{ "id": 1, "name": "张三", "age": 25 },
{ "id": 2, "name": "李四", "age": 30 }
],
"posts": [
{ "id": 1, "title": "第一篇文章", "author": "张三" }
]

说明：其中 users 和 posts 即为接口路径，内部存放数组格式数据，字段可根据需求自由增删。

第 2 步：启动服务

在终端中进入该文件夹目录，执行以下命令：

json-server --watch db.json --port 3000

参数解析：--watch 用于监听文件变动，--port 3000 指定服务端口（可自定义修改）。当出现如下提示时，即表明服务启动成功：

Endpoints:
https://localhost:3000/users
https://localhost:3000/posts

第 3 步：验证接口

打开浏览器，依次访问以下两个地址，即可直接获取 JSON 格式数据：

• 用户列表：https://localhost:3000/users
• 文章列表：https://localhost:3000/posts

三、调试与扩展

1. 修改数据自动生效

直接编辑 db.json 文件并保存，刷新页面即可看到数据自动更新——全程无需重启服务，非常便捷。

常见问题

Q1: 端口被占用？

只需更换端口号重新启动，例如使用 --port 4000 即可。

Q2: 数据不更新？

请检查 db.json 文件语法是否正确，可使用 JSONLint 等工具进行校验。

总结

JSON Server 足够轻量——仅凭一个 JSON 文件即可搭建起完整的 RESTful 风格 Mock 服务，支持增删改查全部操作。无论是前端调试、教学演示，还是快速验证想法，它都是一个零成本的利器。现在你已拥有一个能够在本地运行的后端接口服务，赶快在代码中调用试试吧！