#07 | CRUD VUE NodeJS MySQL | Curso Vue JS intermedio y avanzado [ En Español ]

En esta ocacion crearemos un crud con vue, que prodra listar, crear, editar y eliminar items de una base de datos MySQL a traves de una rest api diseñada en NodeJS con Express.
Crearemos componentes para listar los registros en una tabla y para generar un popup donde crearemos y editaremos los registros.
Instalaremos el paquete Vue-Alertify para generar notificaciones a los usuarios.
Curso de backend NodeJS, Express, MySQL: • #1 Curso de Nodejs: Re...
#Vue #Vuetify #NodeJS

[@jhanlopez3864]

Amigo , excelente tus videos , excelente trabajo , muchas gracias , sigue así !!!

[@cesararangoweb]

Muchas gracias Jhan por tu apoyo.

[@tecno_art_designe]

hola excelente a pesar de que tuve errores con eliminar e insertar y el cors pude solucionarlo gracias por contribuir con estas clases ,, me di cuenta de que tenia que prestar atención con los espacios que hay entre las comillas en los códigos ya que me salia errores al insertar, eliminar, editar. El cors lo solucione con una extencion en google .... mucha gracias profe

[@tecno_art_designe]

Hola con respecto al cors no es la manera correcta hacerlo con una extensión de google ..crome si puedes explicar como insertar el cors en este caso gracias 👏

[@cesararangoweb]

Hola Code Room, los cors son un mecanismo de control de acceso y se configuran desde el backend, veo que has empezado con el curso de nodejs y express. Ahí encontraras la solución a tu dificultad. Quedo atento a cualquier duda.

[@cesararangoweb]

Es muy importante que sigas el paso a paso de cada uno de los videos, así podrás sacar adelante cada uno de los proyectos que propongo.

[@tecno_art_designe]

brot saludos excelente....... hice tu ejercicio y funciono perfecto solo tuve algunos errores y los corregí y pude correrlo

[@cesararangoweb]

Hola video room, muchas gracias por tu apoyo

[@trucosprogramacion]

Siguiendo tu ejemplo conseguir hacerlo para 2 componentes en v-navigation-drawer y el v-app , logre realizar el proceso enviar el evento al hacer click en el v-app-bar-nav-icon se habre y cierra el menu pero si hago click fuera de la pantalla no me cierra ese menu temporal

[@cesararangoweb]

Hola césar, muchas gracias por tu apoyo. Revisare el tema.

[@jimmypedraza433]

y por que utilizas el método PUT y no DELETE al momento de borrar no entiendo me explicas?

[@cesararangoweb]

Hola Jimmy, gracias por tu comentario: el método put se utiliza para crear o modificar un registro, el método delete se utiliza para eliminar un registro identificado por su id, naturalmente tienes razón debí utilizar el método delete en ves de put para ejemplarizar la eliminación de un registro, te agradezco por la aclaración.

[@jimmypedraza433]

@@cesararangoweb como sería en ese caso estuve tratando de hacerlo pero no pude aplicarlo con el método Delete

[@trucosprogramacion]

Excelente video , estuve viendo y repitiendo una y otra ves y no logo enviar los datos como objetos a mi API , solo puedo listar pero no hacer las demas operaciones
Alguna consejo?

[@cesararangoweb]

Hola César, muchas gracias por tu apoyo, ¿que error te aparece?, podrías abrir la consola y verificar que no esta corriendo bien, ¿Estas utilizando Vue.js devtools?

[@trucosprogramacion]

@@cesararangoweb , si defino el parametro en la url si funciona pero si lo envio como objeto no logro hacer la operacion , adicional que en la consola sale Unexpected end of JSON input

[@cesararangoweb]

Hola César, a ok, es por que en tu backend debes especificarle que estas trabajando con json,
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
Estas siguiendo la lista de preproducción de backend en nodejs con express que tengo en el canal?
th-cam.com/video/F5oOq-FWUl4/w-d-xo.html

[@trucosprogramacion]

@@cesararangoweb , Ya resolví el metodo elimitar , ahora voy por el editar y el agregar, que supongo es lo mismo , el problema estaba que en mi backend lo realize con .net core api y olvide poner [FromData] indicandole que debe recibir parametros.

[@cesararangoweb]

Excelente que hallas encontrado el error, quedó atento.

[@juanshotlc]

Estoy tratado de enviar los objetos pero no logro enviarlo , mi api la tengo realizada en php

[@cesararangoweb]

Hola juan, cual es el error, no se envía el objeto desde vue?

[@juanshotlc]

@@cesararangoweb El json no se envía cuando verifico en consola dice array (0) Error 400 baq resquest

[@juanshotlc]

@@cesararangoweb desde vue a la api de php no lo envía y hago un console.log en vue y esta recibiendo los datos del formulario ..

[@JulioMarichales]

como creaste la api compañero? ahi me perdi

[@cesararangoweb]

Hola Julio, aquí te dejo el link th-cam.com/play/PLnfMiP0v59hAUA6QJNKBwKJyq5_gFkCYL.html

[@juancarlospresigamontoya]

Buenos días cesar, estoy accediendo a la ruta de clientes y el sistema me genera un error del CORS, el error es el siguiente:
Access to fetch at 'localhost:4000/api/clientes' from origin 'localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
como puedo habilitar la ruta?

[@cesararangoweb]

Hola juan carlos, al parecer te falta configurar el cors de tu backend para que acepte las solicitudes desde cualquier fuente:
var corsOptions = {
origin: '*',
optionsSuccessStatus: 200
}
app.use(cors(corsOptions));
o parametrizarlo para que acepte la url de tu frontend.

[@juancarlospresigamontoya]

@@cesararangoweb buenos días, el backend es el que tienes en los videos, seguí paso a paso los videos y el backend funciona, pero no he logrado identificar en que punto colocar la instrucción para habilitar el cors y me pueda funcionar el frontend

[@cesararangoweb]

el archivo app.js deberías tenerlo así:
const express = require('express');
const cors = require('cors');
const morgan = require('morgan');
const config = require('./config');
const clientes = require('./modulos/clientes/rutas')
const usuarios = require('./modulos/usuarios/rutas')
const auth = require('./modulos/auth/rutas')
const error = require('./red/errors');
const app = express();
var corsOptions = {
origin: '*',
optionsSuccessStatus: 200
}
//Middleware
app.use(cors(corsOptions));
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: true}));
//configuracion
app.set('port', config.app.port);
//rutas
app.use('/api/clientes', clientes);
app.use('/api/usuarios', usuarios);
app.use('/api/auth', auth);
app.use(error);
module.exports = app;

[@tecno_art_designe]

​@@cesararangoweb cesar gracias coloque la configuración de cors asi en app.js y me funciono
const cors = require('cors');
y app.use(cors());
solo que en el codigo q ecribiste const auth = require('./modulos/auth/rutas') no esta creada auth en el proyecto gracias saludos

[@tecno_art_designe]

const cors = require('cors');
app.use(cors());