Определение маршрутов и методов HTTP-запросов в Express
Development | Комментировать запись
Маршруты обеспечивают навигацию пользователя по различным URL-адресам в вашем приложении. HTTP (Hyper Text Transfer Protocol) передает веб-браузеру данные с вашего сервера Express.
В этом мануале мы расскажем, как обрабатывать маршруты и методы HTTP-запросов в проекте Express. Вы узнаете, как определять маршруты и использовать методы HTTP-запросов GET, POST, PUT и DELETE для управления данными.
Требования
Для выполнения этого мануала желательно (но не обязательно) знать основы Node.js.
Читайте также:
- Как написать и запустить свою первую программу на Node.js
- Использование интерактивной оболочки REPL в Node.js
- Создание модуля 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: Express, Express.js, HTTP