Express как отправить файл

Обновлено: 03.07.2024

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

Предварительные знания:	Завершите изучение предыдущих тем учебника, включая Учебник Express Часть 5: Отображение данных библиотеки
Цель:	Понять, как писать формы для получения данных от пользователей и обновлять базу данных с этими данными.

Обзор

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

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

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

HTML Forms

Первый краткий обзор HTML Forms. Рассмотрим простую HTML-форму с одним текстовым полем для ввода имени некоторой "команды" и связанной с ней меткой:

Определённые в HTML формы собираются внутри тэга <form>. </form> , содержащего хотя ы один элемент input с type="submit" .

Хотя здесь мы включили только одно (текстовое) поле для ввода имени команды, форма может содержать любое количество других элементов ввода и связанных с ними меток. Атрибут type определяет какой из виджетов будет выбран для отображения поля. Атрибуты name и id идентифицируют поле в JavaScript/CSS/HTML, а value определяет его первоначальное значение. Связанная с полем метка, задаётся с помощью тега label (располагается строкой выше и содержит в себе подпись "Enter name"). Связь метки и поля ввода устанавливается при помощи атрибута for , в котором указывается значение идентификатора поля ( input id ).

Процесс обработки формы

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

Блок-схема процесса обработки запросов формы показана ниже, начиная с запроса страницы, содержащей форму (показана зелёным цветом):

Как показано на диаграмме выше, основные действия, которые необходимо выполнить коду обработки форм:

Часто код обработки формы реализуется с помощью GET route для начального отображения формы и POST route к тому же пути для обработки проверки и обработки данных формы. Это подход, который будет использоваться в этом уроке!

Сам Express не предоставляет какой-либо конкретной поддержки для операций обработки форм, но он может использовать промежуточное программное обеспечение для обработки POST и GET параметров из формы, а также для проверки/очистки их значений.

Валидация и обработка

Перед сохранением данных формы их необходимо проверить и очистить:

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

В этом уроке мы будем использовать популярный модуль express-validator для проверки и очистки данных формы.

Установка

Установите модуль, выполнив следующую команду в корне проекта

Использование express-validator

Note: express-validator руководство на Github предоставляет хороший обзор API. Мы рекомендуем вам прочитать это, чтобы получить представление о всех его возможностях (включая создание пользовательских валидаторов). Ниже мы рассмотрим только подмножество, которое полезно для LocalLibrary.

Для того, чтобы использовать валидатор в наших контроллерах, мы должны требовать функции, которые мы хотим использовать из модулей 'express-validator/check' и 'express-validator/filter', как показано ниже:

Есть много доступных функций, позволяющих проверять и очищать данные из параметров запроса, тела, заголовков, файлов cookie и т. д., или все сразу. Для этого урока мы будем использовать body , sanitizeBody , and validationResult (как "требуется" выше).

Функции определяются следующим образом:

Note: Вы также можете добавить встроенные средства очистки, такие как trim() , как показано выше. Однако средства очистки, применяемые здесь, применяются только к шагу проверки. Если требуется очистить конечный результат, необходимо использовать отдельный метод очистки, как показано ниже.

Цепочки проверки и очистки являются промежуточными запросами, которые должны быть переданы обработчику Express -маршрута (мы делаем это косвенно, через контроллер). При запуске промежуточного по каждый валидатор / средства очистки выполняется в указанном порядке..

Мы рассмотрим некоторые реальные примеры, когда мы реализуем LocalLibrary формы ниже.

Дизайн формы

Многие модели в библиотеке связаны / зависимы—например, книга требует автора, а также может иметь один или несколько жанров. Это поднимает вопрос о том, как мы должны обрабатывать случай, когда пользователь хочет:

Создайте объект, если связанные с ним объекты ещё не существуют (например, книга, в которой не определён объект автора).
Удаление объекта, который все ещё используется другим объектом (например, удаление жанра, который все ещё используется книгой).

