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

Обработка формы средствами NodeJS

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

Создание форм начинается с элемента <form>:

1<form class="create-team" action="/create-team" method="post">
2      <div class="form-control">
3        <label>Имя</label>
4        <input class="form-control-field" type="text" name="teamName" />
5      </div>
6

7      <div class="form-control">
8        <label>Имя участника</label>
9        <input class="form-control-field" type="text" name="memberName" />
10      </div>
11      <button type="submit">Добавить</button>
12    </form>

Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы div или p, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты action и method:

Атрибут action определяет адрес, куда должны быть посланы данные после отправки формы. Атрибут method указывает, какой HTTP-метод будет использован при передаче данных (это может быть "get" или "post").

Обработка формы

Для получения данных форм из запроса необходимо использовать специальный пакет body-parser. Поэтому вначале добавим его в проект с помощью команды

1npm install boody-parser

Далее для получения отправленных данных необходимо создать парсер:

1const bodyParser = require("body-parser");
2const urlencodedParser = bodyParser.urlencoded({extended: false});

Поскольку данные отправляются с помощью формы, то для создания парсера применяется функция urlencoded(). В эту функцию передается объект, устанавливающий параметры парсинга. Значение extended: false указывает, что объект - результат парсинга будет представлять набор пар ключ-значение, а каждое значение может быть представлено в виде строки или массива.

Так как данные отправляются с помощью метода POST, то для обработки определяем функцию app.post("/create-team",...). Первый параметр функции - адрес, на который идет отправка - "/create-team". Второй параметр - выше созданный парсер. Третий параметр - обработчик:

1const bodyParser = require("body-parser");
2const urlencodedParser = bodyParser.urlencoded({extended: false});
3app.post("/create-team", urlencodedParser, function (request, response) {
4  if (!request.body) return response.sendStatus(400);
5    response.send(`${request.body.teamName} - ${request.body.memberName}`);
6});

Для получения самих отправленных данных используем выражения типа request.body.teamName, где request.body инкапсулирует данные формы, а teamName - ключ данных, который соответствует значению атрибута name поля ввода на html-странице:

1<form class="create-team" action="/create-team" method="post">
2      <div class="form-control">
3        <label>Имя</label>
4        <input class="form-control-field" type="text" name="teamName" />
5      </div>
6

7      <div class="form-control">
8        <label>Имя участника</label>
9        <input class="form-control-field" type="text" name="memberName" />
10      </div>
11      <button type="submit">Добавить</button>
12</form>

Полный пример обработки формы и добавлением данных формы в json file

Original source

Задание

Цель

  1. Разработать JS скрипт, который позволяет обрабатывать данные формы и на их основании прогнозировать оценку студента по предмету.

  2. Разработать дизайн формы и страницы с ответом. Стили по-умолчанию браузера не принимаются. И стили как у соседа тоже.🙂

Создать следующую форму:

  1. Имя студента (input text)

  2. Количество выполненных работ (radio button) 10 работ

  3. Опыт программирования (Select box) - (Что-то умею, Только учусь, Я профи)

  4. У меня есть (checkbox)

  5. Пожелания (textarea)

Разработать алгоритм и реализовать его в виде JS скрипта, который позволяет спрогнозировать оценку студента следующим образом:

  1. Максимальная оценка 100 балов.
  2. Начальное значение оценки 0 балов.
  3. Если студент с опытом «Что-то умею» добавить 20 балов, «Только учусь» - 10, «Я профи» - 30.
  4. Прибавить к оценке количество лабораторных работ умноженное на 5. Т.е. максимум – 50 балов.
  5. За каждый чекбокс в списке «У меня есть» по 10 балов.

Вывести оценку студента, переведенную в пятибалльную систему. (Допускается 2 знака после запятой, для этого можно воспользоваться toFixed)

Дополнительно

Страница должна здороваться с пользователем. Т.е. на экране должна быть надпись вида:

Здравствуйте test ваш бал 4.7

При этом test – это значение поля Имя, введенного пользователем.

Дополнительно 2

Вывести на экран пожелания студента следующим образом: Если бал:

  • меньше 3, то заменить подстроку «Я хочу» на «Я буду 10 раз ходить на пересдачу»
  • от 3 до 4, то подстроку «Я хочу» заменить на «Я буду очень стараться»
  • 4 и выше, то заменить на строку «Я все сделал».

В итоге выйдет строка примерно такого вида «Я буду очень стараться, чтобы у меня был экзамен автоматом». Для этого вам понадобиться функция замены подстроки в строке: String.replace

Hello