آموزش اتصال Laravel به Vue.js؛ ساخت رابط کاربری تعاملی

Laravel یکی از فریم‌ورک‌های محبوب PHP برای توسعه بک‌اند و ساخت برنامه‌های تحت وب است. در مقابل، Vue.js یک فریم‌ورک JavaScript برای ساخت رابط‌های کاربری تعاملی محسوب می‌شود. ترکیب این دو ابزار به توسعه‌دهندگان اجازه می‌دهد از قابلیت‌های Laravel در سمت سرور و امکانات Vue در سمت کاربر استفاده کنند.

برای مثال، می‌توانید یک فروشگاه اینترنتی با Laravel بسازید و بخش‌هایی مانند جست‌وجوی محصولات، فیلترها، سبد خرید و پنل کاربری را با Vue پیاده‌سازی کنید.

در این مقاله یاد می‌گیریم چگونه Vue.js را به یک پروژه Laravel اضافه کنیم، اولین کامپوننت را بسازیم و داده‌ها را در رابط کاربری نمایش دهیم. همچنین تفاوت روش استفاده از Vue در کنار Blade با معماری مبتنی بر API را بررسی می‌کنیم.

Laravel و Vue.js چه تفاوتی دارند؟

Laravel و Vue.js دو ابزار با کاربردهای متفاوت هستند.

Laravel یک فریم‌ورک سمت سرور است که وظایفی مانند مدیریت درخواست‌ها، ارتباط با پایگاه داده، احراز هویت، اعتبارسنجی و اجرای منطق تجاری را بر عهده می‌گیرد.

Vue.js برای ساخت رابط کاربری در مرورگر استفاده می‌شود. با کمک آن می‌توانید کامپوننت‌های قابل استفاده مجدد بسازید، وضعیت رابط کاربری را مدیریت کنید و بدون بارگذاری مجدد کل صفحه، بخش‌های مختلف رابط را به‌روزرسانی کنید.

نکته مهم این است که Vue به‌طور مستقیم جایگزین Laravel نمی‌شود. در معماری متداول، Vue درخواست خود را به Laravel ارسال می‌کند و Laravel پس از پردازش درخواست، داده یا نتیجه مناسب را برمی‌گرداند.

چرا Laravel را با Vue ترکیب کنیم؟

استفاده از این دو ابزار در پروژه‌هایی مفید است که علاوه بر بک‌اند قدرتمند، به رابط کاربری پویا نیز نیاز دارند.

مهم‌ترین مزایا عبارت‌اند از:

• رابط کاربری تعاملی: بخش‌هایی مانند فیلتر محصولات و فرم‌های پویا را می‌توان بدون بارگذاری کامل صفحه به‌روزرسانی کرد.
• استفاده مجدد از کامپوننت‌ها: عناصر رابط کاربری را می‌توان در صفحات مختلف استفاده کرد.
• تفکیک مسئولیت‌ها: Laravel می‌تواند منطق سمت سرور را مدیریت کند و Vue مسئول نمایش و تعاملات رابط باشد.
• توسعه‌پذیری: در پروژه‌های بزرگ می‌توان ساختار رابط کاربری را مستقل‌تر و منظم‌تر طراحی کرد.
• هماهنگی با Vite: ابزار Vite که در پروژه‌های جدید Laravel استفاده می‌شود، فرایند توسعه و ساخت فایل‌های فرانت‌اند را ساده می‌کند.

بااین‌حال، ترکیب Laravel و Vue همیشه ضروری نیست. برای سایت‌های محتوایی ساده یا صفحاتی که تعاملات محدودی دارند، استفاده از Blade ممکن است ساده‌تر و کم‌هزینه‌تر باشد.

روش‌های استفاده از Vue در Laravel

برای ترکیب این دو ابزار، چند معماری رایج وجود دارد.

روش اول: استفاده از Vue در کنار Blade

در این روش، Laravel همچنان صفحات اصلی را تولید می‌کند و Vue برای بخش‌هایی از صفحه که نیاز به تعامل دارند استفاده می‌شود.

برای مثال، صفحه محصولات با Blade نمایش داده می‌شود، اما فیلتر قیمت یا ابزار انتخاب تعداد محصول به‌صورت یک کامپوننت Vue پیاده‌سازی می‌شود.

این روش برای پروژه‌هایی مناسب است که ساختار اصلی آن‌ها از قبل با Laravel و Blade پیاده‌سازی شده است.

روش دوم: استفاده از Laravel به‌عنوان بک‌اند API

در این معماری، Laravel داده‌ها را از طریق API ارائه می‌کند و Vue رابط کاربری را مدیریت می‌کند.

در این حالت، Vue می‌تواند یک برنامه تک‌صفحه‌ای یا SPA باشد. صفحات بدون بارگذاری مجدد کامل تغییر می‌کنند و داده‌ها از طریق درخواست‌های HTTP دریافت می‌شوند.

این معماری برای برنامه‌های تعاملی، داشبوردهای پیچیده و پروژه‌هایی که نیاز به جداسازی فرانت‌اند و بک‌اند دارند مناسب است.

روش سوم: استفاده از Inertia.js

Inertia.js راهکاری برای ساخت برنامه‌های تک‌صفحه‌ای با استفاده از فریم‌ورک‌های سمت کاربر مانند Vue و بدون نیاز به طراحی یک API مستقل برای تمام صفحات است.

در این معماری، Laravel همچنان Routeها و کنترلرها را مدیریت می‌کند، اما به‌جای بازگرداندن View معمولی، داده‌های لازم برای کامپوننت Vue را ارسال می‌کند.

اگر قصد دارید با Laravel و Vue یک برنامه تعاملی بسازید اما نمی‌خواهید تمام ارتباطات صفحات را به شکل API مستقل طراحی کنید، Inertia.js نیز ارزش بررسی دارد.

در ادامه، روش اول را با یک مثال عملی پیاده‌سازی می‌کنیم.

پیش‌نیازهای نصب Vue در Laravel

برای اجرای مثال‌های این مقاله به موارد زیر نیاز دارید:

• PHP سازگار با نسخه Laravel پروژه
• Composer
• Node.js و npm
• یک پروژه Laravel
• آشنایی مقدماتی با HTML، CSS و JavaScript

اگر هنوز پروژه Laravel ندارید، ابتدا مقاله ساخت اولین پروژه Laravel را مطالعه کنید.

برای بررسی نسخه ابزارهای نصب‌شده، دستورهای زیر را در ترمینال اجرا کنید:

php -v

composer -V

node -v

npm -v

اگر این دستورها نسخه ابزارها را نمایش دهند، می‌توانید مراحل بعدی را انجام دهید.

مرحله اول: نصب Vue.js در پروژه Laravel

ابتدا وارد پوشه اصلی پروژه Laravel شوید؛ همان پوشه‌ای که فایل package.json در آن قرار دارد.

سپس دستور زیر را اجرا کنید:

npm install vue

این دستور Vue.js را به وابستگی‌های فرانت‌اند پروژه اضافه می‌کند.

در پروژه‌های جدید Laravel معمولاً Vite از قبل پیکربندی شده است. بنابراین، برای شروع کار با Vue نیازی به راه‌اندازی یک سیستم ساخت جداگانه ندارید.

نصب پلاگین Vue برای Vite

برای اینکه Vite بتواند فایل‌های کامپوننت Vue با پسوند .vue را پردازش کند، باید پلاگین Vue نیز نصب شود:

npm install -D @vitejs/plugin-vue

اکنون باید تنظیمات Vite را بررسی و در صورت نیاز اصلاح کنید.

فایل vite.config.js را باز کنید. در یک پروژه ساده می‌توانید تنظیمات را به این شکل قرار دهید:

import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue';



export default defineConfig({

    plugins: [

        laravel({

            input: ['resources/css/app.css', 'resources/js/app.js'],

            refresh: true,

        }),

        vue(),

    ],

});

نکته: اگر فایل فعلی شما تنظیمات دیگری مانند پلاگین‌ها یا ورودی‌های اضافی دارد، آن‌ها را بدون بررسی حذف نکنید. کافی است پلاگین Vue را به ساختار موجود اضافه کنید و تنظیمات فعلی پروژه را حفظ کنید.

مرحله دوم: ساخت اولین کامپوننت Vue

پس از نصب Vue، باید یک کامپوننت بسازیم تا بتوانیم آن را در صفحه Laravel نمایش دهیم.

ابتدا پوشه زیر را ایجاد کنید:

resources/js/components

سپس فایل resources/js/components/WelcomeMessage.vue را بسازید:

<script setup>

import { ref } from 'vue';



const count = ref(0);



function increment() {

    count.value++;

}

</script>



<template>

    <div class="welcome-box">

        <h2>اولین کامپوننت Vue در Laravel</h2>



        <p>

            این کامپوننت با موفقیت اجرا شده است.

        </p>



        <p>تعداد کلیک‌ها: {{ count }}</p>



        <button type="button" @click="increment">

            افزایش شمارنده

        </button>

    </div>

</template>



<style scoped>

.welcome-box {

    padding: 20px;

    border: 1px solid #ddd;

    border-radius: 10px;

}



button {

    padding: 8px 14px;

    cursor: pointer;

}

</style>

در این کامپوننت از قابلیت‌های Vue استفاده کرده‌ایم:

• ref برای نگهداری وضعیت واکنشی شمارنده
• increment برای افزایش مقدار شمارنده
• {{ count }} برای نمایش مقدار
• @click برای اجرای متد هنگام کلیک روی دکمه
• style scoped برای محدود کردن قواعد CSS به همان کامپوننت

در Vue، برخلاف PHP، برای تغییر مقدار یک ref در بخش JavaScript از ویژگی .value استفاده می‌شود. در قالب Vue، مقدار آن به‌صورت مستقیم قابل نمایش است.

مرحله سوم: اتصال Vue به فایل JavaScript پروژه

اکنون باید کامپوننت ساخته‌شده را در نقطه ورود JavaScript پروژه ثبت کنیم.

فایل resources/js/app.js را باز کنید و محتوای موردنیاز را به شکل زیر تنظیم کنید:

import { createApp } from 'vue';

import WelcomeMessage from './components/WelcomeMessage.vue';



const app = createApp({});



app.component('welcome-message', WelcomeMessage);



app.mount('#app');

در این کد، ابتدا Vue را وارد می‌کنیم، سپس کامپوننت WelcomeMessage را ثبت می‌کنیم و در پایان، برنامه را به عنصری با شناسه app متصل می‌کنیم.

اگر فایل app.js شما از قبل شامل کدهای دیگری است، آن‌ها را حفظ کنید و فقط بخش‌های لازم را اضافه کنید. همچنین اگر برنامه Vue دیگری از قبل در همین فایل ایجاد شده، به‌جای ساخت یک نمونه اضافی، ساختار فعلی را اصلاح کنید.

مرحله چهارم: نمایش کامپوننت Vue در Blade

برای نمایش کامپوننت باید یک صفحه Blade داشته باشیم.

برای نمونه، فایل resources/views/vue-demo.blade.php را ایجاد کنید:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <title>آموزش Vue در Laravel</title>



    @vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

<body>

    <main id="app">

        <welcome-message></welcome-message>

    </main>

</body>

</html>

در این قالب دو بخش مهم وجود دارد:

• @vite فایل‌های فرانت‌اند را از طریق Vite بارگذاری می‌کند.
• id="app" مشخص می‌کند برنامه Vue روی کدام عنصر اجرا شود.

تگ <welcome-message> نیز همان کامپوننتی است که در فایل app.js ثبت کردیم.

اکنون Route مربوط به این صفحه را در routes/web.php اضافه کنید:

use Illuminate\Support\Facades\Route;



Route::view('/vue-demo', 'vue-demo');

با اجرای پروژه و مراجعه به مسیر /vue-demo باید کامپوننت Vue و شمارنده تعاملی را مشاهده کنید.

مرحله پنجم: اجرای پروژه در محیط توسعه

برای اجرای بخش فرانت‌اند در حالت توسعه، در یک ترمینال و از مسیر اصلی پروژه دستور زیر را اجرا کنید:

npm run dev

این دستور Vite را در حالت توسعه اجرا می‌کند و امکان مشاهده تغییرات فایل‌های فرانت‌اند را فراهم می‌سازد.

