مقالات

Vue ۽ Laravel: ھڪڙي صفحي جي ايپليڪيشن ٺاھيو

Laravel هڪ تمام مشهور PHP فريم ورڪ آهي جيڪو ڊولپرز پاران استعمال ڪيو ويو آهي، اچو ته اڄ ڏسون ته ڪيئن ٺاهيو هڪ سنگل پيج ايپليڪيشن VueJs سان.

Laravel UI جي لانچ کان اڳ، ان جي مکيه خاصيتن مان هڪ اڳ سپورٽ هئيdefiرات لاء Vue.js Laravel v5.3 کان v6 تائين. Vue هڪ جديد جاوا اسڪرپٽ فريم ورڪ آهي جيڪو استعمال ڪندڙ انٽرفيس ٺاهڻ لاءِ استعمال ڪيو ويندو آهي.

ڇو Laravel ۽ Vue گڏجي گڏ ڪريو؟

هتي ڪجھ مکيه فائدا آهن Laravel استعمال ڪرڻ سان Vue سان توهان جي منصوبن لاءِ مڪمل ورڪ فلو ٺاهڻ لاءِ:

ماخذ ڪوڊ ھڪڙي منصوبي ۾ گڏ ڪيو ويو آھي، ان جي بدران پس منظر ۽ فرنٽ اينڊ لاء الڳ منصوبا
انسٽاليشن ۽ ترتيب سادو آهي
هڪ واحد تقسيم ٻنهي فريم ورڪ کي گڏ ڪري سگهي ٿو

هڪ SPA ڇا آهي؟ (هڪ صفحي جي درخواست)

Una ھڪڙي صفحي جي درخواست (مختصر لاءِ SPA) متحرڪ طور تي ويب سرور مان نئين ڊيٽا کي ويب پيج تي لوڊ ڪري ٿو بغير پوري صفحي کي ريفريش ڪرڻ جي.

مشهور ويب سائيٽن جا مثال جيڪي SPAs استعمال ڪن ٿيون انهن ۾ gmail.com ۽ youtube.com شامل آهن - ٻين لفظن ۾، SPAs وڏي پيماني تي عام آهن. اڪثر منتظم ڊيش بورڊ جيڪي توهان ڪم ڪري سگهو ٿا روزاني بنياد تي SPA استعمال ڪندي ٺهيل آهن.

SPAs جا فائدا:

استعمال ڪندڙ تجربو وڌيڪ لچڪدار آهي
برائوزر ۾ ڪيش ڊيٽا
تيز لوڊشيڊنگ وقت

SPAs جا نقصان:

ايس اي او سان سمجھوتو ڪري سگھي ٿو (سرچ انجڻ جي اصلاح)
امڪاني سيڪيورٽي مسئلا
اهو تمام گهڻو برائوزر وسيلن کي استعمال ڪري ٿو

Laravel ۾ پروجيڪٽ جي ٺاھ جوڙ

هي پوسٽ ڏيکاريندو ته ڪيئن ڊولپ ڪرڻ واري ايپ ٺاهي ٿي جيڪا صارفين کي اڪائونٽ لاءِ سائن اپ ڪرڻ ۽ ڪم شامل ڪرڻ جي اجازت ڏئي ٿي.

ھن سبق لاءِ، Laravel 9 استعمال ڪيو ويو آھي، جنھن کي PHP 8.1 ۽ Vue 3 جي ضرورت آھي. اسان کي پڻ PHP ۽ NGINX انسٽال ڪرڻ جي ضرورت آهي.

اسان هيٺ ڏنل حڪم سان شروع ڪريون ٿا:

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

اڳيون، اسان انسٽال ڪنداسين جاوا اسڪرپٽ انحصار.

npm install

اسان کي ڪجهه پيڪيجز کي انسٽال ڪرڻ جي ضرورت آهي ان کان اڳ اسان اسان جي پروجيڪٽ ۾ Vue شامل ڪري سگهون.

ان سان گڏ، پلگ ان-ويو انسٽال ٿيڻ لازمي آهي، ڇاڪاڻ ته Laravel 9 جهازن سان وائيٽ سان گڏ، بلڪه webpack-mix، جيڪو JavaScript لاءِ اڳوڻو 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 رستو

پيڪيج استعمال ڪندي vue-router, اتي مختلف روڊن حڪمت عمليون آهن جيڪي استعمال ڪري سگھجن ٿيون Vue؛ اهي حڪمت عمليون پڻ سڃاتل آهن history models.

جڏهن صارف درخواست ڪري ٿو route جهڙوڪ http://localhost:8000/home، جيڪو صفحي کي ريفريش ڪرڻ تي 404 غلطي واپس آڻيندو، اسان Laravel تي ڀروسو ڪري سگهون ٿا ته ڪنهن به فال بڪ رستن کي ڳولڻ لاءِ ۽ پوءِ بليڊ فائل جي خدمت ڪريو جنهن ۾ اسان جي ايپ شامل آهي.

انهي سبب لاء، اسان 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، پوءِ ٽوڪن مقامي اسٽوريج ۾ محفوظ ڪئي وئي آهي.

ٻين درخواستن جي ڪامياب ٿيڻ لاءِ، ٽوڪن کي هيڊر ۾ ضم ڪيو ويو آهي، جيڪو صارف کي درخواست ڏيڻ جي اجازت ڏيندو 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

توهان شايد ان ۾ به دلچسپي رکو ٿا ...