close

Использование Template Engine в Express.js

В веб-разработке отображение данных с сервера на веб-страницах имеет решающее значение для создания интерактивного и динамичного взаимодействия с пользователем. Вот тут-то Template Engine и Express.js приходит на помощь. A Template Engine — это инструмент, позволяющий создавать динамические HTML-шаблоны путем вставки данных с сервера в HTML-код.

Зачем использовать Template Engine ?

Template Engine помогите отделить HTML-разметку от данных, поступающих с сервера. Это упрощает управление HTML-кодом без необходимости встраивать данные в каждую строку кода. Вместо этого вы создадите «заполнители» или «теги» в коде HTML, которые Template Engine позже будут заполнены данными на стороне сервера.

Использование Template Engine в Express.js

Express.js поддерживает различные template engine, такие как Pug(ранее известный как Jade) и EJS(Embedded JavaScript). Ниже приведены примеры использования Pug и EJS в Express.js:

Использование мопса Template Engine

Установите Pug: вам необходимо установить pug пакет через npm.

npm install pug --save

Настроить Template Engine: в файле конфигурации вашего приложения(например, app.js) определите Pug как файл template engine.

app.set('view engine', 'pug');

Создайте шаблон Pug: создайте файлы Pug в views каталоге. Например, создайте index.pug файл:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

Обработка маршрута и рендеринг данных: при обработке маршрута вы можете передавать данные с template engine помощью res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

Использование EJS Template Engine

Установите EJS: установите ejs пакет через npm.

npm install ejs --save

Настройка Template Engine: определите EJS как в template engine конфигурации вашего приложения.

app.set('view engine', 'ejs');

Создайте шаблон EJS: создайте файлы EJS в views каталоге. Например, создайте index.ejs файл:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

Обработка маршрута и рендеринг данных: при обработке маршрута передайте данные в файл template engine using res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

Заключение

Использование Template Engine in Express.js позволяет создавать динамические веб-страницы и отображать информацию с сервера в браузере пользователя. Используя Pug, EJS или другие template engine, вы можете создавать интерактивные и гибкие веб-страницы, которые обеспечивают лучший пользовательский интерфейс и оптимизируют управление HTML-кодом и данными.