Finalmente entendí cómo trabajar con Node, Express y MongoDB. Quiero escribir un tutorial completo para que no tengas que pasar por el mismo dolor de cabeza que yo pasé.
CRUD, Express y MongoDB
CRUD, Express y MongoDB son grandes palabras para una persona que nunca ha tocado ninguna programación del lado del servidor en su vida. Presentemos rápidamente cuáles son antes de sumergirnos en el tutorial.
Expreso es un marco para la creación de aplicaciones web en la parte superior de Node.js . Simplifica el proceso de creación del servidor que ya está disponible en Node. En caso de que se lo esté preguntando, Node le permite usar JavaScript como su idioma del lado del servidor.
MongoDB es una base de datos . Este es el lugar donde almacena información para sus sitios web (o aplicaciones).
CRUD es un acrónimo de Create, Read, Update y Delete . Se trata de un conjunto de operaciones que obtenemos servidores para ejecutar (POST
,GET
,PUT
yDELETE
las solicitudes respectivamente). Esto es lo que hace cada operación:
- Crear (POST) : hacer algo
- Leer (OBTENER) - Obtener algo
- Actualizar (PUT) : cambiar algo
- Eliminar (BORRAR) : eliminar algo
POST
, GET
, PUT
, Y DELETE
las solicitudes construyamos API Rest .
Si juntamos CRUD, Express y MongoDB en un solo diagrama, este es el aspecto que tendría:

¿CRUD, Express y MongoDB tienen más sentido para usted ahora?
Excelente. Vamonos.
Construiremos juntos una aplicación sencilla
Creemos una aplicación simple que te permita rastrear una lista de citas de personajes de Star Wars. Así es como se ve:

Gratis gratis para ver la demostración antes de continuar con este tutorial.
¡Este artículo es LARGO! Recuerde tomar el código fuente dejando su nombre y dirección de correo electrónico en este formulario . También te enviaré este artículo en PDF para que puedas leerlo en tu tiempo libre.
Por cierto, no me voy a centrar en los estilos, ya que nos centramos en aprender Crud, Express y MongoDB en este tutorial.
Prerrequisitos
Necesitará dos cosas para comenzar con este tutorial:
- No tiene miedo de escribir comandos en una línea de comandos. Si tiene miedo, utilice este artículo para superarlo .
- Necesitas tener Node instalado.
Para verificar si tiene Node instalado, abra su Línea de Comando y ejecute el siguiente código:

Debería obtener un número de versión si tiene Node instalado. Si no lo hace, puede instalar Node descargando el instalador del sitio web de Node o descargándolo a través de administradores de paquetes como Homebrew (Mac) y Chocolatey (Windows).
Empezando
Comience creando una carpeta para este proyecto. No dudes en llamarlo como quieras. Una vez que haya creado la carpeta, navegue hacia ella con la Terminal y ejecute npm init
.
npm init
crea un package.json
archivo que le ayuda a administrar las dependencias (que instalaremos a medida que avancemos en el tutorial).

Simplemente presione enter a través de todo lo que aparece. Hablaré sobre los que necesita saber a medida que avanzamos.
Ejecutando Node por primera vez en tu vida
La forma más sencilla de utilizar el nodo es ejecutar el node
comando y especificar una ruta a un archivo. Creemos un archivo llamado server.js
para ejecutar el nodo.
A continuación, ponga esta console.log
declaración en server.js
. Esto nos permite saber si Node se está ejecutando correctamente.
Ahora, ejecute node server.js
su línea de comando y debería ver esto:

Excelente. El nodo funciona. El siguiente paso es aprender a usar Express.
Usando Express
Primero, tenemos que instalar Express. Podemos hacer esto ejecutando el npm install
comando. ( npm
está instalado con Node, por lo que usa comandos como npm init
y npm install
).
Ejecute el npm install express --save
comando en su línea de comando.
La --save
bandera guarda express
como dependency
en package.json
. Es importante conocer estas dependencias porque npm
puede recuperar dependencias con otro npm install
comando cuando lo necesite más adelante.

A continuación, usamos express in server.js
requiriéndolo.
Necesitamos crear un servidor al que los navegadores puedan conectarse. Hacemos esto usando el listen
método Express .
Ahora, ejecute node server.js
y navegue hasta localhost:3000
en su navegador. Debería ver un mensaje que dice cannot get /
.

Buena seńal. Significa que ahora podemos comunicarnos con nuestro servidor express a través del navegador . Aquí es donde comenzamos las operaciones CRUD.
CRUD - LEER
Los navegadores realizan la operación READ cuando visita un sitio web. Bajo el capó, envían una solicitud GET al servidor para realizar esta operación READ.
Verá cannot get /
porque nuestro servidor no envió nada al navegador.
En Express, manejamos una solicitud GET con el get
método:
endpoint
es el punto final solicitado. Es el valor que viene después de su nombre de dominio. Aquí hay unos ejemplos:
- Cuando visitas
localhost:3000
, en realidad estás visitandolocalhost:3000/
. En este caso, los navegadores solicitados/
. - Estás leyendo este artículo en
https://zellwk.com/blog/crud-express-mongodb/
. El nombre de dominio eszellwk.com
. El punto final solicitado es todo lo que viene despuészellwk.com
(que es/blog/crud-express-mongodb
).
callback
le dice al servidor qué hacer cuando el punto final solicitado coincide con el punto final indicado. Toma dos argumentos: un request
objeto y un response
objeto.
Por ahora, volvamos a escribir Hello World
en el navegador. Lo hacemos usando un send
método que viene con el response
objeto:
Comenzaré a escribir en código ES6 y también le mostraré cómo convertir a ES6 en el camino. En primer lugar, lo estoy reemplazando function()
con una función de flecha ES6 . El siguiente código es el mismo que el anterior:
Ahora, reinicie su servidor haciendo lo siguiente:
- Detenga el servidor actual presionando
CTRL + C
en la línea de comando. - Corre de
node server.js
nuevo.
Luego, navegue hasta localhost:3000
en su navegador. Debería poder ver una cadena que dice "Hola mundo".

Excelente.
A continuación, cambiemos server.js
para mostrar una index.html
página al navegador. Para hacer esto, usamos el sendFile
método proporcionado por el res
objeto.
En el sendFile
método anterior, le dijimos a Express que sirviera un index.html
archivo que se puede encontrar en la raíz de la carpeta de su proyecto. Aún no tenemos ese archivo. Hagámoslo ahora.
Pongamos algo de texto en nuestro index.html
archivo también:
Reinicie su servidor y actualice su navegador. Debería poder ver su archivo HTML ahora.

Así es como Express maneja una solicitud GET ( operación READ ) en pocas palabras.
En este punto, probablemente se haya dado cuenta de que necesita reiniciar su servidor cada vez que realice un cambio en server.js
. Este proceso es increíblemente tedioso, así que tomemos un desvío rápido y simplifíquelo utilizando una herramienta llamada nodemon .
Ingrese Nodemon
Nodemon reinicia el servidor automáticamente cuando guarda un archivo que usa server.js
. Podemos instalar Nodemon con el siguiente comando:
Usamos una --save-dev
bandera aquí porque solo usamos Nodemon cuando estamos desarrollando cosas. No usaremos Nodemon en un servidor real. --save-dev
aquí agrega Nodeman como devDependency
en el package.json
archivo.

Nodemod se comporta como Node. Entonces puedes correr nodemon server.js
y esperarías ver lo mismo. Desafortunadamente, esto solo funciona si ha instalado nodemon globalmente con la -g
bandera (y no hicimos esto).
Tenemos otras formas de ejecutar Nodemon. Por ejemplo, puede ejecutar Nodemon directamente desde la node_modules
carpeta. Esto es muy desagradable, pero funciona:
Podemos simplificar las cosas agregando una script
clave en el package.json
archivo. Esto nos permite correr nodemon server.js
sin el ./node_modules...
preámbulo.
Ahora, puedes correr npm run dev
para disparar nodemon server.js
.

