json-server的用法-基于 RESTful API 的本地 mock 服务

发布于:2025-05-15 ⋅ 阅读:(17) ⋅ 点赞:(0)

json-server 是一个非常方便的工具,用于快速搭建基于 RESTful API 的本地 mock 服务,特别适合前端开发阶段模拟后端数据接口。


🧩 一、安装

npm install -g json-server

🚀 二、快速启动

  1. 创建一个 db.json 文件(模拟数据库):
{
  "posts": [
    { "id": 1, "title": "Hello", "author": "Tom" },
    { "id": 2, "title": "Hi", "author": "Jerry" }
  ],
  "comments": [
    { "id": 1, "body": "Nice post!", "postId": 1 }
  ],
  "profile": { "name": "User" }
}
  1. 启动服务:
json-server --watch db.json

默认运行在:
📍 http://localhost:3000


🔧 三、支持的 RESTful API 操作

假设资源名为 posts

操作 请求方式 路径 描述
获取列表 GET /posts 获取所有 posts
获取单个 GET /posts/1 获取 id 为 1 的 post
创建数据 POST /posts 添加新 post(需传 JSON)
更新(整体) PUT /posts/1 替换整个 post 对象
更新(部分) PATCH /posts/1 修改 post 的部分字段
删除 DELETE /posts/1 删除 post

🎛️ 四、常用功能说明

1. 分页、筛选、排序

  • 分页:?_page=2&_limit=10
  • 排序:?_sort=title&_order=desc
  • 筛选:?author=Tom

例如:

GET /posts?_page=1&_limit=5&_sort=title&_order=asc&author=Tom

2. 模糊查询

GET /posts?q=hello

模糊匹配所有字段包含 “hello” 的数据。

3. 关联查询(联表)

支持嵌套数据查询,例如:

GET /comments?postId=1
GET /posts/1?_embed=comments
  • _embed=comments:获取 post 时嵌入其 comments
  • _expand=post:获取 comment 时展开其对应 post

⚙️ 五、自定义路由(可选)

新建 routes.json

{
  "/api/*": "/$1"
}

然后运行:

json-server --watch db.json --routes routes.json

效果:
访问 /api/posts 实际映射到 /posts


🛡️ 六、中间件与端口指定(高级用法)

json-server --watch db.json --port 4000 --middlewares ./middleware.js

也可以使用 node 脚本自定义服务:

// server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(4000, () => {
  console.log('JSON Server is running')
})

运行:

node server.js

🧪 七、开发中典型用途

  • 前端开发模拟 API,无需后端配合
  • Mock 数据开发接口文档
  • 演示项目/原型展示

✅ 八、总结亮点

特点 描述
零配置启动 基于一个 JSON 文件即可构建完整 RESTful API
完全 RESTful GET/POST/PUT/PATCH/DELETE 全支持
支持分页筛选排序 非常适合模拟真实后端接口
可扩展 支持中间件、自定义路由等高级功能


网站公告

今日签到

点亮在社区的每一天
去签到