Определение маршрутов и методов HTTP-запросов в Express

Маршруты обеспечивают навигацию пользователя по различным URL-адресам в вашем приложении. HTTP (Hyper Text Transfer Protocol) передает веб-браузеру данные с вашего сервера Express.

В этом мануале мы расскажем, как обрабатывать маршруты и методы HTTP-запросов в проекте Express. Вы узнаете, как определять маршруты и использовать методы HTTP-запросов GET, POST, PUT и DELETE для управления данными.

Требования

Для выполнения этого мануала желательно (но не обязательно) знать основы Node.js.

Читайте также:

Создание простого проекта

Express – это фреймворк Node.js, поэтому сначала нам нужно установить экземпляр Node.js с этого сайта. Выполните в своем терминале следующие действия.

Создайте для вашего проекта новый каталог по имени node-express-routing:

mkdir node-express-routing

Перейдите в этот каталог:

cd node-express-routing

Инициализируйте новый проект Node со стандартными параметрами. Это также создаст файл package.json, с помощью которого вы сможете работать с зависимостями проекта:

npm init -y

Создайте свой входной файл index.js. Здесь вы будете обрабатывать свои маршруты и методы HTTP-запроса:

touch index.js

Установите Express и nodemon как зависимости. Nodemon позволит нам своевременно перезапускать проект Express после каждого изменения файла index.js.

npm install express --save

npm install -D nodemon

Читайте также: Автоматический перезапуск приложений Node.js с помощью nodemon

Откройте файл package.json в текстовом редакторе и обновите стандартный скрипт, добавив в него nodemon и файл index.js:

{

  "name": "node-express-routing",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start": "nodemon index.js"

  },

  "keywords": [],

  "author": "Paul Halliday",

  "license": "MIT"

}

Это позволит вам использовать в терминале npm start – команду для запуска вашего Express-сервера и обновления кода.

Теперь, когда вы подготовили свой тестовый проект и настроили nodemon для его перезапуска при обнаружении изменений в файле index.js, вы можете запустить сервер Express.

Запуск сервера Express

Сервер Express будет обрабатывать логику для интеграции маршрутов и методов HTTP-запросов вашего приложения. Давайте настроим и запустим этот сервер, чтобы визуализировать свой проект в браузере.

Чтобы запустить сервер Express, запросите Express в файле index.js и сохраните экземпляр в переменной app. Затем объявите переменную PORT и укажите адрес :3000.

const express = require('express');

const app = express();

const PORT = 3000;

app.use(express.json());

app.listen(PORT, () => console.log(`Express server currently running on port ${PORT}`));

Добавьте .listen() в app и вставьте PORT в качестве первого аргумента, а затем укажите функцию обратного вызова. Промежуточное программное обеспечение .listen() создает локальный браузер из адреса в вашей переменной PORT для визуализации внесенных изменений.

Также включите express.json() в качестве аргумента app.use(). Это нужно для анализа входящих данных через ваши HTTP-запросы. Более ранняя версия Express полагалась на зависимость body-parser, но потом появилось встроенное промежуточное программное обеспечение для анализа данных.

Выполните следующую команду в своем терминале, чтобы запустить проект:

npm start

Ваш проект запущен и доступен по адресу http://localhost:3000. Откройте свой браузер, и вы получите следующее:

Cannot get /

Это значит, что экземпляр Express запущен. Теперь давайте поработаем над определением методов HTTP для заполнения страницы приложения в браузере.

Определение метода GET-запроса

Чтобы просмотреть свой проект, вы можете отправить информацию со своего сервера Express через GET-запрос.

В файле index.js добавьте .get() к переменной app, укажите анонимный маршрут и включите обратный вызов, который обращается к аргументам request и response:

app.get('/', (request, response) => {

  response.send('Hello');

});

Аргумент request содержит информацию о GET-запросе, а response.send() отправляет данные в браузер. В response.send() могут содержаться строки, объекты или массивы.

Теперь, когда вы реализовали GET-запрос, давайте рассмотрим маршруты и другие методы HTTP.

Как работают маршруты

Создайте новые GET-запросы в файле index.js и определите маршруты ‘/accounts’ и ‘/accounts/:id’. Объявите массив accounts и наполните его фиктивными данными:

let accounts = [

  {

    "id": 1,

    "username": "paulhal",

    "role": "admin"

  },

  {

    "id": 2,

    "username": "johndoe",

    "role": "guest"

  },

  {

    "id": 3,

    "username": "sarahjane",

    "role": "guest"

  }

];

