用JSON-server模擬REST API(一) 安裝執行

烈日神巫發表於2016-06-24
JSONServerRESTAPI

在開發過程中，前後端不論是否分離，介面多半是滯後於頁面開發的。所以建立一個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 ： 示例程式碼

相關文章