लेख

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

पुढे, आम्ही JavaScript अवलंबित्व स्थापित करू.

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 द्वारे ओळखता येईल.

येथे दोन्हीसाठी संबंधित कोड ब्लॉक्स आहेत:

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

आपल्याला कदाचित यात रस असेल ...