@abstractball/json-server 中文文档教程

Question

JSON Server

在 不到 30 秒 内通过零编码 获得一个完整的假 REST API（认真）

使用 <3 创建，适用于需要快速后端进行原型设计的前端开发人员和嘲笑。

• Egghead.io free video tutorial - Creating demo APIs with json-server
• JSONPlaceholder - Live running version
• My JSON Server - no installation required, use your own data

另见

• :dog: husky - Git hooks made easy
• :hotel: hotel - developer tool with local .localhost domain and https out of the box

：

Gold sponsors ????

 

 

Bronze sponsors ????

 

 

成为赞助商并在此处显示您的公司徽标

Table of contents

• Getting started
• Routes
• Plural routes
• Singular routes
• Filter
• Paginate
• Sort
• Slice
• Operators
• Full-text search
• Relationships
• Database
• Homepage
• Extras
• Static file server
• Alternative port
• Access from anywhere
• Remote schema
• Generate random data
• HTTPS
• Add custom routes
• Add middlewares
• CLI usage
• Module
  • Simple example
  • Custom routes example
  • Access control example
  • Custom output example
  • Rewriter example
  • Mounting JSON Server on another endpoint example
  • API
• Deployment
• Links
• Video
• Articles
• Third-party tools
• License

Getting started

安装 JSON 服务器

npm install -g json-server

创建一个 db.json 文件一些数据

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

启动 JSON 服务器

json-server --watch db.json

现在，如果您转到 http://localhost:3000/posts/1，您将获得

{ "id": 1, "title": "json-server", "author": "typicode" }

Also when做请求，很高兴知道：

• If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
• Your request body JSON should be object enclosed, just like the GET output. (for example {"name": "Foobar"})
• Id values are not mutable. Any id value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken.
• A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will return a 2XX status code, but without changes being made to the data.

Routes

基于前面的 db.json 文件，这里是所有的默认路由。 您还可以使用 --routes 添加其他路线。

Plural routes

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

Singular routes

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

Filter

使用 . 访问深层属性

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

Paginate

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

在 Link 标头中，您将获得 first、prev、next 和 last链接。

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

默认返回10条

Sort

添加_sort和_order（默认升序）

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

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

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

Slice

添加_start 和 _end 或 _limit（响应中包含 X-Total-Count 标头）

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 是inclusive and _end exclusive)

Operators

添加 _gte 或 _lte 获取范围

GET /posts?views_gte=10&views_lte=20

添加 _ne 排除值

GET /posts?id_ne=1

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

GET /posts?title_like=server

Full-text search

添加 q

GET /posts?q=internet

Relationships

要包含子资源，请添加 _embed

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

要包含父资源，请添加 _expand< /code>

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

获取或创建嵌套资源（默认一层，添加自定义路由以获得更多）

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

Database

GET /db

Homepage

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

GET /

Extras

Static file server

你可以使用 JSON S 服务器为您的 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

Alternative port

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

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

Access from anywhere

您可以使用 CORS 和 JSONP 从任何地方访问您的假 API。

Remote schema

您可以加载远程模式。

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

Generate random data

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

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

$ json-server index.js

提示 使用Faker、休闲、机会或JSON Schema Faker。

HTTPS

在开发中设置 SSL 的方法有很多种。 一种简单的方法是使用 hotel。

Add custom routes

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

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

使用 --routes 选项启动 JSON Server。

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

Add middlewares

您可以使用 --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

CLI usage

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
}

Module

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

Simple example

$ 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 项目。

Custom routes example

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

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// Add custom routes before JSON Server router
server.get('/echo', (req, res) => {
  res.jsonp(req.query)
})

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser)
server.use((req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  // Continue to JSON Server router
  next()
})

// Use default router
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

Access control example

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)) { // add your authorization logic here
   next() // continue to JSON Server router
 } else {
   res.sendStatus(401)
 }
})
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

Custom output example

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

// In this example, returned resources will be wrapped in a body property
router.render = (req, res) => {
  res.jsonp({
    body: res.locals.data
  })
}

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

// In this example we simulate a server side error response
router.render = (req, res) => {
  res.status(500).jsonp({
    error: "error message here"
  })
}

Rewriter example

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

// Add this before server.use(router)
server.use(jsonServer.rewriter({
  '/api/*': '/$1',
  '/blog/:resource/:id/show': '/:resource/:id'
}))

Mounting JSON Server on another endpoint example

或者，您也可以将路由器挂载到/api。

server.use('/api', router)

API

jsonServer.create()

返回一个 Express 服务器。

jsonServer.defaults([options])

返回 JSON Server 使用的中间件。

• options
• static path to static files
• logger enable logger middleware (default: true)
• bodyParser enable body-parser middleware (default: true)
• noCors disable CORS (default: false)
• readOnly accept only GET requests (default: false)

jsonServer.router([path|object])

返回 JSON 服务器路由器。

Deployment

您可以部署 JSON 服务器。 例如，JSONPlaceholder 是由 JSON Server 提供支持并在 Heroku 上运行的在线伪造 API。

Links

Video

• Creating Demo APIs with json-server on egghead.io

Articles

• Node Module Of The Week - json-server
• ng-admin: Add an AngularJS admin GUI to any RESTful API
• Fast prototyping using Restangular and Json-server
• Create a Mock REST API in Seconds for Prototyping your Frontend
• No API? No Problem! Rapid Development via Mock APIs
• Zero Code REST With json-server

Third-party tools

• Grunt JSON Server
• Docker JSON Server
• JSON Server GUI
• JSON file generator
• JSON Server extension

License

麻省理工学院

支持者 ✨