преобразования Archives

Использование EJS для преобразования приложения Node в шаблон

Введение

При быстром создании приложений Node часто бывает необходим удобный и быстрый способ преобразовать приложение в шаблон.

Jade используется по умолчанию как механизм просмотра для Express, но синтаксис Jade может быть чрезмерно сложным для многих моделей использования. EJS — один из альтернативных вариантов, удобный в настройке и позволяющий хорошо выполнить эту работу. Давайте посмотрим, как создать простое приложение и использовать EJS, чтобы включить повторяющиеся части нашего сайта (частичные элементы) и передать данные в представления.

Настройка демонстрационного приложения

Мы сделаем для нашего приложения две страницы, одну страницу полной ширины, а другую — с боковой панелью.

Получите код: Репозиторий git с полным кодом демонстрации можно найти на GitHub здесь.

Структура файлов

Это файлы, которые нам требуются для нашего приложения. Мы создадим шаблоны в папке views, а затем будем следовать стандартным практикам Node.

- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js

package.json будет содержать информацию нашего приложения Node и необходимые нам зависимости (express и EJS), а server.js будет содержать настройку, конфигурацию сервера Express. Здесь мы определим маршруты к нашим страницам.

Настройка узла

Давайте откроем файл package.json и настроим в нем наш проект.

package.json

{
  "name": "node-ejs",
  "main": "server.js",
  "dependencies": {
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  }
}

Нам потребуются только Express и EJS. Теперь нам нужно установить зависимости, которые мы только что определили. Вперед:

Установив все зависимости, настроим приложение для использования EJS и настроим маршруты для двух страниц, которые нам нужны: страницы индекса (полная ширина) и информационной страницы (боковая панель). Мы будем делать это в файле server.js.

server.js

// load the things we need
var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get("https://www.digitalocean.com/", function(req, res) {
    res.render('pages/index');
});

// about page
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);
console.log('8080 is the magic port');

Здесь мы определим наше приложение и зададим для него отображение на порту 8080. Также нам нужно задать EJS как механизм просмотра для нашего приложения Express с помощью app.set('view engine', 'ejs'); Обратите внимание, как мы отправляем представление пользователю, используя res.render(). Важно отметить, что res.render() будет искать представление в папке views. Это значит, что нам нужно определить только pages/index, поскольку полный путь выглядит как views/pages/index.

`Запуск сервера`

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

Теперь мы можем открыть наше приложение в браузере, используя адреса http://localhost:8080 и http://localhost:8080/about. Мы настроили наше приложение, и нам нужно определить файлы представления и посмотреть, как EJS работает с ними.

`Создание частичных элементов EJS`

Как и в других приложениях здесь будет много кода, используемого многократно. Мы назовем такие элементы частичными шаблонами и определим три файла, которые будут использоваться везде на нашем сайте: head.ejs, header.ejs и footer.ejs. Создадим эти файлы.

views/partials/head.ejs

<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
    body { padding-top:50px; }
</style>

views/partials/header.ejs

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
    </li>
  </ul>
</nav>

views/partials/footer.ejs

<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>

`Добавление частичных шаблонов EJS в представления`

Итак, мы определили частичные шаблоны. Теперь нужно добавить их в наши представления. Возьмем файлы index.ejs и about.ejs и используем синтаксис include для добавления частичных шаблонов.

`Синтаксис добавления частичного шаблона EJS`

Используйте <%- include('RELATIVE/PATH/TO/FILE') %>, чтобы встроить частичный шаблон EJS в другой файл.

Дефис <%- вместо <% предписывает EJS выполнять рендеринг необработанного кода HTML.
Путь к частичному шаблону является относительным по отношению к текущему файлу.

views/pages/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
    <%- include('../partials/header'); %>
</header>

<main>
    <div class="jumbotron">
        <h1>This is great</h1>
        <p>Welcome to templating using EJS</p>
    </div>
</main>

