EJS es un lenguaje de plantillas simple que le permite generar marcado HTML con JavaScript simple. Es posible acceder a la variable JS en el archivo .ejs.
Solo necesita pasar el objeto JS como segundo parámetro del método res.render() . Saltemos a lo profundo.
Estructura del proyecto: la estructura final de carpetas será como se muestra a continuación.
Project | |-> node_modules |-> views |-> index.ejs |-> package.json |-> package-lock.json |-> server.js
Paso 1: Inicie un nuevo proyecto de Node JS. Abra un símbolo del sistema y cree una nueva carpeta e iníciela con un proyecto npm vacío.
mkdir Project cd Project npm init -y
Paso 2: Instale las dependencias requeridas.
Requerir dependencias:
- Expresar JS
- EJS
npm i express ejs
Paso 3: cree un nuevo archivo server.js en el directorio del proyecto. Este archivo contiene un punto final de API que es responsable de representar un archivo EJS que genera marcas HTML dinámicamente. Aquí el método de renderizado toma dos parámetros. El primer parámetro es el archivo EJS y el segundo es un objeto JS que se destruye automáticamente en el archivo .ejs.
Aquí pasamos. {firstName: «Geeks,» lastName: «A Computer Science Portal»} como objeto JS.
server.js
const express = require('express');
const path = require('path');
const ejs = require('ejs');
const app = express();
const PORT = 3000;
// Set EJS as templating engine
app.set('view engine', 'ejs');
app.get('/', (req,res)=>{
// render method takes two parameters
// first parameter should be the .ejs file
// second parameter should be an object
// which is accessible in the .ejs file
// this .ejs file should be in views folder
// in the root directory.
res.render('index.ejs', {firstName: "Geeks,",
lastName: "A Computer Science Portal"});
})
// Start the server
app.listen(PORT, err =>{
err ?
console.log("Error in server setup") :
console.log("Server listening on Port", PORT)
});
Paso 4: El comportamiento predeterminado de EJS es que busca en la carpeta ‘views’ las plantillas para renderizar. Entonces, hagamos una carpeta de ‘vistas’ en nuestra carpeta de proyecto de Node principal y hagamos un archivo llamado » index.ejs » que se va a servir en alguna solicitud deseada en nuestro proyecto de Node. El contenido de esta página es:
index.ejs
<!DOCTYPE html> <html> <body style="text-align: center"> <h1 style="color: green"> GeeksforGeeks </h1> <h3> Welcome <%= firstName %> <%= lastName %> </h3> </body> </html>
Aquí el objeto pasado serán destructores. Entonces, podemos acceder a la propiedad del objeto directamente sin necesidad de usar el operador de punto.
Paso 5: Abra el símbolo del sistema en el directorio raíz de su proyecto e inicie el servidor usando
node server.js
Salida: si todo va bien, verá «Servidor escuchando en el puerto 3000». Luego abra http://localhost:3000/ en su navegador y verá el siguiente resultado en su pantalla.
Producción:
Usando una array de .js en el archivo .ejs: también podemos usar la array en el archivo ejs como una variable, en este ejemplo que pasa una array JS al archivo ejs para renderizar.
server.js
const author = {
name : 'Geeksforgeeks',
skills: ['DSA', 'Interview Experience', 'Web Developement', 'Puzzels',]
}
app.get('/', (req,res)=>{
// render method takes two parameters
// first parameter should be the .ejs file
// second parameter should be an object
// which is accessible in the .ejs file
// this .ejs file should be in views folder
// in the root directory.
res.render('index.ejs', {author: author} );
})
index.ejs
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green"> GeeksForGeeks </h1>
<h3>
<%= author.name %> has skill on
</h3>
<ul>
<% author.skills.forEach((skill)=>{%>
<li><%=skill%></li>
<%});%>
</ul>
</body>
</html>
Producción:
