articuli

Vue è Laravel: creanu una Applicazione Single Page

Laravel hè unu di i frameworks PHP più populari utilizati da i sviluppatori, vedemu oghje cumu fà una Applicazione Single Page cù VueJs.

Prima di u lanciu di Laravel UI, una di e so caratteristiche principali era pre supportudefinotte per Vue.js da Laravel v5.3 à v6. Vue hè un framework di frontend JavaScript mudernu utilizatu per custruisce interfacce d'utilizatori.

Perchè installà Laravel è Vue inseme?

Eccu alcuni di i vantaghji principali di utilizà Laravel cù Vue per creà un flussu di travagliu cumpletu per i vostri prughjetti:

U codice fonte hè cumminatu in un prughjettu, invece di avè prughjetti separati per u backend è u frontend
A stallazione è a cunfigurazione sò simplici
Una distribuzione unica pò gestisce i dui quadri inseme

Cosa hè un SPA? (applicazione di una sola pagina)

Una applicazione di una sola pagina (SPA in breve) carica dinamicamente novi dati da un servitore web in una pagina web senza avè da rinfriscà tutta a pagina.

Esempii di siti web populari chì utilizanu SPA include gmail.com è youtube.com - in altri palori, SPA sò largamente ubiquitous. A maiò parte di i dashboards amministrativi cù quale pudete travaglià ogni ghjornu sò custruiti cù SPA.

Vantaghji di SPA:

L'esperienza di l'utilizatore hè più flexible
Cache dati in u navigatore
Tempu di carica veloce

I svantaghji di i SPA:

Puderà cumprumette SEO (optimizazione di u mutore di ricerca)
I prublemi di sicurezza potenziale
Cunsumeghja assai risorse di navigatore

Cunfigurazione di u prughjettu in Laravel

Questu post vi dimustrarà cumu sviluppà una app per fà chì permette à l'utilizatori di firmà per un contu è aghjunghje attività.

Per questu tutoriale, Laravel 9 hè utilizatu, chì richiede PHP 8.1 è Vue 3; avemu ancu bisognu di avè installatu PHP è NGINX.

Cuminciamu cù u cumandimu seguitu:

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

In seguitu, stallaremu e dependenze di JavaScript.

npm install

Avemu bisognu di stallà qualchi pacchetti prima di pudè aghjunghje Vue à u nostru prughjettu.

Inoltre, plugin-vue deve esse installatu, postu chì Laravel 9 spedisce cù Vite, invece di webpack-mix, chì era u bundler Laravel precedente per JavaScript. Facemu avà:

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

Aprite u schedariu chjamatu vite.config.js è aghjunghje vue() à a cunfigurazione:

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

Edite u schedariu app.js è u snippet di bootstrap per l'app Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Crea un schedariu chjamatu App.vue è aghjunghje i seguenti:

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

   }
}
</script>

Infine, apre u schedariu welcome.blade.php situatu in u cartulare resources/views è aghjunghje i seguenti:

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

Per vede in anteprima a nostra app, avemu bisognu di inizià a nostra app Vue è u servitore Laravel in dui terminali / linee di cumanda differenti:

npm run dev


php artisan serve

Per creà a nostra app per fà, avemu bisognu di creà altri schedari. Vue creerà parechje pagine, principalmente:

di accessu
per a registrazione
Una pagina di casa

Per cumunicà cù i punti finali di Laravel, avemu bisognu di installà Axios:

npm install axios

vue routing

Utilizà u pacchettu vue-router, Ci sò vari stratèggi routing chì ponu esse usatu in Vue; sti stratèggi sò dinù canusciutu comu history models.

Quandu un utilizatore dumanda route cum'è http://localhost:8000/home, chì vultarà un errore 404 quandu a pagina hè rinfrescata, pudemu cunfidà di Laravel per detectà qualsiasi rotte di fallback è dopu serve u schedariu Blade chì cuntene a nostra app.

Per quessa, avemu aduprà u modu 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')
        }
    ],
})

In questu esempiu, gestionemu l'autentificazione cù l'usu Laravel Sanctum, allura u token hè salvatu in u almacenamiento locale.

Per altri dumandesi per riesce, u token hè unitu in l'intestazione, chì permetterà à l'utilizatori chì facenu a dumanda per esse identificatu da Laravel.

Eccu i blocchi di codice assuciati per i dui:

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

Puderia ancu esse interessatu à ...