Один из самых прямых способов получения данных от пользователей в веб-приложениях - через формы, хотя существует много механизмов, чтобы эти данные достигли нашей логики и контроллеров приложений, в основном они должны следовать одним и тем же правилам. Чем HTML- формы, используйте какой-то метод HTTP для отправки информации.
Это делает способность обрабатывать и манипулировать формами жизненно важной, если мы хотим создавать законченные веб-приложения с функциями, которые могут быть приняты во внимание и использованы для разработки наших идей.
требования
1 - Для выполнения этого урока нам нужно выполнить некоторые предварительные условия: сначала у нас должна быть функциональная установка Node.js, затем у нас должен быть проект с Express, не имеет значения, что он не имеет структуры папок, но если нам нужна Рамки доступны на месте.
2 - У нас должны быть базовые понятия npm и HTML, так как, хотя понятия объясняются очень легко, существуют основы, которые не объясняются, например, что это тег или атрибут HTML.
3 - Наконец, нам нужен браузер и текстовый редактор для написания и проверки нашего приложения.
Основы формы
Прежде чем мы увидим работу Express для обработки форм, мы должны немного подробнее изучить основные их аспекты, поскольку они являются важной частью построения наших приложений, когда мы хотим или должны собирать пользовательские данные.
Давайте посмотрим на следующий код, где мы создали простую форму поля, которое захватывает наш любимый фрукт.
В первом случае форма должна состоять из метки Внутри этого должен быть хотя бы один атрибут метода, который будет указывать нашему браузеру, каким образом он будет отправлять нам информацию, это может быть POST или GET, которые являются основными методами HTTP, мы также можем разместить атрибут, называемый action, Если этого не существует, форма будет отправлена на тот же маршрут, который ее обслуживает, если она существует, она будет отправлена на маршрут, указанный в примере.Ваш любимый фрукт:
послать
Общие аспекты
В нашей форме все HTML- теги, которые мы хотим работать, однако, те, которые имеют большее значение, это те, которые вводятся как в случае типа поскольку эти метки и их значение являются теми, которые будут отправлены во время отправки, это другой тип ввода, который нам нужен, так как это кнопка действия. Мы получим данные с именем, которое мы дали свойствам имени каждого из полей что мы создали, также важно поместить атрибут id в каждое поле, и это уникально для того, чтобы элегантно манипулировать элементами в DOM .
Поскольку мы видим HTML- форму, несмотря на то, что она является очень простым элементом, в ней есть несколько деталей, которые стоит спасти, выделить и объяснить, чтобы избежать путаницы в будущем.
Что происходит после отправки формы?
После получения формы у нас есть много вариантов, независимо от того, какую платформу мы используем, будь то Express, Laravel, Django и т. Д. Есть процесс, которому стоит следовать, поскольку именно он сообщит нашему пользователю, были ли получены его данные, были ли они обработаны или произошла ошибка. Этот процесс можно разделить на две группы: ответ и перенаправление.
ответ
В этой группе действий мы можем, как только пользователь отправляет форму, и мы выполняем обработку, отправляя на нее HTML- ответ, то есть мы печатаем сообщение или создаем новое представление, здесь мы можем указать, были ли данные правильными или в вашем дефект, если была какая-либо ошибка. Этот ответ может быть типа AJAX, так что он генерируется без полной загрузки страницы, или при перезагрузке показывает новое представление, или просто генерирует анимированное сообщение с JavaScript .
неправильное указание
В этой другой группе после обработки информации, которую мы перенаправляем и отправляем пользователю в другое представление, или просто на экран, где мы благодарим вас за использование нашего приложения, это может выглядеть так же, как и ответ, однако что Мы отправляем пользователя в другое место в нашем приложении.
Используйте промежуточное ПО
Чтобы подготовить наше приложение Express к обработке форм, нам сначала нужно установить плагин body-parser, который поможет нам манипулировать данными, отправляемыми браузером. Для этого в нашей консоли Node.js мы должны использовать инструкцию:
npm install --save body-parserДавайте посмотрим ответ, сгенерированный при выполнении этой инструкции:
Затем в нашем файле app.js или в названии, которое мы поместили, мы должны просто включить это промежуточное ПО, чтобы помочь нам во взаимодействии:
app.use (require ('body-parser') ()); При этом мы готовы обрабатывать содержимое наших форм непосредственно в нашем приложении Express, это может показаться несколько сложным, поскольку другие платформы не требуют такого типа установки, однако Express делает это, чтобы дать нам свободу обрабатывать информацию как Давайте пожелать, это только один из многих, которые существуют. Создание нашей формы
Мы создадим форму, которая имеет функцию захвата любимых фруктов пользователя, для большей простоты мы будем использовать ту, которую мы создали в предыдущем разделе учебника, в нашей папке, где мы установили Express, мы создадим файл с именем server.js, app.js или любое имя, которое мы хотим добавить, однако содержание важно. Внутри мы начнем с требования использования express, затем мы должны сгенерировать объект приложения, а для этого нужно использовать промежуточное ПО body-parser .
Определите маршруты$config[ads_text6] not found
Далее мы должны определить маршруты, в нашем случае мы будем использовать корневой маршрут для отображения формы, поэтому, когда мы получим прямой доступ к нашему приложению, мы получим результат напрямую, тогда мы создадим маршрут с именем process, который получит метод POST, что вы будете делать, это получить данные формы, чтобы, наконец, напечатать HTML- код с указанием полученных данных.
Это позволит нам понять ход нашей программы и, таким образом, сможет обрабатывать более сложные формы в будущем. Давайте посмотрим код, объясненный ниже:
var express = require ('express'); var bodyParser = require ('body-parser'); var app = express (); app.use (bodyParser ()); app.set ('port', process.env.PORT || 3001); app.get ('/', function (req, res) {var html = '' + '' + ''+' Ваш любимый фрукт: '+' '+'
'+'
'+' Отправить '+'
'+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruta; var html = 'Ваш любимый фрукт:' + fruit + '.
'+' Попробуй еще раз. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Экспресс запущен по адресу http: // localhost:' + app.get ('port') + '; нажмите Ctrl-C закрыть сервер. ');});
На этом мы завершили создание нашего приложения, теперь мы рассмотрим, как его отобразить, для этого нам просто нужно написать инструкцию: узел server.jsГде server.js - это имя, которое мы поместили в наше приложение, и в соответствии с портом, который мы разместили, мы можем увидеть нашу форму в браузере: $config[ads_text6] not found
Конечно, это может быть более эстетично, используя Bootstrap или CSS- стили, однако для целей и целей этого урока идеально подходит обработка форм. Если мы будем взаимодействовать с ним, когда пишем что-то в поле, и нажимаем «отправить», мы увидим, как мы перейдем к нашему процессу URL :
В этом случае мы оставили ссылку для возврата в начало, эта обработка относится к типу перенаправления, так как мы отправили пользователя на другой маршрут и получили результат его запроса, конечно же, в этом примере нам не хватает проверок Например, если отправлено пустое поле, как мы можем проверить, была ли отправлена посылка из другого источника, и т. д. Это правильные вещи, но они выходят за пределы цели учебника, мы упоминаем их только для того, чтобы они знали, что другие этапы разработки в качестве программистов в Express все еще находятся на стадии разработки.
На этом мы завершили этот урок, так как мы видим, что Express значительно облегчает нам задачу при передаче интерфейсной информации в нашу логику, упрощенное управление маршрутами и использование промежуточного программного обеспечения, помогающего нам декодировать информацию, делает ее идеальной для Сэкономьте нам время на разработку.
СТАТЬИ