項目中前端和後端通常是並行開發，為了減少等待後端接口開發的時間，我們經常需要在本地模擬後端接口用來測試前端效果。這種做法稱之為構建前端Mock。

1. 本地啟動一個靜態服務，將所需要的接口寫成json文件，根據接口名字將文件放在項目目錄下。
2. 再啟動一個Server作為Mock Server，使用第三方Proxy將Mock Server的接口代理到靜態服務器上。
   
   

30秒內創建完整的REST API

安裝

首先你的電腦中需要安裝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 文件的格式是否正確。

json-server搭建使用