D18 - 整合後端 API：在 Nuxt 中使用 Axios 實現資料動態渲染

哈囉，大家好！在前面的文章中，我們已經成功地建立了 Nuxt 的開發環境，並且深入了解了 Nuxt 的前端結構，特別是 app.vue 和 layouts/default.vue 的作用。現在，是時候讓我們的應用程式真正「活」起來，與後端進行互動了。

今天，我們將探討如何在 Nuxt 中使用 Axios 來整合 Laravel 後端 API，實現資料的動態渲染。透過這個過程，我們的個人財務管理系統將能夠真正地為使用者提供服務，從後端獲取資料，並在前端呈現。

一、為什麼要使用 Axios？

在現代的前端開發中，與後端進行 HTTP 請求已經是不可或缺的一部分。Axios 是一個基於 Promise 的 HTTP 客戶端，可以用在瀏覽器和 Node.js 中。相比於原生的 fetch API，Axios 提供了更直觀的語法和更豐富的功能，例如自動轉換 JSON、攔截請求和回應、取消請求等。

使用 Axios，我們可以：

• 簡化 HTTP 請求的撰寫：直觀的語法讓程式碼更易讀。
• 處理攔截器：可以在請求或回應被處理前攔截它們，方便我們添加全域的錯誤處理或身份驗證。
• 自動轉換資料格式：自動將回應轉換為 JSON，減少手動解析的麻煩。

二、在 Nuxt 中設定 Axios

在 Nuxt 中，我們可以輕鬆地整合 Axios。有兩種主要的方式：

1. 使用官方的 @nuxtjs/axios 模組：這個模組為 Axios 提供了 Nuxt 的封裝，讓我們可以更方便地在 Nuxt 中使用 Axios。
2. 直接安裝 Axios：如果你想要更輕量化或客製化的設定，可以直接安裝 Axios 並在需要的地方自行引入。
   在這裡，我們將採用第一種方式，使用 @nuxtjs/axios 模組。

1. 安裝 @nuxtjs/axios

首先，我們需要在 Nuxt 專案中安裝 @nuxtjs/axios 模組。

步驟：

確保你在 Nuxt 容器內（如果不確定，請執行 docker-compose exec frontend sh 進入容器）。

npm install @nuxtjs/axios

2. 設定 nuxt.config.js

在安裝完畢後，我們需要在 nuxt.config.js 中添加 Axios 模組的設定。

編輯 nuxt.config.js：

export default {
  // 其他設定...
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'http://api.localhost', // 後端 API 的基礎 URL
  },
  // 其他設定...
}

這樣，我們就可以在 Nuxt 中使用 Axios，並且所有的請求都會以 baseURL 作為基礎。

3. 使用環境變數管理 baseURL

為了方便在不同環境（如開發、測試、正式）中切換，我們可以使用環境變數來管理 baseURL。

步驟：

在專案根目錄下建立一個 .env 檔案（如果尚未建立）：

API_BASE_URL=http://api.localhost

修改 nuxt.config.js：

export default {
  // 其他設定...
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.API_BASE_URL,
    },
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.API_BASE_URL,
    },
  },
  // 其他設定...
}

這樣，我們就可以在不同的環境中，透過設定環境變數來調整 baseURL。

三、在 Nuxt 中使用 Axios 獲取資料

現在，我們已經設定好了 Axios，接下來，我們將在頁面或元件中使用 Axios 來從後端獲取資料。

1. 在 pages/transactions.vue 中獲取交易紀錄

我們以交易紀錄頁面為例，實現從後端獲取交易資料並在前端渲染。

步驟：

（1）編輯 pages/transactions.vue：

<template>
  <div>
    <h2 class="text-2xl font-bold mb-4">交易紀錄</h2>
    <ul>
      <li v-for="transaction in transactions" :key="transaction.id">
        <p>{{ transaction.description }} - {{ transaction.amount }} 元</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transactions: [],
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('/api/transactions')
      this.transactions = response.data
    } catch (error) {
      console.error('Error fetching transactions:', error)
    }
  },
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

解釋：

• 我們在 data 中定義了一個空的 transactions 陣列，用於存放從後端獲取的交易資料。
• 在 mounted 生命週期鉤子中，我們使用 this.$axios.get('/api/transactions') 發送 GET 請求到後端。
• 請求成功後，我們將回應的資料賦值給 transactions，然後在模板中使用 v-for 迭代渲染。

2. 處理 API 回應格式

在前一篇文章中，我們提到應該統一 API 的回應格式，方便前後端協作。假設後端的回應格式為：

