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.
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
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
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:
Per comunicare con gli endpoint Laravel, dobbiamo installare Axios:
npm install axios
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
Potrebbe interessarti anche…
Reply, società di consulenza e system integrator a livello globale e Oracle Cloud Managed Service Provider, annuncia di aver ricevuto…
MasterZ Blockchain, aumenta il valore per il Master d’ eccellenza WEB 3.0 più grande d' Europa. Il team tutto italiano…
33 finalisti selezionati tra 5.213 candidature in 163 paesi I finalisti sostengono un'azione climatica incisiva e supportano l'accesso all'energia pulita,…
I prodotti biologici si sono evidenziati come una classe farmaceutica innovativa, rivoluzionando il campo della medicina attraverso terapie mirate. A…
L'internalizzazione delle stampanti per la produzione di metalli e polimeri negli stabilimenti di Riom, Francia e Rock Hill, Carolina del…
L'analisi dei dati senza librerie e potenziata dall'apprendimento automatico con Spectronaut ® 18 offre quantificazione e produttività delle proteine leader del settore…
Mattermost presenta un ecosistema ampliato di alleati con un'enfasi sui nuovi casi d'uso del Dipartimento della Difesa per le soluzioni…
La piattaforma di punta TV 2.0 di United Cloud, estremamente popolare con il nome commerciale EON TV, acquisisce potenti difese…
Armis Centrix™ consente alle organizzazioni di vedere, proteggere e gestire tutte le risorse virtuali, garantendo la difesa e la gestione…
La nanotecnologia ha inaugurato una nuova era nella somministrazione di farmaci oculari, offrendo soluzioni piccole ma potenti per superare sfide…