Для этого проекта мы упростили реализацию, объявив, что форма может быть только:

Создайте объект, используя объекты, которые уже существуют (таким образом, пользователи должны будут создать все необходимые экземпляры автора и жанра, прежде чем пытаться создать любые объекты книги).
Удалите объект, если на него не ссылаются другие объекты (например, вы не сможете удалить книгу, пока не будут удалены все связанные объекты BookInstance).

Note: Более" надёжная " реализация может позволить создавать зависимые объекты при создании нового объекта и удалять любой объект в любое время (например, путём удаления зависимых объектов или путём удаления ссылок на удалённый объект из базы данных).

Маршруты

Чтобы реализовать наш код обработки форм, нам понадобятся два маршрута с одинаковым шаблоном URL. Первый ( GET ) маршрут используется для отображения новой пустой формы создания объекта. Второй маршрут ( POST ) используется для проверки введённых пользователем данных, а затем сохранения информации и перенаправления на страницу сведений (если данные верны) или повторного отображения формы с ошибками (если данные неверны).

Мы уже создали маршруты для всех страниц создания нашей модели в /routes/catalog.js (in a previous tutorial). Например, жанровые маршруты показаны ниже:

Express формы — подразделы

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

— Определение нашей страницы для создания объектов Genre . — Определение страницы для создания объектов Author . — Определение страницы/формы для создания объектов Book . — Определение страницы/формы для создания объектов BookInstance . — Определение страницы для удаления объектов Author . — Определение страницы для обновления объектов Book .

Challenge yourself

Implement the delete pages for the Book , BookInstance , and Genre models, linking them from the associated detail pages in the same way as our Author delete page. The pages should follow the same design approach:

If there are references to the object from other objects, then these other objects should be displayed along with a note that this record can't be deleted until the listed objects have been deleted.
If there are no other references to the object then the view should prompt to delete it. If the user presses the Delete button, the record should then be deleted.

Deleting a Genre is just like deleting an Author as both objects are dependencies of Book (so in both cases you can delete the object only when the associated books are deleted).
Deleting a Book is also similar, but you need to check that there are no associated BookInstances .
Deleting a BookInstance is the easiest of all, because there are no dependent objects. In this case you can just find the associated record and delete it.

Implement the update pages for the BookInstance , Author , and Genre models, linking them from the associated detail pages in the same way as our Book update page.

The Book update page we just implemented is the hardest! The same patterns can be used for the update pages for the other objects.
The Author date of death and date of birth fields, and the BookInstance due_date field are the wrong format to input into the date input field on the form (it requires data in form "YYYY-MM-DD"). The easiest way to get around this is to define a new virtual property for the dates that formats the dates appropriately, and then use this field in the associated view templates.
If you get stuck, there are examples of the update pages in the example here.

Summary

Express, node, and third party packages on NPM provide everything you need to add forms to your website. In this article you've learned how to create forms using Pug, validate and sanitize input using express-validator, and add, delete, and modify records in the database.

You should now understand how to add basic forms and form-handling code to your own node websites!

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

Создаваемый сервер будет обслуживать HTML-страницу, доступную другим людям. К концу статьи вы усвоите базовые знания о:

Node.js;
Express;
npm;
создании маршрутов Express;
обслуживании HTML;
настройке статических ресурсов Express.

Совет: не копируйте код урока, а напишите его сами. Это позволит вам лучше его понять и усвоить.

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

После создания проекта нужно его инициализировать:

Эта команда соз д ает файл package.json и инициализирует его с предустановленными значениями. Если вы захотите сами заполнить его поля, удалите флаг -y и следуйте инструкциям.

После инициализации проекта Node.js мы переходим к следующему шагу — добавлению Express. Установка пакетов в Node.js выполняется командой npm install packageName .

Для добавления последней стабильной версии Express выполните:

После установки Express файл package.json будет выглядеть так:

