En este artículo, vamos a crear una aplicación para tomar notas. Una aplicación para tomar notas se usa básicamente para almacenar información o notas en una base de datos para que nunca se pierda, es como Google Keep.
Funcionalidades: un usuario puede hacer lo siguiente con esta aplicación para tomar notas:
- Mostrar todas las notas
- Agregar nuevas notas
- Eliminar notas
- Actualizar notas
Enfoque: Vamos a utilizar Body Parser mediante el cual podemos capturar los valores de entrada del usuario desde el formulario, como el contenido de las notas y la identificación de las notas, y almacenarlos en una colección. Luego vamos a enviar las Notas a la página web usando EJS. EJS es un middleware que facilita el envío de datos desde su archivo de servidor (app.js o server.js) a una página web. También vamos a crear la ruta de eliminación para eliminar notas y una ruta de actualización para actualizar las notas.
Implementación: A continuación se muestra la implementación paso a paso del enfoque anterior.
Paso 1: Configuración del proyecto
Inicializa NPM: cree y ubique la carpeta de su proyecto en la terminal y escriba el comando
npm init -y
Inicializa nuestra aplicación de Node y crea un archivo package.json.
Instale dependencias: ubique el directorio de su proyecto raíz en la terminal y escriba el comando
npm install express ejs body-parser
Para instalar Express, EJS y Body Parser como dependencias dentro de su proyecto
Crear archivo de servidor: cree un archivo ‘app.js’, dentro de este archivo se requiere el módulo Express y cree una ‘aplicación’ constante para crear una instancia del módulo express, luego configure EJS como el motor de vista predeterminado.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
Reorganice sus directorios: se requiere usar ‘.ejs’ como extensión para el archivo HTML en lugar de ‘.html’ para usar EJS dentro de él. Luego, debe mover todos los archivos ‘.ejs’ en el directorio de vistas dentro de su directorio raíz. EJS busca por defecto los archivos ‘.ejs’ dentro de la carpeta de vistas.
Use la variable EJS: dentro de su archivo .ejs actualizado, debe usar variables EJS para recibir valores de su archivo de servidor. Puede declarar variables en EJS como
<%= variableName %>
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <%= variableName %> </body> </html>
Envíe datos a una variable: dentro de su archivo de servidor ( app.js o index.js ), puede enviar un archivo EJS junto con algunos datos utilizando el método de procesamiento.
app.get("/", (req, res) => {
res.render("home",
{ variableName: "Hello Geeks!" })
})
Javascript
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Obtener datos del formulario a app.js: para recibir valores de entrada de un formulario, tenemos que usar un paquete de Nodes llamado body-parser.
Instale el analizador de cuerpo:
npm install body-parser
Requerir módulo analizador de cuerpo:
const bodyParser = require('body-parser')
Y entonces:
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
Entonces podemos manejar los datos del formulario usando el objeto de solicitud.
Paso 2: Obtener notas: tenemos una array de notas con dos propiedades content e id.
const notes = [{
noteId: 1,
noteContent: "Hey, Geeks you can add your important notes here."
}
]
Enviemos la array a nuestra página web. En el paso anterior, solo enviamos un valor a la variable, ahora estamos enviando la array completa.
app.get("/", function (req, res) {
res.render("home", {
data: notes
})
})
Dado que es común tener tantos elementos (notas) dentro de nuestra array y tenemos que imprimir cada uno de ellos, tenemos que usar For Each Loop para recorrer cada elemento dentro de nuestra colección y mostrar los detalles en el campo de área de texto de el formulario de actualización. Mostraremos los detalles dentro del área de texto del formulario de actualización, de esta manera podemos mostrar las notas y, al mismo tiempo, podemos usarlo para actualizar las notas.
<form action="/update" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..." name="noteContent"
value="<%= element.noteContent %>">
<%= element.noteContent %></textarea>
<br>
<button type="submit">Update</button>
</form>
Paso 3: Notas de actualización: Ahora, veamos cómo podemos manejar este formulario de actualización en nuestra ruta de actualización dentro del archivo del servidor (app.js).
app.post('/update', (req, res) => {
var noteId = req.body.noteId;
var noteContent = req.body.noteContent;
notes.forEach(note => {
if (note.noteId == noteId) {
note.noteContent = noteContent;
}
})
res.render("home", {
data: notes
})
})
Para actualizar una nota, tenemos que crear una ruta actualizada donde vamos a obtener la identificación de nota solicitada y buscar el elemento que tiene la misma identificación de nota, y cambiar la propiedad de contenido del elemento a ‘ noteContent’ que obtenemos de la formulario de actualización.
Paso 4: Eliminar notas: actualizar la página web dando una opción de eliminación: tenemos que crear un formulario que envíe la identificación de la nota que queremos eliminar al archivo del servidor ‘app.js’.
<form action="/delete" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<button type="submit"
style="margin: 0px 4px;">✕</button>
</form>
Para eliminar una nota, tenemos que crear una ruta de eliminación en la que vamos a obtener la identificación de la nota solicitada y buscar el elemento que tiene la misma identificación de nota, y eliminar el elemento.
app.post('/delete', (req, res) => {
var noteId = req.body.noteId;
var j = 0;
notes.forEach(note => {
j = j + 1;
if (note.noteId == noteId) {
notes.splice((j - 1), 1)
}
})
res.render("home", {
data: notes
})
})
Código completo: a continuación se muestra el código completo para crear una aplicación para tomar notas usando Node.js:
app.js
const express = require('express')
const bodyParser = require('body-parser')
const notes = [{
noteId: 1,
noteContent: "Hey, Geeks you can add your important notes here."
}
]
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: notes
})
})
app.post("/", (req, res) => {
const noteContent = req.body.noteContent
const noteId = notes.length + 1;
notes.push({
noteId: noteId,
noteContent: noteContent
})
res.render("home", {
data: notes
})
})
app.post('/update', (req, res) => {
var noteId = req.body.noteId;
var noteContent = req.body.noteContent;
notes.forEach(note => {
if (note.noteId == noteId) {
note.noteContent = noteContent;
}
})
res.render("home", {
data: notes
})
})
app.post('/delete', (req, res) => {
var noteId = req.body.noteId;
var j = 0;
notes.forEach(note => {
j = j + 1;
if (note.noteId == noteId) {
notes.splice((j - 1), 1)
}
})
res.render("home", {
data: notes
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
home.ejs
<!DOCTYPE html>
<html>
<head>
<title>Note Keeper</title>
</head>
<body>
<h1>Note Keeper</h1>
<div style="display: flex;">
<% data.forEach(element=> { %>
<form action="/update" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..." name="noteContent"
value="<%= element.noteContent %>">
<%= element.noteContent %></textarea>
<br>
<button type="submit">Update</button>
</form>
<form action="/delete" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<button type="submit"
style="margin: 0px 4px;">✕</button>
</form>
<% }) %>
</div>
<h1>Add Note</h1>
<form action="/" method="post">
<input type="number" style="display: none;"
name="noteId">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..."
name="noteContent"></textarea>
<br>
<button type="submit">Add</button>
</form>
</body>
</html>
Producción:
