Передача даних на сервер

Передача параметра в URL

Перший спосіб – передати через параметр. Маршрути можуть містити параметри — іменовані сегменти URL- адреси. Назва параметра повинна включати символи з діапазону [A-Za-z0-9_]. У визначенні маршруту перед параметром ставиться знак двокрапки. Додамо наступний обробник для маршруту:

app.get('/contact/:id', (req, res) => {
  res.send(`<h1>Contact</h1> Параметр: ${req.params.id}`);
});

Само собою якщо ми тепер звернемося за маршрутом /contact/123 то req.params.id міститиме значення 123. Цей спосіб передачі параметрів на сервер використовують дуже часто. Наприклад, редагування користувача може виглядати так

app.patch('/user/:userid', (req, res) => {
  const id = req.params.userid;
  // виконуємо необхідні дії
});

Ми побачимо це, коли розглядатимемо REST API

Використання параметрів GET запиту

Другий спосіб – це розбір рядка GET запиту. Після URL - адреси, по якій відбувається звернення на сервер, ставиться знак питання ?, за яким слідує список аргументів, розділених символами &. Щось наприклад

http://localhost:3000/contacts?skip=0&limit=10

Без цього способу не обходиться жодна реалізація пагінації на сторінці. Результат такого запиту знаходиться в об'єкті req.query. У нашому конкретному випадку

{
  skip: 0,
  limit: 10
}

Яущо у GET запиті HTTP параметри рядка запиту не задані, наприклад /search, а знака питання і після нього нічого немає, то req.query за замовчуванням містить порожній об'єкт: {}

Фреймворк Express, містить вбудований засіб розбору рядків запитів, тому що це завдання дуже часто зустрічається у веб-розробці.

Надсилання за допомогою форм

При надсиланні якихось даних на сервер зазвичай використовуються HTTP методи POST, PUT та PATCH. Це стандартний спосіб при надсиланні форми. Розглянемо як отримувати такі дані в Express.

Формат HTTP повідомлення складається зі списку заголовків та тіла повідомлення. Запит POST від форми стандартно має заголовок Content-Type: application/x-www-form-urlencoded. Насамперед для отримання відправлених даних необхідно підключити парсер через проміжне ПЗ і він уже міститься у фреймворку. Для створення парсера даних від форм застосовується функція urlencoded().:

app.use(express.urlencoded({ extended: false }));

У цю функцію передається об'єкт, який визначає параметри парсингу. Значення extended: false вказує, що результат парсингу буде являти собою набір пар ключ-значення, а кожне значення може бути представлене у вигляді рядка чи масиву. Коли цей параметр дорівнює true, парсер використовує іншу бібліотеку для розбору формату рядка.

Нехай ми приймаємо інформацію від форми аутентифікації.

<form action="/login" method="POST">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" />
  <label for="password">Пароль</label>
  <input type="password" name="password" id="password" />
  <button type="submit">Увійти</button>
</form>

Браузер відправить на URL <урл нашого додатку>/login дані форми. Це будуть дві змінні: email та password. За це відповідають атрибути name у відповідних тегів input. Ці дані ми повинні прийняти на стороні сервера наступним обробником

app.post('/login', (req, res, next) => {
  const { email, password } = req.body;
  // Виконуємо необхідні операції
});

В результаті сервер має отримати дані в об'єкті req.body, наступного виду:

{
  email: 'Значення, що було введено в поле input',
  password: 'Значення, що було введено в поле input'
}

Передача JSON

При створенні веб-застосунків на Node.js, часто доводиться працювати з даними в JSON форматі. Це основна форма передачі даних для Web-API, ще є формат XML, але він все більше старіє через свою багатослівність при формуванні даних і виходить із обігу. Парсер JSON у додатку підключається наступним чином.

app.use(express.json());

Передати дані у вигляді JSON, можна клієнтським JavaScript, утилітою curl для linux систем або за допомогою спеціальної утиліти типу Postman. В основному ми будемо користуватися утилітою Postman, з якою щільно познайомимося, коли будемо розбирати створення REST API

Після того як парсер JSON буде підключено, наші обробники запитів можуть інтерпретувати значення req.body як об'єкт JavaScript замість рядка.

app.post('/login', (req, res, next) => {
  const { email, password } = req.body;
  // Виконуємо необхідні операції
});

Цей приклад припускає, що надіслано об'єкт JSON з властивостями email та password. І головне у запиту заголовок Content-Type повинен зберігати application/json, а ви повинні надіслати дійсну розмітку JSON.

Ми розглянули всі базові види надсилання даних на сервер, які нам знадобляться надалі.