To-Do Calendar - Day14 實作查詢列表功能（中）- RESTful API 串接

• 2022/05/27
• 1-minute read
• SideProject

這篇要來實作串接 API，API 使用 REST 設計風格。

REST 風格是什麼？

REST 的全名為 Representational State Transfer，它是一種設計風格，將網路上的東西都視為「資源」，並且有不同的操作方式。

RESTful API

RESTful API 指的就是符合 REST 的原則去定義出來的 API 形式，REST 核心主要定義了六個原則：

• Client-server architecture
• Statelessness
• Cacheability
• Layered system
• Uniform interface
• Code on demand (optional)

在這些原則裡面，REST 定義了該怎麼讓客戶端去溝通處理資源的方式：主要會利用一段 URI 來代表你所要處理的某一類資源，並且使用 HTTP request 中的 Method 參數去代表要進行什麼操作。

使用 http method 表示動作

使用 url 路徑描述資源之間的階層關係

設計 RESTful API

以下將以原子習慣列表查詢功能為例。

getHabits API

• Request URL

  GET http://localhost:8080/users/{userId}/habits
  

• Response Body

  {
    "id": "628fd7820f99c13e6d6d95fe",
    "userId": "user01",
    "habitList":[
      {"habitId": "habit01", "name": "吃早餐", "checkColor": "red", "createdTime": 1653405213436,"lastModifiedTime": 1653405213436},
      {"habitId": "habit02", "name": "喝水2000cc", "checkColor": "yellow", "createdTime": 1653405213436,"lastModifiedTime": 1653405213436},
      {"habitId": "habit03", "name": "寫技術部落格", "checkColor": "green", "createdTime": 1653405213436,"lastModifiedTime": 1653405213436}
    ],
    "createdTime": 1653405213436,
    "lastModifiedTime": 1653405213436
  }
  

實作前端串接 API

回到前端，來使用之前已載入的 Axios 來呼叫後端 API，先用基本用法來測試是否拿的到資料：

• habitTracker.vue

  mounted() {
    this.axios.get("http://localhost:8080/users/user01/habits").then((res) => {
      console.log("result= "+ JSON.stringify(res.data));
      this.habitList = res.data.habitList;
    });
  },
  

結果一運行程式就遇到了 port 被占用的問題，此次是先 run 前端再運行後端結果後端運行失敗…(･o･) 

才發現前後端程式運行的 port 都是8080，所以在 vue.config.js 加了些設定，讓前端程式的 port 改為8081，改法是參考《VUE-CLI 3 修改前端默認的端口》。再次運行，這次前端 console 卻出現了 ERR_CONNECTION_REFUSED 錯誤…Σ（￣□￣；）

查了一下應該是跨域請求問題，當開發者透過 JavaScript 針對不同於當前位置的來源發送請求，這個請求的回應就會被瀏覽器攔截，不交給 JavaScript 處理。

因為剛剛改了 port，所以被瀏覽器判斷為不同源的網站，串個 API 真是一波三折，解法是參考《前後端分離項目，如何解決跨域問題？》，使用 Nodejs 代理來解決跨域問題：在本地創建一個虛擬服務器，對8081端口下的前端請求進行代理，同時接收8080端口下的服務器端響應，這樣服務端和服務端進行數據的交互就不會出現跨域問題了。

再次重新運行，這次終於拿到資料了！而且有正常渲染在畫面的列表上～～✧*｡٩(ˊᗜˋ*)و✧*｡

延伸閱讀

• 前端工程師邁向後端之路 – 設計 RESTful API
• 簡明RESTful API設計要點
• 輕鬆理解 Ajax 與跨來源請求
• 前端如何管理 API （中）- Cookie、CORS 、CSRF

參考資料

• Java 工程師必備！Spring Boot 零基礎入門
• axios 基本使用 & Config
• RESTful API 開發
• 為什麼跨域請求會產生錯誤？如何處理？