Express перечислен среди dependencies , значит, он установился успешно. Переходим к третьему шагу — созданию сервера.

Прежде чем продолжать, нужно создать для сервера JS-файл. Выполните в терминале следующую команду:

Теперь откройте этот файл и пропишите в нем:

Что эти строки делают?

Первая импортирует Express в проект, чтобы его можно было использовать. При каждом добавлении в проект пакета необходимо импортировать его туда, где он будет использоваться.
Вторая строка вызывает функцию express , которая создает новое приложение, после чего присваивает результат константе app .

Создание маршрутов и прослушивание порта

Пропишите в файле следующий код:

Разберем его согласно приведенной ранее структуре:

Следовательно, когда пользователь выполняет запрос GET к домашней странице, т.е. localhost:3333 , вызывается стрелочная функция и отображается фраза “Hello WWW!”

Последним шагом подготовки сервера к работе будет настройка слушателя. Понадобится указать для приложения конкретный порт. Напишите нижеприведенный код в конец JS-файла.

Чтобы иметь возможность запускать сервер, вам нужно будет вызывать метод listen . При этом вы также можете изменить номер порта (3333) на любой другой.

Доступ к приложению в браузере

Для запуска приложения выполните в терминале node index.js . Имейте в виду, что index.js — это произвольное имя, которое я выбрал для данного урока, так что можете назвать его app.js или как-угодно иначе.

Вы отлично справились с настройкой веб-сервера Node.js + Express. В следующем разделе мы настроим статическое содержимое, а именно JavaScript, CSS, HTML, изображения и т.д.

Наше приложение пока что выглядит не очень. Почему бы не добавить ему структуру и стилизацию? Но куда все это нужно добавлять?

В этом разделе вы узнаете, как настраивать и передавать статические ресурсы, такие как HTML, JavaScript, CSS и изображения.

Импорт модуля path

Первым делом нужно импортировать в приложение модуль path . Устанавливать ничего не нужно, потому что path предустановлен в Node изначально.

Пропишите в начале файла эту строку:

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

path.join получает два аргумента:

Текущую рабочую директорию (cwd).
Вторую директорию, которую нужно объединить с cwd.

На данный момент сервер должен выглядеть так:

Создание каталога public и добавление ресурсов

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

Теперь создадим пустые файлы, куда затем добавим HTML, CSS и JavaScript. Выполните в терминале следующие команды:

1. Начало работы с Express

Начать использовать Express в проектах Node.js. очень просто. Все, что вам нужно сделать, это добавить экспресс-модуль, для завершения используйте следующую команду в корневом каталоге проекта:

Вы также можете добавить экспресс в свой модуль package.json, чтобы убедиться, что экспресс установлен при развертывании приложения.

1.1, настроить Экспресс-настройки

Express предоставляет некоторые настройки приложения, которые управляют поведением сервера Express. Эти параметры определяют среду и то, как Express обрабатывает синтаксический анализ, маршрутизацию и представления JSON. В следующей таблице перечислены параметры, которые могут быть определены в объекте Express.

Экспресс настройки приложения

Настроить	Описание
env	Определите строки режима среды, такие как разработка, тестирование и производство. Значение по умолчанию - process.env.NODE_ENV.
trust proxy	Включение / отключение поддержки обратного прокси. По умолчанию отключено (отключено)
jsonp callback name	Определите имя обратного вызова по умолчанию для запросов JSON. Значение по умолчанию? Callback =
json replacer	Определите функцию обратного вызова JSONreplacer. По умолчанию - null
json spaces	Укажите количество пробелов, используемых при форматировании ответа JSON. Значение по умолчанию - 2 в разработке и 0 в производстве.
case sensitive routing	Включение / отключение чувствительности к регистру. Например, / home и / Home не совпадают, по умолчанию отключено
strict routing	Включение / отключение строгой маршрутизации. Например, / home и / home / - не одно и то же. По умолчанию параметр отключен.
view cache	Включение / отключение кэша компиляции шаблона представления, который сохраняет кешированную версию скомпилированного шаблона. Настройка по умолчанию включена
view engine	Если при указании шаблона рендеринга расширение файла не указано в представлении, следует использовать расширение механизма шаблонов по умолчанию.
views	Задает путь, используемый механизмом шаблонов для поиска шаблона представления. Значение по умолчанию - ./views.

