Πριν από την κυκλοφορία του Laravel UI, ένα από τα κύρια χαρακτηριστικά του ήταν η προϋποστήριξηdefiνύχτα για Vue.js από Laravel v5.3 έως v6. Το Vue είναι ένα σύγχρονο πλαίσιο διεπαφής JavaScript που χρησιμοποιείται για τη δημιουργία διεπαφών χρήστη.
Ακολουθούν ορισμένα από τα κύρια οφέλη της χρήσης του Laravel με το Vue για τη δημιουργία μιας ολοκληρωμένης ροής εργασιών για τα έργα σας:
Ο πηγαίος κώδικας συνδυάζεται σε ένα έργο, αντί να υπάρχουν ξεχωριστά έργα για το backend και το frontend
Η εγκατάσταση και η διαμόρφωση είναι απλές
Μια ενιαία διανομή μπορεί να διαχειριστεί και τα δύο πλαίσια μαζί
ένα εφαρμογή μίας σελίδας (SPA για συντομία) φορτώνει δυναμικά νέα δεδομένα από έναν διακομιστή ιστού σε μια ιστοσελίδα χωρίς να χρειάζεται να ανανεώσετε ολόκληρη τη σελίδα.
Παραδείγματα δημοφιλών ιστότοπων που χρησιμοποιούν SPA περιλαμβάνουν το gmail.com και το youtube.com – με άλλα λόγια, τα SPA είναι σε μεγάλο βαθμό πανταχού παρόντα. Οι περισσότεροι από τους πίνακες εργαλείων διαχειριστή με τους οποίους μπορεί να εργάζεστε σε καθημερινή βάση κατασκευάζονται με χρήση SPA.
Πλεονεκτήματα των SPA:
Η εμπειρία χρήστη είναι πιο ευέλικτη
Προσωρινή αποθήκευση δεδομένων στο πρόγραμμα περιήγησης
Γρήγορος χρόνος φόρτωσης
Μειονεκτήματα των SPA:
Μπορεί να θέσει σε κίνδυνο το SEO (βελτιστοποίηση μηχανών αναζήτησης)
Πιθανά ζητήματα ασφάλειας
Καταναλώνει πολλούς πόρους του προγράμματος περιήγησης
Αυτή η ανάρτηση θα δείξει πώς να αναπτύξετε μια εφαρμογή υποχρεώσεων που επιτρέπει στους χρήστες να εγγραφούν για έναν λογαριασμό και να προσθέσουν εργασίες.
Για αυτό το σεμινάριο, χρησιμοποιείται το Laravel 9, το οποίο απαιτεί PHP 8.1 και Vue 3. Πρέπει επίσης να έχουμε εγκαταστήσει PHP και NGINX.
Ξεκινάμε με την ακόλουθη εντολή:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboΣτη συνέχεια, θα εγκαταστήσουμε τις εξαρτήσεις JavaScript.
npm installΠρέπει να εγκαταστήσουμε ορισμένα πακέτα για να μπορέσουμε να προσθέσουμε το Vue στο έργο μας.
Επίσης, πρέπει να εγκατασταθεί το plugin-vue, καθώς το Laravel 9 κυκλοφορεί με Vite, αντί για webpack-mix, που ήταν το προηγούμενο πακέτο Laravel για JavaScript. Ας το κάνουμε τώρα:
npm install vue@next vue-loader@next @vitejs/plugin-vueΑνοίξτε το αρχείο που καλείται vite.config.js και προσθέστε vue() στη διαμόρφωση:
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',
]),
],
});Επεξεργαστείτε το αρχείο app.js και το απόσπασμα bootstrap για την εφαρμογή Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Δημιουργήστε ένα αρχείο που ονομάζεται App.vue και προσθέστε τα εξής:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Τέλος, ανοίξτε το αρχείο welcome.blade.php που βρίσκεται στο φάκελο resources/views και προσθέστε τα εξής:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Για να κάνετε προεπισκόπηση της εφαρμογής μας, πρέπει να ξεκινήσουμε την εφαρμογή Vue και τον διακομιστή Laravel σε δύο διαφορετικά τερματικά/γραμμές εντολών:
npm run dev
php artisan serveΓια να δημιουργήσουμε την εφαρμογή μας, πρέπει να δημιουργήσουμε άλλα αρχεία. Το Vue θα δημιουργήσει πολλές σελίδες, κυρίως:
Για να επικοινωνήσουμε με τα τελικά σημεία Laravel, πρέπει να εγκαταστήσουμε το Axios:
npm install axiosΧρησιμοποιώντας τη συσκευασία vue-router, υπάρχουν διάφορες στρατηγικές δρομολόγησης που μπορούν να χρησιμοποιηθούν στο Vue. Αυτές οι στρατηγικές είναι επίσης γνωστές ως history models.
Όταν ένας χρήστης ζητήσει route όπως το http://localhost:8000/home, το οποίο θα επιστρέψει ένα σφάλμα 404 όταν ανανεωθεί η σελίδα, μπορούμε να βασιστούμε στη Laravel για να εντοπίσουμε τυχόν εναλλακτικές διαδρομές και στη συνέχεια να εξυπηρετήσουμε το αρχείο Blade που περιέχει την εφαρμογή μας.
Για το λόγο αυτό, θα χρησιμοποιήσουμε τη λειτουργία 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')
}
],
})Σε αυτό το παράδειγμα χειριζόμαστε τον έλεγχο ταυτότητας χρησιμοποιώντας Laravel Sanctum, τότε το διακριτικό αποθηκεύεται στον τοπικό χώρο αποθήκευσης.
Για να επιτύχουν άλλα αιτήματα, το διακριτικό συγχωνεύεται στην κεφαλίδα, η οποία θα επιτρέψει στον χρήστη που κάνει το αίτημα να αναγνωριστεί από τη Laravel.
Ακολουθούν τα συσχετισμένα μπλοκ κώδικα και για τα δύο:
<!--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
Μπορεί επίσης να σας ενδιαφέρει ...
Αποτέλεσμα συνεχούς τεχνολογικής καινοτομίας και δέσμευσης για το περιβάλλον και την ευημερία των ανθρώπων. Η Bandalux παρουσιάζει το Airpure®, μια σκηνή…
Τα μοτίβα σχεδίασης είναι συγκεκριμένες λύσεις χαμηλού επιπέδου σε επαναλαμβανόμενα προβλήματα στο σχεδιασμό λογισμικού. Τα σχέδια σχεδίασης είναι…
Η Magica είναι η εφαρμογή iPhone που κάνει τη διαχείριση του οχήματος απλή και αποτελεσματική, βοηθώντας τους οδηγούς να εξοικονομούν και…
Ένα γράφημα του Excel είναι μια απεικόνιση που αναπαριστά δεδομένα σε ένα φύλλο εργασίας του Excel.…