ፅሁፎች

Vue እና Laravel: ነጠላ ገጽ መተግበሪያ ይፍጠሩ

ላራቬል በገንቢዎች ከሚጠቀሙት በጣም ታዋቂ የPHP ማዕቀፎች አንዱ ነው፣ እስቲ ዛሬ አንድ ነጠላ ገፅ መተግበሪያን በVueJs እንዴት እንደሚሰራ እንይ።

Laravel UI ከመጀመሩ በፊት ከዋና ባህሪያቱ አንዱ የቅድመ ድጋፍ ነበር።definite ለ Vue.js ከላራቬል v5.3 እስከ v6. Vue የተጠቃሚ በይነገጾችን ለመገንባት የሚያገለግል ዘመናዊ የጃቫ ስክሪፕት የፊት ማቀፊያ ነው።

ለምን ላራቬልና Vue አንድ ላይ ጫኑ?

ለፕሮጀክቶችዎ የተሟላ የስራ ፍሰት ለመፍጠር Laravel with Vue የመጠቀም አንዳንድ ዋና ጥቅሞች እዚህ አሉ።

ለጀርባ እና ለግንባር የተለዩ ፕሮጀክቶች ከመያዝ ይልቅ የምንጭ ኮድ ወደ አንድ ፕሮጀክት ተጣምሯል።
መጫን እና ማዋቀር ቀላል ናቸው
ነጠላ ስርጭት ሁለቱንም ማዕቀፎች አንድ ላይ ማስተዳደር ይችላል።

SPA ምንድን ነው? (አንድ-ገጽ መተግበሪያ)

ዩነ ነጠላ-ገጽ መተግበሪያ (SPA በአጭሩ) ሙሉውን ገጽ ማደስ ሳያስፈልገው ከድር አገልጋይ ወደ ድረ-ገጽ በተለዋዋጭ አዲስ ውሂብ ይጭናል።

SPAs የሚጠቀሙ ታዋቂ ድረ-ገጾች ምሳሌዎች gmail.com እና youtube.com ያካትታሉ - በሌላ አነጋገር SPAs በአብዛኛው በሁሉም ቦታ ይገኛሉ። በየቀኑ አብረው ሊሰሩባቸው የሚችሏቸው አብዛኛዎቹ የአስተዳዳሪ ዳሽቦርዶች SPAን በመጠቀም የተገነቡ ናቸው።

የ SPA ጥቅሞች:

የተጠቃሚው ተሞክሮ የበለጠ ተለዋዋጭ ነው።
በአሳሹ ውስጥ መሸጎጫ ውሂብ
ፈጣን የመጫኛ ጊዜ

የ SPA ጉዳቶች፡-

SEO (የፍለጋ ሞተር ማሻሻያ)ን ሊጎዳ ይችላል
ሊሆኑ የሚችሉ የደህንነት ጉዳዮች
ብዙ የአሳሽ ሀብቶችን ያጠፋል

በላራቬል ውስጥ የፕሮጀክት ውቅር

ይህ ልጥፍ ተጠቃሚዎች ወደ መለያ እንዲመዘገቡ እና ተግባሮችን እንዲያክሉ የሚያስችለውን የሚሰራ መተግበሪያን እንዴት ማዳበር እንደሚቻል ያሳያል።

ለዚህ አጋዥ ስልጠና ላራቬል 9 ጥቅም ላይ ይውላል፣ ይህም PHP 8.1 እና Vue 3; እንዲሁም PHP እና NGINX መጫን አለብን።

በሚከተለው ትዕዛዝ እንጀምራለን.

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

በመቀጠል የጃቫስክሪፕት ጥገኞችን እንጭነዋለን።

npm install

Vue ወደ ፕሮጀክታችን ከመጨመራችን በፊት አንዳንድ ፓኬጆችን መጫን አለብን።

እንዲሁም፣ Laravel 9 የጃቫ ስክሪፕት የቀድሞ የላራቬል ቅርቅብ ከነበረው ከዌብፓክ-ድብልቅ ይልቅ ከ Vite ጋር ስለሚሄድ ፕለጊን-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 መተግበሪያ የመተግበሪያ.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 መተግበሪያችንን እና የላራቭል ሰርቨርን በሁለት የተለያዩ ተርሚናሎች/የትእዛዝ መስመሮች መጀመር አለብን።

npm run dev


php artisan serve

የእኛን የሚሰራ መተግበሪያ ለመፍጠር፣ ሌሎች ፋይሎችን መፍጠር አለብን። Vue ብዙ ገጾችን ይፈጥራል፣ በዋናነት፡-

የመዳረሻ
ለምዝገባ
መነሻ ገጽ

ከላራቬል የመጨረሻ ነጥቦች ጋር ለመገናኘት አክሲዮስን መጫን አለብን፡-

npm install axios

vue ራውቲንግ

ጥቅሉን በመጠቀም vue-routerበ Vue ውስጥ ጥቅም ላይ ሊውሉ የሚችሉ የተለያዩ የማዞሪያ ስልቶች አሉ; እነዚህ ስልቶች በመባልም ይታወቃሉ history models.

ተጠቃሚ ሲጠይቅ route ልክ እንደ http://localhost:8000/home፣ ገጹ ሲታደስ 404 ስህተትን የሚመልስ፣ ማንኛቸውም የመመለሻ መንገዶችን ለማግኘት በላራቬል ልንተማመን እና መተግበሪያችንን የያዘውን የ 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')
        }
    ],
})

በዚህ ምሳሌ ውስጥ ማረጋገጫን በመጠቀም እንይዛለን ላራቬል ሳንክተም, ከዚያ ማስመሰያው በአካባቢው ማከማቻ ውስጥ ይቀመጣል.

ሌሎች ጥያቄዎች እንዲሳካላቸው ማስመሰያው ወደ ራስጌው ይዋሃዳል፣ ይህም ጥያቄውን የሚያቀርበው ተጠቃሚ በላራቬል እንዲታወቅ ያስችለዋል።

ለሁለቱም የተቆራኙ የኮድ እገዳዎች እነኚሁና፡

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

እንዲሁም ፍላጎት ሊኖርዎት ይችላል ...