使用 json-server 簡單完成CRUD模擬後臺數據

在開發中，後端的接口每每是較晚出來的，可是有時候咱們必須給前端頁面一些虛假的數據去開發，這個時候一些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

新增

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

參數：{"name":"遊魂博客","link":"www.iyouhun.com"}

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

修改

PUT請求：http://localhost:3000/list/1 修改id爲1的友鏈信息

參數：{"name":"哈哈哈哈哈客","link":"www"}

刪除

DELETE請求：http://localhost:3000/list/1 刪除id爲1的友鏈信息

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