#3 Express router

poster
В этом уроке мы реализуем добавление, обновление и удаление наших исполнителей с помощью express router. Также мы познакомимся с такой полезной утилитой как Postman.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Сегодня мы с вами разберем как добавлять исполнителей в наше API и обновлять их данные.

В прошлом уроке мы использовали с вами только get запрос. Для добавления данных в наш API мы будем с вами использовать POST запрос. Так как данные POST запроса передаются в body, то нам необходимо установить специальную библиотеку для express, которая будет парсить наше тело запроса и в req.body записывать что мы передали

Давайте установим ее командой

npm install body-parser --save

Теперь импортируем эту библиотеку

var bodyParser = require('body-parser');

и сразу после строчки создания сервера добавим

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Первая строчка нам нужна, чтобы парсить json, а вторая, чтобы парсить данные формы.

Теперь давайте напишем обработчик нашего запроса

app.post('/artists', function (req, res) {
  console.log(req.body);
  res.send('post data');
})

В этот раз мы описали POST, а не GET. Мы добавили req.body и вернули тестовую строку.

Как же нам отправить POST запрос? Я для этой цели использую Postman. Это плагин для хрома, который позволяет отправлять запросы.

Указываем урл http://localhost:3012/artists и выбираем тип запроса POST. Дальше кликаем на body и выбираем raw. Здесь нам необходимо указать валидный JSON.

{"aaa": "111"}

Теперь если мы перезапустим node сервер и кликнем Send, то мы видим ответ "post data" от нашего сервера. В консоли же у нас вывелось req.body. Как мы видим, это обычный JSON. Именно такой JSON мы ожидаем получать от фронтенда, чтобы добавлять новых исполнителей.

В нашем случае нам достаточно передавать поле name. Так как базу данных мы пока не используем, то мы будем просто добавлять данные в наш статический массив. Нужно понимать, что во время того, как сервер запущен, эти данные хранятся в оперативной памяти. И как только мы остановим сервер они сотрутся. Но в данным момент нам этого достаточно.

app.post('/artists', function (req, res) {
  var artist = {
    id: Date.now(),
    name: req.body.name
  }
  artists.push(artist);
  res.send(artist);
})

Мы создаем нового артиста. У него мы указываем id, который мы берем используя текущую дану. В нашем случае это даст нам уникальный id, но когда мы будем использовать позже базу данных у нас будут автоматически генерироваться нормальные id. Мы добавляем нового артиста в массив и в качестве ответа возвращаем добавленного артиста. Давайте перезапустим вебсервер и проверим, что все работает.

Теперь давайте реализуем обновление данных. Мы хотим, чтобы мы могли менять у исполнителя только name, а id всегда оставался одинаковый.

app.put('/artists/:id', function (req, res) {
  var artist = artists.find(function (artist) {
    return artist.id === Number(req.params.id)
  });
  artist.name = req.body.name;
  res.send(artist);
})

Мы описываем put, где указываем динамический id, который хотим обновить и внутри находим исполнителя по id из параметров. Дальше меняем у него имя на имя, полученное из боди запроса. Так как переменная artist является ссылкой на елемент массива, то меняя этот обьект, мы меняем его в массиве. И возвращаем обновленные данные.

Вместо

res.send(artist);

Мы можем писать

res.sendStatus(200);

Это вернет нам статус 200 и сообщение Ok. Обновленные данные возвращать не обязательно, так как мы и так знаем, какие данные мы обновляли и нам главное, чтобы сервер подтвердил, что все хорошо и данные обновлены.

Если мы выполним put запрос и потом получим список исполнителей, то увидим, что он обновился.

Нам осталось реализовать в API только удаление.

Для этого давайте добавим delete метод.

app.delete('/artists/:id', function (req, res) {
  artists = artists.filter(function (artist) {
    return artist.id !== Number(req.params.id)
  })
  res.sendStatus(200);
})

Мы хотим пересохранить массив artists отфильтровав всех артистов, кроме того, какой хотим удалить. Это вернет нам массив без удаляемого елемента. Главное опять не забыть привести ID к Number. И конечно мы возвращаем статус 200, который говорит, что удаление прошло успешно.

Если мы выполним delete запрос и получим список исполнителей, то увидим, что мы его удалили.

