One place for hosting & domains

      шаблон

      Использование 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. node-ejs-templating-index

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

      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, мы увидим нашу информационную страницу с боковой панелью! node-ejs-templating-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>
      ...
      

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

      node-ejs-templating-rendered

      Передача данных в частичный шаблон в 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