Înainte de lansarea Laravel UI, una dintre caracteristicile sale principale era pre-suportuldefinoapte pentru Vue.js de la Laravel v5.3 la v6. Vue este un cadru frontend JavaScript modern folosit pentru a construi interfețe cu utilizatorul.
Iată câteva dintre principalele beneficii ale utilizării Laravel cu Vue pentru a crea un flux de lucru complet pentru proiectele dvs.:
Codul sursă este combinat într-un singur proiect, în loc să aibă proiecte separate pentru backend și frontend
Instalarea și configurarea sunt simple
O singură distribuție poate gestiona ambele cadre împreună
o aplicație cu o singură pagină (SPA pe scurt) încarcă dinamic date noi de pe un server web într-o pagină web fără a fi nevoie să reîmprospăteze întreaga pagină.
Exemple de site-uri web populare care folosesc SPA-uri includ gmail.com și youtube.com – cu alte cuvinte, SPA-urile sunt în mare parte omniprezente. Majoritatea tablourilor de bord cu care ați putea lucra zilnic sunt create folosind SPA.
Avantajele SPA-urilor:
Experiența utilizatorului este mai flexibilă
Memorați datele în cache în browser
Timp de încărcare rapid
Dezavantajele SPA-urilor:
Poate compromite SEO (optimizarea pentru motoarele de căutare)
Potențiale probleme de securitate
Consumă o mulțime de resurse ale browserului
Această postare va demonstra cum să dezvolte o aplicație de rezolvat care le permite utilizatorilor să se înregistreze pentru un cont și să adauge sarcini.
Pentru acest tutorial se folosește Laravel 9, care necesită PHP 8.1 și Vue 3; de asemenea, trebuie să avem instalate PHP și NGINX.
Începem cu următoarea comandă:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboÎn continuare, vom instala dependențele JavaScript.
npm installTrebuie să instalăm câteva pachete înainte de a putea adăuga Vue la proiectul nostru.
De asemenea, plugin-vue trebuie instalat, deoarece Laravel 9 este livrat cu Vite, mai degrabă decât webpack-mix, care a fost bundler-ul anterior Laravel pentru JavaScript. Hai sa o facem acum:
npm install vue@next vue-loader@next @vitejs/plugin-vueDeschideți fișierul numit vite.config.js si adauga vue() la configurare:
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',
]),
],
});Editați fișierul app.js și fragmentul de bootstrap pentru aplicația Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Creați un fișier numit App.vue și adăugați următoarele:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>În cele din urmă, deschideți fișierul welcome.blade.php aflat în folder resources/views și adăugați următoarele:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Pentru a previzualiza aplicația noastră, trebuie să pornim aplicația Vue și serverul Laravel pe două terminale/linii de comandă diferite:
npm run dev
php artisan servePentru a crea aplicația noastră de făcut, trebuie să creăm alte fișiere. Vue va crea mai multe pagini, în principal:
Pentru a comunica cu punctele finale Laravel, trebuie să instalăm Axios:
npm install axiosFolosind pachetul vue-router, există diverse strategii de rutare care pot fi folosite în Vue; aceste strategii mai sunt cunoscute ca history models.
Când un utilizator solicită route cum ar fi http://localhost:8000/home, care va returna o eroare 404 atunci când pagina este reîmprospătată, ne putem baza pe Laravel pentru a detecta orice rute de rezervă și apoi a servi fișierul Blade care conține aplicația noastră.
Din acest motiv, vom folosi modul 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')
}
],
})În acest exemplu ne ocupăm de autentificare folosind Laravel Sanctum, apoi jetonul este salvat în stocarea locală.
Pentru ca alte cereri să reușească, token-ul este îmbinat în antet, ceea ce va permite utilizatorului care face cererea să fie identificat de Laravel.
Iată blocurile de cod asociate pentru ambele:
<!--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
De asemenea poti fi interesat de ...
Coveware de la Veeam va continua să ofere servicii de răspuns la incidente de extorcare cibernetică. Coveware va oferi capacități criminalistice și de remediere...
Întreținerea predictivă revoluționează sectorul petrolului și gazelor, cu o abordare inovatoare și proactivă a managementului uzinelor...
CMA din Marea Britanie a emis un avertisment cu privire la comportamentul Big Tech pe piața inteligenței artificiale. Acolo…
Decretul „Case verzi”, formulat de Uniunea Europeană pentru creșterea eficienței energetice a clădirilor, și-a încheiat procesul legislativ cu...