{
  "status": "success",
  "data": [
    {
      "id": 1,
      "description": "購買書籍",
      "amount": 500,
      // 其他欄位...
    },
    // 更多交易...
  ]
}

那麼，我們需要在前端提取 data 中的資料。

修改 transactions.vue：

async mounted() {
  try {
    const response = await this.$axios.get('/api/transactions')
    if (response.data.status === 'success') {
      this.transactions = response.data.data
    } else {
      console.error('API returned an error:', response.data.message)
    }
  } catch (error) {
    console.error('Error fetching transactions:', error)
  }
}

3. 改進錯誤處理

為了提升使用者體驗，我們應該在發生錯誤時，向使用者顯示友好的提示。

修改 transactions.vue：

<template>
  <div>
    <h2 class="text-2xl font-bold mb-4">交易紀錄</h2>
    <div v-if="error" class="text-red-500">
      {{ error }}
    </div>
    <ul v-else>
      <li v-for="transaction in transactions" :key="transaction.id">
        <p>{{ transaction.description }} - {{ transaction.amount }} 元</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transactions: [],
      error: null,
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('/api/transactions')
      if (response.data.status === 'success') {
        this.transactions = response.data.data
      } else {
        this.error = response.data.message || '無法獲取交易資料。'
      }
    } catch (error) {
      this.error = '伺服器發生錯誤，請稍後再試。'
      console.error('Error fetching transactions:', error)
    }
  },
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

現在，如果發生錯誤，使用者將看到友好的錯誤訊息。

四、在元件中使用 Axios

除了在頁面中，我們也可以在元件中使用 Axios。為了提高程式碼的重用性和可維護性，我們可以將交易列表提取為一個元件。

1. 建立 components/TransactionList.vue

編輯 components/TransactionList.vue：

<template>
  <div>
    <div v-if="error" class="text-red-500">
      {{ error }}
    </div>
    <ul v-else>
      <li v-for="transaction in transactions" :key="transaction.id">
        <p>{{ transaction.description }} - {{ transaction.amount }} 元</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transactions: [],
      error: null,
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('/api/transactions')
      if (response.data.status === 'success') {
        this.transactions = response.data.data
      } else {
        this.error = response.data.message || '無法獲取交易資料。'
      }
    } catch (error) {
      this.error = '伺服器發生錯誤，請稍後再試。'
      console.error('Error fetching transactions:', error)
    }
  },
}
</script>

<style scoped>
/* 元件專屬的樣式 */
</style>

2. 在頁面中使用元件

修改 pages/transactions.vue：

<template>
  <div>
    <h2 class="text-2xl font-bold mb-4">交易紀錄</h2>
    <TransactionList />
  </div>
</template>

<script>
import TransactionList from '~/components/TransactionList.vue'

export default {
  components: {
    TransactionList,
  },
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

這樣，我們就成功地將交易列表提取為可重用的元件，未來在其他頁面中也可以使用。

五、處理身份驗證和保護路由

在實際的應用中，交易紀錄應該只允許已登入的使用者訪問。因此，我們需要實作身份驗證機制，並在前端進行保護。

1. 後端實作身份驗證 API

為了不讓本文過於冗長，我們假設後端已經實作了登入和註冊的 API，並使用 JWT（JSON Web Token）進行身份驗證。

• POST /api/login：登入，回傳 JWT Token。
• POST /api/register：註冊。
• 受保護的路由需要在 Header 中附帶 Authorization: Bearer {token}。

2. 在前端設定 Axios 攔截器

我們可以使用 Axios 攔截器，在請求發送前自動在 Header 中添加 Token。

步驟：

在 plugins/ 目錄下建立 axios.js：

export default function ({ $axios, store }) {
  $axios.onRequest((config) => {
    const token = store.state.auth.token
    if (token) {
      config.headers.common.Authorization = `Bearer ${token}`
    }
  })
}

修改 nuxt.config.js：

export default {
  // 其他設定...
  plugins: [
    '~/plugins/axios.js',
  ],
  // 其他設定...
}

3. 建立登入和註冊頁面

建立 pages/login.vue：

<template>
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-4">登入</h2>
    <form @submit.prevent="login">
      <div class="mb-4">
        <label class="block">電子郵件</label>
        <input v-model="email" type="email" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label class="block">密碼</label>
        <input v-model="password" type="password" class="border p-2 w-full" required />
      </div>
      <div v-if="error" class="text-red-500 mb-4">
        {{ error }}
      </div>
      <button type="submit" class="bg-blue-600 text-white p-2">登入</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      error: null,
    }
  },
  methods: {
    async login() {
      try {
        const response = await this.$axios.post('/api/login', {
          email: this.email,
          password: this.password,
        })
        if (response.data.status === 'success') {
          this.$store.commit('auth/setToken', response.data.token)
          this.$router.push('/')
        } else {
          this.error = response.data.message || '登入失敗。'
        }
      } catch (error) {
        this.error = '伺服器發生錯誤，請稍後再試。'
        console.error('Error during login:', error)
      }
    },
  },
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