در صورت نیاز، در ترمینال دیگری پروژه Laravel را نیز اجرا کنید:

php artisan serve

اکنون آدرس محلی نمایش‌داده‌شده توسط Laravel را در مرورگر باز کنید و مسیر /vue-demo را به آن اضافه کنید.

برای انتشار پروژه، فایل‌های فرانت‌اند باید ساخته شوند. دستور زیر نسخه بهینه‌شده فایل‌ها را تولید می‌کند:

npm run build

در محیط تولید معمولاً فایل‌های ساخته‌شده توسط Vite ارائه می‌شوند و نیازی نیست سرور توسعه npm run dev همیشه در حال اجرا باشد.

مرحله ششم: دریافت داده از Laravel و نمایش آن در Vue

تا اینجا کامپوننتی ساختیم که اطلاعات آن داخل خود Vue قرار داشت. در پروژه واقعی معمولاً لازم است داده‌ها از پایگاه داده Laravel دریافت شوند.

برای مثال، فرض کنید یک مدل Product در پروژه دارید و می‌خواهید فهرستی از محصولات را در یک کامپوننت Vue نمایش دهید.

ابتدا یک Route برای ارائه اطلاعات محصولات ایجاد کنید:

use App\Http\Controllers\ProductController;

use Illuminate\Support\Facades\Route;



Route::get('/api/products', [ProductController::class, 'index']);

این مسیر در مثال حاضر برای توضیح ارتباط Vue و Laravel استفاده می‌شود. در پروژه واقعی، اگر اطلاعات به کاربران واردشده محدود است یا داده‌ها خصوصی هستند، باید احراز هویت و مجوز دسترسی متناسب با نیاز را نیز اضافه کنید.

سپس کنترلر محصولات را پیاده‌سازی کنید. فرض می‌کنیم مدل Product از قبل در پروژه وجود دارد:

<?php



namespace App\Http\Controllers;



use App\Models\Product;

use Illuminate\Http\JsonResponse;



class ProductController extends Controller

{

    public function index(): JsonResponse

    {

        $products = Product::query()

            ->select(['id', 'name', 'price'])

            ->latest()

            ->limit(50)

            ->get();



        return response()->json([

            'data' => $products,

        ]);

    }

}

در این مثال، کنترلر حداکثر ۵۰ محصول را دریافت می‌کند و داده‌ها را در قالب JSON برمی‌گرداند. در پروژه واقعی باید نام فیلدها و شیوه مرتب‌سازی را با ساختار مدل خود هماهنگ کنید.

اکنون یک کامپوننت جدید با نام ProductList.vue بسازید:

<script setup>

import { onMounted, ref } from 'vue';



const products = ref([]);

const loading = ref(false);

const error = ref('');



async function loadProducts() {

    loading.value = true;

    error.value = '';



    try {

        const response = await fetch('/api/products');



        if (!response.ok) {

            throw new Error('دریافت اطلاعات محصولات ناموفق بود.');

        }



        const result = await response.json();



        products.value = result.data;

    } catch (exception) {

        error.value = exception.message;

    } finally {

        loading.value = false;

    }

}



onMounted(loadProducts);

</script>



<template>

    <section>

        <h2>فهرست محصولات</h2>



        <p v-if="loading">

            در حال دریافت اطلاعات...

        </p>



        <p v-else-if="error">

            {{ error }}

        </p>



        <ul v-else>

            <li

                v-for="product in products"

                :key="product.id"

            >

                {{ product.name }} -

                {{ product.price }}

            </li>

        </ul>

    </section>

</template>

در این کامپوننت، fetch به مسیر Laravel درخواست می‌فرستد. پس از دریافت پاسخ، داده‌ها در ویژگی واکنشی products قرار می‌گیرند و Vue فهرست را نمایش می‌دهد.

برای نمایش این کامپوننت، آن را در فایل app.js وارد و ثبت کنید:

import { createApp } from 'vue';

import ProductList from './components/ProductList.vue';



const app = createApp({});



app.component('product-list', ProductList);



app.mount('#app');

سپس در قالب Blade از آن استفاده کنید:

<div id="app">

    <product-list></product-list>

</div>

