Zimanî babet

Vue û Laravel: Serlêdanek Rûpelek Yekane biafirînin

Laravel yek ji wan çarçoveyên PHP-ê yên herî populer e ku ji hêla pêşdebiran ve tê bikar anîn, îro em bibînin ka meriv çawa bi VueJs Serlêdanek Rûpelek Yekane çêdike.

Berî destpêkirina Laravel UI, yek ji taybetmendiyên wê yên sereke piştgirîya pêşîn bûdefinişand ji bo Vue.js Laravel v5.3 ber v6. Vue çarçoveyek pêşîn a JavaScript-ê ya nûjen e ku ji bo avakirina navgînên bikarhêner tê bikar anîn.

Çima Laravel û Vue bi hev re saz bikin?

Li vir hin feydeyên sereke yên karanîna Laravel bi Vue hene ku ji bo projeyên xwe xebatek bêkêmasî biafirînin:

Koda çavkaniyê di yek projeyek de tête hev kirin, li şûna ku ji bo paşîn û pêşiyê projeyên cûda hebin
Sazkirin û sazkirin hêsan in
Dabeşkirinek yekane dikare her du çarçove bi hev re bigire

SPA çi ye? (serlêdana yek rûpelî)

Una serlêdana yek-rûpel (SPA bi kurtî) bêyî ku hewce bike ku tevahiya rûpelê nûve bike, daneyên nû ji serverek webê bi dînamîkî bar dike.

Nimûneyên malperên populer ên ku SPA bikar tînin gmail.com û youtube.com hene: Bi gotinek din, SPA bi gelemperî li her derê ne. Piraniya dashboardên rêveberiyê yên ku hûn dikarin rojane bi wan re bixebitin bi karanîna SPA têne afirandin.

Avantajên SPA:

Tecrûbeya bikarhêner maqûltir e
Daneyên cache di geroka xwe de
Dema barkirina bilez

Dezavantajên SPA:

Dikare SEO (optimîzasyona motora lêgerînê) tawîzê bide
Pirsgirêkên ewlehiyê yên potansiyel
Ew gelek çavkaniyên gerokê dixwe

Veavakirina projeyê li Laravel

Vê postê dê nîşan bide ka meriv çawa serîlêdanek kirêdar pêşve dike ku dihêle bikarhêneran hesabek qeyd bikin û karan zêde bikin.

Vê tutorial Laravel 9 bikar tîne, ku PHP 8.1 û Vue 3 hewce dike; divê em PHP û NGINX jî saz bikin.

Ka em bi fermana jêrîn dest pê bikin:

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

Piştre, em ê girêdanên JavaScript saz bikin.

npm install

Berî ku em Vue li projeya xwe zêde bikin divê em hin pakêtan saz bikin.

Digel vê yekê, pêdivî ye ku plugin-vue were saz kirin, ji ber ku Laravel 9 bi Vite re dişîne, ji bilî webpack-mix, ku bundlera berê ya Laravel ji bo JavaScript-ê bû. Ka em niha bikin:

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

Pelê tê gotin vekin vite.config.js û lê zêde bike vue() ji bo veavakirinê:

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

Pelê app.js û perçeyê ji bo bootstrap-a sepana Vue 3 biguherînin:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Pelekek bi navê çêbikin App.vue û jêrîn lê zêde bike:

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

   }
}
</script>

Di dawiyê de, pelê vekin welcome.blade.php ku di peldankê de ye resources/views û jêrîn lê zêde bike:

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

Ji bo pêşdîtina sepana xwe, pêdivî ye ku em serîlêdana xwe ya Vue û servera Laravel li ser du termînalan / rêzikên fermanê yên cihêreng bidin destpêkirin:

npm run dev


php artisan serve

Ji bo çêkirina sepana me ya kar, pêdivî ye ku em bêtir pelan biafirînin. Vue dê gelek rûpelan biafirîne, bi taybetî:

ya gihîştinê
ji bo qeydkirinê
Rûpelek malê

Ji bo ku bi xalên dawiya Laravel re têkilî daynin, divê em Axios saz bikin:

npm install axios

Routing Vue

Bikaranîna pakêtê vue-router, stratejiyên rêwîtiyê yên cihêreng hene ku dikarin di Vue de bêne bikar anîn; van stratejiyan jî bi navê history models.

Dema ku bikarhênerek daxwaz dike route mîna http://localhost:8000/home, ku gava rûpel were nûvekirin dê xeletiyek 404 vegere, em dikarin xwe bispêrin Laravel da ku rêyên paşverû tesbît bike û dûv re pelê Blade ya ku sepana me vedihewîne xizmet bike.

Ji bo vê yekê, em ê moda HTML5 bikar bînin:

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

Di vê nimûneyê de em erêkirinê bi kar tînin Laravel Sanctum, paşê nîşanek li hilanîna herêmî tê tomar kirin.

Ji bo ku daxwazên din biserkevin, token di serî de tê yek kirin, ku dê bihêle bikarhênerê ku daxwazê dike ji hêla Laravel ve were nas kirin.

Li jêr blokên kodê yên têkildar ji bo her duyan hene:

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

Dibe ku hûn jî bi ...