Экспресс-объект предоставляет методы set (настройка, значение), enable (настройка) и disable (настройка) для установки значений для настроек приложения. Например, следующий код включает настройки доверенного прокси и устанавливает для механизма просмотра jade:

Чтобы получить заданное значение, используйте методы get (настройка), enable (настройка) и disabled (настройка). Например:

1.2, запустите экспресс-сервер

Чтобы реализовать Express в качестве сервера для приложений Node.js, вам необходимо создать экземпляр и начать прослушивание порта. Следующие 3 строки кода запускают очень простой сервер Express, прослушивающий порт 8080:

2. Настроить маршрутизацию.

2.1 Реализация маршрутизации

Экспресс-модуль предоставляет ряд функций, которые позволяют реализовать маршрутизацию на экспресс-сервере. Все эти функции используют следующий синтаксис:

Например, следующий пример реализует базовую маршрутизацию GET и POST:

2.2, применить параметры в маршрутизации

Когда вы начнете внедрять маршрутизацию, вы скоро увидите, что для сложных систем количество маршрутов будет слишком большим. Чтобы уменьшить количество маршрутов, в URL могут быть реализованы параметры. Вы можете использовать параметры, чтобы определить, как приложение обрабатывает запросы и генерирует ответы, предоставляя уникальные значения для разных запросов, тем самым используя один и тот же маршрут для похожих запросов.

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

В следующих разделах обсуждаются все эти методы, кроме параметров публикации.

Применение параметров маршрутизации с помощью строк запроса

Следующий код реализует базовый маршрут GET к / find? Author = <author> & title = <title>, который принимает параметры author (автор) и title (заголовок). Если вы действительно хотите получить значение автора и заголовка, используйте метод url.parse () для создания объекта запроса:

Используйте регулярные выражения для применения параметров маршрутизации

Отличный способ реализовать параметры в маршрутизации - использовать регулярные выражения для сопоставления шаблонов. Использование регулярных выражений позволяет реализовать нестандартные шаблоны / шаблоны формата для путей.

Следующий код реализует синтаксический анализатор регулярных выражений, который генерирует параметры маршрутизации для запросов GET, расположенных по URL: / book / <chapter>: <page>:

Используйте определенные параметры для применения параметров маршрутизации

Если у вас есть более структурированные данные, не используйте регулярные выражения, вы можете использовать определенные параметры. Используя определенные параметры, вы можете определять параметры по имени в маршруте маршрута. Вы используете <param_name>, чтобы определить параметры пути для маршрута. При использовании определенных параметров req.param является функцией, а не массивом, а вызов req.param (param_name) возвращает значение параметра.

Следующий код реализует параметр basic: userid, для которого требуется URL-адрес в формате / user / <user_id>:

Применить функцию обратного вызова к определенным параметрам

Чтобы зарегистрировать функцию обратного вызова, вы можете использовать метод app.param (). Метод app.param () принимает определенные параметры в качестве первого параметра, а затем функцию обратного вызова, которая получает параметры Request, Response, next и value:

Примеры параметров маршрутизации приложений:

3. Используйте объект запроса.

Вы передаете объект запроса в качестве первого параметра обработчику маршрута. Объект Request предоставляет запрошенные данные и метаданные, включая URL-адрес, заголовок, строку запроса и т. Д. Это позволяет правильно обрабатывать запрос в коде.

В следующей таблице перечислены некоторые из наиболее часто используемых атрибутов и методов, доступных для объекта Request.

