Javascript : Ejemplo de CRUD con ES6

Antes de comenzar con un poco de TypeScript, quisiera compartirles un ejemplo muy simple de las bondades que nos está ofreciendo el EM6 para facilitarnos la vida.

Sobre el ejemplo solo tenemos 5 archivos en total y nos apoyamos de bootstrap para darle una mejor pinta, dentro del ejemplo bueno trate de ser lo más completo para que sea más entendible entre los conceptos a usar pues bueno son : POO, funciones arrow, herencia, import, promise,y fetch para hacer peticiones HTTP.

Para la parte del Back-End , seguiré reutilizando unos servicios montados en PHP donde los podrán ver a detalle aqui.

Nuestra estructura del proyecto queda de la siguiente manera:

Sin más preámbulos les dejo el código y su ejemplo.

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
   <div class="row">
    <div class="col-md-12">
       <div class="text-center">
         <img src="img/logo.png" alt="desarrollohidrocalido">
         <h3>EJEMPLO DE CRUD CON JAVASCRIPT ES6</h3>
       </div>
        <form class="form-horizontal" id="form-edit-client">
          <fieldset>
            <legend>Productos</legend>
            <div class="form-group">
              <label class="col-md-4 control-label" for="txtProducto">Producto</label>  
              <div class="col-md-4">
                <input id="txtProducto" name="txtProducto" type="text" class="form-control input-md">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-4 control-label" for="txtPrecio">Precio</label>
              <div class="col-md-4">
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input id="txtPrecio" name="txtPrecio" class="form-control" type="number">
                </div>
              </div>
            </div>
          </fieldset>
        </form>
        <div class="form-group">
              <label class="col-md-4 control-label" for="btn-save"></label>
              <div class="col-md-4">
                <button id="btnGuardar" class="btn btn-success">Guardar</button>
                <button id="btnEliminar" class="btn btn-danger">Eliminar</button>
              </div>
        </div>
    </div> 
  <div class=col-md-12>
       <legend>Lista de Productos</legend>
      <table class="table table-bordered table-condensed table-hover">
        <thead>
          <tr>
            <td>Producto</td>
            <th>Precio</th>
          </tr>
        </thead>
        <tbody id="tblProductos" class="cursor" >
        </tbody>
      </table>
  </div>
  </div>
</div>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
	<script src="js/main.js" type="module"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>EJEMPLO DE CRUD CON JAVASCRIPT ES6</h3>

</div>

<legend>Productos</legend>

<label class="col-md-4 control-label" for="txtProducto">Producto</label>

</div>

<label class="col-md-4 control-label" for="txtPrecio">Precio</label>

</div>

</fieldset>

</form>

<button id="btnGuardar" class="btn btn-success">Guardar</button>

<button id="btnEliminar" class="btn btn-danger">Eliminar</button>

</div>

<legend>Lista de Productos</legend>

<thead>

<tr>

<td>Producto</td>

<th>Precio</th>

</tr>

</thead>

</tbody>

</table>

</div>

</body>

</html>

main.css

.cursor{
    cursor: pointer !important;
}
body{
    margin-top: 10px;
}

.cursor{

cursor: pointer !important;

}

body{

margin-top: 10px;

}

main.js

'use strict';
import Producto from "./Producto.js";

var oArrayProductos,oProducto,tblProductos,btnGuardar,btnEliminar,txtPrecio,txtProducto,banderaEsEdicion,oModelProductos;

OnInit();

function OnInit(){
    oArrayProductos = "";
    oProducto = new Producto();
    tblProductos = document.getElementById('tblProductos');
    btnGuardar = document.getElementById("btnGuardar");
    btnEliminar = document.getElementById("btnEliminar");
    txtPrecio = document.getElementById("txtPrecio");
    txtPrecio.value = "";
    txtProducto = document.getElementById("txtProducto");
    txtProducto.value = "";
    banderaEsEdicion = false;
    oModelProductos = {
        "cat_prec_id": null,
        "nombre": null,
        "precio":null
    }
    oProducto.obtenerProductos().then((response) => {
        response.cat_precios.forEach(elem => {
            oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
        });      
        tblProductos.innerHTML = oArrayProductos;    
    }).catch(error => {
    
    });
}

tblProductos.addEventListener("click", function(e){
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    let productoSeleccionado = JSON.parse(target.dataset.producto);
    oModelProductos = productoSeleccionado;
    txtPrecio.value = oModelProductos.precio;
    txtProducto.value = oModelProductos.nombre;
    banderaEsEdicion = true;
});

btnGuardar.addEventListener("click", function(evet){
    event.preventDefault();
    if(txtProducto.value && txtPrecio.value){
        if(!banderaEsEdicion){
            // insert
            let producto = {
                "cat_prec_id": null,
                "nombre": txtProducto.value,
                "precio": txtPrecio.value
            }
            oProducto.agregarProducto(producto).then((response) => {
                response.cat_precios.forEach(elem => {
                    oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
                });      
                tblProductos.innerHTML = oArrayProductos;    
            }).catch(error => {
            
            });        
        }else{
            //update
            let producto = {
                "cat_prec_id": oModelProductos.cat_prec_id,
                "nombre": txtProducto.value,
                "precio": txtPrecio.value
            }        
            oProducto.editarProducto(producto).then((response) => {
                response.cat_precios.forEach(elem => {
                    oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
                });      
                tblProductos.innerHTML = oArrayProductos;    
            }).catch(error => {
            
            });
        }
        OnInit();
    }
});

btnEliminar.addEventListener("click", function(evet){
    event.preventDefault();
    if(oModelProductos.cat_prec_id){
        if(confirm(`¿Desea eliminar el producto: ${txtProducto.value} ?`)){

        }
        oProducto.eliminarProducto(oModelProductos.cat_prec_id).then((response) => {
            response.cat_precios.forEach(elem => {
                oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
            });      
            tblProductos.innerHTML = oArrayProductos;    
        }).catch(error => {
        
        });
       
        OnInit();
    }
});

100

101

102

103

'use strict';

import Producto from "./Producto.js";

var oArrayProductos,oProducto,tblProductos,btnGuardar,btnEliminar,txtPrecio,txtProducto,banderaEsEdicion,oModelProductos;

OnInit();

function OnInit(){

oArrayProductos = "";

oProducto = new Producto();

tblProductos = document.getElementById('tblProductos');

btnGuardar = document.getElementById("btnGuardar");

btnEliminar = document.getElementById("btnEliminar");

txtPrecio = document.getElementById("txtPrecio");

txtPrecio.value = "";

txtProducto = document.getElementById("txtProducto");

txtProducto.value = "";

banderaEsEdicion = false;

oModelProductos = {

"cat_prec_id": null,

"nombre": null,

"precio":null

}

oProducto.obtenerProductos().then((response) => {

response.cat_precios.forEach(elem => {

oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;

});

tblProductos.innerHTML = oArrayProductos;

}).catch(error => {

});

}

tblProductos.addEventListener("click", function(e){

e = e || window.event;

var data = [];

var target = e.srcElement || e.target;

while (target && target.nodeName !== "TR") {

target = target.parentNode;

}

let productoSeleccionado = JSON.parse(target.dataset.producto);

oModelProductos = productoSeleccionado;

txtPrecio.value = oModelProductos.precio;

txtProducto.value = oModelProductos.nombre;

banderaEsEdicion = true;

});

