ਲੇਖ

Vue ਅਤੇ Laravel: ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ

Laravel ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ PHP ਫਰੇਮਵਰਕ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਆਓ ਅੱਜ ਵੇਖੀਏ ਕਿ VueJs ਨਾਲ ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈਏ।

Laravel UI ਦੇ ਲਾਂਚ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਸਦੀ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚੋਂ ਇੱਕ ਪ੍ਰੀ ਸਪੋਰਟ ਸੀdefiਲਈ ਰਾਤ Vue.js Laravel v5.3 ਤੋਂ v6 ਤੱਕ। Vue ਇੱਕ ਆਧੁਨਿਕ JavaScript ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕ ਹੈ ਜੋ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

Laravel ਅਤੇ Vue ਇਕੱਠੇ ਕਿਉਂ ਸਥਾਪਿਤ ਕਰੋ?

ਇੱਥੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਇੱਕ ਸੰਪੂਰਨ ਵਰਕਫਲੋ ਬਣਾਉਣ ਲਈ Vue ਨਾਲ Laravel ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਕੁਝ ਮੁੱਖ ਫਾਇਦੇ ਹਨ:

ਬੈਕਐਂਡ ਅਤੇ ਫਰੰਟਐਂਡ ਲਈ ਵੱਖਰੇ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਬਜਾਏ, ਸਰੋਤ ਕੋਡ ਨੂੰ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ
ਇੰਸਟਾਲੇਸ਼ਨ ਅਤੇ ਸੰਰਚਨਾ ਸਧਾਰਨ ਹਨ
ਇੱਕ ਸਿੰਗਲ ਡਿਸਟ੍ਰੀਬਿਊਸ਼ਨ ਦੋਵਾਂ ਫਰੇਮਵਰਕ ਨੂੰ ਇਕੱਠੇ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਦਾ ਹੈ

ਇੱਕ SPA ਕੀ ਹੈ? (ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ)

ਉਨਾ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ (ਛੋਟੇ ਲਈ SPA) ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕੀਤੇ ਬਿਨਾਂ ਇੱਕ ਵੈਬ ਸਰਵਰ ਤੋਂ ਇੱਕ ਵੈਬ ਪੇਜ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਨਵਾਂ ਡੇਟਾ ਲੋਡ ਕਰਦਾ ਹੈ।

SPAs ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੀਆਂ ਪ੍ਰਸਿੱਧ ਵੈੱਬਸਾਈਟਾਂ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਵਿੱਚ gmail.com ਅਤੇ youtube.com ਸ਼ਾਮਲ ਹਨ - ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿੱਚ, SPAs ਵੱਡੇ ਪੱਧਰ 'ਤੇ ਸਰਵ ਵਿਆਪਕ ਹਨ। ਜ਼ਿਆਦਾਤਰ ਐਡਮਿਨ ਡੈਸ਼ਬੋਰਡ ਜਿਨ੍ਹਾਂ ਨਾਲ ਤੁਸੀਂ ਰੋਜ਼ਾਨਾ ਦੇ ਆਧਾਰ 'ਤੇ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ, SPA ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਏ ਗਏ ਹਨ।

SPAs ਦੇ ਫਾਇਦੇ:

ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਵਧੇਰੇ ਲਚਕਦਾਰ ਹੈ
ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਡਾਟਾ ਕੈਸ਼ ਕਰੋ
ਤੇਜ਼ ਲੋਡਿੰਗ ਸਮਾਂ

SPA ਦੇ ਨੁਕਸਾਨ:

ਐਸਈਓ ਨਾਲ ਸਮਝੌਤਾ ਹੋ ਸਕਦਾ ਹੈ (ਖੋਜ ਇੰਜਨ ਔਪਟੀਮਾਈਜੇਸ਼ਨ)
ਸੰਭਾਵੀ ਸੁਰੱਖਿਆ ਮੁੱਦੇ
ਇਹ ਬਹੁਤ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰ ਸਰੋਤਾਂ ਦੀ ਖਪਤ ਕਰਦਾ ਹੈ

Laravel ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਸੰਰਚਨਾ

ਇਹ ਪੋਸਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ ਕਿ ਇੱਕ ਟੂ-ਡੂ ਐਪ ਨੂੰ ਕਿਵੇਂ ਵਿਕਸਤ ਕਰਨਾ ਹੈ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਖਾਤੇ ਲਈ ਸਾਈਨ ਅਪ ਕਰਨ ਅਤੇ ਕਾਰਜ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਇਸ ਟਿਊਟੋਰਿਅਲ ਲਈ, Laravel 9 ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਲਈ PHP 8.1 ਅਤੇ Vue 3 ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ; ਸਾਨੂੰ PHP ਅਤੇ NGINX ਇੰਸਟਾਲ ਕਰਨ ਦੀ ਵੀ ਲੋੜ ਹੈ।

ਅਸੀਂ ਹੇਠ ਲਿਖੀ ਕਮਾਂਡ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹਾਂ:

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

ਅੱਗੇ, ਅਸੀਂ JavaScript ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਾਂਗੇ।

npm install

ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ Vue ਨੂੰ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਸਾਨੂੰ ਕੁਝ ਪੈਕੇਜ ਸਥਾਪਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਨਾਲ ਹੀ, ਪਲੱਗਇਨ-ਵਿਊ ਇੰਸਟਾਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਕਿਉਂਕਿ ਲਾਰਵੇਲ 9 ਵੈਬਪੈਕ-ਮਿਕਸ ਦੀ ਬਜਾਏ ਵਾਈਟ ਨਾਲ ਭੇਜਦਾ ਹੈ, ਜੋ ਕਿ 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 ਐਂਡਪੁਆਇੰਟਸ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਲਈ, ਸਾਨੂੰ 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 ਦੁਆਰਾ ਪਛਾਣਨ ਦੀ ਆਗਿਆ ਦੇਵੇਗਾ।

ਇੱਥੇ ਦੋਵਾਂ ਲਈ ਸੰਬੰਧਿਤ ਕੋਡ ਬਲਾਕ ਹਨ:

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

ਤੁਹਾਨੂੰ ਵੀ ਇਸ ਵਿੱਚ ਦਿਲਚਸਪੀ ਹੋ ਸਕਦੀ ਹੈ ...