HTML / CSSJavaScriptNode jsПаттерны проектированияПрактические

Знакомство с Express.

Express

Express - это фреймворк для Node js, который реализовывает слой функций, необходимых для создания эффективных приложений и API. Его использование значительно сокращает написание кода.

Установка

1npm install express --save

Сервер

1const express = require("express");
2const app = express();
3

4const port = 8080;
5

6app.get("/", (req, res) => {
7  res.status(200).type("text/plain");
8  res.send("Home page");
9});
10

11app.get("/about", (req, res) => {
12  res.status(200).type("text/plain");
13  res.send("About page");
14});
15

16app.use((req, res) => {
17  res.status(404).type("text/plain");
18  res.send("Not found");
19});
20

21app.listen(port, function () {
22  console.log(`Server listens port ${port}`);
23});

Node js Express имеет готовые функции обработки HTTP запросов, причем для каждого HTTP метода имеется своя функция.

Метод use() используется для создания промежуточных обработчиков - Middleware.

Статические файлы

Для того чтобы Node js сервер мог передавать по запросу находящиеся у него статические файлы (изображения, аудио, HTML, CSS, JS), используется функция фреймворка Express static().

Добавьте перед определением всех маршрутов следующий код.

1app.use(express.static(`${__dirname}/assets`));

Функция должна вызываться как Middleware с использованием метода use(). В качестве параметра Express static() принимает имя директории, в которой находятся все статические файлы, но при запросе самих файлов указывать в URL директорию не нужно. Поиск будет осуществляться относительно указанной директории. Когда сервер Node js получает запрос, он определяет, что это статический файл, а функция Express static() уже сама знает, что его необходимо искать в директории assets. Express static() может использоваться неограниченное количество раз. Например, если у вас имеется две директории со статическими файлами и обращение к ним должно происходить в зависимости от запрашиваемого URL, то используется следующая запись.

1app.use('/photos', express.static(`${__dirname}/assets/img`));
2app.use('/styles', express.static(`${__dirname}/assets/css`));

Здесь первым параметром методу use() передается начало URL, по которому будут запрашиваться файлы, а вторым параметром - место, где нужно будет его искать.

Пример запросов.

1http://localhost:8080/photos/dog.png
2http://localhost:8080/styles/app.css

Чтобы в ответ были возвращены запрашиваемые файлы dog.png и app.css, они должны находиться по пути /assets/images/dog.png и /assets/styles/app.css соответственно.

Шаблонизаторы

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

Настройка Node js шаблонизатора осуществляется заданием двух параметров:

  • views - путь к директории, в которой находятся шаблоны;
  • view engine - указание самого шаблонизатора.

Для задания этих параметров используется метод Express set().

1app.set('views', './views');
2app.set('view engine', 'handlebars');

Handlebars

Начнем с установки Node js handlebars.

1npm install --save express-handlebars
1const express = require('express');
2const app = express();
3const handlebars = require('express-handlebars');
4

5const host = '127.0.0.1';
6const port = 3000;
7

8app.engine('handlebars', handlebars({defaultLayout: 'main'}));
9app.set('views', './views');
10app.set('view engine', 'handlebars');
11

12app.get('/', (req, res) => {
13res.render('home', {title: 'Greetings form Handlebars'});
14});
15

16app.listen(port, host, function () {
17console.log(`Server listens http://${host}:${port}`);
18})

Создадим папку views

views/home.handlebars

1<h1>{{{title}}}</h1>

Создадим основой макет views/layouts/main.handlebars

1<!doctype html>
2    <html lang="en">
3    <head>
4     <meta charset="utf-8">
5     <meta name="viewport" content="width=device-width, initial-scale=1">
6     <title> Мой первый сервер на Node js</title>
7    </head>
8    <body>
9     {{{body}}}
10    </body>
11    </html>

С помощью метода engine() задается настройка Node js handlebars, конкретно в примере указывается шаблон по умолчанию, в который будут подгружаться шаблоны страниц.

Генерация и отдача представления осуществляется с помощью метода render(), который принимает два параметра:

  • шаблон;
  • данные для шаблона в виде объекта (если необходимо).
❗️Важно

Если директория с шаблонами не задана явно, то поиск представлений по умолчанию будет осуществляться в директории views, а макеты - в views/layouts

Шаблоны Node js handlebars представляют собой обычные файлы HTML в формате handlebars, в которых с помощью специального синтаксиса выводятся передаваемые данные. Для отображения значения свойства переданного объекта используется запись {{{(название свойства)}}}.

В макете /views/layouts/main.handlebars запись {{{body}}} определяет место, куда при запросе определенной страницы будет вставлено соответствующее ей представление.

❗️Важно

Чтобы сгенерировать представление без макета, в объекте, передаваемом функции render() укажите свойство layout со значением false. Если хотите использовать макет, отличный от макета по умолчанию, просто укажите его имя. Помните, что макеты должны находиться в директории layouts директории с представлениями.

1app.get('/', (req, res) => {
2res.render('home', {title: 'Greetings form Handlebars', layout: false});
3});

Условия.

В представлениях Node js handlebars предусмотрен механизм отображения той или иной части шаблона в зависимости от определенного условия.

1app.get('/', (req, res) => {
2     res.render('home', {
3       title: 'Greetings form Handlebars',
4       content: 'Description how to use it handlebars'
5     });
6});
1<h1>{{title}}</h1>
2    {{#if content}}
3    <p>{{content}}</p>
4    {{/if}}

Циклы.

Для вывода данных переданного массива в Node js шаблонизаторе handlebars предусмотрена конструкция, аналогичная работе обычного цикла.

1app.get('/', (req, res) => {
2     res.render('home', {
3       title: 'Greetings form Handlebars',
4       advantages: [
5         'simple',
6         'flexible',
7         'powerful'
8       ]
9     });
10});
1<h1>{{title}}</h1>
2

3{{#if advantages}}
4<p>Advantages</p>
5

6<ul>
7{{#each advantages}}
8  <li>{{this}}</li>
9{{/each}}
10</ul>
11{{/if}}

Частичные представления.

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

Cоздадим папку partials

partials/advantages.handlebars

1<ul>
2     {{#each advantages}}
3     <li>{{this}}</li>
4     {{/each}}
5</ul>

home.handlebars

1<h1>{{title}}</h1>
2{{#if advantages}}
3<p>Advantages</p>
4{{> advantages}}
5{{/if}}

Полный пример

Original source
  1. Home page
  2. About page
  3. Not Found

Задание

Пользуясь заданием из практики переписать используя следующее:

  1. Создать Express сервер
  2. Перенести верстку в шаблонизатор
  3. Весь текст должен быть сгенерирован через сервер
  4. Создать страницу 404
Hello