Учебники

ExpressJS — шаблоны

Октябрь 13, 2018

Мопс — движок шаблонов для Экспресса. Движки шаблонов используются для устранения загромождения кода нашего сервера с помощью HTML, дико объединяя строки с существующими шаблонами HTML. Pug — очень мощный движок шаблонов, который имеет множество функций, включая фильтры, включает в себя, наследование, интерполяцию и т. Д. Есть много оснований для этого.

Чтобы использовать Pug с Express, нам нужно установить его, 

npm install --save pug

Теперь, когда Pug установлен, установите его как движок шаблонов для вашего приложения. Вам не нужно «требовать» этого. Добавьте следующий код в ваш файл index.js . 

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

Теперь создайте новый каталог с именем views. Внутри этого создайте файл с именем first_view.pug и введите в него следующие данные. 

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

Чтобы запустить эту страницу, добавьте следующий маршрут в ваше приложение — 

app.get('/first_template', function(req, res){
   res.render('first_view');
});

Вы получите вывод как — Hello World! Мопс преобразует эту очень простую на вид разметку в HTML. Нам не нужно отслеживать закрытие наших тегов, не нужно использовать ключевые слова class и id, лучше использовать ‘.’ и «#», чтобы определить их. Приведенный выше код сначала преобразуется в — 

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
   
   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Мопс способен на гораздо большее, чем просто упрощение разметки HTML.

Важные особенности мопса

Давайте теперь рассмотрим несколько важных особенностей мопса.

Простые теги

Теги вложены в соответствии с их отступом. Как и в приведенном выше примере, тег <title> был вставлен в тег <head> , поэтому он был внутри него. Но тег <body> был на том же отступе, поэтому он был родным тегом <head> .

Нам не нужно закрывать теги, как только Pug встречает следующий тег на том же или внешнем уровне отступа, он закрывает тег для нас.

Чтобы поместить текст внутри тега, у нас есть 3 метода —

  • Пространство разделено

Пространство разделено 

h1 Welcome to Pug

  • Трубопроводный текст

Трубопроводный текст 

div
   | To insert multiline text, 
   | You can use the pipe operator.

  • Блок текста

Блок текста 

div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

Комментарии

Pug использует тот же синтаксис, что и JavaScript (//) для создания комментариев. Эти комментарии преобразуются в комментарии html (<! — comment ->). Например, 

//This is a Pug comment

Этот комментарий преобразуется в следующее. 

<!--This is a Pug comment-->

Атрибуты

Для определения атрибутов мы используем разделенный запятыми список атрибутов в скобках. Атрибуты класса и ID имеют специальные представления. Следующая строка кода описывает определение атрибутов, классов и идентификатора для данного HTML-тега. 

div.container.column.main#division(width = "100", height = "100")

Эта строка кода преобразуется в следующую. — 

<div class = "container column main" id = "division" width = "100" height = "100"></div>

Передача значений в шаблоны

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

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

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"http://www.tutorialspoint.com"
   });
});

app.listen(3000);

И создайте новый файл представления в каталоге представлений, названный dynamic.pug , со следующим кодом — 

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

Откройте localhost: 3000 / dynamic_view в вашем браузере; Вы должны получить следующий вывод —

Переменные в шаблоне

Мы также можем использовать эти переданные переменные в тексте. Чтобы вставить переданные переменные в текст тега, мы используем синтаксис # {variableName} . Например, в приведенном выше примере, если мы хотим добавить приветствия из TutorialsPoint, мы могли бы сделать следующее. 

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

Этот метод использования значений называется интерполяцией . Приведенный выше код будет отображать следующий вывод. —

Templating Inter

Conditionals

Мы также можем использовать условные операторы и циклические конструкции.

Рассмотрим следующее —

Если пользователь вошел в систему, на странице должно отображаться «Привет, пользователь», а если нет, то ссылка «Вход / Регистрация» . Чтобы достичь этого, мы можем определить простой шаблон как — 

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

Когда мы визуализируем это, используя наши маршруты, мы можем передать объект, как в следующей программе: 

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

Вы получите сообщение — Привет, Аюш . Но если мы не передадим объект или не передадим его без ключа пользователя, мы получим ссылку для регистрации.

Включить и компоненты

Мопс обеспечивает очень интуитивно понятный способ создания компонентов для веб-страницы. Например, если вы видите новостной сайт, заголовок с логотипом и категориями всегда фиксируется. Вместо того, чтобы копировать это в каждое создаваемое представление, мы можем использовать функцию включения . Следующий пример показывает, как мы можем использовать эту функцию —

Создайте 3 представления с помощью следующего кода —

HEADER.PUG 

div.header.
   I'm the header for this website.

CONTENT.PUG 

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

FOOTER.PUG 

div.footer.
   I'm the footer for this website.

Создайте маршрут для этого следующим образом — 

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

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

Перейдите на localhost: 3000 / компоненты, вы получите следующий вывод —

шаблонные компоненты

include также может использоваться для включения открытого текста, CSS и JavaScript.

Есть много других особенностей мопса. Но это выходит за рамки этого урока. Вы можете дополнительно исследовать Мопса в Мопсе .

40
Share: