D21 - 實作分類管理：建立分類列表與新增/編輯頁面

哈囉，大家好！在前一篇文章中，我們成功地實作了銀行帳戶管理的功能，建立了銀行帳戶列表頁面以及新增/編輯頁面。

今天，我們將繼續完善我們的個人財務管理系統，專注於分類管理的開發。分類管理是財務管理系統中的重要組成部分，透過分類，我們可以更好地組織和分析收入與支出。接下來，我們將建立分類列表頁面以及新增/編輯分類頁面，讓使用者可以方便地管理他們的收入和支出分類。

一、建立分類列表頁面

首先，我們要建立分類列表頁面，讓使用者可以查看、編輯和刪除他們的分類。

1. 建立頁面檔案

在 pages/ 目錄下建立 categories.vue 檔案。

touch pages/categories.vue

2. 編寫頁面結構

在 categories.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="goToAddCategory" 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>
          </tr>
        </thead>
        <tbody>
          <tr v-for="category in categories" :key="category.id">
            <td class="border px-4 py-2">{{ category.name }}</td>
            <td class="border px-4 py-2">{{ category.type === 'income' ? '收入' : '支出' }}</td>
            <td class="border px-4 py-2">
              <button @click="goToEditCategory(category.id)" class="text-blue-600 mr-2">
                編輯
              </button>
              <button @click="deleteCategory(category.id)" class="text-red-600">
                刪除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

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

3. 說明

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

4. 處理權限保護

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

二、建立新增/編輯分類頁面

接下來，我們建立新增和編輯分類的頁面，使用共用的表單元件來實現。

1. 建立頁面檔案

在 pages/categories/ 目錄下建立以下檔案：

mkdir -p pages/categories
touch pages/categories/add.vue
touch pages/categories/_id.vue
touch pages/categories/_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.name" type="text" class="border p-2 w-full" required />
        <p v-if="errors.name" class="text-red-500">{{ errors.name }}</p>
      </div>
      <div class="mb-4">
        <label class="block">類型</label>
        <select v-model="form.type" class="border p-2 w-full" required>
          <option value="">請選擇</option>
          <option value="income">收入</option>
          <option value="expense">支出</option>
        </select>
        <p v-if="errors.type" class="text-red-500">{{ errors.type }}</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,
    },
    categoryId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      form: {
        name: '',
        type: '',
      },
      errors: {},
      error: null,
    }
  },
  async mounted() {
    if (this.isEdit && this.categoryId) {
      try {
        const response = await this.$axios.get(`/api/categories/${this.categoryId}`)
        if (response.data.status === 'success') {
          this.form = response.data.data
        } else {
          this.error = response.data.message || '無法獲取分類資料。'
        }
      } catch (error) {
        this.error = '伺服器發生錯誤，請稍後再試。'
        console.error('Error fetching category:', error)
      }
    }
  },
  methods: {
    async submitForm() {
      this.errors = {}
      this.error = null
      try {
        if (this.isEdit) {
          await this.$axios.put(`/api/categories/${this.categoryId}`, this.form)
        } else {
          await this.$axios.post('/api/categories', this.form)
        }
        this.$router.push('/categories')
      } catch (error) {
        if (error.response && error.response.status === 422) {
          this.errors = error.response.data.errors
        } else {
          this.error = '提交失敗，請稍後再試。'
        }
        console.error('Error submitting category 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>

編輯頁面 _id.vue

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

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

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

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

4. 說明

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

三、更新導航列

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

1. 更新 components/Header.vue

如果之前已經有分類管理的連結，可以忽略此步驟，否則請添加以下內容：

<!-- 在導航列中添加分類管理的連結 -->
<li><NuxtLink to="/categories">分類管理</NuxtLink></li>

四、測試與驗證

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

1. 測試分類列表頁面

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

2. 測試新增分類

• 點擊「新增分類」按鈕，進入新增頁面。
• 填寫表單，例如：
• • 分類名稱：薪資
  • 類型：收入
• 提交表單，應該返回分類列表，並顯示新添加的分類。

3. 測試編輯分類

• 在分類列表中，點擊某個分類的「編輯」按鈕。
• 應該進入編輯頁面，表單中已填入該分類的資料。
• 修改分類名稱或類型，提交表單，確認列表中的資料已更新。

4. 測試刪除分類

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

5. 測試權限保護

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

五、實作建議

• 統一的開發模式：延續銀行帳戶管理的開發模式，統一代碼風格和結構，提升可維護性。
• 共用元件：善用共用元件，減少重複程式碼。
• 錯誤處理：處理好各種錯誤情況，提供清晰的錯誤訊息，提升使用者體驗。
• 資料驗證：確保前端與後端的驗證規則一致，避免不必要的錯誤。

小結

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

• 如何在 Nuxt 中建立頁面和元件，並使用動態路由。
• 如何與後端 API 互動，處理分類的資料取得和提交。
• 如何處理表單驗證和錯誤訊息，提升使用者體驗。

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

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