വ്യൂ, ലാറവെൽ: ഒരു സിംഗിൾ പേജ് ആപ്ലിക്കേഷൻ സൃഷ്ടിക്കുക

ഡെവലപ്പർമാർ ഉപയോഗിക്കുന്ന ഏറ്റവും പ്രചാരമുള്ള PHP ചട്ടക്കൂടുകളിലൊന്നാണ് Laravel, VueJ-കൾ ഉപയോഗിച്ച് ഒരു സിംഗിൾ പേജ് ആപ്ലിക്കേഷൻ എങ്ങനെ നിർമ്മിക്കാമെന്ന് ഇന്ന് നോക്കാം.

Laravel UI സമാരംഭിക്കുന്നതിന് മുമ്പ്, അതിന്റെ പ്രധാന സവിശേഷതകളിൽ ഒന്ന് പ്രീ സപ്പോർട്ട് ആയിരുന്നുdefiവേണ്ടി രാത്രി Vue.js Laravel v5.3 മുതൽ v6 വരെ. ഉപയോക്തൃ ഇന്റർഫേസുകൾ നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു ആധുനിക JavaScript ഫ്രണ്ട്‌എൻഡ് ചട്ടക്കൂടാണ് Vue.

Laravel ഉം Vue ഉം ഒരുമിച്ച് ഇൻസ്റ്റാൾ ചെയ്യുന്നത് എന്തുകൊണ്ട്?

നിങ്ങളുടെ പ്രോജക്റ്റുകൾക്കായി ഒരു പൂർണ്ണമായ വർക്ക്ഫ്ലോ സൃഷ്ടിക്കാൻ Vue-നൊപ്പം Laravel ഉപയോഗിക്കുന്നതിന്റെ ചില പ്രധാന നേട്ടങ്ങൾ ഇതാ:

ബാക്കെൻഡിനും ഫ്രണ്ട്‌എൻഡിനും വെവ്വേറെ പ്രോജക്ടുകൾ ഉണ്ടാകുന്നതിനുപകരം സോഴ്‌സ് കോഡ് ഒരു പ്രോജക്റ്റിലേക്ക് സംയോജിപ്പിച്ചിരിക്കുന്നു
ഇൻസ്റ്റാളേഷനും കോൺഫിഗറേഷനും ലളിതമാണ്
ഒരൊറ്റ വിതരണത്തിന് രണ്ട് ചട്ടക്കൂടുകളും ഒരുമിച്ച് കൈകാര്യം ചെയ്യാൻ കഴിയും

എന്താണ് ഒരു SPA? (ഒറ്റ പേജ് അപേക്ഷ)

ഉന ഒറ്റ പേജ് അപേക്ഷ (ചുരുക്കത്തിൽ 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-നൊപ്പം, വെബ്‌പാക്ക്-മിക്‌സിനേക്കാൾ, ഇത് ജാവാസ്‌ക്രിപ്റ്റിനായി മുമ്പത്തെ 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 endpoints-മായി ആശയവിനിമയം നടത്താൻ, Axios ഇൻസ്റ്റാൾ ചെയ്യേണ്ടതുണ്ട്:

npm install axios

വ്യൂ റൂട്ടിംഗ്

പാക്കേജ് ഉപയോഗിച്ച് 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

നിങ്ങൾ‌ക്കും താൽ‌പ്പര്യമുണ്ടാകാം ...