Articles

Vue da Laravel: Ƙirƙiri Aikace-aikacen Shafi Guda ɗaya

Laravel yana ɗaya daga cikin shahararrun tsarin PHP da masu haɓaka ke amfani da su, bari mu ga yau yadda ake yin Aikace-aikacen Shafi Guda ɗaya tare da VueJs.

Kafin ƙaddamar da Laravel UI, ɗaya daga cikin manyan abubuwansa shine tallafi na farkodefinit za Duba.js daga Laravel v5.3 zuwa v6. Vue shine tsarin gaba na JavaScript na zamani wanda ake amfani dashi don gina mu'amalar masu amfani.

Me yasa Laravel da Vue suka haɗa?

Anan ga wasu manyan fa'idodin amfani da Laravel tare da Vue don ƙirƙirar cikakken aikin aiki don ayyukanku:

An haɗa lambar tushe zuwa aiki ɗaya, maimakon samun ayyuka daban-daban don baya da gaba
Shigarwa da daidaitawa suna da sauƙi
Rarraba guda ɗaya na iya sarrafa tsarin duka biyu tare

Menene SPA? (Aikace-aikacen shafi guda ɗaya)

Una aikace-aikacen shafi guda ɗaya (SPA a takaice) tana loda sabbin bayanai daga sabar gidan yanar gizo zuwa cikin shafin yanar gizo ba tare da an sabunta shafin gaba daya ba.

Misalai na shahararrun gidajen yanar gizon da ke amfani da SPA sun haɗa da gmail.com da youtube.com - a wasu kalmomi, SPAs suna da yawa a ko'ina. Yawancin dashboards admin da zaku iya aiki dasu a kullun ana gina su ta amfani da SPA.

Amfanin SPAs:

Kwarewar mai amfani ta fi sauƙi
Cache data a cikin browser
Lokacin lodawa da sauri

Lalacewar SPAs:

Zai iya yin sulhu da SEO (inganta injin bincike)
Matsalolin tsaro masu yiwuwa
Yana cinye albarkatun mai amfani da yawa

Tsarin aiki a Laravel

Wannan sakon zai nuna yadda ake haɓaka aikace-aikacen abin yi wanda ke ba masu amfani damar yin rajista don asusu da ƙara ayyuka.

Don wannan koyawa, ana amfani da Laravel 9, wanda ke buƙatar PHP 8.1 da Vue 3; muna kuma buƙatar shigar da PHP da NGINX.

Muna farawa da umarni mai zuwa:

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

Na gaba, za mu shigar da abubuwan dogaro da JavaScript.

npm install

Muna buƙatar shigar da wasu fakiti kafin mu iya ƙara Vue zuwa aikinmu.

Har ila yau, dole ne a shigar da plugin-vue, tun da Laravel 9 yana jigilar kaya tare da Vite, maimakon webpack-mix, wanda shine babban Laravel na JavaScript na baya. Bari mu yi shi yanzu:

npm install vue@next vue-loader@next @vitejs/plugin-vue

Bude fayil ɗin da ake kira vite.config.js kuma ƙara vue() don daidaitawa:

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',
        ]),
    ],
});

Shirya fayil ɗin app.js da snippet ɗin bootstrap don ƙa'idar Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

Ƙirƙiri fayil da ake kira App.vue kuma a kara da wadannan:

<template>
  <h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
  setup() {

   }
}
</script>

A ƙarshe, buɗe fayil ɗin welcome.blade.php dake cikin babban fayil resources/views kuma a kara da wadannan:

<!DOCTYPE html>
<html>
<head>
 ....
        @vite('resources/css/app.css')
</head>
<body>
  <div id="app"></div>
  @vite('resources/js/app.js')
</body>
</html>

Don yin samfoti na app ɗin mu, muna buƙatar fara Vue app da uwar garken Laravel akan tashoshi/layukan umarni daban-daban guda biyu:

npm run dev


php artisan serve

Don ƙirƙirar ƙa'idar aikin mu, muna buƙatar ƙirƙirar wasu fayiloli. Vue zai ƙirƙiri shafuka masu yawa, musamman:

na shiga
domin yin rajista
Shafin gida

Don sadarwa tare da ƙarshen Laravel, muna buƙatar shigar da Axios:

npm install axios

hanyar hanya

Amfani da kunshin vue-router, akwai dabaru iri-iri da za a iya amfani da su a cikin Vue; wadannan dabarun kuma an san su da history models.

Lokacin da mai amfani ya nema route kamar http://localhost:8000/home, wanda zai dawo da kuskuren 404 lokacin da aka sabunta shafin, za mu iya dogara da Laravel don gano duk wata hanya ta koma baya sannan mu yi amfani da fayil ɗin Blade wanda ya ƙunshi app ɗin mu.

Don wannan dalili, za mu yi amfani da yanayin 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')
        }
    ],
})

A cikin wannan misali, muna gudanar da tantancewa ta amfani da Laravel Sanctum, sannan ana adana alamar a cikin ma'ajiyar gida.

Don wasu buƙatun don yin nasara, ana haɗa alamar zuwa cikin taken, wanda zai ba da damar mai amfani da ke yin buƙatar gano ta Laravel.

Anan akwai abubuwan toshe lambobin lambobin guda biyu:

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

Hakanan kuna iya sha'awar ...