D20 - 實作銀行帳戶管理：建立銀行帳戶列表與新增/編輯頁面

哈囉，大家好！在前面的文章中，我們已經規劃了前端介面，並盤點了所需的頁面與功能。

現在，是時候開始動手實作了。今天，我們將專注於 銀行帳戶列表頁面（Bank Accounts）以及 新增/編輯銀行帳戶頁面（Add/Edit Bank Account）的開發。

透過這次的實作，我們將學習如何在 Nuxt 中建立頁面、與後端 API 互動，以及實作表單驗證等功能。

讓我們一起讓應用程式更加完整吧！

一、建立銀行帳戶列表頁面

首先，我們要建立銀行帳戶列表頁面，讓使用者可以查看和管理他們的銀行帳戶。

1. 建立頁面檔案

在 pages/ 目錄下建立 bank-accounts.vue 檔案。

touch pages/bank-accounts.vue

2. 編寫頁面結構

在 bank-accounts.vue 中，我們先建立基本的頁面結構。

<template>
  <div>
    <h2 class="text-2xl font-bold mb-4">銀行帳戶管理</h2>
    <div v-if="error" class="text-red-500">
      {{ error }}
    </div>
    <div v-else>
      <button @click="goToAddAccount" class="bg-blue-600 text-white px-4 py-2 mb-4">
        新增銀行帳戶
      </button>
      <table class="w-full text-left">
        <thead>
          <tr>
            <th class="border px-4 py-2">帳戶名稱</th>
            <th class="border px-4 py-2">銀行名稱</th>
            <th class="border px-4 py-2">帳戶餘額</th>
            <th class="border px-4 py-2">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="account in bankAccounts" :key="account.id">
            <td class="border px-4 py-2">{{ account.account_name }}</td>
            <td class="border px-4 py-2">{{ account.bank_name }}</td>
            <td class="border px-4 py-2">{{ account.balance }}</td>
            <td class="border px-4 py-2">
              <button @click="goToEditAccount(account.id)" class="text-blue-600 mr-2">
                編輯
              </button>
              <button @click="deleteAccount(account.id)" class="text-red-600">
                刪除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  middleware: 'auth',
  data() {
    return {
      bankAccounts: [],
      error: null,
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('/api/bank-accounts')
      if (response.data.status === 'success') {
        this.bankAccounts = response.data.data
      } else {
        this.error = response.data.message || '無法獲取銀行帳戶資料。'
      }
    } catch (error) {
      this.error = '伺服器發生錯誤，請稍後再試。'
      console.error('Error fetching bank accounts:', error)
    }
  },
  methods: {
    goToAddAccount() {
      this.$router.push('/bank-accounts/add')
    },
    goToEditAccount(id) {
      this.$router.push(`/bank-accounts/edit/${id}`)
    },
    async deleteAccount(id) {
      if (confirm('確定要刪除這個銀行帳戶嗎？')) {
        try {
          await this.$axios.delete(`/api/bank-accounts/${id}`)
          this.bankAccounts = this.bankAccounts.filter(account => account.id !== id)
        } catch (error) {
          alert('刪除失敗，請稍後再試。')
          console.error('Error deleting bank account:', error)
        }
      }
    },
  },
}
</script>

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

3. 說明

• 資料取得：在 mounted 生命週期鉤子中，我們向後端 API 請求銀行帳戶列表，並將資料存入 bankAccounts。
• 新增帳戶：點擊「新增銀行帳戶」按鈕，會導向新增帳戶的頁面。
• 編輯帳戶：在帳戶列表中，點擊「編輯」按鈕，會導向編輯該帳戶的頁面。
• 刪除帳戶：點擊「刪除」按鈕，會先彈出確認對話框，確認後發送刪除請求，並從列表中移除該帳戶。

4. 處理權限保護

• 我們使用了 middleware: 'auth'，確保只有已登入的使用者才能訪問此頁面。

二、建立新增/編輯銀行帳戶頁面

接下來，我們需要建立一個頁面，讓使用者可以新增或編輯銀行帳戶。我們可以使用同一個頁面，根據路由參數來判斷是新增還是編輯。

1. 建立頁面檔案

在 pages/bank-accounts/ 目錄下建立 _form.vue 檔案。

mkdir -p pages/bank-accounts
touch pages/bank-accounts/add.vue
touch pages/bank-accounts/edit.vue
touch pages/bank-accounts/_form.vue

