Vor der Einführung der Laravel-Benutzeroberfläche war eine der Hauptfunktionen die VorabunterstützungdefiNacht für Vue.js von Laravel v5.3 auf v6. Vue ist ein modernes JavaScript-Frontend-Framework zum Erstellen von Benutzeroberflächen.
Hier sind einige der Hauptvorteile der Verwendung von Laravel mit Vue, um einen vollständigen Workflow für Ihre Projekte zu erstellen:
Der Quellcode wird in einem Projekt zusammengefasst, anstatt getrennte Projekte für Backend und Frontend zu haben
Installation und Konfiguration sind einfach
Eine einzige Distribution kann beide Frameworks zusammen verwalten
Eine einseitige Anwendung (kurz SPA) lädt dynamisch neue Daten von einem Webserver in eine Webseite, ohne dass die gesamte Seite aktualisiert werden muss.
Beispiele für beliebte Websites, die SPAs verwenden, sind gmail.com und youtube.com – mit anderen Worten, SPAs sind weitgehend allgegenwärtig. Die meisten Admin-Dashboards, mit denen Sie möglicherweise täglich arbeiten, werden mit SPA erstellt.
Vorteile von SPAs:
Die Benutzererfahrung ist flexibler
Daten im Browser zwischenspeichern
Schnelle Ladezeit
Nachteile von SPAs:
Kann SEO (Suchmaschinenoptimierung) beeinträchtigen
Mögliche Sicherheitsprobleme
Es verbraucht eine Menge Browser-Ressourcen
Dieser Beitrag zeigt, wie man eine Aufgaben-App entwickelt, die es Benutzern ermöglicht, sich für ein Konto anzumelden und Aufgaben hinzuzufügen.
Für dieses Tutorial wird Laravel 9 verwendet, das PHP 8.1 und Vue 3 erfordert; Wir müssen auch PHP und NGINX installiert haben.
Wir beginnen mit folgendem Befehl:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboAls Nächstes installieren wir die JavaScript-Abhängigkeiten.
npm installWir müssen einige Pakete installieren, bevor wir Vue zu unserem Projekt hinzufügen können.
Außerdem muss plugin-vue installiert werden, da Laravel 9 mit Vite ausgeliefert wird, und nicht mit webpack-mix, dem früheren Laravel-Bundle für JavaScript. Lass es uns jetzt machen:
npm install vue@next vue-loader@next @vitejs/plugin-vueÖffnen Sie die aufgerufene Datei vite.config.js und hinzufügen vue() zur Konfiguration:
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',
]),
],
});Bearbeiten Sie die Datei app.js und das Bootstrap-Snippet für die Vue 3-App:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Erstellen Sie eine Datei namens App.vue und folgendes hinzufügen:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Öffnen Sie abschließend die Datei welcome.blade.php befindet sich im Ordner resources/views und folgendes hinzufügen:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Um eine Vorschau unserer App anzuzeigen, müssen wir unsere Vue-App und den Laravel-Server auf zwei verschiedenen Terminals/Befehlszeilen starten:
npm run dev
php artisan serveUm unsere To-Do-App zu erstellen, müssen wir andere Dateien erstellen. Vue erstellt mehrere Seiten, hauptsächlich:
Um mit Laravel-Endpunkten zu kommunizieren, müssen wir Axios installieren:
npm install axiosVerwenden des Pakets vue-router, gibt es verschiedene Routing-Strategien, die in Vue verwendet werden können; Diese Strategien werden auch als bezeichnet history models.
Wenn ein Benutzer anfordert route wie http://localhost:8000/home, das einen 404-Fehler zurückgibt, wenn die Seite aktualisiert wird, können wir uns darauf verlassen, dass Laravel Fallback-Routen erkennt und dann die Blade-Datei bereitstellt, die unsere App enthält.
Aus diesem Grund verwenden wir den 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 diesem Beispiel behandeln wir die Authentifizierung mit Laravel-Heiligtum, dann wird das Token im lokalen Speicher gespeichert.
Damit andere Anfragen erfolgreich sind, wird das Token in den Header eingefügt, wodurch der Benutzer, der die Anfrage stellt, von Laravel identifiziert werden kann.
Hier sind die zugehörigen Codeblöcke für 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
Das könnte Sie auch interessieren ...
Microsoft Excel ist das Referenztool für die Datenanalyse, denn es bietet viele Funktionen zum Organisieren von Datensätzen,…
Walliance, SIM und Plattform, die seit 2017 zu den Marktführern in Europa im Bereich Immobilien-Crowdfunding zählt, gibt den Abschluss bekannt…
Filament ist ein „beschleunigtes“ Laravel-Entwicklungsframework, das mehrere Full-Stack-Komponenten bereitstellt. Es soll den Prozess vereinfachen...
„Ich muss zurückkehren, um meine Entwicklung zu vollenden: Ich werde mich in den Computer hineinprojizieren und reine Energie werden.“ Einmal eingelebt…
Google DeepMind stellt eine verbesserte Version seines Modells der künstlichen Intelligenz vor. Das neue, verbesserte Modell bietet nicht nur…
Laravel, bekannt für seine elegante Syntax und leistungsstarken Funktionen, bietet auch eine solide Grundlage für modulare Architektur. Dort…
Cisco und Splunk unterstützen Kunden dabei, ihren Weg zum Security Operations Center (SOC) der Zukunft zu beschleunigen, mit…
Ransomware dominiert seit zwei Jahren die Nachrichten. Den meisten Menschen ist durchaus bewusst, dass Angriffe…