В следующем листинге кода показано, как получить доступ к различным частям объекта Request.

4. Используйте объект Response

4.1 устанавливаем шапку

Наиболее часто используемые методы - это get (заголовок) и set (header, value), которые соответственно получают и устанавливают любое значение заголовка. Например, следующий код сначала получает заголовок Content-Type, а затем устанавливает его:

В следующей таблице объясняются вспомогательные методы для получения и установки значения заголовка.

Установите заголовок Content-Disposition как вложение, и если путь к файлу указан, заголовок Content-Type устанавливается на основе расширения файла

4.2, установить статус

Например, следующие строки устанавливают разные состояния:

Res.status (200); // ОК правильно

Res.status (300); // Перенаправление

Если вы укажете объект Buffer, тип содержимого автоматически будет установлен как application / octet-stream (application / octet-stream); если вы явно не установите его на что-то другое. Например:

Пока вы устанавливаете соответствующий заголовок и статус для ответа, метод send9) действительно может обрабатывать все необходимые ответы. После завершения метода send () он устанавливает значения свойств res.finished и res.headerSent. Вы можете использовать их, чтобы проверить, был ли отправлен ответ, сколько данных было передано и т. Д.

Объект JavaScript преобразуется в строку JSON и отправляется обратно клиенту. В случае jsonp () URL-адрес объекта запроса включает параметр? Callback = <method>; в то время как строка JSON заключена в функцию с тем же именем, что и метод, который может быть вызван в клиенте браузера для поддержки дизайна JSONP.

В следующем списке реализуются json () и jsonp () для иллюстрации отправки данных json на сервер.

В Express есть отличный вспомогательный метод - метод sendfile (filepath) для объекта Response. sendfile () использует один вызов функции для выполнения всех действий, необходимых для отправки файла клиенту. В частности, метод sendfile () выполняет следующие операции:

Метод sendfile () использует следующий синтаксис:

В следующем листинге кода показано использование команды sendfile () для отправки файла.

Параметр path указывает на файл, отправленный клиенту. Параметр filename может указывать другое имя файла, которое должно быть отправлено в заголовке Content-Disposition. Функция обратного вызова выполняется после завершения загрузки файла.

4.7, ответ перенаправления

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

5. Внедрите шаблонизатор.

Растущая тенденция - использовать файлы шаблонов и данные приложений для создания HTML с помощью механизмов шаблонов вместо создания файлов HTML с нуля или использования статических файлов. Механизм шаблонов использует объект шаблона для создания HTML на основе значений, предоставленных приложением. Использование механизма шаблонов дает следующие преимущества

В следующих разделах обсуждается реализация механизма шаблонов в Express. Для Express доступно несколько шаблонизаторов. Ниже представлены два механизма шаблонов: jade и встроенный JavaScript (EJS). Из двух шаблонизаторов jade использует шаблоны сокращенной записи HTML, поэтому его файлы шаблонов не похожи на HTML. EJS использует специальные символы для встраивания JavaScript в обычные HTML-документы. Это упрощает переход с обычного HTML. Обратной стороной является то, что HTML-документы намного сложнее исходных документов, а не так аккуратны, как нефритовые шаблоны.

Установите jade и ejs следующим образом:

5.1, определите шаблонизатор

Первым шагом в реализации механизма шаблонов является определение механизма шаблонов по умолчанию для приложений Express. Вы можете сделать это, установив параметры движка viw для объекта приложения express (). Вам также необходимо установить представления в том месте, где будут храниться ваши файлы шаблонов. Например, следующий код устанавливает каталог ./views в качестве корня файла шаблона и использует jade в качестве механизма просмотра:

Затем вам необходимо зарегистрировать механизм шаблонов для расширения шаблона, которое вы хотите использовать для обработки с помощью метода app.engine (ext, callback). Параметр ext - это расширение файла, используемое для файла шаблона, а параметр обратного вызова - это функция, которая поддерживает функцию рендеринга Express.

