前言

在實務開發中，前端經常需要透過 API 來取得資料，因此這篇文章要分享「如何在 Nuxt 專案中串接 API 並顯示動態內容」。我們會以政府資料開放平臺作為 API 的資料來源，專注介紹前端的串接與資料呈現部份。

為什麼需要串接 API？

當網站需要顯示儲存在資料庫的內容時，需要撰寫後端來開發 應用程式介面（API, Application Programming Interface），讓前端可以透過 API 發送請求，取得資料並顯示在畫面上給使用者。

簡單來說，就是「 前端負責畫面顯示，後端負責資料處理與邏輯運算。 」而 API 就像是兩者之間的溝通橋樑。舉個常見的實際例子：當使用者點選「我的訂單」功能時，前端會呼叫 API 向後端請求訂單資料，成功取得資料後，再渲染到畫面顯示給使用者看。又或者像驗證權限的判斷，前端發送登入 API 請求，後端驗證使用者身份與權限，判斷是否有權限存取特定頁面或使用某些功能。這樣的驗證過程可以有效控管資料回傳與授權範圍，提升整體網站的安全性。

除了資料請求與身份驗證，API 還能應用在許多場景中，讓網站達到更廣泛的應用，例如：串接第三方金物流、API 可獨立維護與測試、系統擴充更有彈性等，很多功用！對在網站中的 API 有基礎的認識後，接下來我們就動手來實作看看吧！

選擇一筆 API 資料

首先，我們可以先到 政府資料開放平臺 搜尋公開的 API。在搜尋時篩選檔案格式為「JSON」的資料，這樣在串接時會比較方便。

（政府資料開放平臺進階搜尋畫面 圖片來源）

選好一筆資料後，接著點擊「資料資源下載網址」旁的 JSON 按鈕，即可在瀏覽器中預覽資料格式與結構，先預覽回傳內容，有助於我們後續構想的資料串接方式，例如如何解析資料、抓取需要的欄位，並將它們呈現在網頁上。

（國立海洋生物博物館特展介紹 圖片來源）

複製瀏覽器的「JSON網址」，待會我們在串接資料時會派上用場！

如何發送 API 請求

專案內新增一個SFC，在 <script setup> 區塊中使用 useFetch 來取得 API 回傳的資料。

useFetch() 預設會用 GET 方法發送請求，在()裡面貼上複製的 API 接口網址，透過 await 等待資料載入完成。當請求成功後，data 存放成功取得的資料，pending 可以用來判斷是否仍在載入中，若請求失敗，錯誤可透過 error 查看錯誤資訊。

<script setup>
	const { data, pending, error } = await useFetch('https://www.nmmba.gov.tw/OpenData.aspx?SN=BF6D6EB9CB6876BB')
</script>

資料顯示在畫面上

接著我們來將資料渲染到畫面中。
<template> 中的程式碼會根據 API 取得的資料進行畫面渲染，v-if、v-else-if 和 v-else 分別處理不同的資料狀態（載入中、發生錯誤、資料取得成功）。透過 v-for 來動態渲染列表，使用 {{}}（雙花括號）將語法綁定資料到畫面上。

<template>
  <div class="p-4">
      <h1 class="font-bold mb-2">海生館展館消息</h1>
      <div v-if="pending">資料載入中⋯⋯🐢</div>
      <div v-else-if="error">發生錯誤：{{ error.message }}</div>
      <ul v-else>
          <li
          v-for="(item, index) in data"
          :key="index"
          class="border-b py-2"
          >
          {{ item.展出地點 }} - {{ item.特展名稱 }}
          </li>
      </ul>
  </div>
</template>

這樣就可以把 API 內的資料，渲染到網站畫面上囉！呈現結果如下：

結語

我們已經在 Nuxt 專案實踐 API 串接，成功在畫面上顯示展館資料。搭配 Vue 的模板語法（template syntax），使用 v-for 逐筆列出展覽資訊，搭配 {{}} 插值語法顯示展出地點與特展名稱。

參考資料與延伸閱讀

⑴ API 來源：政府資料開放平臺

提供機關／單位 國立海洋生物博物館　2023　國立海洋生物博物館特展介紹 - 政府資料開放授權條款-第1版
此開放資料依政府資料開放授權條款 (Open Government Data License) 進行公眾釋出，使用者於遵守本條款各項規定之前提下，得利用之。
政府資料開放授權條款：https://data.gov.tw/license

⑵ Nuxt useFetch 參考來源