12. 通訊錄 手作 API 1

建立專案的設定檔

在 VS Code 為這個專案建立 JSON 設定檔。

• 路徑：設定 > 工作區

{
  "liveServer.settings.port": 8080,
  "liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss",
    "**/*.sass",
    "**/*.ts",
    "**/*.json",
  ]
}

安裝並使用 JSON Server

JSON Server GitHub: https://github.com/typicode/json-server

1. 在資料夾中初始化 npm

npm init -y

2. 安裝 JSON Server

npm i json-server

3. 建立 "db.json" 檔案作為 JSON Server 的資料庫

{
  "contact": [
    {
      "id": 1,
      "name": "Alex",
      "email": "alex@gmail.com"
    }
  ]
}

4. 在 package.json 檔的 "scripts" 自行設定可以執行的 npm 指令
   • 呼叫 JSON Server 去 watch 檔案 db.json，並將伺服器架在 port 8888 。

{
  "name": "12_Directory",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "json": "json-server --watch db.json --port 8888"
  },
  "keywords": [],
  "author": "Jane",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.16.1"
  }
}

5. 在終端機使用 npm run json 指令執行
   • 會產生連結
     • Home: http://localhost:8888
     • Resources: http://localhost:8888/contact

安裝並使用 Postman 測試 API

https://www.postman.com/

HTTP Verbs

HTTP Verbs	作用
GET	讀取
POST	新增
DELETE	刪除
PATCH	修改 (可修改單一屬性)
PUT	修改 (會修改整筆資料)

• GET
  • 選擇 GET，貼上 API url 之後送出，即可讀取 API 資料。
  • 請求：API url。例如 http://localhost:8888/contact
  • 回傳：該 API url 中所有資料
• POST
  • 到 Body > raw > 選擇 JSON 格式，然後以 JSON 格式輸入要新增的內容。
  • 請求：API url。例如 http://localhost:8888/contact
  • 回傳：該筆資料內容
• DELETE
  • 指定要刪除哪一筆資料。
  • 請求：API url 的指定資料。例如 http://localhost:8888/contact/2
  • 回傳：空物件，表示該筆資料已被刪除。
• PATCH
  • 指定要修改哪一筆資料後，可修改其中單一屬性。
  • 請求：API url 的指定資料。例如 http://localhost:8888/contact/3
  • 回傳：該筆資料的內容。
  • 注意：若為該筆資料原有屬性，則修改值；若原無該屬性，則新增屬性與值。
• PUT
  • 指定要修改哪一筆資料後，輸入的內容會取代原本的內容，而非只更新單一屬性。
  • 請求：API url 的指定資料。例如 http://localhost:8888/contact/2
  • 回傳：該筆資料的內容。
  • 注意：使用 PUT 會修改整筆資料，取代該筆資料所有內容。