哈囉，大家好！在前面的文章中，我們已經成功地建立了 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。有兩種主要的方式：
- 使用官方的 @nuxtjs/axios 模組：這個模組為 Axios 提供了 Nuxt 的封裝，讓我們可以更方便地在 Nuxt 中使用 Axios。
- 直接安裝 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，並實作了基本的身份驗證功能。讓我們來測試一下：
- 啟動後端與前端服務：確保後端 Laravel API 和前端 Nuxt 應用都在運行。
- 註冊新帳號：訪問 /register 頁面，建立新帳號。
- 登入：使用新帳號登入，確認是否成功取得 Token，並被導向首頁。
- 訪問受保護的頁面：嘗試訪問 /transactions，應該能夠正常獲取並顯示交易紀錄。
- 測試錯誤處理：嘗試輸入錯誤的登入資訊，確認錯誤訊息是否正常顯示。
七、優化與進階
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 庫，提升介面的美觀和易用性。
- 增加測試覆蓋率：為前端撰寫測試，確保功能的穩定性。
- 部署應用程式：將應用部署到線上，讓更多人可以使用。
希望這篇文章能夠對你有所幫助，讓我們一起繼續學習和進步，打造出更加優秀的應用程式！
感謝你的閱讀，如果你有任何問題或建議，歡迎在下方留言討論。我們下篇見！
