2025年7月31日 星期四

打造全方位的寵物健康管理系統：Laravel 11, Vue 3, Pinia 與 Docker 實戰

打造寵物健康管理系統：Laravel 與 Vue 的現代化實作

引言

寵物健康管理系統（PetCare System）是一款幫助寵物主人管理健康記錄、行為日誌和多隻寵物的網路應用程式。本文旨在為技術人員提供實務參考，深入探討其技術實現，涵蓋後端（Laravel 11）、前端（Vue 3 與 Pinia）、多語系支援、PWA 功能及 Docker 部署。文章展示如何構建一個模組化、可擴展的 Web 應用。

您可以透過以下 GitHub 連結檢閱本專案的原始碼：https://github.com/BpsEason/petcare-system.git

系統架構

系統採用分層架構，確保模組化與可維護性：

  • 後端：使用 Laravel 11（PHP 8.2）提供 RESTful API，並利用 Laravel Sanctum 進行無狀態認證。後端連接到外部 MySQL 資料庫，核心模型包括 User、Pet、HealthRecord 和 BehaviorLog，這些模型通過外鍵關聯實現數據一致性。

  • 前端：採用 Vue 3 框架，搭配 Pinia 進行狀態管理。同時，使用 Vue Router 處理路由，並透過 Vue I18n 實現多語系切換。PWA 功能則透過 Vite PWA 外掛提供離線體驗。

  • 部署：利用 Docker Compose 定義三個服務（Nginx、Laravel、Vue 構建）。其中，Nginx 作為反向代理，處理前端靜態檔案和後端 API 請求，確保開發、測試和生產環境的一致性。

核心功能實作與程式碼解析

1. 用戶認證與安全性

系統使用 Laravel Sanctum 實現 API 認證。用戶透過 /api/register 和 /api/login 端點獲取個人存取令牌（Personal Access Token），並將其儲存於前端的 Pinia Store。後端 API 端點則受 auth:sanctum 中間件保護，確保只有經過認證的用戶才能訪問。

關鍵程式碼（app/Http/Controllers/AuthController.php）：

PHP
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;

class AuthController extends Controller
{
    // 用戶註冊，驗證輸入並生成存取令牌
    public function register(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|unique:users',
            'password' => 'required|string|min:8',
        ]);
        $user = User::create([
            'name' => $validated['name'],
            'email' => $validated['email'],
            'password' => Hash::make($validated['password']),
        ]);
        $token = $user->createToken('auth_token')->plainTextToken;
        return response()->json(['token' => $token, 'user' => $user]);
    }
}

此外，前端的 axios 攔截器會自動在每個請求中添加此令牌，並處理 401 錯誤，將用戶導回登入頁面，從而增強了安全性與用戶體驗。

2. 多寵物管理

系統支援用戶管理多隻寵物。Pet 模型與 User 建立一對多關聯，並透過 is_default 欄位標記預設寵物。前端 Pinia 的 pet.js 管理寵物列表與選定狀態，並透過 /api/pets 端點與後端同步。

關鍵程式碼（frontend/src/stores/pet.js）：

JavaScript
import { defineStore } from 'pinia';
import axios from 'axios';

export const usePetStore = defineStore('pet', {
  state: () => ({
    pets: [], // 儲存寵物列表
    selectedPetId: null, // 當前選定寵物 ID
  }),
  actions: {
    // 獲取用戶的寵物列表並設置預設寵物
    async fetchPets() {
      const response = await axios.get('/api/pets');
      this.pets = response.data;
      if (this.pets.length > 0 && !this.selectedPetId) {
        this.selectedPetId = this.pets.find(p => p.is_default)?.id || this.pets[0].id;
      }
    },
    // 切換選定寵物
    setSelectedPet(petId) {
      this.selectedPetId = petId;
    },
  },
});

3. 健康記錄與行為日誌

健康記錄（HealthRecord）和行為日誌（BehaviorLog）通過 pet_id 與 Pet 模型關聯，提供完整的 CRUD 操作。後端控制器使用 Policy（例如 HealthRecordPolicy）來限制訪問，確保只有寵物主人才能操作其數據。

關鍵程式碼（frontend/src/views/DashboardView.vue）：

HTML
<template>
  <div class="container mx-auto p-4">
    <select v-model="selectedPetId" @change="changePet" class="mb-4 p-2 border rounded">
      <option v-for="pet in pets" :key="pet.id" :value="pet.id">{{ pet.name }}</option>
    </select>
    <form @submit.prevent="addHealthRecord">
      <input type="date" v-model="newRecord.record_date" required />
      <input type="text" v-model="newRecord.record_type" :placeholder="$t('health_record.type')" required />
      <button type="submit">{{ $t('health_record.add') }}</button>
    </form>
  </div>
</template>

<script>
import { usePetStore } from '@/stores/pet';
import axios from 'axios';

export default {
  data() {
    return {
      newRecord: { record_date: '', record_type: '' }, // 新增健康記錄表單數據
    };
  },
  computed: {
    pets() {
      return usePetStore().pets; // 從 Pinia 獲取寵物列表
    },
    selectedPetId: {
      get() { return usePetStore().selectedPetId; }, // 獲取選定寵物
      set(value) { usePetStore().setSelectedPet(value); }, // 更新選定寵物
    },
  },
  methods: {
    async addHealthRecord() {
      await axios.post(`/api/pets/${this.selectedPetId}/health-records`, this.newRecord);
      this.newRecord = { record_date: '', record_type: '' }; // 重置表單
    },
  },
};
</script>

4. 多語系支援

後端使用 Laravel 的語系檔案 (resources/lang/{en,zh_TW,zh_CN})，並透過一個 SetLocale 中間件根據 Accept-Language 標頭切換語系。前端則使用 Vue I18n，並將用戶選擇儲存在 localStorage 中，以確保語系在瀏覽器刷新後仍保持一致。

關鍵程式碼（app/Http/Middleware/SetLocale.php）：

PHP
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;

class SetLocale
{
    // 根據請求標頭設置語系
    public function handle(Request $request, Closure $next)
    {
        $locale = $request->header('Accept-Language', config('app.fallback_locale'));
        if (in_array($locale, ['en', 'zh_TW', 'zh_CN'])) {
            App::setLocale($locale);
        }
        return $next($request);
    }
}

5. PWA 與離線體驗

系統使用 Vite PWA 外掛（vite-plugin-pwa）自動生成 manifest.json 和 Service Worker。這使得應用程式可以被「安裝」到設備上，並支援離線訪問。Nginx 配置也確保了 Service Worker 緩存的正確運作。

關鍵程式碼（frontend/vite.config.js）：

JavaScript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate', // 自動更新 Service Worker
      manifest: {
        name: 'PetCare System',
        short_name: 'PetCare',
        icons: [
          { src: '/assets/icon-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: '/assets/icon-512x512.png', sizes: '512x512', type: 'image/png' },
        ],
        theme_color: '#42b983',
        background_color: '#ffffff',
        display: 'standalone',
      },
    }),
  ],
});

6. Docker 部署

docker-compose.yml 檔案定義了所有必要的服務，包括 Nginx（反向代理）、Laravel（PHP-FPM）和 Vue 構建服務。這種容器化方法確保了部署的可靠性與環境的一致性，極大簡化了開發與部署流程。

關鍵程式碼（docker-compose.yml）：

YAML
version: '3.8'
services:
  nginx:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./frontend/dist:/usr/share/nginx/html
    depends_on:
      - backend
    networks:
      - app-network
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    environment:
      - DB_HOST=${DB_HOST}
      - DB_DATABASE=${DB_DATABASE}
      - DB_USERNAME=${DB_USERNAME}
      - DB_PASSWORD=${DB_PASSWORD}
    networks:
      - app-network
  frontend_build:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    volumes:
      - ./frontend/dist:/app/dist
    networks:
      - app-network
networks:
  app-network:
    driver: bridge

結論

寵物健康管理系統展示了一個現代化 Web 應用的完整實作。它結合了 Laravel 的強大後端功能、Vue 的靈活前端框架和 Docker 的可靠部署。專案的模組化設計和多語系支援，為未來擴展（如飲食追蹤、趨勢圖）奠定了堅實的基礎。技術人員可參考本文的程式碼和架構，將其經驗應用於類似的專案。

於 沒有留言:
訂閱： 文章 (Atom)

