લેખ

Vue અને Laravel: સિંગલ પેજ એપ્લિકેશન બનાવો

Laravel એ વિકાસકર્તાઓ દ્વારા ઉપયોગમાં લેવાતું સૌથી લોકપ્રિય PHP ફ્રેમવર્ક છે, ચાલો આજે જોઈએ કે VueJs સાથે સિંગલ પેજ એપ્લિકેશન કેવી રીતે બનાવવી.

Laravel UI ના લોન્ચ પહેલા, તેની મુખ્ય વિશેષતાઓમાંની એક પ્રી સપોર્ટ હતીdefiમાટે રાત્રિ Vue.js Laravel v5.3 થી v6 સુધી. Vue એ આધુનિક JavaScript ફ્રન્ટએન્ડ ફ્રેમવર્ક છે જેનો ઉપયોગ વપરાશકર્તા ઇન્ટરફેસ બનાવવા માટે થાય છે.

શા માટે Laravel અને Vue એકસાથે ઇન્સ્ટોલ કરવું?

તમારા પ્રોજેક્ટ્સ માટે સંપૂર્ણ વર્કફ્લો બનાવવા માટે Vue સાથે Laravel નો ઉપયોગ કરવાના કેટલાક મુખ્ય ફાયદાઓ અહીં છે:

બેકએન્ડ અને ફ્રન્ટએન્ડ માટે અલગ પ્રોજેક્ટ રાખવાને બદલે સોર્સ કોડને એક પ્રોજેક્ટમાં જોડવામાં આવે છે
સ્થાપન અને ગોઠવણી સરળ છે
એક જ વિતરણ બંને ફ્રેમવર્કને એકસાથે મેનેજ કરી શકે છે

એસપીએ શું છે? (સિંગલ પેજ એપ્લિકેશન)

ઉના સિંગલ-પેજ એપ્લિકેશન (ટૂંકમાં 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 ઉમેરી શકીએ તે પહેલાં અમારે કેટલાક પેકેજો ઇન્સ્ટોલ કરવાની જરૂર છે.

ઉપરાંત, પ્લગઇન-વ્યુ ઇન્સ્ટોલ કરવું આવશ્યક છે, કારણ કે લારાવેલ 9 વેબપેક-મિક્સને બદલે Vite સાથે મોકલે છે, જે JavaScript માટે અગાઉનું લારાવેલ બંડલર હતું. ચાલો હવે કરીએ:

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 એરર આપશે, અમે કોઈપણ ફોલબેક રૂટ શોધવા માટે 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 દ્વારા ઓળખવાની મંજૂરી આપશે.

અહીં બંને માટે સંકળાયેલ કોડ બ્લોક્સ છે:

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

તમને પણ તેમાં રસ હોઈ શકે ...