Volviendo al tema principal. A continuación, cubriremos la operación CREAR .
CRUD - CREAR
Los navegadores solo pueden realizar una operación CREATE si envían una solicitud POST al servidor. Esta POST
solicitud se puede activar mediante JavaScript o mediante un <form>
elemento.
Averigüemos cómo usar un <form>
elemento para crear nuevas entradas para esta aplicación de cotización de Star Wars por ahora. Examinaremos cómo enviar solicitudes a través de JavaScript más adelante.
Para enviar una solicitud POST a través de a <form>
, debe agregar el <form>
elemento a su index.html
archivo.
Necesita tres cosas en este elemento de formulario:
- Un
action
atributo - Un
method
atributo name
atributos en cada<input>
elemento dentro del formulario
Le method
dice a los navegadores qué tipo de solicitud enviar. En este caso, usamos POST
porque estamos enviando una POST
solicitud.
El action
atributo le dice al navegador dónde enviar la POST
solicitud. En este caso, enviamos la POST
solicitud a /quotes
.
Podemos manejar esta POST
solicitud con un post
método en server.js
. La path
ruta debe ser el valor que colocó en el action
atributo.
Reinicie su servidor (es de esperar que haya configurado Nodemon para que se reinicie automáticamente) y actualice su navegador. Luego, ingrese algo en el <form>
elemento y envíe el formulario. A continuación, mire su línea de comandos. Debería ver Hellooooooooooooooooo!
en su línea de comando.

Genial, sabemos que Express está manejando el formulario por nosotros ahora mismo. La siguiente pregunta es, ¿cómo obtenemos los valores de entrada con Express?
Resulta que Express no maneja la lectura de datos del <form>
elemento por sí solo. Tenemos que agregar otro paquete llamado body-parser para obtener esta funcionalidad.
Body-parser es un middleware . Ayudan a ordenar el request
objeto antes de que los usemos. Express nos permite usar middleware con el use
método.
El urlencoded
método dentro de body-parser le dice a body-parser que extraiga datos del <form>
elemento y los agregue a la body
propiedad en el request
objeto.
Debería poder ver los valores del <form>
elemento dentro req.body
ahora. ¡Intente hacer un console.log
y vea qué es!
Debería ver un objeto similar al siguiente:

Hmmm.
¡El Maestro Yoda ha hablado! Asegurémonos de recordar las palabras de Yoda. Es importante. Queremos poder recuperarlo la próxima vez que carguemos nuestra página de índice.
Ingrese a la base de datos, MongoDB.
MongoDB
MongoDB es una base de datos. Podemos almacenar información en esta base de datos para recordar las palabras de Yoda. Luego, podemos recuperar esta información y mostrarla a las personas que ven nuestra aplicación.
Normalmente uso Mongoose (que es un marco para MongoDB) cuando uso MongoDB. En este artículo, le enseñaré cómo usar MongoDB básico. Si quieres aprender Mangosta, considera leer mi artículo sobre Mangosta .
Primero, necesitamos instalar MongoDB a través de npm.
Una vez instalado, podemos conectarnos a MongoDB a través del MongoClient
método de conexión como se muestra en el siguiente código:
La siguiente parte es obtener el enlace correcto a nuestra base de datos. La mayoría de las personas almacenan sus bases de datos en servicios en la nube como MongoDB Atlas . Vamos a hacer lo mismo también. (Es gratis).
También puede crear una base de datos en su computadora para el trabajo de desarrollo. Lea " Cómo configurar una conexión MongoDB local " para obtener instrucciones.
Configuración de MongoDB Atlas
Continúe y cree una cuenta en MongoDB Atlas . Una vez que haya terminado, debe crear una "Organización". Es como el nombre de una empresa. Puedes nombrarlo como quieras. (Puedes cambiarlo más tarde).

También debe seleccionar un servicio en la nube. Continúe con MongoDB Atlas en este caso.

A continuación, debe establecer permisos para los usuarios. MongoDB Atlas completará automáticamente su dirección de correo electrónico actual como usuario. Así que continúe con el siguiente paso.
Debería terminar con una pantalla que se ve así:

A continuación, debe crear una base de datos en MongoDB Atlas. Hay varios pasos para hacer esto.
Primero, necesita crear un nuevo proyecto. Puede hacer esto yendo a "Contexto" en el menú superior izquierdo. Haz clic en el menú desplegable. Luego, seleccione Nuevo proyecto.

A continuación, deberá nombrar su proyecto. Llámalo como quieras. Voy a llamar a esto star-wars
.

