提姆寫程式

0%

JS 筆記 - 使用 postman 編輯通訊 API

發表於 更新於 分類於 Disqus：
自薦資料庫與使用 POSTMAN 編輯 API

postman

使用 API 最常使用的方法，讀取、新增、編輯、刪除。
本次練習欄位會有排序、姓名、信箱等欄位，透過 json server 與 postman 來操作 API。

檔案初始化

使用 node.js 設定檔案架構，所以請先安裝 node.js，打開終端機並輸入指令：

1
npm init

然後一路 enter 到底，就會看到檔案列出現 package.json 檔案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "test", // 專案名稱
  "version": "1.0.0", //專案版本
  "description": "", //專案簡介
  "main": "index.js", //主程式
  "scripts": { //自訂 npm  指令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "", //作者
  "license": "ISC", //出處
  "dependencies": { //使用的套件
    "json-server": "^0.16.2"
  }
}

並修改下方這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "test",
  "version": "1.0.0",
  "description": "api postman practice",
  "scripts": {
    "json":"json-server --watch db.json --port 3000"
  },
  "author": "Tim",
  "license": "MIT",
  "dependencies": {
    "json-server": "^0.16.2"
  }
}

scripts 指令部份：執行自訂指令 json 時，會透過 json-server 套件執行 watch 來監看 db.json 這支檔案，並使用 post:3000，post 的路由位置可自訂。

json-server

完成後安裝 json-server ，輸入安裝指令：

1
npm i json-server

就會開始安裝，再安裝的同時順便建立一個 json 檔案，名稱為 db.json ，完成本地資料庫設建立。

json 檔案內容為物件形式，需要注意的地方是屬性跟其值需要用雙引號。

在 db.json 建立好的資料如下：

1
2
3
4
5
6
7
8
9
{
  "contact":[
    {
      "id":1,
      "name":"Tim",
      "email":"timhsu@email.com"
    }
  ]
}

post 檔案時，不必給 id 的項目，因為 id 是資料庫自行管理的資料，新增資料後會自動加入。

執行 json 指令

使用剛剛自定義的指令

1
npm run json

終端機最後跑完會出現下方資訊：

1
2
3
4
5
Resources
  http://localhost:3000/contact

  Home
  http://localhost:3000

將 Home 的網址貼到瀏覽器，會得到下方頁面資訊，就代表成功了。

cut

可以看到在 Resources 中有幾個方法可以使用，等等會介紹較常使用的五個方法。

輸入 Resources 的網址可以看到一開始建立的資料內容。

注意：npm run json 要持續開著才可以正確開啟資料頁面在瀏覽器上。

contact

使用 postman

postman 下載連結

完成後打開會看到起始畫面：
postman

就開始操作 API 吧！

都貼上此網址

1
http://localhost:3000/contact

GET 讀取資料

顧名思義就是取得資料，選到 GET 方法再選擇 send，目前沒有指定任何編號，所以會得到所有資料，但目前預設只有一筆，所以
只會出現一筆資料。

get

POST 新增資料

將資料送出到數據庫，這邊選擇的界面不同，

  1. 方法選擇 POST
  2. 標籤選到 body。
  3. 再選到 raw。
  4. 最後格式下拉選單選擇 JSON。
  5. 並且輸入下方資訊。
  6. send 資料後會得到下方畫面

post

同樣的在 db.json 中會出現剛剛新增的資料。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "contact": [
    {
      "id": 1,
      "name": "Tim",
      "email": "timhsu@email.com"
    },
    {
      "name": "Timothy",
      "email": "Timothy@email.com",
      "id": 2
    }
  ]
}

DELETE 刪除資料

刪除資料，只要在 API 後方加上資料編號就可以直接刪除。例如我想刪除第二筆資料，就可以像下圖一樣的設定。
delete

PATCH 更新指定資料

更新指定資料，這時要輸入要更新的資料編號，對應的網址為 http://localhost:3000/contact/2

把名字修改成 bob，就會變下方畫面。

patch

PUT 覆寫全部資料

覆寫全部資料，方法如 patch。

但 PATCH 跟 PUT 不同之處

PATCH 是可以只更新指定資料，也就是今天我只想多一加一行新的資料可以使用 PATCH，不會更動到原本的其他資料。

PUT 會直接把原本的欄位資料整個覆蓋掉，也就是說如果今天不小心更新資料少了或多了資料，會把原本正確的資料都一併蓋掉，所以使用上要小心。

參考資料

總匯拼盤 - 家鄉通訊錄佐手作 API #1