2. 編寫 _form.vue 元件

我們先在 _form.vue 中建立表單元件，供新增和編輯頁面使用。

<template>
  <div>
    <h2 class="text-2xl font-bold mb-4">{{ isEdit ? '編輯銀行帳戶' : '新增銀行帳戶' }}</h2>
    <form @submit.prevent="submitForm">
      <div class="mb-4">
        <label class="block">帳戶名稱</label>
        <input v-model="form.account_name" type="text" class="border p-2 w-full" required />
        <p v-if="errors.account_name" class="text-red-500">{{ errors.account_name }}</p>
      </div>
      <div class="mb-4">
        <label class="block">銀行名稱</label>
        <input v-model="form.bank_name" type="text" class="border p-2 w-full" />
        <p v-if="errors.bank_name" class="text-red-500">{{ errors.bank_name }}</p>
      </div>
      <div class="mb-4">
        <label class="block">帳號</label>
        <input v-model="form.account_number" type="text" class="border p-2 w-full" />
        <p v-if="errors.account_number" class="text-red-500">{{ errors.account_number }}</p>
      </div>
      <div class="mb-4">
        <label class="block">帳戶餘額</label>
        <input v-model="form.balance" type="number" step="0.01" class="border p-2 w-full" required />
        <p v-if="errors.balance" class="text-red-500">{{ errors.balance }}</p>
      </div>
      <div v-if="error" class="text-red-500 mb-4">
        {{ error }}
      </div>
      <button type="submit" class="bg-blue-600 text-white px-4 py-2">
        {{ isEdit ? '更新' : '新增' }}
      </button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    accountId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      form: {
        account_name: '',
        bank_name: '',
        account_number: '',
        balance: 0,
      },
      errors: {},
      error: null,
    }
  },
  async mounted() {
    if (this.isEdit && this.accountId) {
      try {
        const response = await this.$axios.get(`/api/bank-accounts/${this.accountId}`)
        if (response.data.status === 'success') {
          this.form = response.data.data
        } else {
          this.error = response.data.message || '無法獲取帳戶資料。'
        }
      } catch (error) {
        this.error = '伺服器發生錯誤，請稍後再試。'
        console.error('Error fetching bank account:', error)
      }
    }
  },
  methods: {
    async submitForm() {
      this.errors = {}
      this.error = null
      try {
        if (this.isEdit) {
          await this.$axios.put(`/api/bank-accounts/${this.accountId}`, this.form)
        } else {
          await this.$axios.post('/api/bank-accounts', this.form)
        }
        this.$router.push('/bank-accounts')
      } catch (error) {
        if (error.response && error.response.status === 422) {
          this.errors = error.response.data.errors
        } else {
          this.error = '提交失敗，請稍後再試。'
        }
        console.error('Error submitting bank account form:', error)
      }
    },
  },
}
</script>

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

3. 編寫新增與編輯頁面

新增頁面 add.vue

<template>
  <FormComponent />
</template>

<script>
import FormComponent from './_form.vue'

export default {
  middleware: 'auth',
  components: {
    FormComponent,
  },
}
</script>

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

編輯頁面 edit.vue

<template>
  <FormComponent :isEdit="true" :accountId="accountId" />
</template>

<script>
import FormComponent from './_form.vue'

export default {
  middleware: 'auth',
  components: {
    FormComponent,
  },
  computed: {
    accountId() {
      return parseInt(this.$route.params.id)
    },
  },
}
</script>

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

4. 設定路由

由於我們使用了動態路由參數，需要在 pages/bank-accounts/ 目錄下調整檔案結構。

調整檔案結構

• 將 edit.vue 更名為 _id.vue。

mv pages/bank-accounts/edit.vue pages/bank-accounts/_id.vue

更新 _id.vue

<template>
  <FormComponent :isEdit="true" :accountId="accountId" />
</template>

<script>
import FormComponent from './_form.vue'

export default {
  middleware: 'auth',
  components: {
    FormComponent,
  },
  computed: {
    accountId() {
      return parseInt(this.$route.params.id)
    },
  },
}
</script>

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

5. 說明

• 共用表單元件：我們將新增和編輯的表單抽取為 _form.vue，以便重用。
• 動態路由：使用 _id.vue 來處理帶有 id 參數的路由，方便取得要編輯的帳戶資料。
• 資料驗證與錯誤處理：在提交表單時，處理後端回傳的驗證錯誤，並顯示在對應的欄位下方。

