Vóór de lancering van Laravel UI was pre-ondersteuning een van de belangrijkste kenmerkendefiavond voor Vue.js van Laravel v5.3 tot v6. Vue is een modern JavaScript frontend-framework dat wordt gebruikt om gebruikersinterfaces te bouwen.
Hier zijn enkele van de belangrijkste voordelen van het gebruik van Laravel met Vue om een volledige workflow voor uw projecten te creëren:
De broncode wordt gecombineerd in één project, in plaats van aparte projecten voor de backend en frontend
Installatie en configuratie zijn eenvoudig
Een enkele distributie kan beide frameworks samen beheren
een toepassing van één pagina (afgekort SPA) laadt dynamisch nieuwe gegevens van een webserver in een webpagina zonder de hele pagina te hoeven vernieuwen.
Voorbeelden van populaire websites die SPA's gebruiken, zijn gmail.com en youtube.com - met andere woorden, SPA's zijn grotendeels alomtegenwoordig. De meeste beheerdashboards waarmee u dagelijks werkt, zijn gebouwd met behulp van SPA.
Voordelen van SPA's:
De gebruikerservaring is flexibeler
Cachegegevens in de browser
Snelle laadtijd
Nadelen van SPA's:
Kan SEO (zoekmachineoptimalisatie) in gevaar brengen
Mogelijke beveiligingsproblemen
Het verbruikt veel browserbronnen
Dit bericht laat zien hoe je een taken-app kunt ontwikkelen waarmee gebruikers zich kunnen aanmelden voor een account en taken kunnen toevoegen.
Voor deze tutorial wordt Laravel 9 gebruikt, waarvoor PHP 8.1 en Vue 3 vereist zijn; we moeten ook PHP en NGINX geïnstalleerd hebben.
We beginnen met de volgende opdracht:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboVervolgens installeren we de JavaScript-afhankelijkheden.
npm installWe moeten enkele pakketten installeren voordat we Vue aan ons project kunnen toevoegen.
Ook moet plug-in-vue worden geïnstalleerd, aangezien Laravel 9 wordt geleverd met Vite, in plaats van webpack-mix, wat de vorige Laravel-bundel voor JavaScript was. Laten we het nu doen:
npm install vue@next vue-loader@next @vitejs/plugin-vueOpen het bestand genaamd vite.config.js en voeg toe vue() naar configuratie:
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',
]),
],
});Bewerk het app.js-bestand en het bootstrap-fragment voor de Vue 3-app:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Maak een bestand aan met de naam App.vue en voeg het volgende toe:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Open ten slotte het bestand welcome.blade.php bevindt zich in de map resources/views en voeg het volgende toe:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Om een voorbeeld van onze app te bekijken, moeten we onze Vue-app en Laravel-server starten op twee verschillende terminals/opdrachtregels:
npm run dev
php artisan serveOm onze taken-app te maken, moeten we andere bestanden maken. Vue zal meerdere pagina's maken, voornamelijk:
Om te communiceren met Laravel-eindpunten, moeten we Axios installeren:
npm install axiosHet pakket gebruiken vue-router, zijn er verschillende routeringsstrategieën die in Vue kunnen worden gebruikt; deze strategieën zijn ook bekend als history models.
Wanneer een gebruiker daarom vraagt route zoals http://localhost:8000/home, die een 404-fout zal retourneren wanneer de pagina wordt vernieuwd, kunnen we erop vertrouwen dat Laravel eventuele terugvalroutes detecteert en vervolgens het Blade-bestand levert dat onze app bevat.
Om deze reden gebruiken we de 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')
}
],
})In dit voorbeeld behandelen we authenticatie met behulp van Laravel-heiligdom, dan wordt het token opgeslagen in de lokale opslag.
Om andere verzoeken te laten slagen, wordt het token samengevoegd in de header, waardoor de gebruiker die het verzoek indient, kan worden geïdentificeerd door Laravel.
Hier zijn de bijbehorende codeblokken voor beide:
<!--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
Mogelijk bent u ook geïnteresseerd in ...
De marinesector is een echte mondiale economische macht, die is genavigeerd naar een markt van 150 miljard...
Afgelopen maandag maakte de Financial Times een deal met OpenAI bekend. FT geeft licenties voor haar journalistiek van wereldklasse...
Miljoenen mensen betalen voor streamingdiensten en betalen maandelijkse abonnementskosten. De algemene mening is dat je…
Coveware by Veeam zal responsdiensten op het gebied van cyberafpersingsincidenten blijven leveren. Coveware zal forensische en herstelmogelijkheden bieden...