Scribd
Upload
28 views11 pages

CRUD MongoDB - Node - Js

CRUD MongoDB _ Node.js

Uploaded by

rac.software.2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views11 pages

CRUD MongoDB - Node - Js

CRUD MongoDB _ Node.js

Uploaded by

rac.software.2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

CRUD MongoDB

Realizaremos las operaciones de leer, crear, editar y eliminar documentos utilizando MongoDB y
Express.

Leer
En la sección anterior conocimos como conectarnos a mongoDB y leer documentos, por ende
utilizaremos el mismo proyecto, si gustas lo puedes revisar aquí:

bodyParser
Tenemos que instalar para utilizar x-www-form-urlencoded

https://www.npmjs.com/package/body-parser

npm i body-parser

https://www.npmjs.com/package/body-parser#expressconnect-top-level-generic

const express = require('express');


const bodyParser = require('body-parser')
const app = express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

Crear
Ruta

router.get('/crear', (req, res) => {


res.render('crear')
})

Formulario

<%- include("template/cabecera", {tituloWeb: 'Mascotas'}) %>

<div class="container">

<h1>Crear nueva mascota</h1>

<form action="/mascotas" class="my-2" method="POST">

<input
type="text"
placeholder="Ingrese Nombre"
class="form-control my-2"
name="nombre"
>
<input
type="text"
placeholder="Ingrese Descripción"
class="form-control my-2"
name="descripcion"
>

<button
type="submit"
class="btn btn-dark btn-block"
>
Agregar
</button>

</form>

</div>

<%- include("template/footer") %>

POST

router.post('/', async (req, res) => {


const body = req.body
console.log(body)
})

GUARDAR Método #1: https://mongoosejs.com/docs/models.html

router.post('/', async (req, res) => {


const body = req.body
console.log(body)
try {
const mascotaDB = new Mascota(body)
await mascotaDB.save()
res.redirect('/mascotas')
} catch (error) {
console.log('error', error)
}
})

GUARDAR Método #2: https://mongoosejs.com/docs/api.html#model_Model.create

router.post('/', async (req, res) => {


const body = req.body
console.log(body)
try {
await Mascota.create(body)
res.redirect('/mascotas')
} catch (error) {
console.log('error', error)
}
})

Get único documento


Creamos el botón para viajar a la ruta detalle:

<tr>
<th scope="row"><%= mascota.id %></th>
<td><%= mascota.nombre %> </td>
<td><%= mascota.descripcion %></td>
<td>
<a
class="btn btn-warning btn-sm"
href="mascotas/<%= mascota.id %>"
>
Editar
</a>
</td>
</tr>

Creamos la ruta con su respectivo render:

router.get('/:id', async(req, res) => {


const id = req.params.id
try {
const mascotaDB = await Mascota.findOne({ _id: id })
console.log(mascotaDB)
res.render('detalle', {
mascota: mascotaDB,
error: false
})
} catch (error) {
console.log('erroooooooooorrr', error)
res.render('detalle', {
error: true,
mensaje: 'No se encuentra el documento...'
})
}
})

Pintamos el detalle del documento:


<%- include("template/cabecera", {tituloWeb: 'Mascotas'}) %>

<div class="container">

<h1>Detalle Mascota</h1>

<% if (error) { %>


<%= mensaje %>
<a
href="/mascotas"
class="btn btn-dark btn-block my-2"
>
Volver
</a>
<% } %>

<% if (!error) { %>


<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Descripción</th>
<th scope="col">Acción</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><%= mascota.id %></th>
<td><%= mascota.nombre %> </td>
<td><%= mascota.descripcion %></td>
<td>
<button
class="btn btn-danger btn-sm"
data-id="<%= mascota.id %>"
>
Eliminar
</button>
</td>
</tr>
</tbody>
</table>
<% } %>

</div>

<%- include("template/footer") %>

Delete documento

<button
class="btn btn-danger btn-sm"
data-id="<%= mascota.id %>"
>
Eliminar
</button>

Creamos la lógica del botón eliminar:

<script>
// onclick vs addEventListener
// https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick#:~:text=Essen

const btnEliminar = document.querySelector('.btn-danger')


btnEliminar.addEventListener('click', async() => {
console.log(btnEliminar.dataset.id)
try {
// https://developer.mozilla.org/es/docs/Web/API/HTMLElement/dataset
const data = await fetch(`/mascotas/${btnEliminar.dataset.id}`, {
method: 'delete'
})
const res = await data.json()
console.log(res)
if(res.estado){
window.location.href = '/mascotas'
}else{
console.log(res)
}
} catch (error) {
console.log(error)
}
})

</script>

Creamos la ruta correspondiente:

router.delete('/:id', async (req, res) => {


const id = req.params.id;
console.log('id desde backend', id)
try {

const mascotaDB = await Mascota.findByIdAndDelete({ _id: id });


console.log(mascotaDB)

// https://stackoverflow.com/questions/27202075/expressjs-res-redirect-not-worki
// res.redirect('/mascotas')
if (!mascotaDB) {
res.json({
estado: false,
mensaje: 'No se puede eliminar'
})
} else {
res.json({
estado: true,
mensaje: 'eliminado!'
})
}

} catch (error) {
console.log(error)
}
})

Editar documento
Detalle.ejs

<% if (!error) { %>


<form id="editar" data-id="<%= mascota.id %>">
<input
type="text"
value="<%= mascota.nombre %>"
class="form-control my-2"
name="nombre"
id="nombreInput"
>
<input
type="text"
value="<%= mascota.descripcion %>"
class="form-control my-2"
name="descripcion"
id="descripcionInput"
>
<button
class="btn btn-warning btn-sm"
type="submit"
>
Editar
</button>
</form>
<hr>
<button
class="btn btn-danger btn-sm"
data-id="<%= mascota.id %>"
>
Eliminar
</button>
<% } %>

const formEditar = document.querySelector('#editar');

formEditar.addEventListener('submit', async(e) => {


e.preventDefault()
// Alternativa #1 (capturar input)
const nombre = formEditar.elements['nombre'].value
// Alternativa #2 (capturar input)
const descripcion = document.querySelector('#descripcionInput').value
const id = formEditar.dataset.id

const data = await fetch(`/mascotas/${id}`, {


method: 'PUT',
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify({nombre, descripcion})
})

const res = await data.json()

if(res.estado){
window.location.href = '/mascotas'
}else{
console.log(res)
}

})

router.put('/:id', async (req, res) => {


const id = req.params.id;
const body = req.body;

console.log(id)
console.log('body', body)

try {
const mascotaDB = await Mascota.findByIdAndUpdate(
id, body, { useFindAndModify: false }
)
console.log(mascotaDB)
res.json({
estado: true,
mensaje: 'Mascota editada'
})
} catch (error) {
console.log(error)
res.json({
estado: false,
mensaje: 'Mascota falla'
})
}
})

You might also like