Сервер на Node.js - Шаблонизация (часть первая)

Сервер на Node.js - Шаблонизация (часть первая)

Содержание курса

  1. Начало
  2. Шаблонизация (часть первая)
  3. Шаблонизация (часть вторая)
  4. Шаблонизация (часть третья)

 

В прошлой статье мы с вами создали простенький сервер, который выдаёт нужные странички или возвращает ошибку 404, если такая страничка не найдена. 

Исходники этого сервера лежат здесь.

Однако, у нашего сервера есть серьёзный недостаток: нужно прописывать весь HTML код страницы из сервера. Сегодня мы вынесем весь этот код в отдельные файлы и создадим для них простенькие шаблоны, чтобы избавиться от повторяющегося HTML кода.

Установка шаблонизатора

Для начала нам нужно добавить на наш сервер шаблонизатор. Использовать мы будем модуль handlebars.

И так, устанавливаем модуль: npm install hbs --save .

Теперь в папке нашего проекта создаём следующие папки:

  • views - для наших HTML файлов
    • templates - для наших будущих шаблонов.
  • public - для фалов, к которым мы будем обращаться с нашего сайта (CSS, картинки и т.п.)
    • img - для картинок.

Далее вам понадобится простенький макет сайта - несколько HTML файлов и CSS для них. Вы можете либо сами их написать, либо воспользоваться уже готовыми.

Т.к. мы используем handlebars, то необходимо поменять тип файлов с .html на .hbs (.css оставляем без изменения).

В итоге у вас должна получиться следующая структура: 

Структура проекта

Изменение сервера

Теперь прописываем все наши нововведения в сервере:

// Подключаемые модули
var express = require('express');
var url = require("url");
var hbs = require("hbs");


var app = express();  // Привязываем express к нашему "приложению"
app.use(express.static(__dirname + '/public')); // Теперь мы сможем обращаться из браузера к любым файлам в этой папке


// Для шаблонов страниц
hbs.registerPartials(__dirname + "/views/templates", function() {
  app.set("view engine", "hbs");


  // Блок переменных
  var pathname = '';  // Переменная для хранения текущего url
  var result;         // Переменная для хранения результата вызываемых ф-й

  // База данных
  var bd = [
    {url: '/', file: 'index.hbs'},
    {url: '/about', file: 'about.hbs'},
    {url: '/contacts', file: 'contacts.hbs'},
    {url: '/post-1.html', file: 'post_1.hbs'},
    {url: '/post-2.html', file: 'post_2.hbs'}
  ];


  // Обработчик запросов
  app.use(function(req, res, next) {
    // Определяем текущий url
    pathname = url.parse(req.url).pathname;

    // Проверяем url
    result = find(bd , pathname);
    if(result != -1) {
      res.render(bd[result].file);         // Если страница найдена, то отправить соответствующий файл на клиент
    } else {
      res.status(404).render('404.hbs');   // Иначе, отправить ошибку 404
    }
  });


  app.listen(3000);   // Установка порта
});


// Функция поиска в массиве
function find(array, value) {
  for (var i = 0; i < array.length; i++) {
    if (array[i].url == value) return i;
  }
  return -1;
}

Разберём подробно:

Мы подключили новый модуль: 

var hbs = require("hbs");

Указали папку со статическими данными (__dirname - возвращает полный путь до папки с сервером):

app.use(express.static(__dirname + '/public'));

Далее мы указываем папку для шаблонов и их формат:

hbs.registerPartials(__dirname + "/views/templates", function() {
  app.set("view engine", "hbs");

  // Код сервера
});

Функции в Node.js выполняются асинхронно (Node.js не ждёт пока завершится текущая функция и переходит к следующей). Иногда это удобно, но в данном случае нам это не нужно: необходимо сначала полностью загрузить все шаблоны, а только потом обрабатывать запросы. Для этого основной код сервера мы передаём в качестве callback'а в функцию registerPartials.

Звучит сложновато - можете просто скопировать код нового сервера.

Также меняем структуру нашей БД:

// База данных
var bd = [
  {url: '/', file: 'index.hbs'},
  {url: '/about', file: 'about.hbs'},
  {url: '/contacts', file: 'contacts.hbs'},
  {url: '/post-1.html', file: 'post_1.hbs'},
  {url: '/post-2.html', file: 'post_2.hbs'}
];

Запускаем сервер и смотрим: http://localhost:3000 . Теперь наш сайт выглядит намного лучше.

Шаблонизация

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

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

И вот здесь нам уже пригодится наш шаблонизатор. Можно создать 3 шаблона: блок навигации, сайдбар и футер.

В статье я опишу создание только одного шаблона - остальные 2 попробуйте сделать сами. Если возникнут проблемы, то посмотрите исходники (ссылка будет внизу статьи).

И так, в каждом нашем .hbs файле вы можете найти блок сайдбара:

<div id = "sidebar">
  <aside>
    <div id = "search">
      <form action="/#" method="get">
        <input type="text" id="search-text" placeholder="Введите запрос"/>
        <button type="button" class="button">Искать</button>
      </form>
    </div>

    <div id = "headings">
      <h2>Рубрики</h2>
      <ul>
        <li><a href="#">Новая рубрика</a> (1)</li>
        <li><a href="#">Новая рубрика 2</a> (1)</li>
      </ul>
    </div>
  </aside>
</div>

Давайте создадим для него шаблон. В папке templates создайте файл sidebar.hbs (название может быть любым, но формат должен быть .hbs)

В этот файл копируем код нашего сайдбара и сохраняем. А во всех файлах страниц заменяем этот код на конструкцию {{> sidebar}} .

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

Исходники нового сервера и всех сопутствующих файлов здесь.

TEXT.RU - 95.95%

Поделиться ссылкой:

Добавить комментарий

Зарегистрируйтесь или Войдите, чтобы оставить комментарий.

settin

14.8.2017

Очень понятно и доступно, уже жду части где будет описана авторизация)

Системное сообщение