首页 > 其他分享 >json-server 快速搭建接口服务 使用教程

json-server 快速搭建接口服务 使用教程

时间:2024-05-27 19:34:43浏览次数:13  
标签:教程 GET -- posts server json jsonServer

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

开源地址
主页地址:https://www.npmjs.com/package/json-server
Github项目地址:https://github.com/typicode/json-server

  1. 环境

需要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 服务器路由器。

标签:教程,GET,--,posts,server,json,jsonServer
From: https://www.cnblogs.com/zhengzhijian/p/18216293

相关文章

  • 如何免费使用GPT-4o?如何升级GPT4.0 Turbo?(内附详细步骤教程)
    01GPT-4o是什么?5月中旬,OpenAI发布了惊艳的GPT-4o。经过体验,我深感其强大,中文能力尤为突出,速度也远超目前的GPT-4。GPT-4o深夜发布!Plus免费可用!|OpenAI发布GPT-4o一夜创历史,超越所有AI语音助手!!早在5月11日,Sam在推文中透露:OpenAI并没有推出GPT-5或新的搜索......
  • portainer及agent 安装教程
    1.简介Portainer是一个强大的开源工具,用于管理Docker环境。它提供了一个直观的Web界面,简化了容器的管理过程。在这篇博客中,我们将介绍如何部署Portainer及其Agent。2.PortainerServer首先,我们需要在主机上部署PortainerServer。它提供了一个Web界面,用于管理Dock......
  • Oracle SQL语言教程系列
    1. SQL基础知识    1.1 SQL简介与基本概念        1.2 SQL语法与语句结构        1.3 数据类型与约束        1.4 数据库对象介绍(表、视图、索引等)    2. SQL查询    2.1 SELECT语句与查询条件        2.2 聚......
  • SQL SERVER 查数据库中锁的情况
    SELECTL.request_session_idASSessionID,DB_NAME(L.resource_database_id)ASDatabaseName,O.NameASLockedObjectName,P.object_idASObjectID,L.resource_typeASResourceType,L.request_modeASLockType,ST.textASSqlStatemen......
  • JSON里包含的数组中的值 (List数组或对象)转换出来并读取, 通过 hutool 中的API 方法
    hutool 是一个Java工具包,它提供了很多实用的功能,包括JSON的处理。在 hutool 中,你可以使用 cn.hutool.json.JSONUtil 类来解析和处理JSON数据。如果你想要获取JSON中的数组(JSONArray),并遍历读取其中的值(无论是基本类型还是对象),你可以按照以下步骤操作:首先,确保你的项目......
  • World Creator v2.1.0 解锁版安装教程 (GPU三维地形生成软件)
    前言WorldCreator是一款功能相当强大的地形景观生成器;可以完全根据自己的需求来对地形、景观生成您需要三维模型,内置的大量预设,让您的创建拥有无限的可能性。一、下载地址下载链接:http://dygod/ITSource点击搜索:GPU二、安装步骤1、解压文件,解压后如下2、右键点击......
  • Excel小公式快速拆分json数据
    MongoDB导出了一些json格式数据,其实也可以导出csv,经验来看MongoDB导出时候会有objectId,是一种标识符特征.这次拿到了其他组资源的数据,其中的关键列,便于和组内其他资源兼容.用ExcelLEFT&FIND进行拆分的记录人类生活是虚构泡影我的地球OL服务器会被泪水侵染宕机...吗.......
  • 使用.Net Core开发WPF App系列教程( 八、WPF中的常用控件(下))
    使用.NetCore开发WPFApp系列教程一、.NetCore和WPF介绍二、在VisualStudio2019中创建.NetCoreWPF工程三、与.NetFramework的区别四、WPF中的XAML五、WPF中的布局六、WPF中的常用控件(上)七、WPF中的常用控件(中)八、WPF中的常用控件(下)其它、实现多语言切换的几种方......
  • 【WeTool升级版】WeTool最新版安装及功能使用教程,wetool企业版怎么收费,wetool电脑版怎
    今天给大家推荐一款我们目前在使用的电脑群发工具掘金小蜜,不仅可以无限多开,方便你同时管理多个账号,群发功能更是十分强大,轻松释放你的双手。掘金小蜜(只支持Win7及以上操作系统,没有推Mac版和手机客户端。软件下载地址>>点击此处​群发功能下载打开登录,这是账号登录进去后的......
  • Json差异比较
    json差异比较如何比较两个json的差异代码实现导入依赖<dependency><groupId>cn.xiaoandcai</groupId><artifactId>json-diff</artifactId><!--旧版本可能存在某些缺陷。版本请以maven仓库最版为准。--><versi......