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

Параметри в URL

Параметр на сервер для обробки можна передавати через маршрут (path). Назва параметра повинна містити великі або малі символи латинської абетки, цифри чи нижнє підкреслення [A-Za-z0-9_]. Коли ми хочемо обробити змінний параметр, то ставимо перед тим параметром в маршруті двокрапку.

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

Те, яку назву ми дамо цьому параметру в рядку маршруту, такий само буде параметр в нашому обʼєкті req.params. Наприклад, якщо звернутися за маршрутом /contact/khomiak, то в req.params.userId буде зберігатися khomiak. Такий вид передачі параметрів використовують часто (особливо в REST API), наприклад коли звертаємося до даних (get, patch, delete) про кожного окремого юзера.

app.patch('/user/:userId', (req, res) => {
  const userId = req.params.userId;
  // код подальшої обробки
});

Таким чином можна передати не один, а кілька параметрів. Другий параметр так само передаємо і приймаємо через дві крапки.

Параметри GET запиту

Під час GET-запиту у рядку можна передати в url параметри. Їх передають після знаку питання ?. Якщо аргументів більше одного, то їх передають через символ амперсанда &.

http://localhost:3000/contacts?page=1&perpage=10

Цей спосіб використовують під час пагінації. Результат такого запиту потрапляє в req.query і це буде обʼєкт.

{
  page: 1,
  perpage: 10
}

Якщо параметри в адресному рядку під час get-запиту не задати, то за замовчанням req.query буде порожнім обʼєктом {}.

Параметри надіслані через форму

При надсиланні даних на сервер використовують методи POST, PATCH та PUT.

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

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. Ці дані сервер приймає в req.body.

app.post('/login', (req, res, next) => {
  const { email, password } = req.body;
  // some code
});

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

{
  email: 'Вміст, переданий з форми',
  password: 'Вміст, переданий з форми'
}

Параметри у форматі JSON

Основний формат передачі даних у веб - це JSON. Переважно його обробляють при написанні серверів на Node.js. Є ще формат передачі даних XML, але від його використання дедалі частіше відмовляються через його складність формування даних. Але, щоб працював парсер JSON потрібно його під'єднати у застосунку через middleware:

app.use(express.json());

Передати дані у форматі JSON, можна використовуючи клієнтський JavaScript, утиліту curl для linux систем або Postman.

Тепер обробники запитів можуть інтерпретувати значення req.body як обʼєкт JavaScript замість рядка.

app.post('/login', (req, res, next) => {
  const { email, password } = req.body;
  // some code
});

У прикладі вище ми отримуємо JSON із властивостями email та password.

У запиту заголовок Content-Type має містити application/json. Також має бути надіслана правильна розмітка JSON.