amanqaku

I-Vue kunye neLaravel: yenza iSicelo sePhepha elinye

ILaravel sesinye sezona zikhokelo ze-PHP ezidumileyo ezisetyenziswa ngabaphuhlisi, masibone namhlanje ukuba sisenza njani isicelo sePhepha elinye ngeeVueJs.

Ngaphambi kokusungulwa kweLaravel UI, enye yeempawu zayo eziphambili yayiyinkxaso yangaphambilidefinite for Vue.js ukusuka Laravel v5.3 ukuya v6. I-Vue yinkqubo yesikhokelo yeJavaScript yanamhlanje esetyenziselwa ukwakha ujongano lomsebenzisi.

Kutheni ufake iLaravel kunye neVue kunye?

Nazi ezinye zezona zibonelelo ziphambili zokusebenzisa iLaravel ngeVue ukwenza ukuhamba komsebenzi okupheleleyo kwiiprojekthi zakho:

Ikhowudi yomthombo idibaniswe kwiprojekthi enye, endaweni yokuba neeprojekthi ezihlukeneyo ze-backend kunye ne-frontend
Ukufakela kunye noqwalaselo kulula
Ukuhanjiswa okukodwa kunokulawula zombini izikhokelo kunye

Yintoni iSPA? (isicelo sephepha elinye)

Omnye usetyenziso lwephepha elinye (i-SPA ngokufutshane) ilayisha ngamandla idatha entsha ukusuka kumncedisi wewebhu ukuya kwiphepha lewebhu ngaphandle kokuhlaziya lonke iphepha.

Imizekelo yeewebhusayithi ezidumileyo ezisebenzisa i-SPA zibandakanya i-gmail.com kunye ne-youtube.com - ngamanye amazwi, ii-SPAs zikho yonke indawo. Uninzi lweedeshibhodi zolawulo onokusebenza nazo mihla le zakhiwe kusetyenziswa i-SPA.

Izinto eziluncedo kwii-SPAs:

Amava omsebenzisi abhetyebhetye ngakumbi
I-Cache data kwi-browser
Ixesha lokulayisha ngokukhawuleza

Izinto ezingeloncedo kwii-SPAs:

Ngamana ibeka esichengeni i-SEO (usetyenziso lwe-injini yokukhangela)
Imiba yokhuseleko enokwenzeka
Isebenzisa izixhobo ezininzi zebrawuza

Ubumbeko lweprojekthi kwiLaravel

Esi sithuba siya kubonisa indlela yokuphuhlisa i-app yokwenza evumela abasebenzisi ukuba babhalisele i-akhawunti kwaye bongeze imisebenzi.

Kule tutorial, iLaravel 9 isetyenzisiwe, efuna i-PHP 8.1 kunye ne-Vue 3; kufuneka kwakhona sibe ne-PHP kunye ne-NGINX efakwe.

Siqala ngalo myalelo ulandelayo:

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

Okulandelayo, siya kufaka ukuxhomekeka kweJavaScript.

npm install

Kufuneka sifake ezinye iipakethi ngaphambi kokuba songeze i-Vue kwiprojekthi yethu.

Kwakhona, i-plugin-vue kufuneka ifakwe, ekubeni iLaravel 9 iinqanawa kunye neVite, kunokuba i-webpack-mix, eyayiyi-Laravel bundler yangaphambili yeJavaScript. Masiyenze ngoku:

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

Vula ifayile ebizwa vite.config.js kwaye wongeze vue() kuqwalaselo:

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

Hlela ifayile ye-app.js kunye ne-bootstrap snippet ye-Vue 3 app:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Yenza ifayile ebizwa App.vue kwaye wongeze oku kulandelayo:

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

   }
}
</script>

Ekugqibeleni, vula ifayile welcome.blade.php ibekwe kwisiqulathi seefayili resources/views kwaye wongeze oku kulandelayo:

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

Ukujonga usetyenziso lwethu, kufuneka siqale usetyenziso lwethu lweVue kunye neseva yeLaravel kwiitheminali ezimbini ezahlukeneyo / imigca yomyalelo:

npm run dev


php artisan serve

Ukwenza i-app yethu yokwenza, kufuneka senze ezinye iifayile. I-Vue izakwenza amaphepha amaninzi, ikakhulu:

yokufikelela
yobhaliso
Iphepha lasekhaya

Ukunxibelelana neesiphelo zeLaravel, kufuneka sifake i-Axios:

npm install axios

vue umzila

Ukusebenzisa ipakethe vue-router, kukho iindlela ezahlukeneyo zobuchule ezinokuthi zisetyenziswe kwiVue; ezi zicwangciso zikwabizwa ngokuba history models.

Xa umsebenzisi ecela route njenge-http: // localhost: 8000/home, eya kubuyisela impazamo ye-404 xa iphepha lihlaziywa, sinokuthembela kuLaravel ukubona nayiphi na indlela yokubuyela umva kwaye emva koko sikhonze ifayile yeBlade equlethe i-app yethu.

Ngesi sizathu, siza kusebenzisa imowudi ye-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')
        }
    ],
})

Kulo mzekelo siphatha ukuqinisekiswa kusetyenziswa ILaravel Sanctum, ngoko uphawu lugcinwa kwindawo yokugcina indawo.

Ukuze ezinye izicelo ziphumelele, ithokheni idibaniswe kwintloko, eya kuvumela umsebenzisi owenza isicelo ukuba achongwe nguLaravel.

Nazi iibhloko zekhowudi ezinxulumene nazo zombini:

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

Unokuba nomdla kwi ...