Articoli

Vue e Laravel: creare una Single Page Appliction

Laravel è uno dei framework PHP più popolari utilizzati dagli sviluppatori, vediamo oggi come fare una Single Page Application con VueJs.

Prima del lancio dell’interfaccia utente di Laravel, una delle sue caratteristiche principali era il supporto predefinito per Vue.js da Laravel v5.3 a v6. Vue è un moderno framework frontend JavaScript utilizzato per creare interfacce utente.

Perché installare Laravel e Vue insieme ?

Ecco alcuni dei principali vantaggi dell’utilizzo di Laravel con Vue per creare un flusso di lavoro completo per i tuoi progetti:

Il codice sorgente è combinato in un unico progetto, invece di avere progetti separati per il backend e il frontend
L’installazione e la configurazione sono semplici
Una singola distribuzione può gestire entrambi i framework insieme

Cos’è una SPA? (single-page application)

Una single-page application (in breve SPA) carica dinamicamente nuovi dati da un server Web a una pagina Web senza dover aggiornare l’intera pagina.

Esempi di siti Web popolari che utilizzano SPA includono gmail.com e youtube.com: in altre parole, le SPA sono in larga misura onnipresenti. La maggior parte dei dashboard di amministrazione con cui potresti lavorare quotidianamente viene creata utilizzando SPA.

Vantaggi delle SPA:

L’esperienza utente è più flessibile
Memorizza nella cache i dati nel browser
Tempo di caricamento rapido

Svantaggi delle SPA:

Può compromettere la SEO (ottimizzazione per i motori di ricerca)
Potenziali problemi di sicurezza
Consuma molte risorse del browser

Configurazione progetto in Laravel

Questo post dimostrerà come sviluppare un’app da fare che consenta agli utenti di registrarsi per un account e aggiungere attività.

Per questo tutorial viene utilizzato Laravel 9, che richiede PHP 8.1 e Vue 3; dobbiamo anche avere PHP e NGINX installati.

Iniziamo con il seguente comando:

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

Successivamente, installeremo le dipendenze JavaScript.

npm install

Dobbiamo installare alcuni pacchetti prima di poter aggiungere Vue al nostro progetto.

Inoltre, deve essere installato plugin-vue, poiché Laravel 9 viene fornito con Vite, anziché webpack-mix, che era il precedente bundler di Laravel per JavaScript. Facciamolo ora:

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

Apri il file chiamato vite.config.js e aggiungi vue() alla configurazione:

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

Modifica il file app.js e lo snippet per il bootstrap dell’app Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Crea un file chiamato App.vue e aggiungi quanto segue:

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

   }
}
</script>

Infine, apri il file welcome.blade.php che si trova nella cartella resources/views e aggiungi quanto segue:

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

Per visualizzare l’anteprima della nostra app, dobbiamo avviare la nostra app Vue e il server Laravel su due diversi terminali/righe di comando:

npm run dev


php artisan serve

Per creare la nostra app da fare, dobbiamo creare altri file. Vue creerà più pagine, principalmente:

di accesso
per la registrazione
Una pagina iniziale

Per comunicare con gli endpoint Laravel, dobbiamo installare Axios:

npm install axios

Vue routing

Utilizzando il pacchetto vue-router, ci sono varie strategie di routing che possono essere utilizzate in Vue; queste strategie sono anche conosciute come history models.

Quando un utente richiede route come http://localhost:8000/home, che restituirà un errore 404 quando la pagina viene aggiornata, possiamo fare affidamento su Laravel per rilevare eventuali route di fallback e quindi servire il file Blade che contiene la nostra app.

Per questo motivo, utilizzeremo la modalità 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 questo esempio si gestisce l’autenticazione utilizzando Laravel Sanctum, quindi viene salvato il token nell’archivio locale.

Affinché altre richieste vadano a buon fine, il token viene unito all’intestazione, che consentirà all’utente che effettua la richiesta di essere identificato da Laravel.

Qui di seguito i blocchi di codice associati per entrambi:

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

Articoli recenti

Comunicati Stampa

Reply ottiene 4 Oracle EMEA Cluster Partner Awards nelle categorie Innovation, Business Impact e Customer Success

Reply, società di consulenza e system integrator a livello globale e Oracle Cloud Managed Service Provider, annuncia di aver ricevuto…

19 Settembre 2023

Comunicati Stampa

MasterZ, il Master su Blockchain e WEB 3.0 piu grande d’Europa, lancia una nuova piattaforma dedicata all’apprendimento, alla pratica e al lavoro

MasterZ Blockchain, aumenta il valore per il Master d’ eccellenza WEB 3.0 più grande d' Europa. Il team tutto italiano…

19 Settembre 2023

Comunicati Stampa

Lo Zayed Sustainability Prize annuncia 33 finalisti che promuovono iniziative di sostenibilità globale

33 finalisti selezionati tra 5.213 candidature in 163 paesi I finalisti sostengono un'azione climatica incisiva e supportano l'accesso all'energia pulita,…

18 Settembre 2023

Articoli

Tendenze emergenti e innovazioni nella ricerca biologica: dal banco al letto del paziente

I prodotti biologici si sono evidenziati come una classe farmaceutica innovativa, rivoluzionando il campo della medicina attraverso terapie mirate. A…

17 Settembre 2023

Articoli

3D Systems semplifica la produzione e promuove l’innovazione continua mediante l’internalizzazione della produzione di piattaforme di stampa aggiuntive

L'internalizzazione delle stampanti per la produzione di metalli e polimeri negli stabilimenti di Riom, Francia e Rock Hill, Carolina del…

17 Settembre 2023

Articoli

Biognosys presenta innovazioni tecnologiche e progressi scientifici per rendere il proteoma utilizzabile per la ricerca sulle scienze della vita al Congresso mondiale HUPO 2023

L'analisi dei dati senza librerie e potenziata dall'apprendimento automatico con Spectronaut ® 18 offre quantificazione e produttività delle proteine leader del settore…

16 Settembre 2023