Artikelen

Vue a Laravel: erstellt eng Single Page Applikatioun

Laravel ass ee vun de populäersten PHP Kaderen déi vun Entwéckler benotzt ginn, loosst eis haut kucken wéi een eng Single Page Applikatioun mat VueJs mécht.

Virun der Start vun der Laravel UI war eng vun hiren Haaptfeatures Pre-Supportdefinit fir Vue.js vun Laravel v5.3 zu v6. Vue ass e modernen JavaScript Frontend Kader benotzt fir User Interfaces ze bauen.

Firwat installéiert Laravel a Vue zesummen?

Hei sinn e puer vun den Haaptvirdeeler fir Laravel mat Vue ze benotzen fir e komplette Workflow fir Är Projeten ze kreéieren:

De Quellcode ass an ee Projet kombinéiert, anstatt getrennte Projete fir de Backend a Frontend ze hunn
Installatioun an Konfiguratioun sinn einfach
Eng eenzeg Verdeelung kann béid Kaderen zesummen verwalten

Wat ass e SPA? (Single-page Applikatioun)

Una Single-Säit Applikatioun (SPA kuerz) lued dynamesch nei Daten vun engem Webserver an eng Websäit ouni d'ganz Säit z'erfrëschen.

Beispiller vu populäre Websäiten déi SPAs benotzen enthalen gmail.com an youtube.com - an anere Wierder, SPAs si gréisstendeels ubiquitär. Déi meescht vun den Admin-Dashboards, mat deenen Dir alldeeglech schafft, gi mat SPA gebaut.

Virdeeler vun SPAs:

D'Benotzererfarung ass méi flexibel
Cache Daten am Browser
Schnell Luede Zäit

Nodeeler vu SPAs:

Kann SEO kompromittéieren (Sichmotoroptimiséierung)
Potenziell Sécherheetsproblemer
Et verbraucht vill Browserressourcen

Projet Configuratioun zu Laravel

Dëse Post weist wéi een eng To-Do App entwéckelt, déi d'Benotzer erlaabt fir e Kont unzemellen an Aufgaben ze addéieren.

Fir dësen Tutorial gëtt Laravel 9 benotzt, wat PHP 8.1 a Vue 3 erfuerdert; mir mussen och PHP an NGINX installéiert hunn.

Mir starten mat dem folgenden Kommando:

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

Als nächst wäerte mir d'JavaScript Ofhängegkeeten installéieren.

npm install

Mir mussen e puer Packagen installéieren ier mir Vue op eise Projet kënne addéieren.

Och Plugin-Vue muss installéiert ginn, well Laravel 9 mat Vite schéckt, anstatt Webpack-Mix, wat de fréiere Laravel Bundler fir JavaScript war. Loosst eis et elo maachen:

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

Öffnen der Datei genannt vite.config.js an dobäizemaachen vue() fir d'Konfiguratioun:

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

Änneren d'app.js Datei a Bootstrap Snippet fir d'Vue 3 App:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Schafen eng Datei genannt App.vue an dobäi déi folgend:

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

   }
}
</script>

Endlech, oppen der Datei welcome.blade.php am Dossier läit resources/views an dobäi déi folgend:

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

Fir eis App virauszesoen, musse mir eis Vue App a Laravel Server op zwee verschiddenen Terminals / Kommandozeilen starten:

npm run dev


php artisan serve

Fir eis To-Do App ze kreéieren, musse mir aner Dateien erstellen. Vue wäert verschidde Säiten erstellen, haaptsächlech:

vum Zougang
fir d'Aschreiwung
Eng Homepage

Fir mat Laravel Endpunkter ze kommunizéieren, musse mir Axios installéieren:

npm install axios

Vue Routing

Benotzt de Package vue-router, Et gi verschidde Routingstrategien déi an Vue benotzt kënne ginn; dës Strategien sinn och bekannt als history models.

Wann e Benotzer Ufro route wéi http://localhost:8000/home, deen e 404-Fehler zréckkënnt wann d'Säit erfrëscht ass, kënne mir op Laravel vertrauen fir all Fallbackrouten z'entdecken an dann d'Blade-Datei ze servéieren déi eis App enthält.

Aus dësem Grond benotze mir HTML5 Modus:

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

An dësem Beispill behandele mir d'Authentifikatioun benotzt Laravel Sanctum, da gëtt den Token an der lokaler Späichere gespäichert.

Fir aner Ufroe fir Erfolleg ze ginn, gëtt den Token an den Header fusionéiert, wat de Benotzer erlaabt datt d'Ufro vun Laravel identifizéiert gëtt.

Hei sinn déi assoziéiert Codeblocken fir béid:

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

Dir kéint och interesséiert sinn ...