Node实用工具json-server 模拟虚拟数据必备神器

json-server本质上是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

一、安装准备

1.1 安装

因为他属于一个mock 数据比较常用的工具，所以建议安装在全局中

npm install -g json-server

1.2 创建数据源

安装完成之后，想要使用还需要先准备个数据源

创建一个db.json文件

# db.json

{
    "data1": [{
        "id": "001",
        "name": "Sherry",
        "age": 24,
        "friends": [{
            "id": "100",
            "name": "friend1"
        }, {
            "id": "200",
            "name": "friend2"
        }]
    }, {
        "id": "002",
        "name": "Addy",
        "age": 26
    }],
    "data2": {
        "id": "003",
        "name": "Jack",
        "age": 25
    },
    "data3": [{
        "id": "004",
        "name": "Rebeca",
        "age": 27
    }]
}

1.3 配置

通过命令行配置路由、数据文件、监控等会让命令变的很长，而且容易敲错，可以把命令写到npm的scripts中，但是依然配置不方便。

json-server允许我们把所有的配置放到一个配置文件中，这个配置文件默认json-server.json

# json-server.json

{
  "port": 53000,
  "watch": true,
  "static": "./public",
  "read-only": false,
  "no-cors": false,
  "no-gzip": false,
  "routes": "route.json"
}

配置好之后，可以直接执行

# 默认使用：json-server.json配置文件
$ json-server --watch app.js  
 
# 指定配置文件
$ json-server --watch -c jserver.json db.json

当然还嫌较长的话，可以在npm 的scripts 中去

二、启动服务

2.1 正常启动项目

先执行在文件目录下初始化项目npm init -y

使用全局json-server命令，启动mock服务。这个mock服务，管理的数据，就是db.json

json-server --watch --port 3001 db.json

上面命令的含义就是：已监听db.json 作为数据源，按RESRful 风格将其代理为接口运行在本地3001端口上

RESTful 可以查看跳转查看另一篇文章文章：Nodejs深入理解RESTful API系列

如果运行后，输出上图类似内容即说明成功了

2.2 相关参数

参数	简写	默认值	说明
--config	-c	指定配置文件	[默认值: "json-server.json"]
--port	-p	设置端口 [默认值: 3000]	Number
--host	-H	设置域 [默认值: "0.0.0.0"]	String
--watch	-w	Watch file(s)	是否监听
--routes	-r	指定自定义路由
--middlewares	-m	指定中间件 files	[数组]
--static	-s	Set static files directory	静态目录,类比：express的静态目录
--readonly	--ro	Allow only GET requests [布尔]
--nocors	--nc	Disable Cross-Origin Resource Sharing [布尔]
--no	gzip	, --ng Disable GZIP Content-Encoding [布尔]
--snapshots	-S	Set snapshots directory [默认值: "."]
--delay	-d	Add delay to responses (ms)
--id	-i	Set database id property (e.g. _id) [默认值: "id"]
--foreignKeySuffix	--	fks Set foreign key suffix (e.g. _id as in post_id)	[默认值: "Id"]
--help	-h	显示帮助信息	[布尔]
--version	-v	显示版本号	[布尔]

三、访问数据

3.1 正常请求数据

这时候，可以使用json-server支持的功能，尝试进行数据访问

按RESTful 格式请求本地服务器接口，你会发现神奇的事（我这里用的是ApiPost，也可以用postman，或者浏览器直接访问也行）

get请求在RESTful 风格中代表的是获取数据，直接以get 请求路由地址即可返回对应数据

这里就是路由的概念了

json-server提供了GET,POST, PUT, PATCH ,DELETE等请求的API,分别对应数据中的所有类型的实体

# 获取所有的课程信息
GET    /course
 
# 获取id=1001的课程信息
GET    /course/1001
 
# 添加课程信息，请求body中必须包含course的属性数据，json-server自动保存。
POST   /course
 
# 修改课程，请求body中必须包含course的属性数据
PUT    /course/1
PATCH  /course/1
 
# 删除课程信息
DELETE /course/1
 
# 获取具体课程信息id=1001
GET    /course/1001

3.2 自定义路由配置

当然，如果有需要可以自定义路由

json-server --watch --routes route.json db.json

指定一个router.json 文件来专门处理路由配置

# router.json

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

四、其他高级应用

json-server本身就是依赖express开发而来，可以进行深度定制。细节就不展开，具体详情请参考官网。

4.1 自定义路由

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
 
server.use(middlewares)
 
server.get('/echo', (req, res) => {
  res.jsonp(req.query)
})
 
server.use(jsonServer.bodyParser)
server.use((req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  next()
})
 
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

4.2 自定义输入内容

router.render = (req, res) => {
  res.jsonp({
    body: res.locals.data
  })
}

4.3 自定义用户校验

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