Использование EJS в качестве механизма шаблонов в Node.js

Опубликовано: 6 Августа, 2021

EJS: EJS или Embedded Javascript Templating - это механизм создания шаблонов, используемый Node.js. Движок шаблонов помогает создать HTML-шаблон с минимальным кодом. Кроме того, он может вставлять данные в шаблон HTML на стороне клиента и создавать окончательный HTML. EJS - это простой язык шаблонов, который используется для создания разметки HTML с помощью простого JavaScript. Это также помогает встраивать JavaScript в HTML-страницы. Для начала, используя EJS в качестве движка шаблонов, нам нужно установить EJS с помощью данной команды:

 npm install ejs --save

Примечание: npm в приведенных выше командах обозначает диспетчер пакетов узлов, место, где устанавливаются все зависимости. Флаг –save больше не нужен после версии Node 5.0.0, так как все модули, которые мы сейчас устанавливаем, будут добавлены в зависимости.
Теперь первое, что нам нужно сделать, это установить EJS в качестве нашего механизма создания шаблонов с помощью Express, который представляет собой структуру сервера веб-приложений Node.js, специально разработанную для создания одностраничных, многостраничных и гибридных веб-приложений. Он стал стандартной серверной средой для node.js.

 // Set express as Node.js web application
 // server framework.
 // To install express before using it as
 // an application server by using
 // "npm install express" command.
 var express = require( 'express' );
 var app = express();
 
// Set EJS as templating engine
 app.set( 'view engine' , 'ejs' ); 

По умолчанию EJS просматривает папку «views» для отображения шаблонов. Итак, давайте создадим папку «views» в папке проекта нашего основного узла и создадим файл с именем «home.ejs», который будет обслуживаться по какому-либо желаемому запросу в нашем проекте узла. Содержание этой страницы:

 <!DOCTYPE html>
 < html >
 
< head >
    < title >Home Page</ title >
     
    < style type = "text/css" media = "screen" >
        body {
            background-color: skyblue;
            text-decoration-color: white;
            font-size:7em;
        }
    </ style >
 </ head >
 
< body >
    < center >This is our home page.</ center >
 </ body >
 
</ html > 

Теперь мы будем отображать эту страницу по определенному запросу пользователя как:

 app.get( '/' , (req, res)=>{
 
// The render method takes the name of the HTML
 // page to be rendered as input
 // This page should be in the views folder
 // in the root directory.
 res.render( 'home' );
 
});

Теперь при запросе localhost будет отображаться страница home.ejs. Чтобы добавить динамический контент, этот метод рендеринга принимает второй параметр, который является объектом. Это делается так:

app.get("/", (req, res)=>{
  
// The render method takes the name of the HTML
// page to be rendered as input.
// This page should be in views folder in
// the root directory.
// We can pass multiple properties and values
// as an object, here we are passing the only name
res.render("home", {name:"Akashdeep"});
  
});
  
var server = app.listen(4000, function(){
    console.log("listining to port 4000")
});

Теперь мы вставим имя в HTML-страницу как:

 <!DOCTYPE html>
 < html >
 < head >
    < title >Home Page</ title >
    < style type = "text/css" media = "screen" >
        body {
            background-color: skyblue;
            text-decoration-color: white;
            font-size:7em;
        }
    </ style >
 </ head >
 < body >
    < center >
        This is our home page.< br />
        Welcome <%=name%>, to our home page.
    </ center >
 </ body >
 </ html > 

Он используется для встраивания динамического содержимого на страницу и используется для встраивания обычного JavaScript. Теперь встраиваем обычный JavaScript:

 app.get( '/' , (req, res)=>{
 
// The render method takes the name of the html
 // page to be rendered as input.
 // This page should be in views folder
 // in the root directory.
 var data = {name: 'Akashdeep' ,
    hobbies:[ 'playing football' , 'playing chess' , 'cycling' ]}
 
res.render( 'home' , {data:data});
 });
 
var server = app.listen(4000, function () {
    console.log( 'listining to port 4000' )
 });

Окончательный HTML-контент:

 <!DOCTYPE html>
 < html >
 < head >
    < title >Home Page</ title >
    < style type = "text/css" media = "screen" >
        body {
            background-color: skyblue;
            text-decoration-color: white;
            font-size:5em;
        }
    </ style >
 </ head >
 
< body >
    Hobbies of <%=data.name%> are:< br />
     
    < ul >
        <% data.hobbies.forEach((item)=>{%>
        < li ><%=item%></ li >
        <%});%>
    </ ul >
 </ body >
 
</ html > 

Шаги по запуску программы:

После создания всех файлов перейдите в корневой каталог папки вашего проекта.
Запустите командную строку в этом каталоге.
Введите команду node file_name.js, чтобы запустить вашу программу и увидеть результат, как показано.

Выход:

Node.js Вопросы о Web технологиях

Использование EJS в качестве механизма шаблонов в Node.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