app.get('/accounts', (request, response) => {

  response.json(accounts);

});

app.get('/accounts/:id', (request, response) => {

  const accountId = Number(request.params.id);

  const getAccount = accounts.find((account) => account.id === accountId);

  if (!getAccount) {

    response.status(500).send('Account not found.')

  } else {

    response.json(getAccount);

  }

});

Если вы перейдете по ссылке http://localhost:3000/accounts, вы получите все данные из этого массива:

[

  {

    "id": 1,

    "username": "paulhal",

    "role": "admin"

  },

  {

    "id": 2,

    "username": "johndoe",

    "role": "guest"

  },

  {

    "id": 3,

    "username": "sarahjane",

    "role": "guest"

  }

]

Вы также можете фильтровать данные по ID с помощью конечной точки /:id. Express рассматривает ID в конечной точке /:id как заполнитель параметра и находит это значение по совпадению.

Перейдя по адресу http://localhost:3000/accounts/3, вы получите одну учетную запись, которая соответствует параметру /:id:

{

  "id": 3,

  "username": "sarahjane",

  "role": "guest"

}

Разработка HTTP-запросов POST, PUT и DELETE

С помощью запросов POST, PUT и DELETE методы HTTP обеспечивают дополнительную функциональность данных. Метод POST-запроса создает новые данные на вашем сервере, а метод PUT обновляет существующую информацию. Метод запроса DELETE удаляет указанные данные.

POST-запрос

Чтобы создать новые данные в массиве accounts, вы можете интегрировать метод POST-запроса.

В файле index.js к переменной app добавьте метод .post() и включите маршрут ‘/accounts’ в качестве первого аргумента:

app.post('/accounts', (request, response) => {

  const incomingAccount = request.body;

  accounts.push(incomingAccount);

  response.json(accounts);

})

Мы будем добавлять много входящих данных из POST-запроса в массив accounts и отправлять ответы как объекты JSON.

Сейчас массив accounts содержит нового пользователя:

[

  {

    "id": 1,

    "username": "paulhal",

    "role": "admin"

  },

  {

    "id": 2,

    "username": "johndoe",

    "role": "guest"

  },

  {

    "id": 3,

    "username": "sarahjane",

    "role": "guest"

  },

  {

    "id": 4,

    "username": "davesmith",

    "role": "admin"

  }

]

PUT-запрос

Вы можете редактировать и обновлять конкретную учетную запись с помощью запроса PUT.

Откройте файл index.js и добавьте к переменной app метод .put(), а затем укажите маршрут ‘/accounts/:id’ в качестве первого аргумента. Вы сможете искать учетные записи по ID и устанавливать условия для обновления значений:

app.put('/accounts/:id', (request, response) => {

  const accountId = Number(request.params.id);

  const body = request.body;

  const account = accounts.find((account) => account.id === accountId);

  const index = accounts.indexOf(account);

  if (!account) {

    response.status(500).send('Account not found.');

  } else {

    const updatedAccount = { ...account, ...body };

    accounts[index] = updatedAccount;

    response.send(updatedAccount);

  }

});

Теперь вы можете обновлять данные в массиве accounts. Допустим, пользователь меняет «role»:

{

    "role": "guest"

}

 Обратите внимание, значение «role» меняется с admin на guest по ссылке http://localhost:3000/accounts/1:

{

  "id": 1,

  "username": "paulhal",

  "role": "guest"

}

DELETE-запрос

Вы можете удалять пользователей и данные, используя метод DELETE-запроса.

В файл index.js добавьте к переменной app метод .delete() и включите ‘/accounts/:id’ в качестве первого аргумента. Это отфильтрует массив accounts и вернет запись, которую нужно удалить.

app.delete('/accounts/:id', (request, response) => {

  const accountId = Number(request.params.id);

  const newAccounts = accounts.filter((account) => account.id != accountId);

  if (!newAccounts) {

    response.status(500).send('Account not found.');

  } else {

    accounts = newAccounts;

    response.send(accounts);

  }

});

Если вы отправите запрос DELETE по адресу http://localhost:3000/accounts/1, он удалит запись с /:id 1 из массива accounts.

Заключение

Маршруты и методы HTTP-запросов помогают повысить производительность операций создания, обновления и удаления данных на сервере Express.

Tags: , ,

Добавить комментарий