btnGuardar.addEventListener("click", function(evet){

event.preventDefault();

if(txtProducto.value && txtPrecio.value){

if(!banderaEsEdicion){

// insert

let producto = {

"cat_prec_id": null,

"nombre": txtProducto.value,

"precio": txtPrecio.value

}

oProducto.agregarProducto(producto).then((response) => {

response.cat_precios.forEach(elem => {

oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;

});

tblProductos.innerHTML = oArrayProductos;

}).catch(error => {

});

}else{

//update

let producto = {

"cat_prec_id": oModelProductos.cat_prec_id,

"nombre": txtProducto.value,

"precio": txtPrecio.value

}

oProducto.editarProducto(producto).then((response) => {

response.cat_precios.forEach(elem => {

oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;

});

tblProductos.innerHTML = oArrayProductos;

}).catch(error => {

});

}

OnInit();

}

});

btnEliminar.addEventListener("click", function(evet){

event.preventDefault();

if(oModelProductos.cat_prec_id){

if(confirm(`¿Desea eliminar el producto: ${txtProducto.value} ?`)){

}

oProducto.eliminarProducto(oModelProductos.cat_prec_id).then((response) => {

response.cat_precios.forEach(elem => {

oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;

});

tblProductos.innerHTML = oArrayProductos;

}).catch(error => {

});

OnInit();

}

});

Producto.js

'use strict';
import Servicio from "./Servicio.js";
export default class Producto extends Servicio{
    constructor(){
        super();
    }
    obtenerProductos(){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios`, {method: 'GET', body: null});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }

    eliminarProducto(_idProducto){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios/${_idProducto}`, {method: 'DELETE', body: null});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }

    editarProducto(_producto){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios/${_producto.cat_prec_id}`, {method: 'PUT', body: JSON.stringify(_producto)});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }

    agregarProducto(_producto){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios`, {method: 'POST', body: JSON.stringify(_producto)});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }


}

'use strict';

import Servicio from "./Servicio.js";

export default class Producto extends Servicio{

constructor(){

super();

}

obtenerProductos(){

var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios`, {method: 'GET', body: null});

return new Promise(function(resolve, reject) {

this.http(myRequest).then((response) => {

resolve(response);

}).catch(error => {

reject(error);

});

}.bind(this));

}

eliminarProducto(_idProducto){

var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios/${_idProducto}`, {method: 'DELETE', body: null});

return new Promise(function(resolve, reject) {

this.http(myRequest).then((response) => {

resolve(response);

}).catch(error => {

reject(error);

});

}.bind(this));

}

editarProducto(_producto){

var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios/${_producto.cat_prec_id}`, {method: 'PUT', body: JSON.stringify(_producto)});

return new Promise(function(resolve, reject) {

this.http(myRequest).then((response) => {

resolve(response);

}).catch(error => {

reject(error);

});

}.bind(this));

}

agregarProducto(_producto){

var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios`, {method: 'POST', body: JSON.stringify(_producto)});

return new Promise(function(resolve, reject) {

this.http(myRequest).then((response) => {

resolve(response);

}).catch(error => {

reject(error);

});

}.bind(this));

}

Servicio.js

'use strict';
export default class Servicio{

    constructor(){
        
    }

    http(_request) {
        return new Promise(function(resolve, reject) {
            fetch(_request)
           .then(response => {
               if (response.status === 200) {
                 return response.json();
               } else {
                 throw new Error('Something went wrong on api server!');
               }
           })
           .then(data => {
               resolve(data);
           }).catch(error => {
             reject(error);
           });
        });
    }
}

'use strict';

export default class Servicio{

constructor(){

}

http(_request) {

return new Promise(function(resolve, reject) {

fetch(_request)

.then(response => {

if (response.status === 200) {

return response.json();

} else {

throw new Error('Something went wrong on api server!');

}

})

.then(data => {

resolve(data);

}).catch(error => {

reject(error);

});

}

Pos aquí podrán ver una pequeña demostración del ejemplo y más abajo el enlace para que lo puedan descargar o bien si lo quieres probar ustedes mismos el enlace directo al demo.

Javascript : Ejemplo de CRUD con ES6

More from my site

1 thought on “Javascript : Ejemplo de CRUD con ES6”

Leave a Reply Cancel reply