三、更新導航列

為了方便使用者訪問銀行帳戶管理頁面，我們需要在導航列中添加對應的連結。

1. 更新 components/Header.vue

<template>
  <header class="bg-blue-600 text-white p-4">
    <nav class="container mx-auto flex justify-between">
      <h1 class="text-xl font-bold">
        <NuxtLink to="/">財務管理系統</NuxtLink>
      </h1>
      <ul class="flex space-x-4 items-center">
        <li><NuxtLink to="/transactions">交易紀錄</NuxtLink></li>
        <li><NuxtLink to="/bank-accounts">銀行帳戶</NuxtLink></li>
        <li><NuxtLink to="/categories">分類管理</NuxtLink></li>
        <li><NuxtLink to="/reports">報表</NuxtLink></li>
        <li v-if="$store.getters['auth/isAuthenticated']">
          <div class="relative" @click="toggleMenu">
            <span>{{ $store.state.auth.user.username }}</span>
            <div v-if="showMenu" class="absolute right-0 mt-2 bg-white text-black p-2">
              <NuxtLink to="/profile">個人資料</NuxtLink>
              <a href="#" @click.prevent="logout">登出</a>
            </div>
          </div>
        </li>
        <li v-else>
          <NuxtLink to="/login">登入</NuxtLink>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
    }
  },
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu
    },
    logout() {
      this.$store.commit('auth/clearToken')
      this.$router.push('/login')
    },
  },
}
</script>

<style scoped>
/* Header 專屬的樣式 */
</style>

2. 說明

• 導航連結：添加了「銀行帳戶」的連結，方便使用者訪問銀行帳戶管理頁面。
• 使用者選單：當使用者已登入時，顯示使用者名稱，點擊可展開下拉選單，包含「個人資料」和「登出」等選項。

四、測試與驗證

現在，我們已經完成了銀行帳戶列表頁面和新增/編輯頁面的開發。讓我們進行測試，確保功能正常運作。

1. 測試銀行帳戶列表頁面

• 登入應用程式，點擊導航列中的「銀行帳戶」連結。
• 應該看到銀行帳戶列表，如果尚無帳戶，列表為空。
• 確認「新增銀行帳戶」按鈕可以正常使用。

2. 測試新增銀行帳戶

• 點擊「新增銀行帳戶」按鈕，進入新增頁面。
• 填寫表單，例如：
• • 帳戶名稱：薪資帳戶
  • 銀行名稱：台灣銀行
  • 帳號：12345678
  • 帳戶餘額：10000
• 提交表單，應該返回銀行帳戶列表，並顯示新添加的帳戶。

3. 測試編輯銀行帳戶

• 在銀行帳戶列表中，點擊某個帳戶的「編輯」按鈕。
• 應該進入編輯頁面，表單中已填入該帳戶的資料。
• 修改某些資訊，提交表單，確認列表中的資料已更新。

4. 測試刪除銀行帳戶

• 在銀行帳戶列表中，點擊某個帳戶的「刪除」按鈕。
• 應該彈出確認對話框，確認後該帳戶從列表中移除。

5. 測試權限保護

• 登出應用程式，嘗試直接訪問 /bank-accounts，應該被重導向到登入頁面。

五、實作建議

• 組件化開發：將可重用的部分抽取為元件，提升程式碼的可維護性和重用性。
• 動態路由：善用動態路由和路由參數，實現更靈活的頁面。
• 錯誤處理：處理好各種錯誤情況，提供清晰的錯誤訊息，提升使用者體驗。
• 與後端協作：確保前後端對 API 的定義、回應格式、驗證規則等達成共識，避免不必要的問題。

小結

今天，我們成功地實作了銀行帳戶列表頁面以及新增/編輯頁面。透過這次的開發，我們學習了：

• 如何在 Nuxt 中建立頁面和元件。
• 如何與後端 API 進行互動，處理資料的取得和提交。
• 如何處理表單驗證和錯誤訊息。
• 如何使用動態路由和路由參數。
  希望這篇文章能夠對你有所幫助，讓我們一起繼續學習和進步，打造出更加完善的應用程式！感謝你的閱讀，如果你有任何問題或建議，歡迎在下方留言討論。我們下次見！