使用 json-server 簡單完成CRUD模擬後臺資料

遊魂Andy發表於2019-03-04
JSONServer

在開發中，後端的介面往往是較晚出來的，但是有時候我們必須給前端頁面一些虛假的資料去開發，這個時候一些mock工具就很有必要了，最終我選擇了json server工具，因為它足夠簡單，而且也能和你們所熟知的Mock.js 配合模擬資料（思考：mockjs是可以作為一個獨立的mock server存在，但為什麼不單獨用它？）。

安裝

npm install json-server -g
複製程式碼

安裝完成後可以用 json-server -h 命令檢查是否安裝成功。

json-server [options] <source>

Options:
  --config, -c       指定 config 檔案                  [預設: "json-server.json"]
  --port, -p         設定埠號                                   [default: 3000]
  --host, -H         設定主機                                   [預設: "0.0.0.0"]
  --watch, -w        監控檔案                                           [boolean]
  --routes, -r       指定路由檔案
  --static, -s       設定靜態檔案
  --read-only, --ro  只允許 GET 請求                                    [boolean]
  --no-cors, --nc    禁止跨域資源共享                                   [boolean]
  --no-gzip, --ng    禁止GZIP                                          [boolean]
  --snapshots, -S    設定快照目錄                                     [預設: "."]
  --delay, -d        設定反饋延時 (ms)
  --id, -i           設定資料的id屬性 (e.g. _id)                     [預設: "id"]
  --quiet, -q        不輸出日誌資訊                                     [boolean]
  --help, -h         顯示幫助資訊                                       [boolean]
  --version, -v      顯示版本號                                         [boolean]
複製程式碼

使用

建立個Mock目錄，在該目錄下建立一個json檔案，db.json

{
  "list": [
  {
    "name": "遊魂部落格",
    "link": "www.iyouhun.com",
    "id": 1
  },
  {
    "id": 2,
    "name": "買賣淘",
    "link": "www.868432.net"
  },
  {
    "id": 3,
    "name": "遊魂全自動網頁製作系統",
    "link": "www.youhun.wang"
  },
  {
    "id": 4,
    "name": "遊魂部落格",
    "link": "www.iyouhun.com"
  },
  {
    "id": 5,
    "name": "買賣淘",
    "link": "www.868432.net"
  },
  {
    "id": 6,
    "name": "遊魂全自動網頁製作系統",
    "link": "www.youhun.wang"
  }]
}
複製程式碼

在Mock目錄下執行

json-server db.json
複製程式碼

開啟瀏覽器，http://localhost:3000,檢視頁面。可以試著直接訪問他索引出來的資源
如果要監控json檔案的變化，啟動的時候加上引數--watch 或者 -w。

支援的方法

你可以使用任何 HTTP method

如：

  • GET /list 獲取列表
  • GET /list/1 獲取id=1的資料
  • POST /list 建立一個專案
  • PUT /list/1 更新一個id為1的資料
  • PATCH /list/1 部分更新id為1的資料
  • DELETE /list/1 刪除id為1的資料

注意：

  • 當你傳送POST，PUT，PATCH 或者 DELETE請求時，變化會自動安全的儲存到你的db.json檔案中。
  • 你的請求體body應該是封閉物件。比如{"name": "Foobar"}
  • id不是必須的，在PUT或者PATCH方法中，任何的id值將會被忽略。
  • 在POST請求中，id是可以被新增的，如果該值沒有沒佔用，會使用該值，否則自動生成。
  • POST，PUT或者PATCH請求應該包含一個Content-Type:application/json的header，來確保在請求body中使用json。

運算元據

這裡請求資料我全部使用postman工具，最後一條刪除我使用jquery的$.ajax 舉例

查詢

GET請求：http://localhost:3000/list

使用 json-server 簡單完成CRUD模擬後臺資料

新增

POST請求：http://localhost:3000/list

引數：{“name”:”遊魂部落格”,”link”:”www.iyouhun.com”}

使用 json-server 簡單完成CRUD模擬後臺資料

請求成功後會看到返回的就是新增成功的友鏈資訊

修改

PUT請求：http://localhost:3000/list/1 修改id為1的友鏈資訊

引數：{“name”:”哈哈哈哈哈客”,”link”:”www”}

使用 json-server 簡單完成CRUD模擬後臺資料

刪除

DELETE請求：http://localhost:3000/list/1 刪除id為1的友鏈資訊

$.ajax({
    type: `DELETE`,
    url: `http://localhost:3000/list/1`,
    success: function (data) {
        console.log(data)
    }
})
複製程式碼

相關文章