• 前端接口神器之 Json Server 详细指南


    简介

    json-server 是一款小巧的接口模拟工具,一分钟内就能搭建一套 Restful 风格的 api,尤其适合前端接口测试使用。
    只需指定一个 json 文件作为 api 的数据源即可,使用起来非常方便,基本上有手就行。

    开源地址

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

    入门

    环境依赖

    • 安装 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标题,你会得到firstprevnextlast链接。

    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
    

    提示:使用FakerCasualChanceJSON 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.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 服务器路由器。

  • 相关阅读:
    numpy库:常用基本
    高考的结束,新的开始
    Hello World!
    第一篇随笔
    Linux命令之文件与用户权限
    看山不是山,看水不是水
    Python基础篇【第1篇】: Python基础
    css居中
    JS正则表达式(一)
    小问题总结
  • 原文地址:https://www.cnblogs.com/Megasu/p/15782353.html
Copyright © 2020-2023  润新知