Luego, deberá agregar miembros. Nuevamente, ya está agregado, así que continúe y haga clic en "Crear proyecto" para continuar.
Debería terminar con una pantalla que dice Create a Cluster.

Haga clic en "Crear un clúster". Debería ver esta pantalla:

Seleccione el clúster libre (opción de la izquierda) y continúe. Ahora debería ver una pantalla para configurar un clúster. Desplácese hacia abajo. Asegúrese de ver estas dos cosas:
- El nivel del clúster es M0 Sandbox
- El presupuesto mensual es GRATIS

Haga clic en Crear clúster a continuación. Debería ver "Se está creando su clúster".

Debe esperar aproximadamente 5 minutos para la creación del clúster. Cuando el clúster esté listo, verá esto:

Ahora, necesitamos conectar nuestra aplicación Star Wars con este clúster.
Conexión a MongoDB Atlas
Haga clic en el botón Conectar.

Debería aparecer un modal.

Debe incluir su dirección IP en la lista blanca antes de poder conectarse a su clúster. Esta es una característica de seguridad integrada en MongoDB Atlas. Continúe y haga clic en "Agregar su dirección IP actual".

A continuación, debe crear un usuario de MongoDB. Este nombre de usuario y contraseña son diferentes de los que utilizó para iniciar sesión en MongoDB Atlas. Este nombre de usuario y contraseña se utilizan SOLAMENTE para la base de datos.
Asegúrese de recordar el usuario y la contraseña de MongoDB. Lo usaremos para conectarnos a la base de datos.

A continuación, haga clic en elegir su método de conexión. Seleccione "Conectarse a su aplicación" y copie la cadena de conexión.


La cadena de conexión debería verse así:
Necesita reemplazar 2 cosas aquí:
- Reemplazar
<username>
con su nombre de usuario de la base de datos - Reemplazar
<password>
con la contraseña del usuario de la base de datos
En test
la cadena de conexión apunta a una test
base de datos. Debería reemplazarlo test
con el nombre de su base de datos si usa Mongoose. Puede dejarlo como test
si usara MongoClient como lo que estamos haciendo en este tutorial.
Coloque esta cadena de conexión dentro del MongoClient.connect
.
Sabemos que nos hemos conectado a la base de datos si no hay errores. Creemos una console.log
declaración que diga "Conectado a la base de datos". Esto nos ayudará a saber que nos hemos conectado a la base de datos cuando reiniciemos el servidor.
Debería ver algo como esto:

Puede eliminar la advertencia de obsolescencia agregando la opción en MongoClient.connect

MongoDB admite promesas. Si desea utilizar promesas en lugar de devoluciones de llamada, puede escribir MongoClient.connect
así. Se comporta exactamente como el código anterior.
Lea este artículo si desea obtener más información sobre las promesas en JavaScript.
Cambiar la base de datos
Necesitamos cambiar la base de datos de test
otra. Puedes nombrarlo como quieras. Elegí nombrar mi nueva base de datos star-wars-quotes
porque me ayuda a recordar lo que estoy construyendo.
MongoDB y servidor
Necesitamos la db
variable de la conexión para acceder a MongoDB. Esto significa que debemos poner nuestros controladores de solicitudes exprés en la llamada de MongoClient then
.
¡Finalmente podemos almacenar la cotización de Yoda en la base de datos ahora!
CRUD - CREAR (continuación)
Necesitamos crear un collection
antes de que podamos almacenar elementos en una base de datos. Aquí hay una analogía simple para ayudarlo a aclarar los términos en MongoDB:
- Imagina que una base de datos es una habitación.
- Una habitación contiene cajas (
collections
).
Al igual que las bases de datos, puede nombrar colecciones como desee. En este caso, guardemos las cotizaciones en una quotes
colección. Usamos db.collection
para especificar la colección.
Podemos usar el insertOne
método para agregar elementos a una colección de MongoDB.
Intente enviar el <form>
desde el navegador. Debería ver un gran aspecto aterrador result
en la Terminal.

Si ves esto, ¡felicidades! Ha agregado correctamente la cotización a la base de datos.
Puede verificar los elementos dentro de la base de datos yendo a "Colecciones" en MongoDB Atlas.

Debería ver un documento en su base de datos. (Cada entrada de la base de datos se llama documento).

Si regresa al navegador, verá que todavía está intentando cargar algo.

Esto sucede porque el navegador espera algo del servidor.
En este caso, no necesitamos enviar la información del navegador. Pidamos al navegador que redireccione de nuevo a /
. Hacemos esto con res.redirect
.

¡Hurra!
Ya que tenemos algunas citas en la colección, ¡mostrámoslas a nuestro usuario cuando lleguen a la página!
Mostrar cotizaciones a los usuarios (operación READ)
Necesitamos hacer dos cosas para mostrar cotizaciones de MongoDB Atlas a nuestros usuarios.
- Obtenga cotizaciones de MongoDB Atlas.
- Representar las citas en HTML con un motor de plantillas
Vayamos paso a paso.
Obtener cotizaciones de MongoDB
Podemos obtener cotizaciones que almacenamos en MongoDB con el find
método. Este método de mLab utiliza el find
método que está disponible en el collection
método.
El find
método devuelve un cursor
que no tendrá sentido si intentas registrarlo.

¡Pero este cursor
objeto contiene todas las citas de nuestra base de datos! Tiene un montón de métodos que nos permiten obtener nuestros datos. Por ejemplo, podemos usar toArray
para convertir los datos en una matriz.

¡Excelente! ¡Vemos las citas que agregamos! (Ves tantas citas iguales porque las agregué todas al escribir este tutorial 😆).
A continuación, queremos generar un HTML que contenga todas nuestras citas.
Renderizando el HTML
No podemos servir el index.html
archivo y esperar que las citas aparezcan mágicamente porque no hay forma de agregar contenido dinámico a un archivo HTML.
Lo que podemos hacer, en cambio, es usar un motor de plantillas para generar el HTML. Los motores de plantilla más populares incluyen Pug , Embedded JavaScript y Nunjucks .
He escrito extensamente sobre el cómo y el por qué de los motores de plantilla en una publicación separada . Es posible que desee comprobarlo si no tiene idea de qué son los motores de plantilla.
Utilizo Nunjucks como mi motor de plantillas preferido. Siéntete libre de revisar la publicación para descubrir por qué.
Para este tutorial, usaremos Embedded JavaScript (EJS) como nuestro motor de plantillas porque es el más fácil para empezar. Le resultará familiar desde el principio, ya que estará escribiendo HTML y JavaScript.
Usando EJS
Primero, necesitamos instalar EJS.
A continuación, debemos establecerlo view engine
en ejs
. Esto le dice a Express que estamos usando EJS como motor de plantilla. Puede que tenga que colocar antes de cualquier app.use
, app.get
o app.post
métodos.
Ahora podemos generar HTML que contiene las comillas . Este proceso se denomina renderización del HTML.
Usaremos el render
método integrado en Express response
. Debe seguir la siguiente sintaxis:
view
es el nombre del archivo que estamos renderizando. Este archivo debe colocarse dentro de unaviews
carpeta.locals
son los datos que se pasan al archivo.
Creemos una vista. Crearemos un index.ejs
archivo dentro de la carpeta de vistas.
Copiaremos / pegaremos todo desde index.html
en index.ejs
.
A continuación, usaremos res.render
para renderizar este index.ejs
archivo.
Si actualiza la página, debería seguir viendo lo mismo. Nada debería cambiar, nada debería romperse.

Pongamos las comillas en index.ejs
. Para hacer esto, necesitamos pasar las comillas al render
método.
En index.ejs
, podemos usar variables de lugar entre las etiquetas <%=
y %>
. Intentemos poner quotes
en el HTML:
Deberías ver esto:

Vemos muchos [object Object]
porque cada cita dentro results
es un objeto JavaScript. ejs
no puede convertir ese objeto en HTML automáticamente.
Necesitamos recorrer las comillas. Podemos hacer esto con un for
bucle. En EJS, escribimos un bucle for como escribimos un for
bucle JavaScript . La única diferencia es que necesitamos colocar las for
declaraciones de bucle entre <%
y %>
.

