Introducción LARAVEL y VUE - uso de AJAX

En este video vamos hacer una pequeña introducción de la conexión de VUEjs y Laravel con el principal objetivo de mostrarte mediante un ejemplo práctico lo sencillo que es trabajar con ambas tecnologías utilizando incluso una base de datos interna para la extracción y presentación de sus datos.

Inicia sesión para poder registrar las lecciones que has completado Login

Primero que nada, es necesario crear un proyecto en Laravel desde cero y del código explicado en el ejemplo anterior, copiar las líneas de conexión por CDN de bootstrap, vue y axios, para pegarlas en la vista de nuestro nuevo proyecto.

A parte de eso vamos a utilizar el enlace a un archivo javascript llamado app.js situado en la ruta public/js/app.js de nuestro proyecto. En este archivo colocaremos todo el código vue para un mejor orden y comprensión de nuestro ejemplo.

Línea de conexión con el archivo app.js

<script src="{{ asset('js/app.js') }}"></script>

En ejemplos anteriores se había utilizado la sintaxis {{ item }} para mostrar los datos obtenidos por medio de vue en la vista. Al utilizar Laravel su motor plantillas Blade genera un conflicto con la sintaxis de Vue por lo cual a las llaves tendremos que anteponer un @ quedando de la siguiente forma: @{{ ítem }}.

Para crear la conexión de Vue con Laravel hacemos uso del ejemplo anterior y pegamos el código vue en el archivo app.js.

Luego de configurar los parámetros de conexión a la base de datos necesitamos crear una nueva ruta de tipo GET en el archivo routes/web.php de nuestro proyecto. En esta ruta por motivos de facilidad para la explicación del ejemplo realizamos ahí mismo la consulta a la BD utilizando el modelo o entidad User que se debe importar en la parte superior del archivo routes quedando de la siguiente forma:

<?php

use App\User;

Route::get('users', function ()  {
    $users = User::orderBy('id', 'DESC')->take(5)->get();
    return $users;
});

Con la creación de un seeder para la tabla Users de nuestra base de datos, la consulta realizada simplemente retornará un total de 5 registros ordenados de forma descendente y en el formato necesario para poderlos manipular con el código vue.

Archivo app.js

var urlUsers = 'users';

new Vue({
    el: '#main',
    created: function() {
        this.getUsers();
    },
    data: {
        lists: []
    },
    methods: {
        getUsers: function() {
            axios.get(urlUsers).then(response => {
                this.lists = response.data
            });
        }
    }
});

En el código del archivo app.js tenemos la variable urlUsers que en ejemplos anteriores apuntaba a una ruta de una API externa para la obtención de los datos. En este caso se tiene que asignar la ruta de tipo GET (users) creada con la respectiva consulta a la base de datos y así poder obtener los nombres y correos de los usuarios almacenados por el seeder.

Para la correcta presentación de los datos obtenidos en la vista utilizamos el siguiente código:

<h1>VUEjs y Laravel</h1>
<ul class="list-group">
    <li v-for="item in lists" class="list-group-item">                      
        @{{ item.name }} <strong>@{{ item.email }}</strong>
    </li>
</ul>

Repasando: Nuestro sistema Vue se conecta al código php que a su vez se conecta a la base de datos para extraer la información y obtener una respuesta, según la respuesta vue sabe que debe hacer si mostrar un mensaje, validar o presentar un error.

Con este video espero que te haya quedado un poco más claro el funcionamiento y la fácil integración de estas dos tecnologías como lo son Vue y Laravel y así dar mejor dinamismo a nuestras futuras páginas o sistemas web.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Error en modificacion de datos

Hola, Estoy teniendo un error con laravel (5.7) y no le puedo encontrar la vuelta.

Mi problema:

Tengo una lista de usuarios la cual tiene 3 botones (ver, activar y eliminar) mi problema viene con el boton activar el cual activa o desactiva un usuario segun su estado ( si esta activado lo desactiva y si esta desactivado lo activa), pero cuando presiono el boton me tira ...

Como crear un array y almacenarlo en una Base de Datos

Necesito ayuda con un problema, estoy haciendo un tipo de sistema de facturación y los servicios que se van a facturar los quiero guardar en un array, luego éste array almacenarlo en una sola columna de la base de datos. No tengo mucho conocimientos de Arrays. Pero ya había trabajado en una tienda virtual y la parte del carrito la hacía así, con un array.

El punto es qu...

owen-it / laravel-auditing

saludos a la comunidad necesitaría de su ayuda con esta librería   ooowen-it / laravel-auditing para un proyecto en laravel de echo encontré material pero no me es fácil entenderlo (auditoria de usuarios este es link https://pusher.com/tutorials/realtime-audit-trail-laravel me ayudaría mucho un videotutorial gracias!...

No puedo instalar el paquete de shinobi

soy nuevo en esto , estoy viendo su curso de roles y permisos en su canal de youtube, necesito instalar el paquete de shinobi pero no se puede, me sale lo siguiente:

Problem 1 - Installation request for caffeinated/shinobi ^3.3 -> satisfiable by caffeinated/shinobi[v3.3]. - Conclusion: remove laravel/framework v5.8.4 - Conclusion: don't install laravel/fr...