Guardar datos con LARAVEL y VUEjs – Método STORE

↑ Me gusta (0)

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para hacer el al llamado al método store() del API creada en Laravel. En el video anterior nos enfocamos únicamente en el diseño de una ventana flotante en la que vamos a colocar nuestro formulario, ahora tenemos que darle vida a todo el proceso de creación de un nuevo registro o tarea utilizando las tecnologías de Vue y Laravel.

Configuración del modelo

Nos dirigimos al archivo o modelo Task ubicado en la siguiente ruta de nuestro proyecto app\Task.php. Aquí vamos a configurar los campos necesarios de la tabla para que sean almacenados en la base de datos. Para esta práctica únicamente vamos a colocar el campo keep dentro del arreglo $fillable, que básicamente almacenará todo lo escrito en una caja de texto del formulario.

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Task extends Model
{
    protected $fillable = ['keep'];
}

El array $fillable te permite especificar qué campos sí quieres que se guarden en la base de datos. Es decir, se almacenan únicamente los especificados en este array.

Configuración del controlador

El paso siguiente es colocar todo el código necesario dentro del método store() de nuestro controlador ubicado en app\Http\Controllers\TaskController.php, este método es el encargado de guardar los registros.

El método va a recibir todos los datos enviados del formulario y los coloca en la variable $request.

  1. Utilizando la función validate() de Laravel, validamos que efectivamente se hayan enviado datos, y con el uso de la regla required definimos que este campo sea requerido u obligatorio.
  2. Luego utilizando eloquent y el modelo Task configuramos su función created a la cual le pasamos como parámetro toda la información recibida en la variable $request para que se conecte a la base de datos y cree el nuevo registro.
<?php
public function store(Request $request)
{
    $this->validate($request, [
        'keep' => 'required'
    ]);
    Task::create($request->all());
    return;
}

Creación del Formulario

A continuación, vamos utilizar la vista modal creada en el video anterior, es decir nos ubicamos en resources\views\create.blade.php para colocar la configuración de nuestro formulario y los elementos necesarios.

  1. Primero que nada, utilizando las etiqueta <form></form> encerramos todos los elementos o divs contenedores de la práctica anterior. Con esto hacemos de esta vista un formulario y como primer parámetro le indicamos que se usará un método POST para el envío de los datos, como segundo parámetro utilizamos la directiva de Vue v-on:submit.prevent="createKeep" que llamará al método createKeep al presionar el botón “Guardar” de tipo submit del formulario.
  2. Dentro del div modal-body agregamos los siguientes elementos html:
  • Un label con el texto Nueva Tarea.
  • Una caja de texto o input text con la directiva v-model="newKeep" para crear un modelo con la variable newKeep que almacenará el texto ingresado y por medio de ella conectarse al código.
  • Añadimos una etiqueta span para presentar un mensaje de error obtenido por la directiva v-for="error in errors" en caso de haberlo.
<form method="POST" v-on:submit.prevent="createKeep">
    ….
        <div class="modal-body">
            <label for="keep">Nueva Tarea</label>
            <input type="text" name="keep" class="form-control" v-model="newKeep">
            <span v-for="error in errors" class="text-danger">@{{ error }}</span>
        </div>
    ….
</form>

Código Vue

Finalmente ha llegado el turno de Vue, nos dirigimos a nuestro archivo de código js resources\assets\js\app.js que hemos venido utilizando y configuramos lo siguiente:

  1. Creamos una nueva función llamada createKeep en la cual vamos a realizar todo el proceso de creación, captura de errores y presentación de mensajes.
  2. Utilizamos una variable url en la cual almacenamos la ruta de creación.
  3. Por medio de axios definimos su método post que va a recibir como primer dato la ruta almacenada en la variable url y como segundo dato un parámetro que va ser la variable modelo newKeep que si recordamos es la que contiene la información ingresada en la caja de texto de nuestro formulario.
  4. Dentro de la llave data: {} de Vue, añadimos dos nuevas variables vacías, la primera newKeep: '', y la otra errors: [].
  5. Volviendo a la función createKeep como respuesta al proceso de creación vamos a realizar lo siguiente:
  • Hacemos un llamado a la función de listar todos los registros getKeeps() para actualizar la lista con el nuevo registro almacenado.
  • Limpiamos la caja de texto por medio de la variable modelo newKeep y asignándole un valor vacío.
  • Utilizamos la variable errors blanqueamos todos los errores y la dejamos como una array vacío.
  • Utilizando Jquery y el nombre de la ventana modal create ocultamos la flotante.
  • Presentamos un mensaje de confirmación de la acción con el uso de la tecnología de toastr.
  1. Finalmente, si llega a ocurrir un error en el proceso, dentro de la propiedad catch() de nuestra función asignamos un mensaje cualquiera a la variable errors conectada a la etiqueta de nuestro formulario.
<script>
createKeep: function() {
    var url = 'tasks';
    axios.post(url, {
        keep: this.newKeep
    }).then(response => {
        this.getKeeps();
        this.newKeep = '';
        this.errors = [];
        $('#create').modal('hide');
        toastr.success('Nueva tarea creada con éxito');
    }).catch(error => {
        this.errors = 'Corrija para poder crear con éxito'
    });
}
</script>

En la consola, corremos de nuevo el comando de compilación npm run dev para agregar las nuevas modificaciones de nuestro archivo app.js a los nuestros archivos unificados o compilados.

Con esto ya podemos probar la práctica de hoy y verás que si ingresamos nuevas tareas están se van a ir añadiendo muy dinámicamente. Esperamos que estás prácticas en realidad te estén gustando y logres aprender mucho de estos videos, hoy básicamente hemos visto como guardar registros en la base de datos utilizando Vue y Laravel.

Italo Morales F. Italo Morales F. 3,230.00 XP

1

Tecnologías Webpack y Laravel Mix

Bienvenido a una de las series más esperadas y solicitadas en Rimorsoft, y no es para menos. La mezcla de dos grandes frameworks como lo son...

2

Controllers, Routes, Views, Database para el CRUD

En este video vamos a comenzar formalmente con la preparación del proyecto para realizar el CRUD utilizando VUE y Laravel. Se realiza la cre...

3

Conexión VUEjs y Laravel - API

En este video vamos a crear el código necesario para iniciar el API, como primer paso utilizaremos datos de ejemplo (seeder) y configuramos...

4

Lista de datos con Laravel y VUEjs

En este video veremos realmente la integración de Laravel y Vue, el objetivo será crear el diseño con su tablas, los botones, el título y la...

5

Eliminar registros con VUEjs y LARAVEL

Ha llegado la hora de adentrarnos un poco más en el funcionamiento del CRUD y en este video vamos a trabajar con la letra D, es deci...

6

Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito...

7

Formulario de creación con ventana Modal - Laravel y Vuejs

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una vent...

8

Guardar datos con LARAVEL y VUEjs – Método STORE

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para h...

9

Formulario para Editar con LARAVEL y VUEjs

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva vent...

10

Actualizar registros con LARAVEL y VUEjs

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario p...

11

X-XSRF-TOKEN LARAVEL, VUE y AXIOS

Este video será el Bonus número 1 dentro de esta serie y en el cual vamos aprender un poco sobre seguridad y como Laravel nos ayuda en ese s...

12

Paginación usando VUEjs y LARAVEL - Parte 1

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista,...

13

Paginación VUEjs y LARAVEL Computed Property - Parte 2

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándo...

14

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos...

15

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 4 (FINAL)

Video Bonus número 5, donde vamos a continuar básicamente con la creación del html o diseño de la paginación, utilizando los métodos y varia...

16

CRUD en Laravel y VUEjs - Despedida

Último video y despedida de la serie Crud en Laravel y Vuejs, corto resumen de todo lo visto a lo largo de los videos y corrección d...

Libro de Laravel Engineer Compra el libro Laravel Engineer