不部署服务端调用接口，前端接口神器json-server

news/2025/1/15 15:02:14/

简介

json-server 是一款小巧的接口模拟工具，一分钟内就能搭建一套 Restful 风格的 API，尤其适合前端接口测试使用。
只需指定一个 json 文件作为 api 的数据源即可，使用起来非常方便，30秒入门，基本上有手就行。
进阶操作还支持分页，排序等操作，简直强大。

开源地址

主页地址：json-server - npm
Github项目地址：GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

30秒入门

环境依赖

  • 安装 Node.js 环境即可

操作步骤

  1. 安装 JSON 服务器
npm install -g json-server
  1. 创建一个db.json包含一些数据的文件
{"posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],"comments": [{ "id": 1, "body": "some comment", "postId": 1 }],"profile": { "name": "typicode" }
}
  1. 启动 json-server 接口服务器
json-server --watch db.json
  1. 浏览器访问 http://localhost:3000/posts/1，你会得到
{ "id": 1, "title": "json-server", "author": "typicode" }

补充

  • 如果您发出 POST、PUT、PATCH 或 DELETE 请求，更改将自动安全地保存到 db.json 文件中。
  • 注意 id 值是不可变的。

路由进阶

根据之前的db.json文件，这里是所有的默认路由。

路由形式一

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

路由形式二

GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile

筛选

使用 . 访问筛选

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

分页

使用_page和可选地_limit对返回的数据进行分页。

在Link标题，你会得到first，prev，next和last链接。

GET /posts?_page=7
GET /posts?_page=7&_limit=20

默认返回10项

排序

添加_sort和_order（默认升序）

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

对于多个字段，请使用以下格式：

GET /posts?_sort=user,views&_order=desc,asc

切片(分页)

添加_start和_end或_limit

GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10

与Array.slice完全一样工作（即_start开始_end结束）

特殊符号

添加_gte或_lte获取范围

GET /posts?views_gte=10&views_lte=20

添加_ne以排除值

GET /posts?id_ne=1

添加_like到过滤器（支持正则表达式）

GET /posts?title_like=server

全文搜索

添加 q

GET /posts?q=internet

关系

要包含子资源，请添加 _embed

GET /posts?_embed=comments
GET /posts/1?_embed=comments

要包含父资源，请添加 _expand

GET /comments?_expand=post
GET /comments/1?_expand=post

获取或创建嵌套资源（默认为一级）

GET  /posts/1/comments
POST /posts/1/comments

数据库

GET /db

主页

返回默认索引文件或服务./public目录

GET /

附加功能

静态文件服务器

您可以使用 JSON Server 为您的 HTML、JS 和 CSS 提供服务，只需创建一个./public目录或用于--static设置不同的静态文件目录。

mkdir public
echo 'hello world' > public/index.html
json-server db.json

json-server db.json --static ./some-other-dir

替换端口

您可以使用以下--port标志在其他端口上启动 JSON Server ：

$ json-server --watch db.json --port 3004

支持跨域

您可以使用 CORS 和 JSONP 从任何地方访问您模拟的 API 接口。

远程模式

您可以加载远程模式。

$ json-server http://example.com/file.json
$ json-server http://jsonplaceholder.typicode.com/db

生成随机数据

使用 JS 而不是 JSON 文件，您可以通过编程方式创建数据。

// index.js
module.exports = () => {const data = { users: [] }// 创建 1000 个用户信息for (let i = 0; i < 1000; i++) {data.users.push({ id: i, name: `user${i}` })}return data
}

$ json-server index.js

提示：使用Faker、Casual、Chance或JSON Schema Faker 等模块。

添加自定义路由

创建一个routes.json文件。注意每条路线都以/.

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

使用--routes选项启动 JSON 服务器。

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

现在您可以使用其他路线访问资源。

/api/posts # → /posts
/api/posts/1  # → /posts/1
/posts/1/show # → /posts/1
/posts/javascript # → /posts?category=javascript
/articles?id=1 # → /posts/1

添加中间件

您可以使用以下--middlewares选项从 CLI 添加中间件：

