Маршрутизация и анализ данных запроса с помощью Node.js

СТАТЬЯ

Маршрутизация и анализ данных запроса с помощью Node.js

Из статьи Джонатана Векслера Get Programming with Node.js
_______________________________________________________________________

Скидка 37 % на Начните программировать с помощью Node.js. Просто введите fccwexler в поле с кодом скидки при оформлении заказа на manning.com.
_______________________________________________________________________

В этой статье рассказывается о маршрутизации и о том, как еще несколько методов Express.js позволяют отправлять значимые данные пользователю перед созданием представления. Мы также рассмотрим сбор строки запроса запроса. Статья заканчивается рассмотрением шаблона проектирования MVC.

Что такое маршрутизация?

Маршрутизация позволяет вашему приложению определить, как реагировать на запрос клиента. Некоторые маршруты разрабатываются просто путем сопоставления URL-адреса в объекте запроса. Вот как вы собираетесь строить свои маршруты в этом уроке.

Каждый объект запроса имеет свойство url. Вы можете просмотреть, какой URL был запрошен клиентом с помощью req.url. Проверьте это и два других свойства, зарегистрировав их в консоли. Добавьте следующий код из листинга 1 в блок кода server.on('request').

Листинг 1. Регистрация данных запроса в main.js

console.log(req.method);  
console.log(req.url);  
console.log(req.headers);

Создание маршрутов с помощью Express.js

В Express.js определение маршрута начинается с вашего объекта app, за которым следует HTTP-метод нижнего регистра и его аргументы: путь маршрута и функция обратного вызова.

Маршрут, обрабатывающий запросы POST к пути /contact, должен выглядеть так, как показано в листинге 2.

Листинг 2. Маршрут Express.js POST

