بیشتر

Vue او Laravel: د واحد پاڼې غوښتنلیک جوړ کړئ

Laravel یو له خورا مشهور PHP چوکاټونو څخه دی چې د پراختیا کونکو لخوا کارول کیږي ، راځئ نن وګورو چې څنګه د VueJs سره د واحد پا pageې غوښتنلیک رامینځته کړو.

د Laravel UI د پیل کولو دمخه، د هغې یو له مهمو ځانګړتیاوو څخه مخکې ملاتړ وdefiلپاره شپه Vue.js له Laravel v5.3 څخه تر v6 پورې. Vue یو عصري جاواسکریپټ فرنټ اینډ چوکاټ دی چې د کاروونکي انٹرفیس جوړولو لپاره کارول کیږي.

ولې Laravel او Vue یوځای نصب کړئ؟

دلته ستاسو د پروژو لپاره د بشپړ کاري فلو رامینځته کولو لپاره د Vue سره Laravel کارولو ځینې اصلي ګټې دي:

د سرچینې کوډ په یوه پروژه کې یوځای شوی، د دې پر ځای چې د شالید او مخکینۍ برخې لپاره جلا پروژې ولري
نصب او تنظیم کول ساده دي
یو واحد ویش کولی شي دواړه چوکاټونه په ګډه اداره کړي

SPA څه شی دی؟ (د یوې پاڼې غوښتنلیک)

una د واحد پاڼې غوښتنلیک (د لنډ لپاره SPA) په متحرک ډول د ویب سرور څخه نوي ډیټا په ویب پا pageه کې بار کوي پرته لدې چې ټوله پاڼه تازه کړي.

د مشهورو ویب پاڼو مثالونه چې SPAs کاروي عبارت دي له gmail.com او youtube.com - په بل عبارت، SPAs په پراخه کچه هر اړخیز دي. ډیری اداري ډشبورډونه چې تاسو یې هره ورځ کار کوئ د SPA په کارولو سره جوړ شوي.

د SPAs ګټې:

د کاروونکي تجربه خورا انعطاف وړ ده
په براوزر کې د کیش ډاټا
د چټک بارولو وخت

د SPAs زیانونه:

کیدای شي 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 د ویبپیک مکس پرځای د ویټ سره کښته کوي ، کوم چې د جاواسکریپټ لپاره پخوانی لارویل بنډلر و. اوس یې کوو:

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 ایپ او لاریول سرور په دوه مختلف ټرمینلونو / کمانډ لاینونو کې پیل کړو:

npm run dev


php artisan serve

زموږ د ترسره کولو ایپ رامینځته کولو لپاره ، موږ اړتیا لرو نورې فایلونه جوړ کړو. Vue به ډیری پاڼې رامینځته کړي، په عمده توګه:

د لاسرسي
د نوم لیکنې لپاره
یو کور پاڼه

د Laravel پای نقطو سره د خبرو اترو لپاره، موږ اړتیا لرو Axios نصب کړو:

npm install axios

vue روټینګ

د کڅوړې کارول 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 Sanctum، بیا نښه په محلي ذخیره کې خوندي کیږي.

د نورو غوښتنو د بریالي کیدو لپاره ، نښه په سر کې ضمیمه شوې ، کوم چې به هغه کارونکي ته اجازه ورکړي چې غوښتنه یې د لارویل لخوا وپیژندل شي.

دلته د دواړو لپاره اړوند کوډ بلاکونه دي:

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

تاسو شاید علاقه هم ولرئ ...