// hello.js
module.exports = (req, res, next) => {res.header('X-Hello', 'World')next()
}

json-server db.json --middlewares ./hello.js
json-server db.json --middlewares ./first.js ./second.js

命令行使用

json-server [options] <source>Options:--config, -c       Path to config file           [default: "json-server.json"]--port, -p         Set port                                    [default: 3000]--host, -H         Set host                             [default: "localhost"]--watch, -w        Watch file(s)                                     [boolean]--routes, -r       Path to routes file--middlewares, -m  Paths to middleware files                           [array]--static, -s       Set static files directory--read-only, --ro  Allow only GET requests                           [boolean]--no-cors, --nc    Disable Cross-Origin Resource Sharing             [boolean]--no-gzip, --ng    Disable GZIP Content-Encoding                     [boolean]--snapshots, -S    Set snapshots directory                      [default: "."]--delay, -d        Add delay to responses (ms)--id, -i           Set database id property (e.g. _id)         [default: "id"]--foreignKeySuffix, --fks  Set foreign key suffix, (e.g. _id as in post_id)[default: "Id"]--quiet, -q        Suppress log messages from output                 [boolean]--help, -h         Show help                                         [boolean]--version, -v      Show version number                               [boolean]Examples:json-server db.jsonjson-server file.jsjson-server http://example.com/db.jsonhttps://github.com/typicode/json-server

您还可以在json-server.json配置文件中设置选项。

{"port": 3000
}

模块

如果您需要添加身份验证、验证或任何行为，您可以将项目作为模块与其他 Express 中间件结合使用。

简单的例子

$ npm install json-server --save-dev

// 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(3000, () => {console.log('JSON Server is running')
})

$ node server.js

您提供给jsonServer.router函数的路径是相对于您启动节点进程的目录的。如果从另一个目录运行上述代码，最好使用绝对路径：

const path = require('path')
const router = jsonServer.router(path.join(__dirname, 'db.json'))

对于内存数据库，只需将对象传递给jsonServer.router().

另请注意，jsonServer.router()它可用于现有的 Express 项目。

自定义路由示例

假设您想要一个回显查询参数的路由和另一个在创建的每个资源上设置时间戳的路由。

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()// 设置默认中间件（记录器、静态、cors 和无缓存）
server.use(middlewares)// 写在自定义路由之前
server.get('/echo', (req, res) => {res.jsonp(req.query)
})// 要处理 POST、PUT 和 PATCH，您需要使用 body-parser
// 您可以使用 JSON Server
server.use(jsonServer.bodyParser)
server.use((req, res, next) => {if (req.method === 'POST') {req.body.createdAt = Date.now()}// 继续到 JSON Server 路由器next()
})// 使用默认路由器
server.use(router)
server.listen(3000, () => {console.log('JSON Server is running')
})

访问控制示例

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()server.use(middlewares)
server.use((req, res, next) => {if (isAuthorized(req)) { // 在此处添加您的授权逻辑next() // 继续到 JSON Server 路由器} else {res.sendStatus(401)}
})
server.use(router)
server.listen(3000, () => {console.log('JSON Server is running')
})

自定义输出示例

要修改响应，请覆盖router.render方法：

// 在这个例子中，返回的资源将被包装在一个 body 属性
router.render = (req, res) => {res.jsonp({body: res.locals.data})
}

您可以为响应设置自己的状态代码：

// 在这个例子中，我们模拟了一个服务器端错误响应
router.render = (req, res) => {res.status(500).jsonp({error: "error message here"})
}

重写器示例

要添加重写规则，请使用jsonServer.rewriter()：

// 写在 server.use(router) 之前
server.use(jsonServer.rewriter({'/api/*': '/$1','/blog/:resource/:id/show': '/:resource/:id'
}))

在另一个端点上挂载 JSON 服务器示例

或者，您也可以将路由器安装在/api.

server.use('/api', router)

API

jsonServer.create()

返回一个 Express 服务器。

jsonServer.defaults([options])

返回 JSON 服务器使用的中间件。

  • 选项
    • static 静态文件的路径
    • logger 启用记录器中间件（默认值：true）
    • bodyParser 启用 body-parser 中间件（默认值：true）
    • noCors 禁用 CORS（默认值：false）
    • readOnly 只接受 GET 请求（默认值：false）

jsonServer.router([path|object])

返回 JSON 服务器路由器。


http://www.ppmy.cn/news/52342.html

相关文章

JS笔试题精讲3 ES6专题

JS笔试题精讲3 ES6专题

只要拼接字符串 一律用 模板字符串 ${} 里: - 可以放： 变量、算术计算、三目、对象属性、创建对象、调用 函数、访问数组元素——有返回值的合法的js表达式 - 不能放: 没有返回值的js表达式也不能放分支/判断、循环等程序结构。比如: if else for while...等 ${}规则和今后…
阅读更多...
如何使用ESP32-CAM构建一个人脸识别系统

如何使用ESP32-CAM构建一个人脸识别系统

有许多人识别系统使用签名、指纹、语音、手部几何、人脸识别等来识别人&#xff0c;但除了人脸识别系统。 人脸识别系统不仅可以用于安全目的来识别公共场所的人员&#xff0c;还可以用于办公室和学校的考勤目的。 在这个项目中&#xff0c;我们将使用 ESP32-CAM 构建一个人脸识…
阅读更多...
零售库存管理系统该如何选？这5款零售库存管理系统值得推荐！

零售库存管理系统该如何选？这5款零售库存管理系统值得推荐！

对于实体门店来说&#xff0c;做零售就是做库存&#xff0c;谁能及时把店内的库存清空&#xff0c;谁就能快速盈利&#xff0c;这就需要实体门店能够简单高效的管理好库存。 但很多实体店基本上没有足够的人手和实力去制定科学的库存管理策略&#xff0c;借助零售库存管理系统&…
阅读更多...
Java题目训练——不用加减乘除做加法和三角形

Java题目训练——不用加减乘除做加法和三角形

目录 一、不用加减乘除做加法 二、三角形 一、不用加减乘除做加法 题目描述&#xff1a; 写一个函数&#xff0c;求两个整数之和&#xff0c;要求在函数体内不得使用、-、*、/四则运算符号。 数据范围&#xff1a;两个数都满足 -10<n<1000 进阶&#xff1a;空间复杂度…
阅读更多...
Beta成果测试总结

Beta成果测试总结

Beta成果测试总结 Beta是一个项目的早期测试&#xff0c;通过 Beta能够初步的了解整个系统的稳定性&#xff0c;测试系统是否能够满足客户的需求。我们可以在测试过程中发现一些问题&#xff0c;从而快速解决。 当我们在测试一个新系统时&#xff0c;我们需要进行测试前的准备工…
阅读更多...
部署LVS-DR 集群及实验

部署LVS-DR 集群及实验

一、LVS-DR工作原理 LVS-DR&#xff08;Linux Virtual Server Director Server&#xff09;工作模式&#xff0c;是生产环境中最常用的一种工作模式。 #①LVS-DR 模式&#xff0c;Director Server 作为群集的访问入口&#xff0c;不作为网关使用&#xff1b; #②节点 Directo…
阅读更多...
Node实现CSDN博客导出（后续）

Node实现CSDN博客导出（后续）

前言 在2021年我实现了一个Node导出博客的功能&#xff1a;爬取接口及博客页面并导出为md文件格式。中途有许多迭代及优化以及解决了一些关键问题&#xff0c;写篇文章做个记录和review 博客更新功能 在原有的导出功能上增加了博客更新的功能&#xff0c;避免了每次都全部导…
阅读更多...
Raft 共识算法1-Raft基础

Raft 共识算法1-Raft基础

Raft 共识算法1-Raft基础 Raft算法中译版地址&#xff1a;http://www.redisant.cn/etcd/contact 英原论文地址&#xff1a;https://raft.github.io/raft.pdf Etcd Assistant 是一款 etcd 可视化管理软件&#xff0c;便捷高效地操作您的 etcd 集群&#xff1b;支持多种键的视图&…
阅读更多...
最新文章

Copyright @ 2022~2023