Antes do lanzamento de Laravel UI, unha das súas principais características era o soporte previodefinoite para Vue.js desde Laravel v5.3 ata v6. Vue é un marco de frontend de JavaScript moderno usado para crear interfaces de usuario.
Aquí tes algúns dos principais beneficios de usar Laravel con Vue para crear un fluxo de traballo completo para os teus proxectos:
O código fonte combínase nun só proxecto, en lugar de ter proxectos separados para o backend e o frontend
A instalación e configuración son sinxelas
Unha única distribución pode xestionar ambos marcos xuntos
un aplicación dunha soa páxina (SPA para abreviar) carga dinámicamente novos datos dun servidor web nunha páxina web sen ter que actualizar toda a páxina.
Exemplos de sitios web populares que usan SPA inclúen gmail.com e youtube.com; noutras palabras, os SPA son en gran parte omnipresentes. A maioría dos paneis de administración cos que podes traballar a diario realízanse mediante SPA.
Vantaxes dos SPA:
A experiencia do usuario é máis flexible
Cache os datos no navegador
Tempo de carga rápido
Desvantaxes dos SPA:
Pode comprometer o SEO (optimización de buscadores)
Posibles problemas de seguridade
Consume moitos recursos do navegador
Esta publicación mostrará como desenvolver unha aplicación de tarefas que permita aos usuarios rexistrarse nunha conta e engadir tarefas.
Para este tutorial utilízase Laravel 9, que require PHP 8.1 e Vue 3; tamén necesitamos ter instalados PHP e NGINX.
Comezamos co seguinte comando:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboA continuación, instalaremos as dependencias de JavaScript.
npm installNecesitamos instalar algúns paquetes antes de poder engadir Vue ao noso proxecto.
Ademais, debe instalarse plugin-vue, xa que Laravel 9 envíase con Vite, en lugar de webpack-mix, que era o paquete de paquetes Laravel anterior para JavaScript. Imos facelo agora:
npm install vue@next vue-loader@next @vitejs/plugin-vueAbre o ficheiro chamado vite.config.js e engadir vue() á configuración:
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 o ficheiro app.js e o fragmento de arranque para a aplicación Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Crea un ficheiro chamado App.vue e engade o seguinte:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Finalmente, abra o ficheiro welcome.blade.php situado no cartafol resources/views e engade o seguinte:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Para ver a nosa aplicación, necesitamos iniciar a nosa aplicación Vue e o servidor Laravel en dous terminais/liñas de comando diferentes:
npm run dev
php artisan servePara crear a nosa aplicación de tarefas pendentes, necesitamos crear outros ficheiros. Vue creará varias páxinas, principalmente:
Para comunicarnos cos extremos de Laravel, necesitamos instalar Axios:
npm install axiosUsando o paquete vue-router, hai varias estratexias de enrutamento que se poden usar en Vue; estas estratexias tamén se coñecen como history models.
Cando un usuario o solicite route como http://localhost:8000/home, que devolverá un erro 404 cando se actualice a páxina, podemos confiar en Laravel para detectar calquera ruta alternativa e despois servir o ficheiro Blade que contén a nosa aplicación.
Por este motivo, utilizaremos o modo 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')
}
],
})Neste exemplo manexamos a autenticación usando Santuario de Laravel, entón o token gárdase no almacenamento local.
Para que outras solicitudes teñan éxito, o token fusionarase na cabeceira, o que permitirá que Laravel identifique o usuario que realiza a solicitude.
Aquí están os bloques de código asociados para ambos:
<!--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
Tamén che pode interesar ...
O sector naval é unha verdadeira potencia económica mundial, que navega cara a un mercado de 150 millóns...
O pasado luns, o Financial Times anunciou un acordo con OpenAI. FT licencia o seu xornalismo de clase mundial...
Millóns de persoas pagan por servizos de streaming, pagando taxas de subscrición mensuais. É unha opinión común que vostede...
Coveware by Veeam continuará ofrecendo servizos de resposta a incidentes de extorsión cibernética. Coveware ofrecerá capacidades forenses e de remediación...