当前位置: 首页 > web >正文

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

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
完全 RESTfulGET/POST/PUT/PATCH/DELETE 全支持
支持分页筛选排序非常适合模拟真实后端接口
可扩展支持中间件、自定义路由等高级功能

http://www.xdnf.cn/news/6222.html

相关文章:

  • jQuery知识框架
  • Spring Cloud Gateway 聚合 Swagger 文档:一站式API管理解决方案
  • 鸿蒙OSUniApp 实现精美的用户登录和注册页面#三方框架 #Uniapp
  • Vue ElementUI原生upload修改字体大小和区域宽度
  • WeakAuras Lua Script ICC (BarneyICC)
  • 【周输入】510周阅读推荐-2
  • TTS-Web-Vue系列:Vue3实现侧边栏与顶部导航的双向联动
  • 23-单调队列-滑动窗口
  • LeetCode 每日一题 3341. 到达最后一个房间的最少时间 I + II
  • NAT网关(网络地址转换网关)的用途与场景
  • Mac的web服务器
  • [滑动窗口]越短越合法(可转化成越长越合法)
  • 【每天一个知识点】模型轻量化(Model Compression and Acceleration)技术
  • 麒麟环境下Selenium的使用
  • 语音识别-2
  • 【Oracle专栏】清理告警日志、监听日志
  • 【进程控制二】进程替换和bash解释器
  • 【数据库复习】SQL语言
  • Java生成可控的Word表格功能开发
  • 《世界经济浪潮中的AI变革与展望》
  • 涨薪技术|0到1学会性能测试第64课-SQL监控之Trace选项
  • 第二讲:电源滤波器设计与仿真-基于单管反激电源
  • 三维CAD皇冠CAD(CrownCAD)建模教程:工程图模块一
  • FPGA:Xilinx Kintex 7实现DDR3 SDRAM读写
  • Axure设计之内联框架切换页面、子页面间跳转问题
  • day20-线性表(链表II)
  • Adobe DC 2025安装教程
  • Leetcode数组day1
  • 深度学习—BP神经网络
  • Ascend的aclgraph(八)AclConcreteGraph:capture_end