bienes

Vue y Laravel: crea una aplicación de una sola página

Laravel es uno de los marcos PHP más populares utilizados por los desarrolladores, veamos hoy cómo hacer una aplicación de una sola página con VueJs.

Antes del lanzamiento de Laravel UI, una de sus características principales era el soporte previodefinoche para Vue.js de Laravel v5.3 a v6. Vue es un marco de interfaz de JavaScript moderno que se utiliza para crear interfaces de usuario.

¿Por qué instalar Laravel y Vue juntos?

Estos son algunos de los principales beneficios de usar Laravel con Vue para crear un flujo de trabajo completo para sus proyectos:

El código fuente se combina en un solo proyecto, en lugar de tener proyectos separados para el backend y el frontend
La instalación y configuración son sencillas.
Una sola distribución puede administrar ambos marcos juntos

¿Qué es un BALNEARIO? (solicitud de una sola página)

Una aplicación de una sola página (SPA para abreviar) carga dinámicamente nuevos datos desde un servidor web a una página web sin tener que actualizar toda la página.

Ejemplos de sitios web populares que usan SPA incluyen gmail.com y youtube.com; en otras palabras, los SPA son en gran medida ubicuos. La mayoría de los paneles de administración con los que puede trabajar a diario están creados con SPA.

Ventajas de los SPA:

La experiencia de usuario es más flexible.
Caché de datos en el navegador
Tiempo de carga rápido

Desventajas de los SPA:

Puede comprometer el SEO (optimización de motores de búsqueda)
Posibles problemas de seguridad
Consume muchos recursos del navegador.

Configuración del proyecto en Laravel

Esta publicación demostrará cómo desarrollar una aplicación de tareas pendientes que permita a los usuarios registrarse para obtener una cuenta y agregar tareas.

Para este tutorial se utiliza Laravel 9, que requiere PHP 8.1 y Vue 3; también necesitamos tener PHP y NGINX instalados.

Comenzamos con el siguiente comando:

composer create-project --prefer-dist laravel/laravel laravel-vue-combo

A continuación, instalaremos las dependencias de JavaScript.

npm install

Necesitamos instalar algunos paquetes antes de poder agregar Vue a nuestro proyecto.

Además, se debe instalar plugin-vue, ya que Laravel 9 se envía con Vite, en lugar de webpack-mix, que era el paquete anterior de Laravel para JavaScript. Hagámoslo ahora:

npm install vue@next vue-loader@next @vitejs/plugin-vue

Abre el archivo llamado vite.config.js y añadir vue() a la 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',
        ]),
    ],
});

Edite el archivo app.js y el fragmento de código de arranque para la aplicación Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

Crea un archivo llamado App.vue y agrega lo siguiente:

<template>
  <h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
  setup() {

   }
}
</script>

Finalmente, abre el archivo. welcome.blade.php ubicado en la carpeta resources/views y agrega lo siguiente:

<!DOCTYPE html>
<html>
<head>
 ....
        @vite('resources/css/app.css')
</head>
<body>
  <div id="app"></div>
  @vite('resources/js/app.js')
</body>
</html>

Para obtener una vista previa de nuestra aplicación, debemos iniciar nuestra aplicación Vue y el servidor Laravel en dos terminales/líneas de comando diferentes:

npm run dev


php artisan serve

Para crear nuestra aplicación de tareas pendientes, necesitamos crear otros archivos. Vue creará varias páginas, principalmente:

acceso
para el registro
una página de inicio

Para comunicarnos con los puntos finales de Laravel, necesitamos instalar Axios:

npm install axios

enrutamiento vue

usando el paquete vue-router, hay varias estrategias de enrutamiento que se pueden usar en Vue; Estas estrategias también se conocen como history models.

Cuando un usuario solicita route como http://localhost:8000/home, que devolverá un error 404 cuando se actualice la página, podemos confiar en Laravel para detectar cualquier ruta alternativa y luego servir el archivo Blade que contiene nuestra aplicación.

Por esta razón, usaremos el 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')
        }
    ],
})

En este ejemplo manejamos la autenticación usando Santuario de Laravel, luego el token se guarda en el almacenamiento local.

Para que otras solicitudes tengan éxito, el token se fusiona con el encabezado, lo que permitirá que Laravel identifique al usuario que realiza la solicitud.

Aquí están los 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

Usted también puede estar interesado en ...