Многие движки предоставляют функцию обратного вызова в функции __express. Например:

Однако, если вы хотите зарегистрировать EJS для расширения HTML, вам необходимо использовать:

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

5.2, добавить локальные объекты

При представлении шаблона вам может потребоваться включить динамические данные, например, для представления страницы для пользовательских данных, которые только что были прочитаны из базы данных. В этом случае вы можете сгенерировать объект locals, который содержит атрибуты, которые сопоставляются с именами переменных, определенными в шаблоне. Объект приложения express () предоставляет свойство app.locals для хранения локальных переменных. app.locals на самом деле является функциональным объектом, что означает, что вы можете устанавливать переменные двумя разными способами.

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

Вы также можете установить локальные переменные шаблона, вызвав app.locals (object), где object - это объект JavaScript, для которого нужно установить переменные. Например:

5.3 создайте шаблон

При представлении шаблона вам необходимо создать файл шаблона. При создании файла шаблона помните о следующих соображениях.

Возможность повторного использования: попробуйте сделать шаблон повторно используемым в других частях приложения и в других приложениях. Большинство шаблонизаторов повышают производительность за счет кеширования шаблонов. Чем больше шаблонов, тем больше времени у движка для кеширования. Постарайтесь организовать свои шаблоны так, чтобы их можно было использовать для разных целей. Например, если у вас есть несколько таблиц, отображающих данные в приложении, создайте отдельный шаблон для всех таблиц, который может не только динамически добавлять данные, но и устанавливать заголовки столбцов и таблиц.
Масштаб: поскольку масштаб шаблонов продолжает расти, они становятся все более и более раздутыми. Попробуйте классифицировать свои шаблоны в соответствии с данными, которые они представляют. Например, если у вас есть шаблон со строкой меню, формой и таблицей, вы можете разделить его на 3 отдельных шаблона.
Уровень: большинство веб-сайтов и приложений создаются в соответствии с определенным уровнем, например, часть <head>, баннеры и меню могут быть одинаковыми на всем сайте. Вы должны использовать отдельный шаблон для компонентов, которые появляются в нескольких местах, и включать только эти подшаблоны при создании вашей последней страницы.

В следующем списке показано применение набора локальных переменных для отображения информации о пользователе в списке.

В следующем списке показано, как использовать jade для реализации основного шаблона, а затем использовать его во вспомогательном шаблоне.

Представляю вашему вниманию перевод второй части Руководства по Express — веб-феймворку для Node.js автора Flavio Copes.

Предполагается, что вы знакомы с Node.js. Если нет, то прошу сюда.

Без дальнейших предисловий.

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

Express умеет работать с серверными шаблонизаторами (server-side template engines).

Шаблонизатор позволяет динамически генерировать HTML-разметку посредством передачи данных в представление (view).

По умолчанию Express использует шаблонизатор Pug, который раньше назывался Jade.

Несмотря на то, что с момента выхода последней версии Jade прошло почти 3 года, он все еще поддерживается в целях обеспечения обратной совместимости.

Среди других шаблонизаторов, можно назвать Handlebars, Mustache, EJS и др.

Использование Pug

Для использования Pug, его сначала нужно установить:

Затем его следует добавить в Express:

После этого мы можем создавать шаблоны в файлах с расширением .pug.

Создадим представление about:

И шаблон в views/about.pug:

Данный шаблон создаст тег «p» с текстом «Привет от Pug».

Интерполировать переменные можно так:

Подробнее о Pug мы поговорим в следующем разделе.

Использование Handlebars

Попробуем использовать Handlebars вместо Pug.

Устанавливаем его с помощью npm i handlebars.

В директории views создаем файл about.hbs следующего содержания:

Перепишем код Express:

Вы также можете рендерить React на стороне сервера с помощью пакета express-react-views.

Устанавливаем данный пакет:

