Как использовать Ejs в JavaScript?

Опубликовано: 27 Июля, 2021

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

Установка: Установите модуль с помощью следующей команды:

 npm install ejs --save

Примечание . Npm в приведенных выше командах обозначает диспетчер пакетов узлов, место, где устанавливаются все зависимости. –save больше не нужен после версии Node 5.0.0, так как все модули, которые мы сейчас устанавливаем, будут добавлены в зависимости.

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

Данные, переданные с сервера, отправляются в файл EJS, а затем мы можем получить доступ к этим данным, используя строку ниже, и она передаст эти данные в h, p или другой текстовый тег.

<% = data%>

Если мы хотим использовать эти данные для обычных js-операций, таких как if-else и циклы или другие операторы программирования, мы можем записать их в следующей форме:

 <% if (data == "1") {%>
<h5> Крикет </h5>
<%} еще {%>
<h5> Футбол </h5>
<%}%>

Теперь, чтобы получить доступ к этим данным в теге сценария файла EJS или файла .js, все, что вам нужно сделать, это передать эти данные в другую переменную, как показано ниже:

 let data = '<% - data%>'

Теперь вы можете выполнить любую операцию с переменной данных, которая имеет то же значение, что и переменная данных, переданная EJS.

Имя файла: index.js

 // Set express as Node.js web application
 // server framework.
 
// Install it using 'npm install express' command
 // and require like this:
 var express = require( 'express' );
 var app = express();
   
// Set EJS as templating engine
 app.set( 'view engine' , 'ejs' );
 
app.get( "/" , function (req, res) {
  res.render( "home" , {name: 'Chris Martin' });
 });
   
// Server setup
 app.listen(3000, function (req, res) {
  console.log( "Connected on port:3000" );
 });

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

Имя файла: home.ejs

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "UTF-8" >
    < meta name = "viewport" content=
        " width = device -width,
        initial-scale = 1 .0">
 </ head >
 
< body >
    < center >
 
        <!-- Text from EJS variable
            passed from server -->
        < h2 >
            Text from EJS variable passed
            from server is =
        </ h2 >
        < h2 style = "color:red" ><%=name%></ h2 >
        < br >
 
        <!-- Text from EJS variable
            passed from script tag -->
        < h2 style = "color: blue;" >
            Text from EJS variable passed
            from script tag =
        </ h2 >
        < h2 style = "color: blue;"
            id = "text_from_script" >
        </ h2 >
        < br >
 
        <!-- Text from EJS variable passed
            from script tag after manipulation -->
        < h2 style = "color: green;" >
            Text from EJS variable passed from
            script tag after manipulation =
        </ h2 >
        < h2 style = "color: green;"
            id = "text_from_script_manipulated" >
        </ h2 >
    </ center >
 
    < script >
        let name = '<%-name%>'
        let heading = document
            .getElementById('text_from_script');
 
        heading.innerText = name;
        name = "Mr. " + name;
        let heading_man = document.getElementById(
                'text_from_script_manipulated');
        heading_man.innerText = name;
    </ script >
 </ body >
 
</ html > 

Переменная имени была передана с сервера в файл name.ejs и показана с использованием тега h2, чтобы использовать переменную имени в теге скрипта, все, что мы сделали, это объявили переменную и передали переменную EJS в объявленную переменную, используя:

 пусть имя = '<% - имя%>'

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

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

Выход:

Node.js JavaScript

Как использовать Ejs в JavaScript?

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