json-server 快速搭建接口服务 使用教程
json-server
是一款小巧的接口模拟工具,一分钟内就能搭建一套 Restful 风格的 API,尤其适合前端接口测试使用。
只需指定一个 json 文件作为 api 的数据源即可,使用起来非常方便,30 秒入门。
进阶操作还支持分页,排序等操作,非常方便!
开源地址
主页地址:https://www.npmjs.com/package/json-server
Github项目地址:https://github.com/typicode/json-server
- 环境
需要node环境
2.创建一个db.json包含一些数据的文件
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
3.启动 json-server 接口服务器
# 快速创建
json-server db.json
# 配置参数
json-server db.json --watch --port 3000
4.浏览器访问 http://localhost:3000/posts/1,你会得到
{ "id": 1, "title": "json-server", "author": "typicode" }
补充
如果发出 POST、PUT、PATCH 或 DELETE 请求,更改将自动安全地保存到 db.json 文件中。
路由进阶
根据之前的 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
对返回的数据进行分页。
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]
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.json
json-server file.js
json-server http://example.com/db.json
https://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 服务器路由器。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)