在开辟过程当中，前后端不管是不是星散，接口多半是滞后于页面开辟的。所以竖立一个REST作风的API接口，给前端页面供应假造的数据，黑白常有必要的。

对照过多种mock东西后，我终究挑选了运用 json server 作为东西，由于它充足简朴，写少许数据，即可运用。
也由于它充足壮大，支撑CORS和JSONP跨域要求，支撑GET, POST, PUT, PATCH 和 DELETE 要领，更供应了一系列的查询要领，如limit，order等。下面我将细致引见 json server 的运用。

装置

起首你的电脑中须要装置nodejs，发起运用最新版本。然后全局装置json server.

  npm install json-server -g 

运用linux和macOS的电脑须要加上sudo

  sudo npm install json-server -g 

装置完成后能够用 json-server -h 敕令搜检是不是装置胜利，胜利后会涌现

json-server [options] <source>

选项：
  --config, -c       Path to config file            [默认值: "json-server.json"]
  --port, -p         Set port                                     [默认值: 3000]
  --host, -H         Set host                                [默认值: "0.0.0.0"]
  --watch, -w        Watch file(s)                                        [布尔]
  --routes, -r       Path to routes file
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                              [布尔]
  --no-cors, --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"]
  --quiet, -q        Suppress log messages from output                    [布尔]
  --help, -h         显现协助信息                                         [布尔]
  --version, -v      显现版本号                                           [布尔]

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

https://github.com/typicode/json-server

运转

装置完成后，能够在任一目次下竖立一个 xxx.json 文件,例如在 mock/ 文件夹下，竖立一个 db.json 文件，并写入以下内容，并在 mock/ 文件夹下实行 json-server db.json -p 3003 。

{
  "news":[
    {
      "id": 1,
      "title": "曹县宣告昨日晚间登日胜利",
      "date": "2016-08-12",
      "likes": 55,
      "views": 100086
    },
    {
      "id": 2,
      "title": "长江流域初次发明海豚",
      "date": "2016-08-12",
      "likes": 505,
      "views": 9800
    }
  ],
  "comments":[
    {
      "id": 1,
      "news_id": 1,
      "data": [
        {
          "id": 1,
          "content": "支撑党中央决议"
        },
        {
          "id": 2,
          "content": "誊写党章势在必行！"
        }
      ]
    }
  ]
}

为了轻易，再建立一个 package.json 文件，写入

{
  "scripts": {
    "mock": "json-server db.json --port 3003"
  }
}

然后运用到 /mock 目次下实行 npm run mock 敕令，假如胜利会涌现

> @ mock /你的电脑中mock文件夹地点目次的途径/mock
> json-server db.json -p 3003


  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3003/news
  http://localhost:3003/comments

  Home
  http://localhost:3003

假如不胜利请搜检 db.json 文件的花样是不是准确。

操纵数据

GET

这个时刻接见 http://localhost:3003/db 能够检察 db.json 文件中所定义的悉数数据。
运用浏览器地址栏，jQuery.get 或 fecth({method: "get"}) 接见 http://localhost:3003/news ，则能够看到 news 对象下的数据,以Array花样返回:

[
  {
    "id": 1,
    "title": "曹县宣告昨日晚间登日胜利",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  },
  {
    "id": 2,
    "title": "长江流域初次发明海豚",
    "date": "2016-08-12",
    "likes": 505,
    "views": 9800
  }
]

POST

以jquery的 $.ajax 要领举例,以下代码会及时的向 db.json 中的 news 对象push一条新的数据再次用 get 体式格局接见 http://localhost:3003/news , 就能够看到它了

$.ajax({
    type: 'post',
    url: 'http://localhost:3003/news',
    data: {
      "id": 3,
      "title": "我是新到场的消息",
      "date": "2016-08-12",
      "likes": 0,
      "views": 0
    }
  }
)

PUT

一样以jquery的 $.ajax 要领举例,以下代码会及时的对 db.json 中的 news 对象中 id=1 数据举行修正

$.ajax({
    type: 'put',
    url: 'http://localhost:3003/news/1',
    data: {
      "title": "曹县宣告昨日晚间登日失利",
      "date": "2016-08-12",
      "likes": 55,
      "views": 100086
    }
  }
)

// 效果

[
  {
    "id": 1,
    "title": "曹县宣告昨日晚间登日失利",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  }
]

PATCH 和 DELETE 运用体式格局同上，就不做演示了。

参考资料

json-server源码 ： json-server
mockjs源码 ： mockjs
demo ： 示例代码