4. 設定 Vuex 進行狀態管理

我們需要使用 Vuex（或 Pinia）來管理使用者的身份驗證狀態。

步驟：

在 store/ 目錄下建立 auth.js：

export const state = () => ({
  token: null,
})

export const mutations = {
  setToken(state, token) {
    state.token = token
  },
  clearToken(state) {
    state.token = null
  },
}

export const getters = {
  isAuthenticated(state) {
    return !!state.token
  },
}

5. 保護受限的頁面

我們可以使用 Nuxt 的中介層（middleware）來保護需要身份驗證的頁面。

步驟：

在 middleware/ 目錄下建立 auth.js：

export default function ({ store, redirect }) {
  if (!store.getters['auth/isAuthenticated']) {
    return redirect('/login')
  }
}

修改需要保護的頁面

例如，在 pages/transactions.vue 中：

export default {
  middleware: 'auth',
  // 其他設定...
}

這樣，未登入的使用者將被自動導向登入頁面。

六、測試與驗證

現在，我們已經整合了後端 API，並實作了基本的身份驗證功能。讓我們來測試一下：

1. 啟動後端與前端服務：確保後端 Laravel API 和前端 Nuxt 應用都在運行。
2. 註冊新帳號：訪問 /register 頁面，建立新帳號。
3. 登入：使用新帳號登入，確認是否成功取得 Token，並被導向首頁。
4. 訪問受保護的頁面：嘗試訪問 /transactions，應該能夠正常獲取並顯示交易紀錄。
5. 測試錯誤處理：嘗試輸入錯誤的登入資訊，確認錯誤訊息是否正常顯示。

七、優化與進階

1. 使用 asyncData 或 fetch 方法

在 Nuxt 中，我們可以使用 asyncData 或 fetch 方法來在頁面渲染之前獲取資料，這對於需要 SSR（伺服器端渲染）的頁面特別有用。

範例：

export default {
  async asyncData({ $axios }) {
    try {
      const response = await $axios.get('/api/transactions')
      if (response.data.status === 'success') {
        return {
          transactions: response.data.data,
        }
      } else {
        return {
          error: response.data.message || '無法獲取交易資料。',
        }
      }
    } catch (error) {
      return {
        error: '伺服器發生錯誤，請稍後再試。',
      }
    }
  },
  data() {
    return {
      transactions: [],
      error: null,
    }
  },
}

2. 建立全域的錯誤處理機制

為了避免在每個請求中都重複處理錯誤，我們可以在 Axios 攔截器中統一處理。

修改 plugins/axios.js：

export default function ({ $axios, store, redirect }) {
  $axios.onRequest((config) => {
    const token = store.state.auth.token
    if (token) {
      config.headers.common.Authorization = `Bearer ${token}`
    }
  })

  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    if (code === 401) {
      store.commit('auth/clearToken')
      redirect('/login')
    }
  })
}

這樣，當遇到 401 未授權錯誤時，將自動清除 Token 並導向登入頁面。

小結

今天，我們成功地整合了後端 API，並在 Nuxt 中使用 Axios 實現了資料的動態渲染。同時，我們也實作了基本的身份驗證功能，並學習了如何保護受限的頁面。

透過這些步驟，我們的個人財務管理系統已經初具規模，使用者可以登入系統，查看自己的交易紀錄，並享受良好的使用者體驗。

Next

接下來，我們可以：

• 繼續完善功能：實作交易的新增、編輯、刪除功能，以及其他需要的功能。
• 優化使用者介面：使用 Tailwind CSS 或其他 UI 庫，提升介面的美觀和易用性。
• 增加測試覆蓋率：為前端撰寫測試，確保功能的穩定性。
• 部署應用程式：將應用部署到線上，讓更多人可以使用。

希望這篇文章能夠對你有所幫助，讓我們一起繼續學習和進步，打造出更加優秀的應用程式！

感謝你的閱讀，如果你有任何問題或建議，歡迎在下方留言討論。我們下篇見！