#2 Express node js

poster
В этом уроке мы познакомимся с фреймворком express. Реализуем базовый вебсервер и опишем роуты для списка исполнителей и конкретного исполнителя.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Сегодня мы с вами разберем как устанавливать сервер на NodeJS. Я предпочитаю для node использовать сервер, который называется express. Он является самым популярным сервером и под него написано огромное количество дополнительных библиотек.

Итак я создал пустую папку под наш проект. Первое, что необходимо сделать, это создать файл package.json. Это файл, в котором мы храним список установленных пакетов и их версии. Когда вы захотите развернуть ваш проект на новой машине или дать проект другому девелоперу, одной команды npm install будет достаточно, чтобы установить все зависимости, которые необходимы для проекта.

Для создания файла package.json автоматически напишем

npm init

на все вопросы жмем enter.

Если мы откроем файл package.json, то он практически пустой. В нем указан автор, версия и другая общая информация.

Теперь давайте установим express

npm install express --save

Эта команда установила нам express и все его зависимости. Аргумент --save мы написали, чтобы пакет был добавлен в package.json. Если мы посмотрем в него, то увидим, что у нас создался обьект dependencies, где указан express и его установленная версия.

Также в проекте у нас создалась директория node_modules. Это папка, где хранятся все библиотеки установленные с помощью npm.

Теперь давайте создадим файл server.js, который будет нашим сервером.

Для начала нам нужно подключить библиотеку express. Делается это с помощью слова require. В данном случае оно подключит пакет express из папки node_modules.

var express = require('express');

Дальше нам необходимо создать переменную app, которая и будет являтся нашим сервером.

var app = express();

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

app.get('/', function (req, res) {
  res.send('Hello API');
});

Здесь мы описали, что мы хотим описать роут /, и когда мы будем на него заходить, то нам на странице будет выводиться Hello API. req - это request, а res - это response. И мы вызываем функцию end, чтобы закончить ответ и вывести строку на екран.

Теперь нам нужно настроить сервер, чтобы он был запущен на определенном порту. Для этого добавим

app.listen(3012, function () {
  console.log('API app started')
})

Это запустит сервер на 3012 порту и когда он запустится выведет в консоль console.log.

Теперь если мы в консоли напишем node server.js, то у нас запустится сервер и выведется в консоль API app started.

Теперь если мы откроем в браузере http://localhost:3012, то у нас выведется на страницу Hello API.

Мы с вами будем делать API музыкальных исполнителей. И уже сейчас мы можем добавить роут, который будет возвращать нам список исполнителей.

Давайте создадим массив исполнителей, который пока будет статическим и опишем роут /artists для него.

Артистов мы будем хранить как массив обьектов с ID и названиями.

var artists = [
  {
    id: 1,
    name: 'Metallica'
  },
  {
    id: 2,
    name: 'Iron Maiden'
  },
  {
    id: 3,
    name: 'Deep Purple'
  }
];

и добавим роут

app.get('/artists', function (req, res) {
  res.send(artists);
});

в котором отдадим описаных исполнителей.

Не забывайте также о том, что мы с вами еще не реализовали автоматической перезагрузки сервера при изменении файлов. Это значит, что каждый раз, когда вы сделали изменение вам нужно остановить вебсервер с помощь ctrl+c либо command+c и запустить заново.

Если мы перезапустим вебсервер и зайдем на http://localhost:3012/artists, то увидим что у нас отрендерился спсок исполнителе.

Как вы видите у меня он красиво выглядит, а у вас скорее всего он отображается просто как текст в одну строчку.

Для красивого отображения JSON вы можете в google chrome установить плагин JSON Viewer.

Теперь давайте опишем роут, который будет возвращать отдельного исполнителя. Для того, чтобы описать урл вида /artists/1 нам необходимо вместо 1 задать динамический параметр.

app.get('/artists/:id', function (req, res) {
  res.send('test');
});

Теперь что бы мы не писали вместо id, у нас всегда будет срабатывать этот обработчик. Получить значение динамического id можно из req.params, где содержатся все параметры. Давайте законсолим req.params.

И теперь давайте найдем необходимого исполнителя в массиве

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

Мы использовали обычный find из javascript, чтобы найти обьект в массиве. Единственный нюанс в том, что все параметры из урла являются строками. А наши ID это Number. Поэтому мы приводим req.params.id к Number.

Итак в этом уроке мы познакомились с фреймворком express. Реализовали базовый вебсервер и описали роуты для списка исполнителей и конкретного исполнителя.

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Pavel Silber
11 месяцев назад
Объясните пожалуйста, почему здесь сравнение, разве через return можно сравнивать? return artist.id === Number(req.params.id)
Pavel Silber
11 месяцев назад
Я понял просто так работает find() https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_find
monsterlessons
11 месяцев назад
В return можно писать сравнение и тогда результатом функции будет boolean. Find вторым параметром принимает callback функцию, которая вызывается для каждого элемента и должна вернуть true либо false.
Знаковян Семён
1год назад назад
Стоит упомянуть, что метод Array.find() добавлен в ES2016 и требует осторожного использования. То есть, либо использовать сборку / отдельно полифилл, либо, например использовать метод из lodash / underscore. А так, спасибо!
monsterlessons
1год назад назад
На здоровье. Я предпочитаю на реальных проектах всегда использовать библиотеки типо lodash/ramda, чтобы не думать а какой метод где поддерживается.
Denni Adam
2 лет назад
Добрый день! Спасибо за уроки! Хотя было удивительно увидеть на 7.3 старый JS.
monsterlessons
2 лет назад
На здоровье) В серии было 6.9 так как она stable пока. Твк как здесь упор на ознакомление с node и не все люди знают es6 я решил, что лучше показать серию на старом синтаксисе.