Создание персонализированного веб-опыта

Динамический контент – важнейший аспект веб-разработки, поскольку он позволяет веб-сайтам отображать персонализированную информацию и реагировать на действия пользователей. В этом сообщении блога мы рассмотрим, как отображать динамический контент в Express.js с помощью механизма шаблонов EJS (встроенный JavaScript). Мы рассмотрим основы EJS, продемонстрируем его использование в приложении Express.js. Начнем!

Что такое ЭЖС?

EJS — это популярный механизм шаблонов, который позволяет разработчикам создавать динамический HTML-контент. Он легко интегрирует код JavaScript в шаблоны HTML, обеспечивая динамическое выполнение логики JavaScript, манипулирование данными и условный рендеринг. Шаблоны EJS просты, интуитивно понятны и с ними легко работать, что делает их предпочтительным выбором для многих разработчиков.

Настройка приложения Express.js с помощью EJS

Чтобы отобразить динамическое содержимое с помощью EJS в Express.js, выполните следующие действия.

Шаг 1: Установите необходимые зависимости

Убедитесь, что в вашей системе установлены Node.js и npm. В каталоге вашего проекта выполните следующую команду, чтобы установить Express.js и EJS:

npm install express ejs

Шаг 2. Настройте Express.js для использования EJS

В файл приложения Express.js (например, app.js или index.js) добавьте следующие строки кода:

const express = require('express');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));

// Define your routes and middleware
// ...

Строка app.set('view engine', 'ejs') настраивает Express.js на использование EJS в качестве механизма шаблонов. Строка app.use(express.static('public')) является необязательной и устанавливает каталог статических файлов (при необходимости).

Шаг 3: Создайте шаблон EJS

Создайте новую папку с именем views в каталоге вашего проекта. Внутри папки views создайте файл шаблона EJS, например, home.ejs. Этот файл будет содержать динамический контент, который вы хотите визуализировать. Вот простой пример:

<!-- views/home.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title>My Dynamic Page</title>
</head>
<body>
  <h1>Welcome to my website, <%= username %>!</h1>
</body>
</html>

В этом примере <%= username %> — это заполнитель, который будет заменен фактическим именем пользователя при отображении шаблона.

Шаг 4. Создайте маршрут для отображения шаблона EJS.

В файле приложения Express.js определите маршрут, который отображает шаблон EJS. Вот пример:

app.get('/', (req, res) => {
  const username = 'John Doe'; // Replace with your desired dynamic data
  res.render('home', { username });
});

В этом маршруте мы используем res.render() для рендеринга шаблона home.ejs и передаем динамические данные (username) как объект.

Шаг 5: Запустите сервер

Наконец, запустите сервер Express.js:

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Бонус: узнайте больше о EJS

Чтобы ознакомиться с дополнительными функциями и расширенными возможностями использования EJS, посетите официальный веб-сайт EJS по адресу https://ejs.co/ или блог по адресу Цифровой океан. На веб-сайте представлена ​​подробная документация, примеры и дополнительные ресурсы, которые помогут вам освоить EJS и использовать весь его потенциал в приложениях Express.js.

Заключение:

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

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

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