فصل پنجم: کامپوننت‌ها

در این فصل، به پیاده‌سازی کامپوننت‌های قابل استفاده مجدد در اپلیکیشن مرکز اجاره کشتی‌های کروز با استفاده از Nuxt 3 می‌پردازیم. کامپوننت‌ها بلوک‌های سازنده رابط کاربری هستند که امکان استفاده مجدد از کد و ایجاد ساختارهای ماژولار را فراهم می‌کنند. در این پروژه، تمرکز ما روی کامپوننت ShipCard است که برای نمایش اطلاعات هر کشتی در صفحه لیست کشتی‌ها استفاده می‌شود. این کامپوننت از ویژگی‌های Nuxt مانند بهینه‌سازی تصاویر و مسیریابی بهره می‌برد و با Tailwind CSS استایل‌دهی شده است. در ادامه، این کامپوننت به‌طور کامل توضیح داده شده و کد آن شرح داده می‌شود.

کامپوننت ShipCard (`components/ShipCard.vue`)

کامپوننت ShipCard یک کارت نمایشی برای هر کشتی کروز است که اطلاعات کلیدی مانند نام، ظرفیت، قیمت روزانه و لینک به صفحه جزئیات کشتی را نمایش می‌دهد. این کامپوننت در صفحه لیست کشتی‌ها (pages/ships/index.vue) به‌صورت تکراری برای هر کشتی استفاده می‌شود.

کد:

<!-- components/ShipCard.vue -->
<template>
  <div class="card">
    <NuxtImg :src="ship.image" alt="Ship" class="w-full h-48 object-cover" provider="static" />
    <div class="p-4">
      <h2 class="text-xl font-semibold">{{ ship.name }}</h2>
      <p class="text-gray-600">Capacity: {{ ship.capacity }}</p>
      <p class="text-gray-600">Price: ${{ ship.pricePerDay }}/day</p>
      <NuxtLink :to="`/ships/${ship.id}`" class="text-blue-500 hover:underline">View Details</NuxtLink>
    </div>
  </div>
</template>

<script setup>
defineProps<{ ship: Ship }>();
</script>

توضیحات:

بخش Template

ساختار کلی:
<div class="card">: ظرف اصلی کارت که از کلاس card (تعریف‌شده در فایل assets/css/main.css با Tailwind CSS) استفاده می‌کند. این کلاس کارت را با ویژگی‌هایی مانند پس‌زمینه سفید، سایه، گوشه‌های گرد و مدیریت سرریز محتوا استایل‌دهی می‌کند.
تصویر کشتی:
<NuxtImg>: از ماژول @nuxt/image برای نمایش تصویر کشتی استفاده شده است.
- :src="ship.image": آدرس تصویر از پراپ ship.image گرفته می‌شود.
- alt="Ship": متن جایگزین برای دسترسی‌پذیری و سئو.
- class="w-full h-48 object-cover": تصویر عرض کامل کارت را پر کرده و ارتفاع ثابت ۴۸ واحد (حدود ۱۹۲ پیکسل) دارد. کلاس object-cover اطمینان می‌دهد که تصویر به‌درستی برش داده شده و بدون اعوجاج نمایش داده می‌شود.
- provider="static": مشخص می‌کند که تصاویر از پوشه public/ لود می‌شوند (تنظیم شده در nuxt.config.ts). در محیط تولید، می‌توان از ارائه‌دهنده‌های CDN مانند Cloudinary استفاده کرد.
اطلاعات کشتی:
<div class="p-4">: ظرف محتوای متنی با پدینگ ۴ واحدی برای فاصله‌گذاری یکنواخت.
<h2>: نام کشتی با فونت بزرگ و نیمه‌ضخیم (text-xl font-semibold) برای جلب توجه.
<p class="text-gray-600">: ظرفیت (ship.capacity) و قیمت روزانه (ship.pricePerDay) با رنگ خاکستری برای تمایز از عنوان نمایش داده می‌شوند.
<NuxtLink>: لینکی به صفحه جزئیات کشتی (/ships/${ship.id}) با رنگ آبی و افکت زیرخط هنگام هاور (hover:underline).

بخش Script

defineProps:
از ترکیب <script setup> در Vue 3 استفاده شده که کد را مختصر و خوانا می‌کند.
defineProps<{ ship: Ship }>(): پراپ ship را تعریف می‌کند که باید مطابق با تایپ Ship (تعریف‌شده در types/index.ts) باشد. این تایپ شامل فیلدهای id، name، capacity، pricePerDay، amenities و image است.
استفاده از TypeScript ایمنی نوع را تضمین می‌کند و از خطاهای احتمالی در زمان توسعه جلوگیری می‌کند.

کاربرد:

-این کامپوننت در صفحه لیست کشتی‌ها (pages/ships/index.vue) به‌صورت پویا برای هر کشتی رندر می‌شود (با استفاده از v-for).

طراحی پاسخ‌گو (Responsive) و استفاده از <NuxtImg> باعث می‌شود کارت‌ها در دستگاه‌های مختلف به‌خوبی نمایش داده شوند و تصاویر بهینه‌سازی شوند.
لینک "View Details" کاربران را به صفحه جزئیات کشتی هدایت می‌کند، که با استفاده از <NuxtLink> مسیریابی سمت کلاینت را بهینه می‌کند.

مزایا:

قابلیت استفاده مجدد: این کامپوننت می‌تواند در هر جایی که نیاز به نمایش یک کشتی باشد (مانند صفحات پیشنهادی یا تبلیغات) استفاده شود.
بهینه‌سازی تصویر: استفاده از <NuxtImg> باعث کاهش حجم تصاویر و بهبود سرعت بارگذاری می‌شود.
استایل‌دهی ساده: با Tailwind CSS، استایل‌دهی سریع و یکپارچه انجام شده است.

جمع‌بندی فصل پنجم

در این فصل، کامپوننت ShipCard را پیاده‌سازی کردیم که به‌عنوان یک واحد نمایشی کلیدی برای نمایش اطلاعات کشتی‌ها در اپلیکیشن عمل می‌کند. این کامپوننت با استفاده از Tailwind CSS برای استایل‌دهی، ماژول @nuxt/image برای بهینه‌سازی تصاویر، و <NuxtLink> برای مسیریابی بهینه طراحی شده است. استفاده از TypeScript و ساختار <script setup> کد را خوانا، ایمن و قابل نگهداری کرده است. در فصل‌های بعدی، به پیاده‌سازی مسیرهای سرور و ویژگی‌های پیشرفته‌تر Nuxt خواهیم پرداخت.