بضائع

Vue و Laravel: أنشئ تطبيق صفحة واحدة

Laravel هو أحد أكثر أطر PHP شيوعًا التي يستخدمها المطورون ، دعنا نرى اليوم كيفية إنشاء تطبيق صفحة واحدة باستخدام VueJs.

قبل إطلاق Laravel UI ، كانت إحدى ميزاته الرئيسية هي الدعم المسبقdefiنيت ل Vue.js من Laravel v5.3 إلى v6. Vue هو إطار عمل جديد للواجهة الأمامية لجافا سكريبت يستخدم لبناء واجهات المستخدم.

لماذا نقوم بتثبيت Laravel و Vue معًا؟

فيما يلي بعض الفوائد الرئيسية لاستخدام Laravel مع Vue لإنشاء سير عمل كامل لمشاريعك:

يتم دمج الكود المصدري في مشروع واحد ، بدلاً من وجود مشاريع منفصلة للواجهة الخلفية والواجهة الأمامية
التثبيت والتكوين بسيط
يمكن لتوزيع واحد إدارة كلا الإطارين معًا

ما هو SPA؟ (تطبيق صفحة واحدة)

ل تطبيق من صفحة واحدة (اختصارًا SPA) يقوم بتحميل البيانات الجديدة ديناميكيًا من خادم الويب إلى صفحة الويب دون الحاجة إلى تحديث الصفحة بأكملها.

تشمل الأمثلة على مواقع الويب الشهيرة التي تستخدم SPAs gmail.com و youtube.com - وبعبارة أخرى ، فإن SPA منتشرة في كل مكان إلى حد كبير. يتم إنشاء معظم لوحات معلومات المسؤول التي قد تعمل معها يوميًا باستخدام SPA.

مزايا واس:

تجربة المستخدم أكثر مرونة
بيانات التخزين المؤقت في المتصفح
وقت التحميل السريع

مساوئ الـ واس:

قد يعرض للخطر SEO (تحسين محرك البحث)
قضايا أمنية محتملة
يستهلك الكثير من موارد المتصفح

تكوين المشروع في Laravel

سيوضح هذا المنشور كيفية تطوير تطبيق مهام يسمح للمستخدمين بالتسجيل للحصول على حساب وإضافة المهام.

في هذا البرنامج التعليمي ، يتم استخدام Laravel 9 ، والذي يتطلب PHP 8.1 و Vue 3 ؛ نحتاج أيضًا إلى تثبيت PHP و NGINX.

نبدأ بالأمر التالي:

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

بعد ذلك ، سنقوم بتثبيت تبعيات JavaScript.

npm install

نحتاج إلى تثبيت بعض الحزم قبل أن نتمكن من إضافة Vue إلى مشروعنا.

أيضًا ، يجب تثبيت plugin-vue ، نظرًا لأن Laravel 9 يأتي مع Vite ، بدلاً من webpack-mix ، الذي كان مجمع Laravel السابق لجافا سكريبت. لنفعل ذلك الآن:

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 بإنشاء صفحات متعددة ، بشكل أساسي:

من الوصول
للتسجيل
صفحة رئيسية

للتواصل مع نقاط نهاية Laravel ، نحتاج إلى تثبيت Axios:

npm install axios

توجيه vue

استخدام العبوة vue-router، هناك العديد من استراتيجيات التوجيه التي يمكن استخدامها في Vue ؛ تُعرف هذه الاستراتيجيات أيضًا باسم history models.

عندما يطلب المستخدم route مثل http: // localhost: 8000 / home ، والذي سيعيد الخطأ 404 عند تحديث الصفحة ، يمكننا الاعتماد على Laravel لاكتشاف أي مسارات احتياطية ثم تقديم ملف 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')
        }
    ],
})

في هذا المثال نتعامل مع المصادقة باستخدام حرم لارافيل، ثم يتم حفظ الرمز المميز في التخزين المحلي.

لكي تنجح الطلبات الأخرى ، يتم دمج الرمز المميز في الرأس ، مما سيسمح للمستخدم الذي يقدم الطلب بالتعرف عليه بواسطة Laravel.

فيما يلي كتل التعليمات البرمجية المرتبطة لكليهما:

<!--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

قد تكون مهتم ايضا ب ...