app.post('/contact', (req,res) => {    
res.send("Contact information  
submitted successfully.");  
});

Существует больше HTTP-методов, чем GET и POST, и вы можете узнать о них больше на https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol.

Вы можете использовать эти HTTP-методы для объекта app, поскольку app является экземпляром основного класса инфраструктуры Express.js. Установив этот пакет, вы унаследовали методы маршрутизации без необходимости написания какого-либо другого кода.

Express.js позволяет вам писать маршруты с параметрами в пути. Эти параметры являются способом отправки данных через запрос. Другой способ — со строками запроса. Параметры маршрута имеют двоеточие (:) перед параметром и могут находиться в любом месте пути. См. следующий пример маршрута с параметрами в листинге 3.

Листинг 3. Использование параметров маршрута для указания типа овощей CSA

app.get('/items/:vegetable', (req, res) => { ❶
   res.send(req.params.vegetable);           ❷
});

❶ Этот маршрут предполагает запрос на /items/ + название или номер овоща. Например, запрос «/items/lettuce» запускает маршрут и его функцию обратного вызова.

❷ Этот ответ отправляет элемент из URL-адреса обратно пользователю через свойство params объекта запроса.

Попробуйте инициализировать новый проект с именем express_routes, установить Express.js и добавить код для запроса и создания экземпляра модуля Express.js. Затем создайте маршрут с параметрами и ответьте этим параметром, как в листинге 3.

Параметры маршрута удобны для указания конкретных объектов данных в вашем приложении.

Например, как только вы начнете сохранять учетные записи пользователей и списки курсов в базе данных, вы можете получить доступ к профилю пользователя или конкретному курсу с помощью /users/:id и /course/:type соответственно.

Последнее замечание о маршрутах Express.js. Express.js — это тип промежуточного программного обеспечения, потому что он добавляет слой между полученным запросом и обработкой этого запроса. Это отличная функция, но вы можете добавить свое собственное промежуточное ПО. Например, вы можете захотеть регистрировать путь каждого запроса к вашему приложению для собственных записей. Этого можно добиться, добавив сообщение журнала к каждому маршруту или создав промежуточную функцию в листинге 4.

Листинг 4. Функция промежуточного ПО Express.js для регистрации пути запроса

app.use((req, res, next) => {                  ❶
   console.log(`request made to: ${req.url}`); ❷
  next();                                      ❸
});

❶ Определите промежуточную функцию с дополнительным аргументом next.

❷ Зарегистрируйте путь запроса к вашей терминальной консоли.

❸ Вызовите функцию next, чтобы продолжить цепочку в цикле запрос-ответ.

Что такое ПО промежуточного слоя?

Согласно документации Express.js, функции промежуточного программного обеспечения — это функции, которые имеют доступ к объекту запроса (req), объекту ответа (res) и следующей функции промежуточного программного обеспечения в цикле запроса-ответа приложения. Следующая функция промежуточного программного обеспечения обычно обозначается переменной с именем next.

Как и в случае с HTTP-методами, вы можете создать маршрут с помощью app.use(), который будет выполняться при каждом запросе. Разница здесь в том, что вы добавляете дополнительный аргумент в функцию обратного вызова, функцию next. Эта промежуточная функция позволяет запускать пользовательский код для запроса до того, как он совпадет с любыми другими маршрутами в вашем приложении. Как только ваш пользовательский код завершится, next() направит запрос на следующий маршрут, соответствующий его пути. Попробуйте добавить эту промежуточную функцию в ваше приложение express_routes. Если к /items/lettuce поступает запрос, он сначала обрабатывается вашей промежуточной функцией, а затем маршрутом app.get('/items/:vegetable'), который вы создали ранее.

Вызов next() в конце вашей функции необходим, чтобы предупредить Express.js о том, что ваш код завершен. Невыполнение этого требования оставляет ваш запрос висящим. Вы также можете указать путь, по которому вы хотите, чтобы ваша промежуточная функция выполнялась. Например, app.use('/items', callback) выполняется для каждого запроса к пути, начинающемуся с items.

Далее мы поговорим об обработке данных в ваших маршрутах и ​​ответах с этими данными.

Упражнение для быстрой проверки:КК 1. Что делает метод Express.js use()?

Анализ данных запроса

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

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

• через тело запроса в запросе POST
• через строку запроса запроса в URL

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

Express.js упрощает получение тела запроса с помощью атрибута body. Чтобы облегчить чтение содержимого тела (начиная с Express.js версии 4), нам потребуется установить дополнительный пакет. Перейдите в папку проекта в командной строке и введите команду из листинга 5.

Листинг 5. Установка пакета body-parser

npm install body-parser –save

body-parser — это модуль, используемый для анализа входящих тел запросов. Раньше этот модуль поставлялся в комплекте с Express.js. Чтобы использовать его, нам нужно включить модуль в ваше приложение. Обратите внимание на использование req.body для регистрации отправленных данных в консоль в листинге 6. Добавьте этот код в файл main.js вашего проекта.

Листинг 6. Получение опубликованных данных из тела запроса

const bodyParser = require('body-parser');             ❶
 app.use(bodyParser.urlencoded({ extended: false }));  ❷
 app.use(bodyParser.json());
app.post('/', (req, res) =>{                           ❸
   console.log(req.body);                              ❹
});

❶ Нам нужен модуль body-parser, и мы назначаем его константе.

❷ С помощью app.use() Express.js мы указываем, что нам нужно анализировать входящие запросы, которые закодированы в URL-адресе (обычно в формате post и utf-8) и в форматах JSON.

❸ создать новый маршрут для размещенных данных так же просто, как использовать метод post() и указать URL-адрес.

❹ мы можем распечатать содержимое отправленной формы с объектом запроса и его атрибутом body

Проверьте это, отправив запрос POST на https://localhost:3000 с помощью команды curl в листинге 7.

Листинг 7. Получение опубликованных данных из тела запроса

curl --data "first_name=Jon&last_name=Wexler" https://localhost:3000

Вы должны увидеть тело, зарегистрированное в окне консоли вашего сервера, как показано в листинге 8.

Листинг 8. req.body зашел в консоль

{ first_name: 'Jon', last_name: 'Wexler' }

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

Другой способ сбора данных — через параметры URL. Без необходимости в дополнительном пакете Express.js позволяет нам собирать значения, хранящиеся в конце пути нашего URL-адреса после символа ?. Они называются строками запроса и часто используются для отслеживания действий пользователя на сайте и хранения временной информации о посещенных пользователем страницах.

Например, давайте рассмотрим пример URL-адреса в листинге 9.

Листинг 9. req.body зашел в консоль

https://localhost:3000?cart=3&pagesVisited=4&utmcode=837623 ❶

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

Чтобы увидеть эти строки запроса на сервере, добавьте console.log(req.query); к вашей промежуточной функции. Теперь попробуйте перейти по URL-адресу из листинга 8. Вы должны увидеть { cart: '3', pagesVisited: '4', utmcode: '837623' } в окне консоли вашего сервера.

Далее мы поговорим об архитектуре MVC и о том, как маршруты Express.js вписываются в эту структуру.

Упражнение для быстрой проверки:КК 2. Какой дополнительный пакет необходим для анализа входящих данных в теле запроса с помощью Express.js?

Express.js и MVC

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

Архитектура MVC ориентирована на три основные части функциональности вашего приложения: модели, представления и контроллеры. Вы уже использовали представления в прошлых приложениях для отображения HTML в ответе. Представления — это визуализированные отображения данных из вашего приложения. Модели — это классы для представления объектно-ориентированных данных в вашем приложении и базе данных. Например, в вашем приложении CSA вы можете создать модель для представления заказа клиента. В рамках этой модели вы определите, какие данные должен содержать заказ, и типы функций, которые вы можете выполнять с этими данными.

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

Чтобы следовать шаблону проектирования MVC, вы переместите свои функции обратного вызова в отдельные модули, отражающие назначение этих функций. Например, функции обратного вызова, связанные с созданием, удалением или изменением учетной записи пользователя, находятся в файле с именем userController.js в папке controllers. Функции для маршрутов, которые отображают домашнюю страницу или другие информационные страницы, по соглашению могут находиться в homeController.js. На рисунке 1 показана файловая структура вашего приложения.

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

Чтобы реструктурировать ваше приложение express_routes, чтобы оно соответствовало этой структуре, выполните следующие действия:

• Начните с создания папки controllers в папке вашего проекта.
• Создайте файл homeController.js в controllers
• Требуйте файл домашнего контроллера в своем приложении, добавив следующее в начало main.js.let homeController = require(‘./controllers/homeController’);
• Переместите свои функции обратного вызова маршрута на домашний контроллер и добавьте их в объект exports этого модуля. Например, ваш маршрут для ответа с овощным параметром может переместиться на ваш домашний контроллер, чтобы выглядеть, как в листинге 10.

Листинг 10. Перемещение обратного вызова на домашний контроллер

exports.send_req_param = (req, res) => { ❶
   let veg = req.params.vegetable;
  res.send(`This is the page for ${veg}`);
}

❶ В homeController.js мы назначаем exports.send_req_param функции обратного вызова. send_req_param — это имя переменной, вы можете выбрать свое собственное имя, описывающее функцию.

Вернувшись в main.js, мы изменим маршрут, чтобы он выглядел как в листинге 11.

Листинг 11. Замена обратного вызова ссылкой на функцию контроллера

app.get('/items/:vegetable', homeController.send_req_param); ❶

❶ При запросе на этот путь запускается функция, назначенная send_req_param в домашнем контроллере.

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

Упражнение для быстрой проверки:КК 3. Какова роль контроллеров в MVC?

Сводка

В этой статье вы узнали, как создавать маршруты и промежуточные функции с помощью Express.js. Затем вы установили пакет body-parser для работы с Express.js при анализе содержимого тела запроса. В конце статьи вы узнали о MVC и о том, как можно переписать маршруты, чтобы использовать контроллеры в вашем приложении.

Ответы на упражнения по быстрой проверке

QC 1′ Метод use() позволяет определить функции промежуточного программного обеспечения, которые вы хотите использовать с Express.js.

QC 2: пакет body-parser предлагает библиотеку кода для разбора входящих данных на сервер. Другие пакеты действуют как промежуточное ПО и выполняют аналогичные задачи.

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

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

Об авторе:
Джонатан Векслер имеет обширный опыт в области компьютерной теории и веб-разработки. Джонатан курировал учебную программу Node.js в качестве академического директора и ведущего разработчика Нью-Йоркской академии кода и дизайна. Он руководил несколькими интенсивными программами по разработке полного стека и в настоящее время работает старшим разработчиком в Bloomberg LP.

Первоначально опубликовано на freecontent.manning.com.