مقالات

Vue و Laravel: ایجاد یک اپلیکیشن تک صفحه ای

لاراول یکی از محبوب ترین فریم ورک های پی اچ پی است که توسط توسعه دهندگان استفاده می شود، بیایید امروز ببینیم که چگونه یک برنامه تک صفحه ای با VueJ بسازیم.

قبل از راه اندازی رابط کاربری لاراول، یکی از ویژگی های اصلی آن پشتیبانی از قبل بودdefiنیت برای Vue.js از لاراول نسخه 5.3 تا نسخه 6. Vue یک فریم ورک مدرن جاوا اسکریپت است که برای ساخت رابط های کاربری استفاده می شود.

چرا Laravel و Vue را با هم نصب کنیم؟

در اینجا برخی از مزایای اصلی استفاده از لاراول با Vue برای ایجاد یک گردش کار کامل برای پروژه های خود آورده شده است:

کد منبع به جای داشتن پروژه های جداگانه برای backend و frontend در یک پروژه ترکیب می شود
نصب و پیکربندی ساده است
یک توزیع واحد می تواند هر دو چارچوب را با هم مدیریت کند

SPA چیست؟ (برنامه تک صفحه ای)

الف برنامه تک صفحه ای (به اختصار SPA) داده های جدید را به صورت پویا از یک وب سرور در یک صفحه وب بارگذاری می کند بدون اینکه نیازی به بازخوانی کل صفحه باشد.

نمونه‌هایی از وب‌سایت‌های محبوبی که از SPA استفاده می‌کنند عبارتند از gmail.com و youtube.com – به عبارت دیگر، SPA تا حد زیادی در همه جا وجود دارد. بیشتر داشبوردهای مدیریتی که ممکن است به صورت روزانه با آنها کار کنید با استفاده از SPA ساخته شده اند.

مزایای SPA:

تجربه کاربر انعطاف پذیرتر است
داده های کش در مرورگر
زمان بارگذاری سریع

معایب SPA:

ممکن است سئو (بهینه سازی موتور جستجو) را به خطر بیندازد
مسائل امنیتی بالقوه
بسیاری از منابع مرورگر را مصرف می کند

پیکربندی پروژه در لاراول

این پست نشان می دهد که چگونه می توان یک برنامه کاری را ایجاد کرد که به کاربران امکان می دهد برای یک حساب کاربری ثبت نام کنند و وظایفی را اضافه کنند.

برای این آموزش از لاراول 9 استفاده شده است که به PHP 8.1 و Vue 3 نیاز دارد. همچنین باید PHP و NGINX را نصب کنیم.

با دستور زیر شروع می کنیم:

composer create-project --prefer-dist laravel/laravel laravel-vue-combo

در مرحله بعد، وابستگی های جاوا اسکریپت را نصب می کنیم.

npm install

قبل از اینکه بتوانیم Vue را به پروژه خود اضافه کنیم، باید چند بسته را نصب کنیم.

همچنین، پلاگین-vue باید نصب شود، زیرا لاراول 9 با Vite عرضه می شود، نه webpack-mix، که باندلر قبلی لاراول برای جاوا اسکریپت بود. بزار همین الان انجامش بدیم:

npm install vue@next vue-loader@next @vitejs/plugin-vue

فایل نامیده شده را باز کنید vite.config.js و اضافه کنید vue() به پیکربندی:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

فایل app.js و قطعه بوت استرپ را برای برنامه Vue 3 ویرایش کنید:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

یک فایل به نام ایجاد کنید App.vue و موارد زیر را اضافه کنید:

<template>
  <h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
  setup() {

   }
}
</script>

در نهایت فایل را باز کنید welcome.blade.php واقع در پوشه resources/views و موارد زیر را اضافه کنید:

<!DOCTYPE html>
<html>
<head>
 ....
        @vite('resources/css/app.css')
</head>
<body>
  <div id="app"></div>
  @vite('resources/js/app.js')
</body>
</html>

برای پیش نمایش برنامه خود، باید برنامه Vue و سرور Laravel خود را در دو پایانه/خط فرمان مختلف راه اندازی کنیم:

npm run dev


php artisan serve

برای ایجاد برنامه کاری خود، باید فایل های دیگری ایجاد کنیم. Vue چندین صفحه ایجاد می کند، به طور عمده:

از دسترسی
برای ثبت نام
یک صفحه اصلی

برای برقراری ارتباط با نقاط پایانی لاراول، باید Axios را نصب کنیم:

npm install axios

مسیریابی vue

با استفاده از بسته vue-router، استراتژی های مسیریابی مختلفی وجود دارد که می توان در Vue از آنها استفاده کرد. این استراتژی ها نیز به عنوان شناخته شده است history models.

زمانی که کاربر درخواست می کند route مانند http://localhost:8000/home، که وقتی صفحه به‌روزرسانی می‌شود، خطای 404 را برمی‌گرداند، ما می‌توانیم برای شناسایی مسیرهای بازگشتی به لاراول تکیه کنیم و سپس فایل Blade را که حاوی برنامه ما است، ارائه دهیم.

به همین دلیل از حالت HTML5 استفاده خواهیم کرد:

Route::get('/{vue_capture?}', function() {
    return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: () => import('./pages/Login.vue')
        },
        {
            path: '/register',
            component: () => import('./pages/Register.vue')
        },
        {
            path: '/home',
            component: () => import('./pages/Home.vue')
        }
    ],
})

در این مثال ما احراز هویت را با استفاده از آن مدیریت می کنیم لاراول پناهگاه، سپس توکن در حافظه محلی ذخیره می شود.

برای موفقیت سایر درخواست‌ها، توکن در هدر ادغام می‌شود که به کاربر درخواست‌کننده اجازه می‌دهد توسط لاراول شناسایی شود.

در اینجا بلوک های کد مرتبط برای هر دو آمده است:

<!--Login.vue-->
<template>
    <div class="mx-auto w-4/12 mt-10 bg-blue-200 p-4 rounded-lg">
        <div
            class="bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mb-2 flex flex-col"
        >
            <h1 class="text-gray-600 py-5 font-bold text-3xl"> Login </h1>
            <ul class="list-disc text-red-400" v-for="(value, index) in errors" :key="index" v-if="typeof errors === 'object'">
                <li>{{value[0]}}</li>
            </ul>
            <p class="list-disc text-red-400" v-if="typeof errors === 'string'">{{errors}}</p>
            <form method="post" @submit.prevent="handleLogin">
            <div class="mb-4">
                <label
                    class="block text-grey-darker text-sm font-bold mb-2"
                    for="username"
                >
                    Email Address
                </label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
                    id="username"
                    type="text"
                    v-model="form.email"
                    required
                />
            </div>
            <div class="mb-4">
                <label
                    class="block text-grey-darker text-sm font-bold mb-2"
                    for="password"
                >
                    Password
                </label>
                <input
                    class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
                    id="password"
                    type="password"
                    v-model="form.password"
                    required
                />
            </div>
            <div class="flex items-center justify-between">
                <button
                    class="bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
                    type="submit"
                >
                    Sign In
                </button>
                <router-link
                    class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
                    to="register"
                >
                    Sign Up
                </router-link>
            </div>
            </form>
        </div>
    </div>
</template>

export default {
    setup() {
        const errors = ref()
        const router = useRouter();
        const form = reactive({
            email: '',
            password: '',
        })
        const handleLogin = async () => {
            try {
                const result = await axios.post('/api/auth/login', form)
                if (result.status === 200 && result.data && result.data.token) {
                    localStorage.setItem('APP_DEMO_USER_TOKEN', result.data.token)
                    await router.push('home')
                }
            } catch (e) {
                if(e && e.response.data && e.response.data.errors) {
                    errors.value = Object.values(e.response.data.errors)
                } else {
                    errors.value = e.response.data.message || ""
                }
            }
        }

        return {
            form,
            errors,
            handleLogin,
        }
    }
}

Ercole Palmeri

همچنین ممکن است که شما علاقه مند باشید به ...