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 的基本使用方法,并能够根据需要进行更高级的配置和使用。

相关推荐
极地星光18 小时前
JSON-RPC-CXX深度解析:C++中的远程调用利器
c++·rpc·json
Amd7941 天前
Nuxt.js 应用中的 schema:beforeWrite 事件钩子详解
json·vite·配置·nuxt·验证·钩子·动态
白萝卜弟弟1 天前
【MySQL】MySQL函数之JSON_EXTRACT
数据库·mysql·json
B1nna2 天前
SpringMVC学习记录(三)之响应数据
java·学习·json·springmvc·jsp
1024小神2 天前
package.json中“type“: “module“是什么含义,es6和commonjs的区别以及require和import使用场景
前端·json·es6
慧都小妮子2 天前
借助Aapose.Cells ,在 Node.js 中将 Excel 转换为 JSON
node.js·json·excel·aspose.cells
杜杜的man2 天前
【go从零单排】JSON序列化和反序列化
golang·json
我是苏苏2 天前
Web开发:ABP框架6——appsetting.json的读取以及实例的注入
前端·windows·json
Mephisto.java2 天前
【大数据学习 | HBASE高级】rowkey的设计,hbase的预分区和压缩
大数据·sql·mysql·json·hbase·database
乐闻x2 天前
ESLint 使用教程(七):ESLint还能校验JSON文件内容?
前端·javascript·json·eslint