Итак в этом уроке мы реализовали добавление, обновление и удаление наших исполнителей. Также мы познакомились с такой полезной утилитой как Postman. Базовая версия нашего API готова.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
dk
8 месяцев назад
Привет! GET и POST вроде все могут покрыть. Зачем PUT, DELETE - или это правильный REST api? Тогда подскажите плиз где можно коротенько ознакомиться?
monsterlessons
8 месяцев назад
Привет. Даже GET может все покрыть. Но правильный REST api это POST для создания, GET для чтения, PUT для полного обновления записи, PATCH для частичного обновления, DELETE для удаления. Вы можете поискать в гугле спецификацию REST.
Serafim
8 месяцев назад
А можете в двух словах обьяснить что такое Rest api ? Спасибо
monsterlessons
8 месяцев назад
Это архитектура взаимодействия клиента и сервера по HTTP. Вы можете больше прочитать об этом тут: https://ru.wikipedia.org/wiki/REST
Кирилл Лебеденко
1год назад назад
Здравствуйте, спасибо за Ваш уроки, очень интересные, у меня возникла схожая проблема, которая здесь поднималась, правда решить её этим же способом, не получилось, возможно у Вас получится навести меня на правильный ответ вот скрин https://yadi.sk/i/pqPsHr-H3KxezA там указан, что Content-Type →application/json; charset=utf-8 а не тот что вы указывали по умолчанию
monsterlessons
1год назад назад
Сложно так сказать. Попробуйте использовать вариант с fetch, который ниже написал Vitali Borovik (WAYS). Если сработает, то это проблема в Postman, а не в коде.
Vitali Borovik (WAYS)
2 лет назад
А зачем использовать постмен если есть fetch? Просто вставьте в консоль: POST fetch("http://localhost:3012/artists", { method: "POST", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({"name": "Artist 1"}) }) .then(function(res){ return res.json(); }) .then(function(data){ console.log( JSON.stringify( data ) ) }) PUT: fetch("http://localhost:3012/artists/2", { method: "PUT", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({"name": "ffff"}) }) .then(function(res){ return res.json(); }) .then(function(data){ console.log( JSON.stringify( data ) ) })
Vitali Borovik (WAYS)
2 лет назад
DELETE fetch("http://localhost:3012/artists/3", { method: "DELETE" }) .then(function(res){ return res.text(); }) .then(function(data){ console.log( JSON.stringify( data ) ) })
monsterlessons
2 лет назад
Тоже отличный вариант. Я просто больше привык к Postman, потому что это графическая программа и не нужно помнить весь синтаксис fetch. Например там в 1 клик можно зааплоадить файл в POST запросе или указать хедеры. Ну и плюс Postman хранит историю всех запросов и можно любой из них повторить позже.
Елена
2 лет назад
У меня возникла проблема с post-запросом. req.body было {} Только изменение кода вот так: var urlencodedParser = bodyParser.urlencoded({extended: true}); .......... app.post("/artists", urlencodedParser, function (req, res) { console.log(req.body); res.send('post data'); }); позволило увидеть req.body С чем это может быть связано?
monsterlessons
2 лет назад
Очень странно. Обьявление app.use(bodyParser.json(()) и app.use(bodyParser.urlencoded({extended: true})) должны применять bodyParser к абсолютно всем роутам. То что вы написали, это применение bodyParser к конкретному роуту. Проверьте, что у вас есть эти 2 строки, которые я написал, до описания роута.
Катя Старик
2 лет назад
аналогичная проблема
login2030
2 лет назад
У меня вообще никак не хочет Post отправляться =( Может это от того, что у меня винда? Код аналогично, один к одному. Id передается отлично и пишется в оперативку, а вот Body пустой и даже указание urlencodedParser локально для роута не помогает.
monsterlessons
2 лет назад
Так сложно сказать почему не работает. Попробуйте развернуть проект из видео и проверить будет ли работать. https://github.com/monsterlessons/03-post-put-delete-in-express
login2030
2 лет назад
Склонировал проект, к сожалению все точно так же =( Id генерируется и выводится, а имя исполнителя нет. Я тут сделал несколько скриншотов - https://yadi.sk/d/K9KZPDlb3FNWFz
monsterlessons
2 лет назад
У меня получилось срепродьюсить. В Postman в хедерах нужно указывать Content-Type: application/json. Так как по умолчанию запрос передается как form-data, а мы пытаемся в него засунуть json, то соответственно оно не работает. Мой фейл, что не сказал это в видео. Спасибо за скриншоты. Очень помогли при дебаге.
login2030
2 лет назад
" В Postman в хедерах нужно указывать Content-Type: application/json." - да, это логично) Почему-то я сам протупил этот момент. Спасибо большое)