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


envio de mail desde el propio mail de usuario autentificado

hola, como puedo enviar los mails desde laravel, pero obteniendo el mail del usuario autentificado y que se envie con el correo electronico de este? Es decir, que si el mail de user autentificado es nada@nada.es, el mail salga desde laravel enviado a traves de esa direccion de correo electronico..gracias...

Como instalar el ckeditor en vuejs?

https://github.com/dangvanthanh/vue-ckeditor2...

Como insertar una imagen en un reporte con Laravel Excel maatwebsite

Necesito ayuda con un reporte que estoy haciendo: para empezar requiero de que mi reporte en excel tenga el logo de la empresa en la parte superior de el reporte, luego tambien nesecito que algunos graficos que genero se muestren en imagen dentro del reporte. ya he tengo reportes con multiples hojas y diversos estilos. lo unico que me faltaria seria poner una o varias imagene...

agregar una columna originada de una variable a un select para hacer un insert

/en php -mysql/ /esto funciona con php , pero no logro hacerlo en laravel query builder/