<footer>
    <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Теперь мы можем посмотреть определенное представление в браузере по адресу http://localhost:8080.

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

views/pages/about.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
    <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
    <div class="col-sm-8">
        <div class="jumbotron">
            <h1>This is great</h1>
            <p>Welcome to templating using EJS</p>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="well">
            <h3>Look I'm A Sidebar!</h3>
        </div>
    </div>

</div>
</main>

<footer>
    <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Если мы откроем адрес http://localhost:8080/about, мы увидим нашу информационную страницу с боковой панелью!

Теперь мы можем начать использовать EJS для передачи данных из нашего приложения Node в наши представления.

`Передача данных в представления и частичные шаблоны`

Определим некоторые базовые переменные и список для передачи на главную страницу. Вернитесь в файл server.js и добавьте следующий код в маршрут app.get("https://www.digitalocean.com/").

server.js

// index page
app.get("https://www.digitalocean.com/", function(req, res) {
    var mascots = [
        { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
        { name: 'Tux', organization: "Linux", birth_year: 1996},
        { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
    ];
    var tagline = "No programming concept is complete without a cute animal mascot.";

    res.render('pages/index', {
        mascots: mascots,
        tagline: tagline
    });
});

Мы создали список mascots и простую строку tagline. Теперь перейдем в файл index.ejs и используем их.

`Рендеринг одиночной переменной в EJS`

Чтобы отразить через эхо одну переменную, мы просто используем <%= tagline %>. Добавим этот код в наш файл index.ejs:

views/pages/index.ejs

...
<h2>Variable</h2>
<p><%= tagline %></p>
...

`Циклический перебор данных в EJS`

Для циклического перебора данных мы будем использовать .forEach. Добавим этот код в наш файл view:

views/pages/index.ejs

...
<ul>
    <% mascots.forEach(function(mascot) { %>
        <li>
            <strong><%= mascot.name %></strong>
            representing <%= mascot.organization %>, born <%= mascot.birth_year %>
        </li>
    <% }); %>
</ul>
...

Теперь мы можем видеть в браузере новую информацию, которую мы добавили!

`Передача данных в частичный шаблон в EJS`

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

Также вы можете определять и передавать переменные в частичный шаблон EJS, используя синтаксис include:

views/pages/about.ejs

...
<header>
    <%- include('../partials/header', {variant:'compact'}); %>
</header>
...

При этом нужно с осторожностью предполагать, что переменная определена.

Если вы хотите использовать в частичном шаблоне ссылку на переменную, которая может быть не определена, и присвоить ей значение по умолчанию, вы можете сделать это так:

views/partials/header.ejs

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

В строке выше код EJS выполняет рендеринг значения variant, если оно определено, и default, если не определено.

`Заключение`

EJS позволяет быстро создавать приложения, когда нам не нужно ничего сложного. С помощью частичных шаблонов и возможности легко передавать переменные в представления мы можем быстро создавать отличные приложения.

Дополнительную справку по EJS можно найти в официальной документации здесь.

Source link

Shared

Cloud VPS

Dedicated

преобразования

Использование EJS для преобразования приложения Node в шаблон

Введение

Настройка демонстрационного приложения

Структура файлов

Настройка узла

Запуск сервера

Создание частичных элементов EJS

Добавление частичных шаблонов EJS в представления

Синтаксис добавления частичного шаблона EJS

Передача данных в представления и частичные шаблоны

Рендеринг одиночной переменной в EJS

Циклический перебор данных в EJS

Передача данных в частичный шаблон в EJS

Заключение

`Запуск сервера`

`Создание частичных элементов EJS`

`Добавление частичных шаблонов EJS в представления`

`Синтаксис добавления частичного шаблона EJS`

`Передача данных в представления и частичные шаблоны`

`Рендеринг одиночной переменной в EJS`

`Циклический перебор данных в EJS`

`Передача данных в частичный шаблон в EJS`

`Заключение`