En este artículo, vamos a crear un sistema de gestión de usuarios. Un Sistema de Gestión de Usuarios se utiliza básicamente para gestionar los usuarios de cualquier organización, las organizaciones pueden Ver Usuarios, Añadir Usuarios, Eliminar Usuarios y Actualizar Usuarios.
Vamos a configurar un EJS de middleware. EJS facilita el envío de datos desde su archivo de servidor (app.js o server.js) a una página web. Después de eso, vamos a usar Body Parser mediante el cual podemos capturar los valores de entrada del usuario del formulario y almacenarlos en una colección. Luego vamos a enviar los datos de la colección a la página web. También vamos a crear la Ruta de Eliminación para eliminar usuarios y una Ruta de Actualización para actualizar los datos de los usuarios.
Enfoque: 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 el EJS como el motor de visualización 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 %>
home.ejs
<!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 World!" })
})
app.js
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello World!" })
})
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 usuarios actuales: tenemos una serie de listas de usuarios con diferentes propiedades. Enviemos la array a nuestra página web y mostremos la lista de usuarios actuales. En el paso anterior, solo enviamos un valor a la variable, ahora estamos enviando la array completa.
app.js
const express = require('express')
const bodyParser = require('body-parser')
const users = [{
userName: "Aditya Gupta",
userEmail: "aditya@gmail.com",
userAge: "22",
userUniqueId: '1'
},
{
userName: "Vanshita Jaiswal",
userEmail: "vanshita@gmail.com",
userAge: "21",
userUniqueId: '2'
},
{
userName: "Sachin Yadav",
userEmail: "sachin@gmail.com",
userAge: "22",
userUniqueId: '3'
}
]
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: users
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Dado que tenemos tantos elementos 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.
home.ejs
<!DOCTYPE html>
<html>
<head>
<title>User Management System</title>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h2>User Management System</h2>
<table>
<tr>
<th>User Id</th>
<th>User Name</th>
<th>User Email</th>
<th>Age</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td>
<%= element.userUniqueId %>
</td>
<td>
<%= element.userName %>
</td>
<td>
<%= element.userEmail %>
</td>
<td>
<%= element.userAge %>
</td>
</tr>
<% }) %>
</table>
</body>
</html>
Paso 2: agregar usuarios a la lista: para esto, debemos crear un formulario y manejar los datos del formulario dentro de nuestro archivo ‘app.js’ usando Body Parser.
casa.ejs
<h2>Add User</h2>
<form action="/" method="post">
<input type="text" placeholder="User
Unique Id" name="userUniqueId">
<input type="text" placeholder="User Name"
name="userName">
<input type="text" placeholder="User Email"
name="userEmail">
<input type="text" placeholder="User Age"
name="userAge">
<button type="submit">Submit</button>
</form>
Manejar datos de formulario dentro de ‘app.js’: tenemos que obtener valores de un formulario usando req.body.valueName, y luego organizarlo como un objeto y empujarlo dentro de la array de nuestro usuario.
app.post("/", (req, res) => {
const inputUserName = req.body.userName
const inputUserEmail = req.body.userEmail
const inputUserAge = req.body.userAge
const inputUserUniqueId = req.body.userUniqueId
users.push({
userName: inputUserName,
userEmail: inputUserEmail,
userAge: inputUserAge,
userUniqueId: inputUserUniqueId
})
res.render("home", {
data: users
})
})
Paso 3: Eliminar usuarios: Actualización de la página web dando una opción de eliminación: Tenemos que crear un formulario que envíe el uersUniqueId al archivo del servidor ‘app.js’.
casa.ejs
<table>
<tr>
<th>User Id</th>
<th>User Name</th>
<th>User Email</th>
<th>Age</th>
<th>Delete</th>
</tr>
<% data.forEach(element => { %>
<tr>
<td><%= element.userUniqueId %></td>
<td><%= element.userName %></td>
<td><%= element.userEmail %></td>
<td><%= element.userAge %></td>
<td>
<form action="/delete" method="post">
<input type="text" style="display: none;"
name="userUniqueId"
value="<%= element.userUniqueId %>">
<button type="submit">Delete</button>
</form>
</td>
</tr>
<% }) %>
</table>
Para eliminar un usuario, tenemos que crear una ruta de eliminación en la que vamos a buscar el ‘userUniqueId’ del usuario solicitado que la organización quiere eliminar, buscar el elemento que tiene el mismo ‘userUniqueId’ y eliminar el elemento.
aplicación.js
app.post('/delete', (req, res) => {
var requestedUserUniqueId = req.body.userUniqueId;
var j = 0;
users.forEach(user => {
j = j + 1;
if (user.userUniqueId === requestedUserUniqueId) {
users.splice((j - 1), 1)
}
})
res.render("home", {
data: users
})
})
Paso 4: Actualizar los datos del usuario: Agreguemos un formulario para actualizar los datos del usuario
casa.ejs
<h2>Update User</h2>
<form action="update" method="post">
<input type="text" placeholder="User Unique Id"
name="userUniqueId">
<input type="text" placeholder="User Name"
name="userName">
<input type="text" placeholder="User Email"
name="userEmail">
<input type="text" placeholder="User Age"
name="userAge">
<button type="submit">Update</button>
</form>
Hacer una ruta de actualización para actualizar los datos de los usuarios: Nuevamente, tenemos que obtener los detalles del formulario de actualización, y buscamos el elemento que tiene ‘userUniqueId’ igual que obtenemos del formulario, y luego reescribimos todos los detalles de búsqueda para el elemento encontrado.
aplicación.js
app.post('/update', (req, res) => {
const inputUserName = req.body.userName
const inputUserEmail = req.body.userEmail
const inputUserAge = req.body.userAge
const inputUserUniqueId = req.body.userUniqueId
var j = 0;
users.forEach(user => {
j = j + 1;
if (user.userUniqueId === inputUserUniqueId) {
user.userName = inputUserName
user.userEmail = inputUserEmail
user.userAge = inputUserAge
}
})
res.render("home", {
data: users
})
})
Código completo:
home.ejs
const express = require('express')
const bodyParser = require('body-parser')
const users = [{
userName: "Aditya Gupta",
userEmail: "aditya@gmail.com",
userAge: "22",
userUniqueId: '1'
},
{
userName: "Vanshita Jaiswal",
userEmail: "vanshita@gmail.com",
userAge: "21",
userUniqueId: '2'
},
{
userName: "Sachin Yadav",
userEmail: "sachin@gmail.com",
userAge: "22",
userUniqueId: '3'
}
]
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: users
})
})
app.post("/", (req, res) => {
const inputUserName = req.body.userName
const inputUserEmail = req.body.userEmail
const inputUserAge = req.body.userAge
const inputUserUniqueId = req.body.userUniqueId
users.push({
userName: inputUserName,
userEmail: inputUserEmail,
userAge: inputUserAge,
userUniqueId: inputUserUniqueId
})
res.render("home", {
data: users
})
})
app.post('/delete', (req, res) => {
var requestedUserUniqueId = req.body.userUniqueId;
var j = 0;
users.forEach(user => {
j = j + 1;
if (user.userUniqueId === requestedUserUniqueId) {
users.splice((j - 1), 1)
}
})
res.render("home", {
data: users
})
})
app.post('/update', (req, res) => {
const inputUserName = req.body.userName
const inputUserEmail = req.body.userEmail
const inputUserAge = req.body.userAge
const inputUserUniqueId = req.body.userUniqueId
var j = 0;
users.forEach(user => {
j = j + 1;
if (user.userUniqueId === inputUserUniqueId) {
user.userName = inputUserName
user.userEmail = inputUserEmail
user.userAge = inputUserAge
}
})
res.render("home", {
data: users
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
app.js
const express = require('express')
const bodyParser = require('body-parser')
const users = [{
userName: "Aditya Gupta",
userEmail: "aditya@gmail.com",
userAge: "22",
userUniqueId: '1'
},
{
userName: "Vanshita Jaiswal",
userEmail: "vanshita@gmail.com",
userAge: "21",
userUniqueId: '2'
},
{
userName: "Sachin Yadav",
userEmail: "sachin@gmail.com",
userAge: "22",
userUniqueId: '3'
}
]
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: users
})
})
app.post("/", (req, res) => {
const inputUserName = req.body.userName
const inputUserEmail = req.body.userEmail
const inputUserAge = req.body.userAge
const inputUserUniqueId = req.body.userUniqueId
users.push({
userName: inputUserName,
userEmail: inputUserEmail,
userAge: inputUserAge,
userUniqueId: inputUserUniqueId
})
res.render("home", {
data: users
})
})
app.post('/delete', (req, res) => {
var requestedUserUniqueId = req.body.userUniqueId;
var j = 0;
users.forEach(user => {
j = j + 1;
if (user.userUniqueId === requestedUserUniqueId) {
users.splice((j - 1), 1)
}
})
res.render("home", {
data: users
})
})
app.post('/update', (req, res) => {
const inputUserName = req.body.userName
const inputUserEmail = req.body.userEmail
const inputUserAge = req.body.userAge
const inputUserUniqueId = req.body.userUniqueId
var j = 0;
users.forEach(user => {
j = j + 1;
if (user.userUniqueId === inputUserUniqueId) {
user.userName = inputUserName
user.userEmail = inputUserEmail
user.userAge = inputUserAge
}
})
res.render("home", {
data: users
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Producción:
