前端插件json-server快速实现 一个本地的mock-server

作为一个前端开发工程师，在后端还没有ready的时候，不可避免的要使用mock的数据。很多时候，我们并不想使用简单的静
态数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。json-server是一个很好的可以替我们完
成这一工作的工具。我们只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。

官方文档： https://github.com/typicode/json-server

1.使用

1.安装

npm install -g json-server

2.创建 db.json

{
	"users":[
		{
			"name" : "张三",
			"age":30,
			"score":89
		},
		{
			"name":"李四",
			"age":43,
			"score":89
		},
		{
			"name":"王五",
			"age":34,
			"score":89
		}
	]
}

3.启动服务
例如以下命令，把db.json文件托管成一个 web 服务。

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

输出类似以下内容，说明启动成功。

> json-server --watch --port 8900 db.json

 \{^_^}/ hi!

 Loading db.json
 Done

 Resources
 http://localhost:8900/users

 Home
 http://localhost:8900

 Type s + enter at any time to create a snapshot of the database
 Watching...

GET /users 200 13.595 ms - 188

我们用浏览器访问 ： http://localhost:8900/users

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

2. 路由

创建一个路由json ,routes.js

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

db.json

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

使用 --routes 选项进行启动

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

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

  \{^_^}/ hi!

  Loading db.json
  Oops, db.json doesn't seem to exist
  Creating db.json with some default data

  Loading routes.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Other routes
  /api/* -> /$1
  /:resource/:id/show -> /:resource/:id
  /posts/:category -> /posts?category=:category
  /articles\?id=:id -> /posts/:id

  Home
  http://localhost:3000

我们可以访问以下路由：

http://localhost:3000/api/posts
http://localhost:3000/api/posts/1
http://localhost:3000/posts/1/show

其他路由：

3.条件查询

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

其他操作

• _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

4. --middlewares参数

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

上面代码是 给响应头添加自定义字段：

5. json-server 的相关启动参数

语法: json-server [options]

参数	简写	说明	默认值
–config	-c	配置文件路径	[默认值: “json-server.json”]
–port	-p	设置端口	[默认值: 3000]
–host	-H	设置域名	[默认: “localhost”]
–watch	-w	监控文件	[true]
–routes	-r	路由文件
–middlewares	-m	中间文件	[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
–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]

实例：
文件可以是JSON 或者jS 文件

 json-server db.json
  json-server file.js
  json-server http://example.com/db.json

6.高级用法

我们可以使用编程，来实现高级用法

1.自定义路由

当你路由的时候，如果是POST方式，则需要在body带上当前时间，实现代码如下：

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')
})

资源授权例子

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')
})

自定义输出内容

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

你可以定义自己的响应code

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