熱門文章

  • AI 賦能企業流程自動化平台實戰報告：從 POC 到規模化部署
      專案概述：問題陳述與核心目標 在過去的企業營運中，經常面臨大量重複性、耗時且容易出錯的手動流程，例如每月耗費超過 200 人時的財務報表生成，以及需大量人力投入的客戶服務常見問答處理。這些挑戰不僅導致效率低落，也排擠了團隊投入更高價值工作的時間。 為了解決此痛點，本專案設計並...
  • 如何在 Windows 11 底下開發一個基於 XAMPP + Waitress + FastAPI 的高併發爬蟲系統?
    要在 Windows 11 底下開發一個基於 XAMPP + Waitress + FastAPI 的高併發爬蟲系統，同時使用 MySQL 和 Redis，這是一個相當複雜但也非常有挑戰性的任務。下面我會將整個開發流程拆解成幾個主要部分，並提供詳細的步驟和注意事項。 重要提醒： ...
  • 資料庫正規化（Normalization）與反正規化（Denormalization）的優缺點。
      在資料庫設計中， 正規化 (Normalization) 和 反正規化 (Denormalization) 是兩種截然不同的策略，各有其優缺點，通常需要在實際應用場景中權衡選擇。 一、正規化 (Normalization) 定義 正規化是一套系統性的方法，用於設計關聯式資...
  • 《面試官問完，開AI回答》Nginx 與 PHP-FPM：FastCGI 協議實戰與容器化部署優化
    Nginx 與 PHP-FPM：FastCGI 協議實戰與容器化部署優化 在高並發的微服務時代，高效的 Web 伺服器與後端應用程式協同工作是系統效能的基石。Nginx 作為最受歡迎的網頁伺服器之一，與 PHP-FPM（FastCGI Process Manager）的組合堪稱經...
  • 《面試官問完，開AI回答》如何使用 AWS 解決 Laravel 高流量問題：一份完整的技術指南
      前言 當您的 Laravel 應用程式從初期的成長期邁入高流量階段時，單一伺服器架構將無法滿足龐大的併發請求，進而導致服務變慢甚至中斷。本指南旨在提供一個全面的技術路線圖，說明如何利用 Amazon Web Services (AWS) 的各種彈性服務，將您的 Laravel...
  • 《面試官別再問》資料庫正規化(Normalization)
    正規化說明 正規化是在資料庫中組織資料的程序。 其中包括建立資料表，以及在這些資料表之間根據規則建立關聯性，這些規則的設計目的是：透過刪除重複性和不一致的相依性，保護資料並讓資料庫更有彈性。 重複的資料會浪費磁碟空間，並產生維護方面的問題。 如果必須變更現有資料，並且該...
  • 從零開始：使用 FastAPI、MySQL 和 Docker 打造你的第一個電商購物車應用
    從零開始：使用 FastAPI、MySQL 和 Docker 打造你的第一個電商購物車應用 引言： 哈囉，各位程式碼愛好者！你是否曾經想過要打造一個自己的網路應用程式，卻不知道從何開始？特別是對 Python 有興趣的初學者，常常會被複雜的 Web 框架和部署流程嚇到。別擔心！今...
  • 《面試官別再問》Web 前後端分離有意義嗎?
      Web 前後端分離：現代應用程式架構的必然選擇？ 在當代 Web 應用程式開發中，「前後端分離」已成為一種主流的架構模式。它不僅改變了開發團隊的工作流程，也對應用程式的效能、可擴展性、維護性和用戶體驗產生了深遠影響。本文將深入探討前後端分離的意義、其核心優勢、潛在挑戰以及在何...
  • 用 Laravel 和 Vue3 打造 AI 虛擬人互動系統：從零開始的專案骨架與 RAG 實踐
    用 Laravel 和 Vue3 打造 AI 虛擬人互動系統：從零開始的專案骨架與 RAG 實踐 專案背景與目標 隨著生成式 AI 的蓬勃發展，我們能以更低成本、更有效率的方式來打造具備互動能力的虛擬角色。本專案旨在提供一個完整的 AI 虛擬人互動管理系統，讓開發者能夠快速建立一...
  • PetJoyEcommerce 技術藍圖：Nuxt 3 + Laravel 10 的寵物電商 MVP 架構實作
      PetJoyEcommerce 技術架構深度解析：從開發到部署到未來擴展的現代全端實踐 在當今數位時代，一個高效能、可擴展且易於維護的電商平台是成功的關鍵。 PetJoyEcommerce 專案作為一個最小可行性產品 (MVP)，集結了多項現代技術，為開發者提供一個絕佳的學...