🚀 前端开发福音：用 json-server 快速搭建本地 Mock 数据服务

假如你是一名前端开发者，曾为了"等后端接口"而发愁，那么你一定会爱上这个工具------json-server。

🧠 为什么要用 json-server？

在开发中，接口数据未准备好是家常便饭。前端同学常常陷入以下困境：

• 后端接口还没写好，我就不能调试页面了？
• 想调试一个边界条件，却苦等后端造数据？
• 接口文档与实际返回格式不一致，怎么办？

json-server 的出现就是为了解决这些痛点！

你只需要一个 JSON 文件，就能在几秒钟内启动一个完整的 REST API 服务，让前端不再"接口等于被动"。

🔧 一、快速开始

1. 安装

在你的前端项目中，使用 npm 或 yarn 安装：

npm install -g json-server
# 或者项目局部安装
npm install json-server --save-dev

2. 创建数据文件

创建一个 db.json 文件，作为模拟数据库。示例内容如下：

{
  "users": [
    { "id": 1, "name": "小明", "age": 18, "hobby": "唱歌" },
    { "id": 2, "name": "小红", "age": 20, "hobby":"跳舞" }
  ],
  "articles": [
    { "id": 1, "title": "前端工程化", "author": "小明" },
    { "id": 2, "title": "Vue3实战", "author": "小红" }
  ]
}

3. 启动服务

在package.json文件配置scripts执行脚本

  "scripts": {
    "mock:server": "json-server --watch db.json"
  },

运行以下命令:

npm run mock:server

默认会监听 http://localhost:3000，你将获得一个完整的 REST API 服务。

📚 二、支持的 RESTful 接口

你可以直接使用以下方式访问数据：

• 获取所有用户：GET /users
• 获取指定用户：GET /users/1
• 添加用户：POST /users
• 修改用户：PUT /users/1
• 删除用户：DELETE /users/1

是不是很像真实接口？是的，因为它本来就是模拟真实 REST 接口的。

🧪 三、进阶用法

1. 自定义端口和根路径

你可以通过参数修改默认行为：

"scripts": {
   "mock:server": "json-server --watch db.json --port 4000 --routes routes.json"
}

2. 配置 routes.json 自定义路由

如果你想将 /users 映射为 /api/user-list，可以创建 routes.json：

// routes.json
{
  "/api/user-list":"/users",
  "/api/get-user-info/:id": "/users/:id",
  "/api/add-user": "/users",
  "/api/update-user-info/:id":"/users/:id",
  "/api/delete-user/:id":"/users/:id",
  "/api/article-list":"/articles"
}

然后用命令启动：

npm run mock:server

访问 http://localhost:4000/api/user-list或/users 即可返回用户列表。

3. 使用中间件

可以使用自定义中间件来扩展json-server的功能。例如，添加日志记录中间件：

// middlewares.js
module.exports = (req,res,next)=> {
  console.log(req,'req')
  console.log(res,'res')
  console.log('这是第一个中间件')
  next();
}

启动服务时指定中间件：

// package.json
{
"scripts": {
   "mock:server": "json-server --watch db.json --middlewares ./middlewares.js"
}

4. 自定义配置文件

json-server允许我们把所有的配置放到一个配置文件中，默认为json-server.json。配置文件的主要内容如下：

// json-server.json
{
  // 自定义服务监听端口
  "port": 4000,  
  // 服务监听
  "watch": true, 
  "host": "127.0.0.1",// 指定域
  // 静态文件目录，可以将项目的HTML,JS,IMG等资源放在这里
  "static": "./public", 
   // 是否只允许get请求
  "read-only": false,
   // 是否允许跨域访问
  "no-cors":false,
   // 是否可压缩
  "no-gzip": false, 
   // 自定义路由，这个配置可以暂时省略，后续会有所涉及
  "routes": "routes.json"
}

配置运行脚本

// package.json
{
  "scripts": {
    "mock:server": "json-server -w db.json"
  }
}

可以通过--config或简写-c，指定配置文件名称

// package.json
{
  "scripts": {
    "mock:server": "json-server -w db.json --config ./json-server-config.json"
  }
}

5.其他相关配置参数

参数	简写	默认值	说明
--watch	-w	false	监听文件变动自动重启服务，常用于开发时实时响应数据更新
--port	-p	3000	设置服务运行端口
--host	-H	localhost	设置服务器绑定的主机名
--routes	-r	无	指定 routes.json 文件路径，用于配置自定义路由映射
--middlewares	无	无	指定中间件文件路径（支持一个或多个 .js 文件）
--static	-s	无	设置静态文件目录（如配合前端页面开发）
--read-only	无	false	启用只读模式，禁止对数据进行 POST/PUT/PATCH/DELETE 操作
--no-cors	无	false	禁用跨域请求头（CORS）
--no-gzip	无	false	禁用 Gzip 压缩
--delay	无	0	模拟网络延迟（单位为毫秒）
--id	无	id	设置资源主键字段（默认是 id）
--foreignKeySuffix	无	Id	设置外键字段后缀（例如 postId、userId）
--quiet	-q	false	启用静默模式，控制台不输出请求日志
--help	-h	-	查看帮助信息
--version	-v	-	查看版本信息

🧱 四、通过接口获取数据

1.获取users列表数据

• http://localhost:4000/api/user-list

const { data } = axios.get('http://localhost:4000/api/user-list');
// 返回
[
    {
        "id": 1,
        "name": "小明",
        "age": 18,
        "hobby": "唱歌"
    },
    {
        "id": 2,
        "name": "小红",
        "age": 20,
        "hobby": "跳舞"
    }
]

2.根据id获取用户数据

• http://localhost:4000/api/get-user-info/1

const { data } = axios.get(`http://localhost:4000/api/get-user-info/1`);
// 返回
{
    "id": 1,
    "name": "小明",
    "age": 18,
    "hobby": "唱歌"
}

3.添加用户数据

• http://localhost:4000/api/add-user

const form =  {
  name: "小刘",
  age: 16,
  hobby: "羽毛球"
}
const { data } = axios.post(`http://localhost:4000/api/add-user`,form);
   // 返回新增成功的数据
{
  "id": 3
  "name": "小刘",
  "age": 16,
  "hobby": "羽毛球",
}

4.修改用户数据

• http://localhost:4000/api/update-user-info/3

const form = {
    id:3,
    name:'小刘',
    age:18,
    hobby: '踢足球'
}
const { data } = axios.put(`http://localhost:4000/api/update-user-info/3`,form);
// 返回修改成功后的数据
{
    "id": 3,
    "name": "小刘",
    "age": 18,
    "hobby": "踢足球"
}

5.根据用户id删除用户数据

• http://localhost:4000/api/delete-user/3

// 删除id为3的用户数据
const { data } = axios.delete(`http://localhost:4000/api/delete-user/3`);

---

⚠️ 五、常见问题

Q1：为什么 POST 后的数据没有 id？

json-server 会自动为你添加自增 id，除非你手动指定。

Q2：能否写一些默认响应字段？

可以在 POST 时发送完整对象，也可以配合前端自动补字段。

Q3：如何模拟嵌套关系（如用户下的文章）？

你可以在 db.json 中设计嵌套结构，或者用 _expand 和 _embed 功能：

GET /articles?_expand=user

GET /users?_embed=articles

---

🎁 六、推荐使用场景

• 🎯 前后端分离开发阶段
• 📱 移动端接口调试
• 🧪 测试场景的数据造假
• 🎨 UI 组件对数据有依赖时的联调阶段

---

🧩 附加资源

• json-server GitHub 地址
• mock.js 配合使用实现更强大的动态数据