curso vue laravel crud

ejemplo CRUD Categoria

creamos un componente para categoria, resources/js/components/CategoriaComponent.vue
que manejara todo el modulo crud de Categoria

en resources/js/app.js

hacemos referencia al componente y definimos el tag "categoria" para referrirnos al componente

Vue.component('categoria', require('./components/CategoriaComponent.vue'));


el componente tiene las sgts partes:
template: aqui va todo el html
script: codigo javascript
style: estilos particulares a usarse en este componente

para el CREAR

dentro del template tendremos un boton que abrira una ventana modal con los campos para registrar una nueva categoria

 <button type="button" @click="abrirModal('registrar')" class="btn btn-secondary" >
                            <i class="icon-plus"></i>&nbsp;Nuevo
 </button>

y la estructura de la ventana modal
    <div class="modal fade"  tabindex="-1" :class="{'mostrar':modal}" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
            <h4 class="modal-title" v-text="tituloModal"></h4>
 <input type="text" v-model="nombre" class="form-control" >
     <input type="text" v-model="descripcion" class="form-control" >
      <div v-show="errors.length" class="form-group row">
                                    <div class="col-md-12">
                                        <div  class="alert alert-danger" role="alert" v-for="error in errors" v-text="error">
                                            
                                        </div>
                                    </div>

                                </div>                            
<button type="button" class="btn btn-secondary" @click="cerrarModal()">Cerrar</button>
                            <button type="button" v-if="accion=='guardar'" @click="registrarCategoria()" class="btn btn-primary">Guardar</button>
                                       

entonces en la seccion de script

 export default {
        data(){
            return {
                nombre:'',
                descripcion:'',
                modal:0,
                tituloModal:'',
                accion:'',
                errors:[]
            }
        },
        methods:{
           registrarCategoria(){
                if(!this.validarCategoria()){
                    return;
                }
                let me=this;
                axios.post('/categorias/registrar',{
                    'nombre':me.nombre,
                    'descripcion':me.descripcion
                }).then(function (response) {
                // handle success
                    me.cerrarModal();
                    me.listarCategorias();
                })
                .catch(function (error) {
                // handle error
                    console.log(error);
                });
            },
            abrirModal(accion,data=[]){
                switch(accion){
                    case 'registrar':
                    {
                      this.modal = 1;
                      this.nombre = '';
                      this.descripcion = '';
                      this.tituloModal = 'Registrar nueva categoria';
                      this.accion='guardar';
                      //console.log('registrar');
                      break;
                    }
            
        }

donde:

 modal:0, // indica si se muestra (1) o no (0) la ventana modal
                tituloModal:'', //titulo de la ventana modal, es variable porque se usara el mismo para actualizar
                accion:'', //accion actual, registrar o actualizar
                errors:[] // array con los mensajes de error



para ACTUALIZAR

tenemos un icono de editar por cada registro del listado

<tr v-for="categoria in arrayCategorias.data" :key="categoria.id">
                                    <td>
                                        <button type="button" class="btn btn-warning btn-sm"
                                        @click="abrirModal('actualizar',categoria)" >
                                          <i class="icon-pencil"></i>
                                        </button> &nbsp;

en este caso le enviamos los datos de categoria actual para llenar los campos del formulario de la ventana modal.

y en la ventana modal cuando se abra el boton dira actualizar y llamara a actualizarCAtegoria
 <button type="button" v-if="accion=='actualizar'" @click="actualizarCategoria()"class="btn btn-primary">Actualizar</button>


abrirModal(accion,data=[]){
                switch(accion){
                    case 'actualizar':
                    {
                      this.modal = 1;
                      this.nombre = data['nombre'];
                      this.descripcion = data['descripcion'];
                      this.tituloModal = 'Actualizar categoria';
                      this.categoria_id = data['id'];
                      
                      this.accion='actualizar';
                      //console.log('registrar');
                      break;
                    }
                }
            }
 actualizarCategoria(){
                if(!this.validarCategoria()){
                    return;
                }
                let me=this;
                axios.put('/categorias/actualizar',{
                    'nombre':me.nombre,
                    'descripcion':me.descripcion,
                    'id':me.categoria_id,

                }).then(function (response) {
                // handle success
                    me.cerrarModal();
                    me.listarCategorias();
                })
                .catch(function (error) {
                // handle error
                    console.log(error);
                });
            },


en nuestro archivo de rutas routes/web.php

tenemos

Route::get('/categorias', ['uses'=>'CategoriaController@index']);
Route::post('/categorias/registrar', ['uses'=>'CategoriaController@store']);
Route::put('/categorias/actualizar', ['uses'=>'CategoriaController@update']);

entonces, el problema es que si desde la url apuntamos a esas rutas
por ejemplo http://localhost:8000/categorias

escupira en el browser en forma de json la categorias de la tabla.
entonces le vamos a agregar una minima seguridad, haciendo que cada uno de los metodos del controller solo respondan si la peticion fue hecha a traves de una llamada ajax. de lo contrario se redirigira a la pagina raiz

en la primera linea del cuerpo de cada metodo agregar:

if(!$request->ajax()) return redirect("/");





No hay comentarios:

Publicar un comentario

linux ubuntu mint actualizar chrome

 desde una terminal: $ sudo apt update $ sudo apt install google-chrome-stable