ලිපි

Vue සහ Laravel: තනි පිටු යෙදුමක් සාදන්න

Laravel යනු සංවර්ධකයින් විසින් භාවිතා කරන වඩාත් ජනප්‍රිය PHP රාමු වලින් එකකි, අපි අද බලමු VueJs සමඟ Single Page Application එකක් සාදා ගන්නේ කෙසේද කියා.

Laravel UI දියත් කිරීමට පෙර, එහි ප්‍රධාන අංගයක් වූයේ පූර්ව සහායයිdefiසඳහා රාත්රී Vue.js Laravel v5.3 සිට v6 දක්වා. Vue යනු පරිශීලක අතුරුමුහුණත් තැනීමට භාවිතා කරන නවීන JavaScript ඉදිරිපස රාමුවකි.

Laravel සහ Vue එකට ස්ථාපනය කරන්නේ ඇයි?

ඔබේ ව්‍යාපෘති සඳහා සම්පූර්ණ කාර්ය ප්‍රවාහයක් නිර්මාණය කිරීම සඳහා Laravel සමඟ Vue භාවිතා කිරීමේ ප්‍රධාන ප්‍රතිලාභ කිහිපයක් මෙන්න:

පසුබිම සහ ඉදිරිපස සඳහා වෙනම ව්‍යාපෘති තිබීම වෙනුවට ප්‍රභව කේතය එක් ව්‍යාපෘතියකට ඒකාබද්ධ කර ඇත
ස්ථාපනය සහ සැකසුම සරලයි
තනි බෙදාහැරීමකට රාමු දෙකම එකට කළමනාකරණය කළ හැක

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 බණ්ඩලරය වූ webpack-mix වෙනුවට Laravel 9 Vite සමඟින් නැව්ගත කරන බැවින්, plugin-vue ස්ථාපනය කළ යුතුය. අපි දැන් එය කරමු:

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 මාර්ගගත කිරීම

පැකේජය භාවිතා කිරීම 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 ශුද්ධස්ථානය, එවිට ටෝකනය දේශීය ගබඩාවේ සුරකිනු ලැබේ.

වෙනත් ඉල්ලීම් සාර්ථක වීමට, ටෝකනය ශීර්ෂයට ඒකාබද්ධ කර ඇත, එමඟින් ඉල්ලීම කරන පරිශීලකයා 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

ඔබත් උනන්දු විය හැකිය ...