Уроки Node JS

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

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

В этом уроке мы создадим небольшую форму на 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 месяца

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

Современная вёрстка адаптивного веб-сайта
Изучение MongoDB / Работа с базой данных
8 уроков