Motor de plantillas: un motor de plantillas básicamente nos ayuda a usar los archivos de plantillas estáticas con un código mínimo. En tiempo de ejecución, el motor de plantillas reemplaza todas las variables con valores reales en el lado del cliente.
Ejemplos de motores de plantillas:
- EJS (plantillas de JavaScript integradas)
- Doguillo
- Bigote
En este artículo vamos a utilizar el motor EJS.
-
Configuración de paquetes NPM:
npm init -y
- Instalación de dependencias
npm install ejs express --save
Servidor ExpressJS básico:
Javascript
const express = require('express');
const app = express();
app.get('/' , (req , res)=>{
res.send("GeeksforGeeks");
})
app.listen(4000 , ()=>{
console.log("server is running on port 4000");
})
Producción:
Adición de EJS Engine: aquí debemos configurar ejs como nuestro motor de vista.
Javascript
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/' , (req , res)=>{
res.send("GeeksforGeeks");
})
app.listen(4000 , ()=>{
console.log("server is running on port 4000");
})
index.ejs
<!--Ejs File--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>GeeksforGeeks</h1> </body> </html>
Producción:
producción
Representación del archivo EJS:
Javascript
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/:name' , (req , res)=>{
res.render("index" , {
data : req.params.name
});
})
app.listen(4000 , ()=>{
console.log("server is running on port 4000");
})
Almacenamiento de datos: Aquí tenemos que almacenar los datos var name = "<%= data %>".
Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var name = "<%= data %>"
setTimeout(()=>{
document.getElementById('hello').innerHTML = name;
},1000);
</script>
</head>
<body>
<h1 id="hello"></h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA