在前后端分離的這種工作模式下，分工明確，各司其職。前端負責展示數(shù)據(jù)，后端提供數(shù)據(jù)。然而，在這種過程中對于接口的規(guī)范 需要提前制定好。例如根據(jù)規(guī)范提前模擬數(shù)據(jù)，這個時候就比較麻煩的。
json-server快速搭建
JsonServer這個比較NB了,它可以快速搭建服務端環(huán)境，創(chuàng)建json文件，便于調(diào)用。
json-server可以直接把一個json文件托管成一個具備全RESTful風格的API,并支持跨域、jsonp、路由訂制、數(shù)據(jù)快照保存等功能的 web 服務器。
操作步驟

（1） 命令行進入項目目錄demo，執(zhí)行下面的命令。

$ npm install -S json-server
（2） 在項目根目錄下，新建一個 JSON 文件db.json。
簡單總結(jié)：db.json第一層key值代碼接口地址，請求該地址會得到對應的json數(shù)據(jù)

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "users": [
    { "id": 1, "name": "jack", "age": 12 }
  ]
}

（3） 打開package.json，在scripts字段添加一行。

"scripts": {
  "server": "json-server db.json",
  "test": "..."
}

配置"server": "json-server db.json" 使用json-server啟動服務對應下一步的：npm run server
（4） 命令行下執(zhí)行下面的命令，啟動服務。

$ npm run server

（5）請求查看結(jié)果：
http://127.0.0.1:3000/posts發(fā)出GET請求
http://127.0.0.1:3000/posts/1發(fā)出GET請求

（6）向http://127.0.0.1:3000/users發(fā)出POST請求。向?qū)獢?shù)據(jù)添加數(shù)據(jù)。

接口轉(zhuǎn)發(fā)
配合mock.js更復雜的使用。

為什么不在瀏覽器中使用mockjs

通過閱讀 mockjs 的官方文檔可以發(fā)現(xiàn)，它其實是作為一個獨立的 mock server 存在的，就算沒有json server，一樣可以反饋數(shù)據(jù)，但是由于以下一些缺點，讓我只能把它作為一個數(shù)據(jù)構(gòu)造器來使用：

不能跨域使用

與某些框架中的路由處理邏輯沖突

無法定義復雜的數(shù)據(jù)結(jié)構(gòu)，比如下面的數(shù)據(jù)結(jié)構(gòu)，images 將會是字符串 [object object]， 而非預想中的數(shù)組：