Обрабатывайте информацию из браузера.
Какова тематика этого блога?
В этом блоге мы рассмотрим процесс создания конечных точек API и доступа к ним из браузера, а также отправим ответ на основе полученной информации.
В этой первой части мы объясним, как информация отправляется из браузера с помощью строки запроса и как сервер может получить доступ к этой информации и использовать ее.
Во второй части мы увидим, как сервер, имеющий доступ к этой информации, может использовать их для отправки ответа браузеру для отображения информации на экране пользователю.
Когда дело доходит до сервера и на стороне клиента, одна из самых сложных и увлекательных частей - это то, как двое общаются друг с другом, а также запрашивают и отправляют информацию.
Первый шаг - браузер связывается с сервером и передает некоторую информацию. Серверу необходимо собрать эту информацию и использовать ее для генерации ответа, чтобы отправить обратно браузеру, который отобразит эту информацию на экране для пользователя. Для этого нам нужно научиться создавать конечную точку HTTP JSON с помощью Express.
Как браузер отправляет информацию на сервер?
Наша первая задача - уметь и понимать, как браузер отправляет информацию на сервер. Для этого мы будем использовать строку запроса, которая является расширением URL-адреса, предоставляющим дополнительное значение для передачи вместе с запросом.
Давайте создадим пример информации, отправляемой на сервер со строкой запроса. В нашей кодовой среде нам нужно создать конечную точку для продуктов.
Здесь сервер будет прослушивать конечную точку, в нашем случае продукты http: // localhost: 3000 /. И мы устанавливаем базовый ответ пустого массива.
Если вы сейчас посетите эту конечную точку, мы должны увидеть следующее:
Идеально! Наши сборки конечных точек с Express работает :).
Если мы хотим реализовать какие-то функции поиска, мы можем написать строку запроса. Нам нужно предоставить эту информацию после созданной нами конечной точки URL. Мы должны начать это с вопросительного знака (?), А затем предоставить пары ключ-значение для передачи дополнительной информации на сервер. Пример формата (? Key = value)
Предположим, что для электронной коммерции нам нужно, чтобы пользователь выполнял поиск определенного продукта среди списка продуктов.
Http: // localhost: 3000 / products ? Search = toys.
Теперь в браузере мы отправим запрос с этой дополнительной информацией, представленной в виде строки запроса.
В серверной части теперь мы можем выбрать поддержку любого количества параметров строки запроса. В этом случае мы передаем только один, если мы хотим передать больше одного, нам нужно разделить их знаком «&». Допустим, нам нужны игрушки с высоким рейтингом, например игрушки с рейтингом пять звезд:
Http: // localhost: 3000 / products ? Search = toys & rating = 5
Если мы отправим этот запрос, ничего не произойдет, потому что мы не создали никакой логики в нашей серверной части для обработки этого запроса.
Как сервер получает эту информацию ??
Информация, которую мы передаем в виде строки запроса, доступна внутри нашего обработчика маршрута Express:
У нас есть и запрос, и ответ, информация, которая нам нужна для извлечения, живет в объекте запроса (req).
Объект запроса имеет свойство Query, к которому вы можете получить доступ, набрав «req.query».
Мы можем увидеть, какую информацию имеет этот объект, выполнив вывод в консоль req.query:
Теперь, если вы обновите страницу, он отправит этот запрос на сервер, и мы сможем вывести на консоль объект Query, как вы можете видеть из приведенного выше примера. Объект имеет свойства поиска и рейтинга, а также их значения, которые мы передали по запросу, {search: ‘toys’, rating: ‘5’}.
Теперь, если мы хотим получить одно из этих значений, мы можем записать образец: req.query.search или req.query.rating, и мы сможем выбрать переданное значение. .
Давайте посмотрим, как мы можем получить значение свойства поиска, распечатав его в консоли.
Как вы можете видеть в нижней части консоли, у нас есть значение «toys», потому что мы выбрали req.query.search. Возможность работы с запросом - это то, как мы можем получить доступ к значению, переданному из браузер.
Теперь мы знаем, как браузер отправляет информацию на сервер и как сервер может получить доступ к этой информации. Вы можете попробовать отправить больше пар значений свойств и получить доступ к ним для некоторой практики. Во второй части блога мы объясним, как сервер может использовать эту информацию для генерации ответа для отправки обратно в браузер.
