लेख

Vue र Laravel: एकल पृष्ठ अनुप्रयोग सिर्जना गर्नुहोस्

Laravel विकासकर्ताहरू द्वारा प्रयोग गरिएको सबैभन्दा लोकप्रिय PHP फ्रेमवर्कहरू मध्ये एक हो, आज VueJs सँग एकल पृष्ठ अनुप्रयोग कसरी बनाउने भनेर हेरौं।

Laravel UI को प्रक्षेपण हुनु अघि, यसको मुख्य सुविधाहरू मध्ये एक पूर्व समर्थन थियोdefiको लागि रात Vue.js Laravel v5.3 देखि v6 सम्म। Vue प्रयोगकर्ता इन्टरफेसहरू निर्माण गर्न प्रयोग गरिने आधुनिक JavaScript फ्रन्टएन्ड फ्रेमवर्क हो।

किन Laravel र Vue सँगसँगै स्थापना गर्ने?

यहाँ Vue सँग Laravel प्रयोग गर्ने केही मुख्य फाइदाहरू छन् तपाईंको परियोजनाहरूको लागि पूर्ण कार्यप्रवाह सिर्जना गर्न:

ब्याकएन्ड र फ्रन्टएन्डका लागि छुट्टाछुट्टै परियोजनाहरू हुनुको सट्टा स्रोत कोडलाई एउटा परियोजनामा जोडिएको छ
स्थापना र कन्फिगरेसन सरल छन्
एउटै वितरणले दुवै फ्रेमवर्कलाई सँगै व्यवस्थापन गर्न सक्छ

SPA भनेको के हो? (एकल पृष्ठ आवेदन)

una एकल-पृष्ठ आवेदन (छोटोको लागि SPA) सम्पूर्ण पृष्ठ रिफ्रेस नगरीकन वेब सर्भरबाट वेब पृष्ठमा गतिशील रूपमा नयाँ डाटा लोड गर्दछ।

SPA हरू प्रयोग गर्ने लोकप्रिय वेबसाइटहरूको उदाहरणहरूमा gmail.com र youtube.com समावेश छन् - अर्को शब्दमा, SPA हरू धेरै हदसम्म सर्वव्यापी छन्। तपाईले दैनिक आधारमा काम गर्न सक्ने अधिकांश प्रशासक ड्यासबोर्डहरू SPA प्रयोग गरेर बनाइएका छन्।

SPA को फाइदाहरू:

प्रयोगकर्ता अनुभव अधिक लचिलो छ
ब्राउजरमा क्यास डाटा
द्रुत लोडिङ समय

SPA को बेफाइदाहरू:

SEO (खोज इन्जिन अप्टिमाइजेसन) मा सम्झौता हुन सक्छ
सम्भावित सुरक्षा समस्याहरू
यसले धेरै ब्राउजर स्रोतहरू खपत गर्दछ

Laravel मा परियोजना कन्फिगरेसन

यो पोष्टले प्रयोगकर्ताहरूलाई खातामा साइन अप गर्न र कार्यहरू थप्न अनुमति दिने एउटा टु-डु एप कसरी विकास गर्ने भनेर देखाउनेछ।

यस ट्यूटोरियलको लागि, Laravel 9 प्रयोग गरिन्छ, जसलाई PHP 8.1 र Vue 3 आवश्यक छ; हामीले पनि PHP र NGINX स्थापना गरेको हुनुपर्छ।

हामी निम्न आदेश संग सुरु:

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

अर्को, हामी जाभास्क्रिप्ट निर्भरताहरू स्थापना गर्नेछौं।

npm install

हामीले हाम्रो परियोजनामा Vue थप्न सक्नु अघि हामीले केही प्याकेजहरू स्थापना गर्न आवश्यक छ।

साथै, प्लगइन-भ्यु स्थापना गरिनु पर्छ, किनकि Laravel 9 ले वेबप्याक-मिक्सको सट्टा Vite सँग पठाउँछ, जुन JavaScript को लागि अघिल्लो 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',
        ]),
    ],
});

Vue 3 एपको लागि app.js फाइल र बुटस्ट्र्याप स्निपेट सम्पादन गर्नुहोस्:

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 मा भर पर्न सक्छौं र त्यसपछि हाम्रो एप समावेश भएको ब्लेड फाइललाई सेवा दिन सक्छौं।

यस कारणको लागि, हामी 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 पवित्रस्थान, त्यसपछि टोकन स्थानीय भण्डारणमा बचत हुन्छ।

अन्य अनुरोधहरू सफल हुनको लागि, टोकन हेडरमा मर्ज गरिएको छ, जसले प्रयोगकर्तालाई अनुरोध गर्नेलाई 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

तपाइँ पनि रुचि हुन सक्छ ...