Aprende Vue.js: CRUD API REST – Backend y Frontend con Proyecto Completo en Laravel, Bootstrap y MySQL

En este tutorial, aprenderemos cómo crear un sistema CRUD (Create, Read, Update, Delete) utilizando Vue JS en el frontend y Laravel en el backend, con una base de datos MySQL. También utilizaremos Bootstrap para diseñar nuestra interfaz de usuario.

1. Crear la base de datos en MySQL:

Lo primero que debemos hacer es crear la base de datos en MySQL. Puedes utilizar phpMyAdmin o cualquier otra herramienta de administración de bases de datos. Puedes ejecutar el siguiente script SQL para crear la base de datos y la tabla que utilizaremos en este tutorial:

CREATE DATABASE vuejs_crud;
USE vuejs_crud;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    email VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

1. Crear el proyecto Laravel:

Para crear el proyecto Laravel, puedes seguir los siguientes pasos:

composer create-project --prefer-dist laravel/laravel vuejs-crud

Esto creará un nuevo proyecto de Laravel llamado vuejs-crud en un directorio llamado vuejs-crud. Luego, puedes configurar la conexión a la base de datos en el archivo .env.

1. Crear el modelo y el controlador en Laravel:

Para crear el modelo y el controlador en Laravel, puedes utilizar el siguiente comando Artisan:

php artisan make:model User -mcr

Esto creará el modelo User y el controlador UserController con los métodos básicos CRUD. Luego, puedes actualizar el archivo de migración en la carpeta database/migrations para que coincida con la estructura de la tabla de la base de datos que creamos anteriormente.

Una vez que hayas actualizado la migración, puedes ejecutar el siguiente comando para migrar la base de datos y crear la tabla users:

php artisan migrate

1. Crear las rutas y los métodos en el controlador:

A continuación, debemos crear las rutas y los métodos en el controlador para que nuestro frontend pueda interactuar con los datos. Puedes agregar las siguientes rutas en el archivo routes/web.php:

Route::get('users', 'UserController@index');
Route::post('users', 'UserController@store');
Route::get('users/{user}', 'UserController@show');
Route::put('users/{user}', 'UserController@update');
Route::delete('users/{user}', 'UserController@destroy');

Luego, puedes implementar los métodos en el controlador UserController para que puedan devolver los datos de la tabla users.

1. Crear el frontend con Vue JS:

Ahora, necesitamos crear el frontend utilizando Vue JS. Puedes crear un nuevo componente en la carpeta resources/js/components para manejar la parte de frontend de nuestra aplicación. Puedes crear un componente Users.vue con el siguiente código:

<template>
    <div>
        <h1>Users</h1>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                    <td>
                        <button @click="editUser(user)">Edit</button>
                        <button @click="deleteUser(user)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            users: []
        };
    },
    mounted() {
        this.getUsers();
    },
    methods: {
        async getUsers() {
            let response = await fetch('/api/users');
            this.users = await response.json();
        },
        async editUser(user) {
            // Implementar lógica para editar usuario
        },
        async deleteUser(user) {
            // Implementar lógica para eliminar usuario
        }
    }
};
</script>

1. Consumir la API REST desde el frontend:

Finalmente, necesitamos consumir la API REST que creamos en Laravel desde nuestro frontend Vue JS. Para hacer esto, podemos utilizar la función fetch en los métodos de nuestro componente Users.vue para realizar peticiones HTTP a las rutas que definimos en Laravel.

Con esto, tienes un sistema CRUD completo utilizando Vue JS, Laravel, MySQL y Bootstrap. Puedes personalizar y ampliar este proyecto según tus necesidades. ¡Espero que este tutorial haya sido útil!