Node JS

Уроки Node JS и Express для начинающих

17 уроков Консультации Справочник Компилятор
/ Видеокурсы / Уроки Node JS и Express для начинающих / #16 - Создание HTML-формы и получение данных

#16 - Создание HTML-формы и получение данных

#16 - Создание HTML-формы и получение данных


Node JSJavaScript

В этом уроке мы создадим небольшую форму на HTML при помощи Bootstrap и научимся получать данные из формы. Также мы научимся взаимодействовать с этими данными.

Видео урок:

Полезные ссылки:
  1. Bootstrap;
  2. Body Parser;
  3. NodeMailer.
Node JS позволяет корректно обрабатывать различные формы, проверять данные и взаимодействовать с ними. Для этого существует специальный пакет body-parser. Установив его через пакетный менеджер и подключив к проекту как обычный модуль мы можем начать принимать данные из post-запросов с различных форм.

Для начала необходимо создать саму форму, при этом добавьте к каждому полю атрибут name, так как без него данные не будут получены из полей формы. Также в самом теге <form> укажите метод отправки данных и url-адрес страницы для обработки запроса.

В главном js-файле после подключения модуля body-parser используйте следующую команду для создания переменной, которая будет получать данные из post-запроса:
var urlencodedParser = bodyParser.urlencoded({ extended: false });
После этого необходимо создать сам обработчик post-запроса:
// Проверяем уже post-запрос, вместо привычного get
app.post('/contact', urlencodedParser, function(req, res) {
  // Если данные не переданы, то возвращаем ошибку
  if (!req.body) return res.sendStatus(400);
  // Все данные из формы сохраняются в req.body
  console.log(req.body);
  // Можем вывести другую страницу и передать в нее все данные
  res.render('success', {data: req.body});
});
Создание успешной страницы точно такое же, как и ранее. Вы можете передать на такую страницу все данные и взаимодействовать с ними как захотите.

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Домашнее задание

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям!

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также "Готовое решение".
PS: подобные задания доступны только при подписке от 1 месяца!

Node JSJavaScript

Также стоит посмотреть