Scribd
Upload
17 views

CRUD MongoDB - Node - Js

CRUD MongoDB _ Node.js

Uploaded by

rac.software.2023
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

CRUD MongoDB - Node - Js

CRUD MongoDB _ Node.js

Uploaded by

rac.software.2023
Copyright
© © All Rights Reserved
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