Vue మరియు Laravel: ఒకే పేజీ అప్లికేషన్‌ను సృష్టించండి

డెవలపర్‌లు ఉపయోగించే అత్యంత ప్రజాదరణ పొందిన PHP ఫ్రేమ్‌వర్క్‌లలో Laravel ఒకటి, VueJలతో ఒకే పేజీ అప్లికేషన్‌ను ఎలా తయారు చేయాలో ఈరోజు చూద్దాం.

లారావెల్ UI ప్రారంభానికి ముందు, దాని ప్రధాన ఫీచర్లలో ఒకటి ప్రీ సపోర్ట్defiకోసం రాత్రి vue.js లారావెల్ v5.3 నుండి v6 వరకు. Vue అనేది వినియోగదారు ఇంటర్‌ఫేస్‌లను రూపొందించడానికి ఉపయోగించే ఆధునిక JavaScript ఫ్రంటెండ్ ఫ్రేమ్‌వర్క్.

ఎందుకు Laravel మరియు Vueని కలిపి ఇన్‌స్టాల్ చేయాలి?

మీ ప్రాజెక్ట్‌ల కోసం పూర్తి వర్క్‌ఫ్లోను సృష్టించడానికి లారావెల్‌ని Vueతో ఉపయోగించడం వల్ల ఇక్కడ కొన్ని ప్రధాన ప్రయోజనాలు ఉన్నాయి:

సోర్స్ కోడ్ బ్యాకెండ్ మరియు ఫ్రంటెండ్ కోసం ప్రత్యేక ప్రాజెక్ట్‌లను కలిగి ఉండకుండా, ఒక ప్రాజెక్ట్‌గా మిళితం చేయబడింది
ఇన్‌స్టాలేషన్ మరియు కాన్ఫిగరేషన్ సులభం
ఒకే పంపిణీ రెండు ఫ్రేమ్‌వర్క్‌లను కలిపి నిర్వహించగలదు

SPA అంటే ఏమిటి? (ఒకే పేజీ అప్లికేషన్)

ఉన ఒకే పేజీ అప్లికేషన్ (సంక్షిప్తంగా SPA) మొత్తం పేజీని రిఫ్రెష్ చేయకుండానే వెబ్ సర్వర్ నుండి వెబ్ పేజీలోకి కొత్త డేటాను డైనమిక్‌గా లోడ్ చేస్తుంది.

SPAలను ఉపయోగించే జనాదరణ పొందిన వెబ్‌సైట్‌ల ఉదాహరణలు gmail.com మరియు youtube.com - మరో మాటలో చెప్పాలంటే, SPAలు ఎక్కువగా సర్వవ్యాప్తి చెందుతాయి. మీరు రోజువారీగా పని చేసే చాలా అడ్మిన్ డాష్‌బోర్డ్‌లు SPAని ఉపయోగించి నిర్మించబడ్డాయి.

SPAల ప్రయోజనాలు:

వినియోగదారు అనుభవం మరింత అనువైనది
బ్రౌజర్‌లో కాష్ డేటా
వేగవంతమైన లోడ్ సమయం

SPAల యొక్క ప్రతికూలతలు:

SEO (సెర్చ్ ఇంజన్ ఆప్టిమైజేషన్) రాజీ పడవచ్చు
సంభావ్య భద్రతా సమస్యలు
ఇది చాలా బ్రౌజర్ వనరులను వినియోగిస్తుంది

లారావెల్‌లో ప్రాజెక్ట్ కాన్ఫిగరేషన్

ఖాతా కోసం సైన్ అప్ చేయడానికి మరియు టాస్క్‌లను జోడించడానికి వినియోగదారులను అనుమతించే చేయవలసిన అనువర్తనాన్ని ఎలా అభివృద్ధి చేయాలో ఈ పోస్ట్ ప్రదర్శిస్తుంది.

ఈ ట్యుటోరియల్ కోసం, 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తో రవాణా చేయబడుతుంది, ఇది జావాస్క్రిప్ట్ కోసం మునుపటి 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-router, Vueలో ఉపయోగించగల వివిధ రౌటింగ్ వ్యూహాలు ఉన్నాయి; ఈ వ్యూహాలను కూడా అంటారు history models.

వినియోగదారు అభ్యర్థించినప్పుడు route http://localhost:8000/home వంటిది, ఇది పేజీని రిఫ్రెష్ చేసినప్పుడు 404 ఎర్రర్‌ను అందిస్తుంది, ఏదైనా ఫాల్‌బ్యాక్ మార్గాలను గుర్తించడానికి మేము లారావెల్‌పై ఆధారపడవచ్చు మరియు మా యాప్‌ను కలిగి ఉన్న బ్లేడ్ ఫైల్‌ను అందించవచ్చు.

ఈ కారణంగా, మేము 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

మీకు కూడా ఆసక్తి ఉండవచ్చు ...