零代码Mock神器：json-server 快速上手

30秒搭建完整REST API，前端开发不再等待后端

在前后端分离开发中，我们经常遇到这样的场景：前端页面已经完成，但后端接口还未就绪。json-server 正是解决这一痛点的神奇工具！

什么是json-server？

json-server 是一个基于Node.js的零配置工具，只需一个JSON文件，就能立即获得完整的RESTful API接口，支持所有CRUD操作。

核心优势

⚡️ 30秒搭建 - 无需后端知识
🔄 实时热重载 - 文件修改自动生效
📚 功能完整 - 支持过滤、分页、排序等
🎯 真实模拟 - 完整的REST API体验

完整使用指南

1. 安装与启动

bash 复制代码

# 全局安装
npm install -g json-server

# 创建数据文件 db.json
{
  "posts": [
    { "id": 1, "title": "json-server教程", "author": "张三", "views": 100 },
    { "id": 2, "title": "前端开发实战", "author": "李四", "views": 200 }
  ],
  "comments": [
    { "id": 1, "body": "很好用", "postId": 1 },
    { "id": 2, "body": "学习到了", "postId": 2 }
  ],
  "users": [
    { "id": 1, "name": "王五", "role": "admin" }
  ]
}

# 启动服务
json-server --watch db.json --port 3000

2. 自动生成的API

启动后立即获得以下接口：

方法	端点	说明
GET	`/posts`	获取所有文章
GET	`/posts/1`	获取ID=1的文章
POST	`/posts`	创建新文章
PUT	`/posts/1`	替换文章
PATCH	`/posts/1`	部分更新
DELETE	`/posts/1`	删除文章

3. 高级查询功能

筛选过滤

javascript 复制代码

// 前端调用示例
fetch('/posts?author=张三')
fetch('/posts?views_gte=150')  // 浏览量≥150
fetch('/posts?title_like=教程') // 标题包含"教程"

分页排序

javascript 复制代码

// 分页：第2页，每页5条
fetch('/posts?_page=2&_limit=5')

// 排序：按浏览量降序
fetch('/posts?_sort=views&_order=desc')

// 多字段排序
fetch('/posts?_sort=user,views&_order=asc,desc')

关联查询

javascript 复制代码

// 获取文章及其评论
fetch('/posts?_embed=comments')

// 获取评论及对应文章信息
fetch('/comments?_expand=post')

// 嵌套路由：获取某篇文章的所有评论
fetch('/posts/1/comments')

4. 实用配置技巧

添加网络延迟

bash 复制代码

json-server --watch db.json --delay 1000

只读模式（防止误修改）

bash 复制代码

json-server --watch db.json --read-only

自定义脚本（package.json）

json 复制代码

{
  "scripts": {
    "mock": "json-server db.json --watch --delay 800 --port 3000",
    "mock:readonly": "json-server db.json --read-only"
  }
}

5. 前端集成示例

javascript 复制代码

// API调用封装
class MockAPI {
  static baseURL = 'http://localhost:3000';
  
  // 获取文章列表
  static async getPosts(params = {}) {
    const query = new URLSearchParams(params).toString();
    const response = await fetch(`${this.baseURL}/posts?${query}`);
    return await response.json();
  }
  
  // 创建文章
  static async createPost(post) {
    const response = await fetch(`${this.baseURL}/posts`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(post)
    });
    return await response.json();
  }
}

// 使用示例
const posts = await MockAPI.getPosts({ 
  _page: 1, 
  _limit: 10,
  _sort: 'views',
  _order: 'desc'
});

适用场景

前后端并行开发 - 前端不阻塞，独立开发测试
原型演示 - 快速搭建可交互原型
测试验证 - 模拟各种边界数据场景
团队协作 - 统一Mock数据规范

总结

json-server 以其简单易用的特性，成为前端开发者的必备工具。只需一个JSON文件，就能获得功能完整的Mock服务器，大大提升了开发效率。

关注公众号" 大前端历险记"，获取更多前端开发干货！