این نمونه نشان می‌دهد چگونه می‌توان مسئولیت‌ها را تقسیم کرد: Laravel اطلاعات را از پایگاه داده می‌خواند و Vue آن‌ها را در رابط کاربری نمایش می‌دهد.

نکته: این مسیر در مثال بالا داخل routes/web.php تعریف شده است و از همان تنظیمات Middleware آن فایل استفاده می‌کند. اگر پروژه شما از routes/api.php استفاده می‌کند، مسیر را متناسب با تنظیمات API پروژه تعریف کنید. همچنین برای درخواست‌های تغییردهنده اطلاعات، باید حفاظت CSRF یا سازوکار احراز هویت API متناسب با معماری برنامه به‌درستی تنظیم شود.

مرحله هفتم: مدیریت فرم‌ها با Vue و Laravel

یکی دیگر از کاربردهای مهم این ترکیب، ساخت فرم‌های تعاملی است. می‌توانید وضعیت فرم را در Vue مدیریت کنید و اعتبارسنجی نهایی را در Laravel انجام دهید.

برای مثال، فرم ثبت محصول ممکن است شامل نام، قیمت و توضیحات باشد. در این معماری:

۱. Vue مقادیر واردشده را مدیریت می‌کند.

۲. هنگام ارسال فرم، داده‌ها به Laravel فرستاده می‌شوند.

۳. Laravel اطلاعات را اعتبارسنجی می‌کند.

۴. در صورت معتبر بودن، اطلاعات ذخیره می‌شوند.

۵. نتیجه عملیات به Vue برمی‌گردد و رابط کاربری به‌روزرسانی می‌شود.

باید توجه داشته باشید که اعتبارسنجی در Vue بیشتر برای بهبود تجربه کاربری است. اعتبارسنجی اصلی و کنترل مجوزها باید در سمت Laravel انجام شود؛ زیرا کاربران می‌توانند درخواست HTTP را خارج از رابط کاربری نیز ارسال کنند.

برای آشنایی با اعتبارسنجی سمت سرور، مقاله آموزش Validation در Laravel را مطالعه کنید.

مرحله هشتم: نکات مهم امنیتی

هنگام استفاده از Laravel و Vue، باید امنیت هر دو بخش را در نظر بگیرید.

اعتبارسنجی اطلاعات در Laravel

تمام داده‌های ورودی باید در سمت سرور بررسی شوند. نباید فقط به اعتبارسنجی فرم در Vue اکتفا کنید.

کنترل مجوز دسترسی

اگر کاربر فقط اجازه مشاهده محصولات خاصی را دارد، Laravel باید این محدودیت را در زمان پردازش درخواست بررسی کند. مخفی کردن دکمه‌ها در Vue کافی نیست.

حفاظت از اطلاعات حساس

کلیدهای خصوصی، رمزهای عبور، توکن‌های حساس و اطلاعات اتصال پایگاه داده نباید در فایل‌های JavaScript سمت کاربر قرار بگیرند.

مدیریت احراز هویت

روش احراز هویت به معماری پروژه بستگی دارد. در برنامه‌ای که Vue در همان مبدأ با Laravel اجرا می‌شود، می‌توان از سازوکارهای احراز هویت مبتنی بر Session و CSRF متناسب با پیکربندی Laravel استفاده کرد. در معماری API یا فرانت‌اند مستقل، باید روش احراز هویت مناسب آن معماری انتخاب شود.

جلوگیری از نمایش داده‌های غیرمجاز

حتی اگر Vue فقط چند فیلد را نمایش دهد، بهتر است Laravel نیز فقط فیلدهای لازم را در پاسخ API برگرداند. این کار احتمال افشای ناخواسته اطلاعات را کاهش می‌دهد.

مرحله نهم: بهینه‌سازی عملکرد

ترکیب Laravel و Vue می‌تواند رابط کاربری قدرتمندی ایجاد کند، اما عملکرد نهایی به نحوه پیاده‌سازی بستگی دارد.

برای بهینه‌سازی بهتر است به نکات زیر توجه کنید:

• از دریافت حجم زیادی از داده‌ها در یک درخواست خودداری کنید.
• برای فهرست‌های بزرگ از صفحه‌بندی استفاده کنید.
• Queryهای پایگاه داده را بهینه کنید.
• فقط فیلدهای موردنیاز را از پایگاه داده دریافت کنید.
• فایل‌های فرانت‌اند را برای انتشار با Vite بسازید.
• از بارگذاری غیرضروری کامپوننت‌ها و وابستگی‌ها جلوگیری کنید.
• درخواست‌های تکراری را کاهش دهید و در صورت نیاز از کش مناسب استفاده کنید.

اگر پروژه شما شامل جدول‌های بزرگ، گزارش‌های متعدد یا عملیات پرتکرار است، بهتر است عملکرد بخش Laravel و رابط Vue را جداگانه بررسی کنید.

Laravel و Vue بهتر است یا Laravel و Livewire؟

هر دو گزینه می‌توانند برای ساخت رابط‌های تعاملی استفاده شوند، اما تفاوت‌هایی دارند.

اگر با JavaScript آشنایی دارید و به کنترل بیشتر روی رفتار سمت مرورگر نیاز دارید، Vue گزینه مناسبی است. اگر ترجیح می‌دهید بیشتر منطق رابط را با PHP و Blade بنویسید، Livewire می‌تواند توسعه را ساده‌تر کند.

برای مطالعه بیشتر، مقاله آموزش Laravel و Livewire را نیز ببینید.

جمع‌بندی

ترکیب Laravel و Vue.js راهکاری مناسب برای ساخت برنامه‌های تحت وب با بک‌اند قدرتمند و رابط کاربری تعاملی است.

در این آموزش یاد گرفتیم Vue را در پروژه Laravel نصب کنیم، یک کامپوننت بسازیم، آن را در Blade نمایش دهیم و اطلاعات محصولات را از Laravel دریافت کنیم.

برای انتخاب معماری مناسب، باید نیازهای پروژه را بررسی کنید. استفاده از Vue در کنار Blade برای افزودن تعامل به بخش‌های خاص صفحه مناسب است؛ درحالی‌که معماری مبتنی بر API یا Inertia.js می‌تواند برای برنامه‌های پیچیده‌تر انتخاب مناسبی باشد.

در نهایت، فراموش نکنید که امنیت، اعتبارسنجی سمت سرور، کنترل دسترسی و بهینه‌سازی درخواست‌ها همچنان بر عهده بک‌اند Laravel هستند.

اگر می‌خواهید مسیر یادگیری خود را ادامه دهید، مقاله بعدی این مجموعه به اتصال Laravel به React می‌پردازد.

سوالات متداول

آیا می‌توان Vue.js را در پروژه Laravel نصب کرد؟

بله. در پروژه‌های جدید Laravel معمولاً می‌توانید Vue را همراه با Vite نصب و پیکربندی کنید. برای پردازش فایل‌های .vue نیز باید پلاگین Vue برای Vite را اضافه کنید.

آیا برای استفاده از Vue در Laravel باید API بسازیم؟

خیر. اگر Vue فقط در بخش‌هایی از صفحات Blade استفاده می‌شود، لزوماً به API مستقل نیاز ندارید. اما اگر Vue قرار است داده‌ها را جداگانه دریافت کند یا فرانت‌اند مستقلی داشته باشید، API می‌تواند انتخاب مناسبی باشد.

آیا Laravel و Vue می‌توانند در دو سرور جداگانه اجرا شوند؟

بله. در این حالت باید تنظیمات ارتباط شبکه، CORS، احراز هویت و نحوه ارسال درخواست‌ها را متناسب با معماری برنامه پیکربندی کنید.

آیا Vue جایگزین Blade می‌شود؟

خیر. می‌توانید از Blade برای تولید صفحات سمت سرور و از Vue برای بخش‌های تعاملی همان صفحات استفاده کنید. انتخاب میان این روش‌ها به نیاز پروژه بستگی دارد.

آیا برای استفاده از Vue در Laravel به Vite نیاز داریم؟

در پروژه‌های جدید Laravel، Vite ابزار پیش‌فرض متداول برای مدیریت فایل‌های فرانت‌اند است. بااین‌حال، معماری پروژه و ابزارهای ساخت موجود ممکن است متفاوت باشند و باید تنظیمات فعلی بررسی شوند.