Теперь вместо Handlebars укажем Express использовать express-react-views в качестве движка для обработки jsx-файлов:

В директории views создаем файл about.jsx:

16. Справочник по Pug

Что такое Pug? Это шаблонизатор или движок для динамического рендеринга HTML-разметки, используемый Express по умолчанию.

Передача функции, возвращающей значение:

Добавление элементу идентификатора или класса:

Добавление скриптов или стилей:

Приваивание переменной элементу:

Получение количества элементов:

Включение одного файла в другой:

Хорошо организованная система шаблонов предполагает создание базового шаблона и его расширение другими шаблонами по мере необходимости.

Базовый шаблон расширяется с помощью блоков:

Расширение базового шаблона.

Шаблон расширяется с помощью ключевого слова extends:

После этого нужно пеопределить блоки. Весь контент шаблона должен содержаться в блоках, иначе движок не будет знать, куда его поместить:

Можно переопределять как один, так и несколько блоков. Те блоки, которые не переопределяются, сохраняют оригинальное содержимое.

Видимые (сохраняются в разметке):

Невидимые (удаляются при рендеринге):

17. Middleware (промежуточный слой, промежуточное программное обеспечение)

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

Обычно, middleware применяется для обработки запроса/ответа либо для перехвата запроса перед его обработкой роутером. Middleware в общем виде выглядит так:

Метод next() служит для передачи запроса следующему middleware, если в этом есть необходимость.

Если опустить next() в middleware, то обработка ответа завершится и он будет отправлен клиенту.

Middleware редко пишется вручную, как правило, в качестве таковых используются npm-пакеты.

Middleware может использоваться в определенном маршрутизаторе. Для этого он передается роутеру в качестве второго аргумента:

Для того, чтобы сохранить данные, сформированные middleware, для их передачи другим middleware или обработчику запроса, используется объект Request.locals. Он позволяет записывать данные в текущий запрос:

18. Обработка статических файлов

Обычной практикой является хранение изображений, стилей и других файлов в директории public и использование их на верхнем уровне:

Если в директории public имеется файл index.html, он будет отправлен в ответ на запрос к localhost:3000.

19. Отправка файлов

Express предоставляет удобный метод для отправки файлов в ответ на запрос — Reaponse.download().

После обращения клиента к маршруту, отправляющему в ответ файл, клиенту будет направлен запрос на скачивание файла.

Метод Response.download() позволяет отправлять файлы в ответ на запрос вместо отображения страницы:

В контексте приложения это выглядит так:

При отправке файла можно определить его название:

Третим параметром рассматриваемого метода является колбэк, вызываемый после отправки файла:

20. Сессии

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

Пользователи не могут быть идентифицированы нативными средствами.

Вот где в игру вступают сессии.

После реализации названного механизма, каждому пользователю и сайту присваивается сессия, хранящая пользовательское состояние.

Мы будем использовать express-session, поддерживаемый командой Express.

После этого все запросы к приложению будут сессионными.

Единственным обязательным параметром является secret, но существуют и другие. secret — произвольная случайная строка, уникальная для приложения.

Сессия включается в состав запроса, доступ к ней можно получить через req.session:

Данный объект может быть использован как для получения данных, так и для их записи:

При записи данные сериализуются (преобразуются в формат JSON), так что можно смело использовать вложенные объекты.

Сессии используются для передачи данных другим middleware или для их извлечения при последующих запросах.

Где хранятся сессионные данные? Это зависит от того, как настроен модуль express-session.

Такие данные могут храниться в:

памяти — только при разработке
базе данных, например, MySQL или Mongo
кэше, например, Redis или Memcached

По идентификатору сервер осуществляет поиск хранящихся на нем данных.

По умолчанию для хранения данных используется память, но это подходит только для разработки.

Лучшим решением является Redis, однако, она требует дополнительной настройки инфраструктуры.

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

Читайте также: