JSON Server 详细使用教程

简介

JSON Server 是一个非常实用的工具,可以让你快速搭建一个模拟 REST API。它可以基于一个 JSON 文件快速创建一个全功能的假 REST API,非常适合前端开发时做原型或 mock 数据。本文将详细介绍 JSON Server 的安装和使用方法。

安装

JSON Server 是一个 Node.js 模块,可以通过 npm 安装:

npm install -g json-server
创建 JSON 数据文件

首先创建一个 JSON 文件,例如 db.json:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
启动服务器

在命令行中,进入 db.json 所在目录,运行:

json-server --watch db.json

现在,你就可以通过 http://localhost:3000 访问你的 API 了。

API 路由

JSON Server 会根据你的 JSON 文件自动生成以下路由:

  • GET /posts
  • GET /posts/1
  • POST /posts
  • PUT /posts/1
  • PATCH /posts/1
  • DELETE /posts/1

类似地,其他顶级属性(如 comments, profile)也会生成对应的路由。

高级用法

自定义路由

你可以创建一个 routes.json 文件来自定义路由:

{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles\\?id=:id": "/posts/:id"
}

然后启动服务器时使用 --routes 选项:

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

使用中间件

你可以使用 JSON Server 的中间件来添加自定义逻辑。创建一个 middleware.js 文件:

javascript 复制代码
module.exports = (req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  next()
}

然后在启动服务器时使用 --middlewares 选项:

javascript 复制代码
json-server db.json --middlewares ./middleware.js

生成随机数据

JSON Server 使用 Faker.js 来生成随机数据。你可以在 db.json 中使用 JS 代码来生成数据:

javascript 复制代码
module.exports = () => {
  const data = { users: [] }
  for (let i = 0; i < 50; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}

全文搜索

JSON Server 支持全文搜索,只需在 GET 请求中添加 q 参数:

javascript 复制代码
GET /posts?q=internet

关系

你可以在资源之间建立父子关系:

javascript 复制代码
GET /posts/1/comments
POST /posts/1/comments

分页

JSON Server 默认支持分页,使用 _page_limit 参数:

javascript 复制代码
GET /posts?_page=7&_limit=20

部署

JSON Server 可以很容易地部署到各种平台,如 Heroku、Now 等。你只需要创建一个简单的 server.js 文件:

javascript 复制代码
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(3000, () => {
  console.log('JSON Server is running')
})

然后按照各平台的部署指南进行部署即可。

总结

JSON Server 是一个强大而灵活的工具,可以快速创建模拟 REST API。它不仅适用于前端开发的原型设计和测试,也可以用于后端开发的 API 设计和文档编写。通过本教程,你应该能够掌握 JSON Server 的基本使用方法,并能够根据需要进行更高级的配置和使用。

相关推荐
_风中无我。7 小时前
Spring的过滤器获取请求体中JSON参数,同时解决Controller获取不到请求体参数的问题。
java·spring·json
whisperrr.11 小时前
【JavaWeb12】数据交换与异步请求:JSON与Ajax的绝妙搭配是否塑造了Web的交互革命?
前端·ajax·json
子非衣16 小时前
MySQL修改JSON格式数据示例
android·mysql·json
林的快手3 天前
伪类选择器
android·前端·css·chrome·ajax·html·json
css趣多多3 天前
初步安装和使用vant组件库,使用css变量定制vant主题样式 ,小程序的API Promise化,调用promise化之API
json
Web极客码4 天前
WordPress“更新失败,响应不是有效的JSON响应”问题的修复
json·github·wordpress
gywl6 天前
Spring Web MVC入门
spring·json·mvc·注解·cookie·session
运维小文7 天前
Mongodb数据管理
数据库·mongodb·json·非关系数据库·文档型数据库
玉阳软件yuyangdev_cn7 天前
铁塔电单车协议对接电单车TCP json协议对接成熟充电桩系统搭建低速充电桩TCP 接口规范
网络·tcp/ip·json·铁塔协议
m0_748232927 天前
SpringCloud系列教程:微服务的未来 (五)枚举处理器、JSON处理器、分页插件实现
spring cloud·微服务·json