CRUD - ACTUALIZAR
Usamos la operación UPDATE cuando queremos cambiar algo. Puede activarse con una solicitud PUT . Me gusta POST
, PUT
se puede activar mediante JavaScript o mediante un <form>
elemento.
Cambiemos las cosas y usemos JavaScript, ya que ya sabe cómo usar los <form>
elementos.
Para esta operación de actualización, crearemos un botón que reemplaza la primera cita de Yoda por algo escrito por Darth Vadar.
Para hacer esto, necesitamos agregar un button
en el index.ejs
archivo:

También crearemos un archivo JavaScript externo para ejecutar una PUT
solicitud. Según las convenciones Express, este JavaScript se guarda en una carpeta llamadapublic
Luego, tenemos que decirle a Express que haga que esta public
carpeta sea accesible para el público mediante el uso de un middleware incorporado llamadoexpress.static
Ahora podemos agregar el main.js
archivo al index.ejs
archivo:
Enviaremos una PUT
solicitud cuando se haga clic en el botón. Esto significa que necesitamos escuchar un click
evento.
A continuación, enviaremos la solicitud PUT cuando se haga clic en el botón:
Envío de una solicitud PUT
La forma más sencilla de activar una solicitud PUT en los navegadores modernos es utilizar la API Fetch .
Fetch tiene la siguiente sintaxis:
En este caso, digamos que queremos enviar la solicitud a /quotes
. Nos pondremos endpoint
en /quotes
.
Necesitamos enviar una PUT
solicitud esta vez. Podemos hacer esto configurando el método de Fetch en put
.
Las aplicaciones modernas envían datos JSON a los servidores. También reciben datos JSON a los servidores. JSON son las siglas de JavaScript Object Notation. Son como objetos de JavaScript, pero cada propiedad y valor se escriben entre dos comillas.
A continuación, se muestra un ejemplo de datos de JavaScript:
Y cómo se ve su contraparte JSON. (Fíjate como todo se envuelve entre dos "
).
Necesitamos decirle al servidor que estamos enviando datos JSON configurando los Content-Type
encabezados en application/json
.
A continuación, necesitamos convertir los datos que enviamos a JSON. Podemos hacer esto con JSON.stringify
. Estos datos se pasan a través de la body
propiedad.
Aceptando la solicitud PUT
Nuestro servidor aún no acepta datos JSON. Podemos enseñar a leer JSON mediante la adición de la body-parser
's json
middleware.
A continuación, podemos manejar la PUT
solicitud con un put
método. Debería poder ver los valores que enviamos desde la solicitud de recuperación.

El siguiente paso es cambiar la primera cita de Yoda por esta cita de Darth Vadar.
Cambiar la cita de Yoda
Las colecciones de MongoDB vienen con un método llamado findOneAndUpdate
. Este método nos permite buscar y cambiar un elemento en la base de datos. Tiene la siguiente sintaxis:
query
nos permite filtrar la colección con pares clave-valor. Si queremos filtrar las comillas a las escritas por Yoda, podemos establecer { name: 'Yoda' }
como consulta.
update
, le dice a MongoDB qué cambiar. Utiliza los operadores de actualización de MongoDB como $set
, $inc
y $push
.
Usaremos el $set
operador ya que estamos cambiando las citas de Yoda por las de Darth Vadar:
options
le dice a MongoDB que defina opciones adicionales para esta solicitud de actualización.
En este caso, es posible que no existan citas de Yoda en la base de datos. Podemos obligar a MongoDB a crear una nueva cita de Darth Vadar si no existen citas de Yoda. Hacemos esto estableciendo upsert
en true
. upsert
significa: Insertar un documento si no se puede actualizar ningún documento.
Finalmente, iniciemos sesión result
en la línea de comandos.
Intente hacer clic en el botón "reemplazar la primera cita de Yoda" en el navegador. Debería ver este resultado en su línea de comando. Esto dice que cambiamos una cita de Yoda.

Si actualiza el navegador, debería ver la cita de Darth Vadar como primera cita.

¿Te findOneAndUpdate
parece complicado? Bueno, ES complicado. Es por eso que uso Mongoose en lugar de MongoDB. Puede obtener más información sobre Mongoose en este artículo .
Finalmente, debemos responder al JavaScript que envió la PUT
solicitud. En este caso, simplemente enviaremos el success
mensaje.
A continuación, podemos manejar la respuesta del servidor a través de un then
objeto. (Hacemos esto porque fetch
devuelve una promesa). Sin embargo, Fetch es ligeramente diferente a la mayoría de las promesas. Necesita usar otro then
objeto para obtener la respuesta del servidor.
Esto es lo que debe hacer:
Debería poder ver un Success
mensaje del servidor en la consola.

Escribí un artículo sobre la API de Fetch si se pregunta por qué necesitamos dos then
llamadas. ¡Dale una lectura! Ayudará a cimentar su comprensión.
Si está trabajando en una aplicación web elegante, puede usar JavaScript para actualizar el DOM, de modo que los usuarios vean los nuevos cambios de inmediato.
Sin embargo, la actualización del DOM está fuera del alcance de este artículo, por lo que solo actualizaremos el navegador para ver los cambios.
Si desea aprender a usar JavaScript para actualizar el DOM, le sugiero que siga mi curso Learn JavaScript . ¡Incluso te enseño cómo hacer que tu interfaz sea rápida y ágil! (Verifique el componente Todolist).
¡Eso es todo para la operación ACTUALIZAR ! Pasemos a eliminar.
CRUD - BORRAR
La operación DELETE se puede activar mediante una solicitud DELETE . Es similar a la UPDATE
solicitud, por lo que debería ser simple si comprende lo que hemos hecho anteriormente.
Para ello, eliminemos la primera cita de Darth Vadar.
Primero, necesitamos agregar un botón de eliminación a index.ejs
.

Luego, activaremos una solicitud DELETE a través de Fetch cuando un usuario haga clic en el botón Eliminar.
Dado que estamos eliminando una cotización de Darth Vadar, solo necesitamos enviar el nombre de Darth Vadar al servidor.
Luego podemos manejar el evento en nuestro lado del servidor con el delete
método:
Eliminar un documento de MongoDB
Las colecciones de MongoDB tienen un método llamado deleteOne
. Nos permite eliminar un documento de la base de datos. Toma dos parámetros: query
y options
.
query
funciona como query
en findOneAndUpdate
. Nos permite filtrar la colección a las entradas que estamos buscando. En este caso, podemos configurar name
Darth Vadar.
Sin embargo, dado que ya pasamos el nombre Darth Vadar
de Fetch, ya no necesitamos codificarlo en Express. Simplemente podemos usar req.body.name
.
En este caso, no necesitamos cambiar ninguna opción, por lo que podemos omitir options
.
Luego, podemos enviar una respuesta al JavaScript en la then
llamada.
Ahora, cuando haga clic en el botón Eliminar, el navegador enviará la solicitud DELETE a través de Fetch a nuestro servidor Express. Luego, el servidor responde enviando un error o un mensaje.
¿Qué pasa si no hay más citas de Darth Vadar?
Si no hay más citas de Darth Vadar, las result.deletedCount
habrá 0
. Podemos enviar un mensaje que diga al navegador que no hay más citas de Darth Vadar para eliminar.
Si JavaScript recibe una No quote to delete
respuesta, podemos decirle al usuario que no hay una cita de Darth Vadar para eliminar.
Para hacer esto, agreguemos un elemento donde podamos informar a los usuarios sobre este mensaje.
Si recibimos No quote to delete
, podemos cambiar el textContent
de este .message
div.

¡Eso es todo para la operación DELETE !
Haz que se vea mejor ...
El último paso es hacer que la aplicación se vea un poco mejor rociando algunos estilos.

Terminando
Cubrimos MUCHO en este mega tutorial. Aquí hay una lista de cosas que hemos hecho juntos:
- Entendido para qué se utilizan Express, Node y MongoDB
- Entendido CRUD
- Operaciones de creación, lectura, actualización y eliminación ejecutadas
- Creó una cuenta Atlas para MongoDB
- Guardar, leer, actualizar y eliminar de MongoDB
- Mostrar datos variables con motores de plantilla
Ahora ha aprendido todo lo que necesita saber sobre la creación de aplicaciones simples con Node, Express y MongoDB. Ahora, adelante y crea más aplicaciones, joven padawan. Que la fuerza esté con usted.
0 Comentarios
Dejanos tu comentario para seguir mejorando!