В книге 23 урока, более 40 практических упражнений и заданий для самостоятельной работы. Даны основы программирования на Node.js: проекты и манифесты, установка дополнительных библиотек, импорт и экспорт. Описан серверный веб-фреймворк Express: работа с запросами и ответами, маршрутизация, шаблонизатор EJS, обработка пользовательских данных, статических файлов, валидация, сохранение выгруженных файлов, вывод сообщений об ошибках и разграничение доступа. Показана работа с СУБД MongoDB: запись и выборка данных, фильтрация, сортировка, применение моделей Mongoose. Рассказано о двухзвенных веб-приложениях, бэкендах и фронтендах. Рассмотрено программирование бэкендов средствами Express и фронтендов с применением клиентского веб-фреймворка React. Затронуты вопросы повышения производительности и защищённости веб-приложений, ввод их в эксплуатацию. Электронный архив на сайте издательства содержит полный исходный код описанных в книге примеров.
Для начинающих веб-разработчиков
Современный бэкенд и фронтенд на Node.js
Простым языком, кратко, наглядно рассказывается о разработке веб-приложений на языке JavaScript, работающих в исполняющей среде Node.js. В книге 23 урока, более 40 практических упражнений и заданий для самостоятельной работы.
Вы узнаете, как
- программно генерировать веб-страницы;
- работать с базами данных;
- получать данные от пользователей и проверять их на корректность;
- получать от пользователей файлы;
- защищать веб-приложения от несанкционированного доступа;
- выводить сообщения об ошибках;
- повысить производительность и защищённость веб-приложений;
- разрабатывать фронтенды и бэкенды.
Вы изучите популярные программные платформы:
- серверный веб-фреймворк Express;
- документную СУБД MongoDB;
- клиентский веб-фреймворк
Книгу “Node.js, Express, MongoDB и React. 23 урока для начинающих” можно купить со скидкой в интернет-магазине издательства “БХВ“.
Предисловие…………………………………………………………………………………………… 15
Почему Node.js?…………………………………………………………………………………………………………………………. 15
Что такое MERN?………………………………………………………………………………………………………………………. 16
Использованные программные продукты……………………………………………………………………………….. 17
Типографские соглашения………………………………………………………………………………………………………… 18
Часть I. Начала программирования на Node.js………………….. 21
Урок 1. Введение в Node.js……………………………………………………………………… 23
1.1. Упражнение. Запуск Node.js и работа в интерактивном режиме……………………………………. 24
1.2. Упражнение. Написание простейшего консольного Node-приложения………………………… 25
Теория………………………………………………………………………………………………………………………………….. 25
Практика……………………………………………………………………………………………………………………………… 26
1.3. Упражнение. Создание манифеста проекта……………………………………………………………………… 28
Теория………………………………………………………………………………………………………………………………….. 28
Практика……………………………………………………………………………………………………………………………… 29
1.4. Манифест проекта: подробности………………………………………………………………………………………. 32
1.4.1. Создание манифеста проекта………………………………………………………………………………….. 32
1.4.2. Формат JSON……………………………………………………………………………………………………………… 32
1.4.3. Структура манифеста проекта………………………………………………………………………………… 34
1.4.4. Нумерация версий…………………………………………………………………………………………………….. 35
1.5. Упражнение. Расцвечивание вывода приложения. Использование
дополнительных библиотек………………………………………………………………………………………………. 36
Теория………………………………………………………………………………………………………………………………….. 36
Практика……………………………………………………………………………………………………………………………… 37
1.6. Установка, обновление и удаление зависимостей. Реестр проекта……………………………….. 38
1.7. Экспорт, импорт и прогон………………………………………………………………………………………………….. 41
1.7.1. Экспорт………………………………………………………………………………………………………………………. 42
1.7.1.1. Экспорт по умолчанию……………………………………………………………………………….. 42
1.7.1.2. Множественный экспорт…………………………………………………………………………….. 42
Синтаксис № 1………………………………………………………………………………………………….. 43
Синтаксис № 2………………………………………………………………………………………………….. 43
1.7.1.3. Гибридный экспорт……………………………………………………………………………………… 44
1.7.2. Импорт……………………………………………………………………………………………………………………….. 44
1.7.2.1. Импорт по умолчанию………………………………………………………………………………… 44
1.7.2.2. Множественный импорт……………………………………………………………………………… 45
Синтаксис № 1………………………………………………………………………………………………….. 45
Синтаксис № 2………………………………………………………………………………………………….. 46
1.7.2.3. Гибридный импорт………………………………………………………………………………………. 46
1.7.2.4. Написание путей к модулям……………………………………………………………………….. 46
1.7.2.5. Как выполняется импорт?…………………………………………………………………………… 48
1.7.3. Прогон модулей………………………………………………………………………………………………………… 48
1.8. Окружение и переменные окружения………………………………………………………………………………… 49
1.9. Упражнение. Поддержка переменных окружения…………………………………………………………… 53
1.10. Упражнение. Написание сценариев проекта…………………………………………………………………. 55
Теория………………………………………………………………………………………………………………………………… 55
Практика……………………………………………………………………………………………………………………………. 55
1.11. Восстановление проекта………………………………………………………………………………………………….. 56
1.12. Самостоятельные упражнения………………………………………………………………………………………… 57
Урок 2. Основные принципы веб-разработки на Node.js………………………… 58
2.1. Как функционирует Всемирная паутина?………………………………………………………………………… 58
2.1.1. Клиенты и серверы. Ресурсы. Веб-серверы……………………………………………………………. 58
2.1.2. Интернет-адрес и его составляющие………………………………………………………………………. 59
2.1.3. Взаимодействие веб-обозревателя и веб-сервера………………………………………………….. 62
2.1.3.1. Клиентский запрос………………………………………………………………………………………. 62
2.1.3.2. Серверный ответ………………………………………………………………………………………….. 63
2.1.4. Веб-сайты и веб-приложения…………………………………………………………………………………… 64
2.1.4.1. Веб-сайт………………………………………………………………………………………………………… 64
2.1.4.2. Веб-приложение…………………………………………………………………………………………… 65
2.2. Упражнение. Написание простейшего тестового веб-приложения……………………………….. 66
2.3. События и их обработка…………………………………………………………………………………………………….. 68
2.4. Упражнение. Использование утилиты nodemon……………………………………………………………… 69
2.5. Утилита nodemon: подробности……………………………………………………………………………………….. 71
2.6. Упражнение. Реализация маршрутизатора……………………………………………………………………… 73
Теория………………………………………………………………………………………………………………………………….. 74
Практика……………………………………………………………………………………………………………………………… 74
2.7. Упражнение. Использование базы данных и модели………………………………………………………. 78
Теория………………………………………………………………………………………………………………………………….. 78
Практика……………………………………………………………………………………………………………………………… 78
2.8. Синхронные и асинхронные функции………………………………………………………………………………. 83
2.9. Самостоятельное упражнение…………………………………………………………………………………………… 86
Часть II. Веб-фреймворк Express………………………………………………… 87
Урок 3. Введение в Express…………………………………………………………………….. 89
3.1. Упражнение. Простейшее веб-приложение на Express……………………………………………………. 89
3.2. Приложение Express……………………………………………………………………………………………………………. 95
3.2.1. Создание объекта приложения………………………………………………………………………………… 95
3.2.2. Параметры приложения…………………………………………………………………………………………… 95
3.2.3. Запуск приложения…………………………………………………………………………………………………… 96
3.3. Клиентский запрос Express………………………………………………………………………………………………… 97
3.4. Серверный ответ Express………………………………………………………………………………………………….. 100
Урок 4. Маршрутизация и контроллеры………………………………………………. 104
4.1. Маршрутизатор Express. Маршруты и URL-параметры………………………………………………. 104
4.1.1. Встроенный маршрутизатор…………………………………………………………………………………. 104
4.1.2. Маршруты……………………………………………………………………………………………………………….. 104
4.1.2.1. Создание маршрутов…………………………………………………………………………………. 105
4.1.2.2. Написание шаблонных путей…………………………………………………………………… 106
4.1.2.3. URL-параметры и параметризованные маршруты………………………………… 108
4.1.2.4. Выполнение маршрутизации: устранение коллизий……………………………… 109
4.2. Контроллеры…………………………………………………………………………………………………………………….. 109
4.2.1. Объявление контроллеров……………………………………………………………………………………… 109
4.2.2. Указание контроллеров в маршрутах…………………………………………………………………… 111
4.2.3. Доступ к URL-параметрам и сведениям о совпавшем маршруте………………………. 111
4.3. Упражнение. Реализация маршрутизатора……………………………………………………………………. 112
4.4. Выделенный маршрутизатор…………………………………………………………………………………………… 114
4.4.1. Вложенные маршрутизаторы………………………………………………………………………………… 116
4.5. Упражнение. Использование выделенного маршрутизатора………………………………………. 118
4.6. Настройки маршрутизаторов………………………………………………………………………………………….. 118
4.6.1. Настройки встроенного маршрутизатора……………………………………………………………. 118
4.6.2. Настройки выделенных и вложенных маршрутизаторов…………………………………… 119
4.7. Вложенные приложения Express……………………………………………………………………………………… 119
Урок 5. Шаблоны. Шаблонизатор EJS…………………………………………………. 121
5.1. Упражнение. Использование шаблонов…………………………………………………………………………. 122
5.2. Интеграция Express и EJS…………………………………………………………………………………………………. 125
5.3. Написание шаблонов EJS. Команды EJS………………………………………………………………………… 125
5.4. Рендеринг шаблонов…………………………………………………………………………………………………………. 127
5.4.1. Задание контекста шаблона………………………………………………………………………………….. 128
5.5. Включения…………………………………………………………………………………………………………………………. 129
5.6. Упражнение. Использование включений………………………………………………………………………… 130
5.7. Настройки шаблонизатора EJS……………………………………………………………………………………….. 131
5.8. Упражнение. Стилизация приложения. CSS-фреймворк Picnic CSS……………………………… 132
Теория………………………………………………………………………………………………………………………………. 132
Практика………………………………………………………………………………………………………………………….. 132
Урок 6. Получение данных, отправленных пользователем…………………… 138
6.1. Настройка приложения для получения данных…………………………………………………………….. 138
6.1.1. Настройка обработки GET-параметров……………………………………………………………….. 138
6.1.2. Настройка обработки POST-параметров……………………………………………………………… 139
6.2. Получение отправленных данных………………………………………………………………………………….. 141
6.3. Упражнение. Поиск дел……………………………………………………………………………………………………. 141
6.4. Добавление, правка и удаление данных………………………………………………………………………… 144
6.4.1. Старый подход……………………………………………………………………………………………………….. 144
6.4.2. Новый подход…………………………………………………………………………………………………………. 145
6.4.3. Перекрытие HTTP-метода. Библиотека method-override…………………………………….. 146
6.5. Упражнение. Добавление, пометка и удаление дел………………………………………………………. 147
Урок 7. Посредники, статические файлы и обработка ошибок…………….. 155
7.1. Посредники………………………………………………………………………………………………………………………… 155
7.1.1. Привязка посредников……………………………………………………………………………………………. 156
7.1.2. Объявление посредников……………………………………………………………………………………….. 158
7.1.2.1. Объявление фабрик функций, выдающих посредники…………………………… 162
7.2. Упражнение. Написание первого посредника……………………………………………………………….. 162
7.3. Обработка статических файлов………………………………………………………………………………………. 163
7.4. Упражнение. Стилизация приложения с помощью собственной таблицы стилей……… 167
7.5. Обработка ошибок……………………………………………………………………………………………………………. 170
7.5.1. Оповещение о возникновении ошибки………………………………………………………………….. 170
7.5.1.1. Оповещение об ошибке средствами Node.js и Express……………………………. 171
7.5.1.2. Оповещение об ошибке средствами библиотеки http-errors…………………… 172
7.5.1.3. Оповещение об ошибках в асинхронных контроллерах
и посредниках…………………………………………………………………………………………………………. 173
7.5.2. Обработчики ошибок……………………………………………………………………………………………… 174
7.5.2.1. Обработчик ошибок по умолчанию…………………………………………………………. 174
7.5.2.2. Собственные обработчики ошибок………………………………………………………….. 174
7.6. Упражнение. Реализация обработки ошибок…………………………………………………………………. 175
Урок 8. Валидация……………………………………………………………………………….. 180
8.1. Валидация данных, полученных от пользователя………………………………………………………… 180
8.1.1. Валидация средствами JavaScript…………………………………………………………………………. 180
8.1.2. Валидация средствами библиотеки express-validator………………………………………….. 181
8.1.2.1. Введение в express-validator………………………………………………………………………. 181
8.1.2.2. Создание валидаторов………………………………………………………………………………. 182
8.1.2.3. Задание правил валидации………………………………………………………………………. 182
8.1.2.4. Задание очистителей…………………………………………………………………………………. 190
8.1.2.5. Задание модификаторов……………………………………………………………………………. 191
8.1.2.6. Последовательность выполнения правил валидации и очистителей…… 192
8.1.2.7. Получение сообщений об ошибках ввода……………………………………………….. 193
8.1.2.8. Получение данных, прошедших валидацию…………………………………………… 194
8.2. Упражнение. Валидация добавляемых дел……………………………………………………………………. 195
8.3. Валидация значений URL-параметров…………………………………………………………………………… 197
Урок 9. Cookie, серверные сессии и всплывающие сообщения…………….. 200
9.1. Cookie…………………………………………………………………………………………………………………………………. 200
9.1.1. Подготовка Express для работы с cookie. Библиотека cookie-parser………………….. 200
9.1.2. Работа с cookie………………………………………………………………………………………………………… 201
9.1.2.1. Создание cookie…………………………………………………………………………………………. 201
9.1.2.2. Получение cookie……………………………………………………………………………………….. 203
9.1.2.3. Удаление cookie…………………………………………………………………………………………. 203
9.2. Упражнение. Задание порядка вывода дел……………………………………………………………………. 203
9.3. Серверные сессии……………………………………………………………………………………………………………… 206
9.3.1. Подготовка Express для работы с серверными сессиями…………………………………….. 206
9.3.1.1. Библиотека express-session: обработка сессий……………………………………….. 206
9.3.1.2. Библиотека session-file-store: файловое хранилище сессий…………………… 209
9.3.2. Работа с серверными сессиями……………………………………………………………………………… 211
9.4. Всплывающие сообщения………………………………………………………………………………………………… 212
9.4.1. Работа со всплывающими сообщениями средствами библиотеки
express-session……………………………………………………………………………………………………………………. 213
9.4.2. Использование библиотеки express-flash-message……………………………………………….. 213
9.5. Упражнение. Отображение сообщений об ошибках ввода…………………………………………… 215
Урок 10. Выгрузка файлов……………………………………………………………………. 220
10.1. Выгрузка файлов средствами библиотеки multer………………………………………………………… 220
10.1.1. Получение генератора посредников…………………………………………………………………. 220
10.1.1.1. Задание хранилища выгруженных файлов………………………………………. 221
Хранилище DiskStorage………………………………………………………………………………… 221
Хранилище MemoryStorage…………………………………………………………………………… 223
10.1.1.2. Задание правил валидации выгруженных файлов…………………………… 224
10.1.1.3. Задание функции валидации выгруженных файлов………………………… 225
10.1.2. Получение посредников, сохраняющих выгруженные файлы……………………….. 227
10.1.3. Использование полученных посредников………………………………………………………… 229
10.1.4. Получение сведений о выгруженном файле……………………………………………………… 230
Особенности использования хранилища MemoryStorage………………………………. 231
10.2. Вывод выгруженных файлов…………………………………………………………………………………………. 231
10.2.1. Вывод средствами посредника, обрабатывающего статические файлы………. 231
10.2.2. Вывод в контроллерах……………………………………………………………………………………….. 232
10.3. Упражнение. Добавление иллюстраций к запланированным делам…………………………. 234
Урок 11. Разграничение доступа и промисификация……………………………. 240
11.1. Основы разграничения доступа…………………………………………………………………………………….. 240
11.1.1. Собственно разграничение доступа…………………………………………………………………. 240
11.1.2. Многопользовательские веб-приложения………………………………………………………… 242
11.1.3. Реализация разграничения доступа………………………………………………………………….. 242
11.2. Хеширование…………………………………………………………………………………………………………………… 243
11.2.1. Генерирование хешей…………………………………………………………………………………………. 243
11.2.1.1. Генерирование случайной соли…………………………………………………………. 244
11.2.2. Сверка хешей………………………………………………………………………………………………………. 245
11.3. Промисификация…………………………………………………………………………………………………………….. 246
11.4. Упражнение. Превращение веб-приложения в многопользовательское……………………. 246
11.4.1. Регистрация новых пользователей……………………………………………………………………. 246
11.4.2. Вход и выход……………………………………………………………………………………………………….. 254
11.4.3. Разграничение доступа к запланированным делам………………………………………… 260
11.5. Самостоятельные упражнения………………………………………………………………………………………. 262
Часть III. СУБД MongoDB. Модели Mongoose………………………… 263
Урок 12. СУБД MongoDB……………………………………………………………………… 265
12.1. Серверные СУБД и их преимущества перед «самоделками»……………………………………… 265
12.2. Введение в MongoDB……………………………………………………………………………………………………… 266
12.2.1. Базы данных, коллекции и документы……………………………………………………………… 267
12.2.2. Типы данных, поддерживаемые MongoDB………………………………………………………. 268
12.2.3. Встраивание и связывание документов…………………………………………………………….. 269
12.2.3.1. Встраивание вторичных документов в первичный………………………….. 269
12.2.3.2. Связывание вторичных документов с первичным……………………………. 271
12.2.4. Операции, выполняемые над документами………………………………………………………. 272
12.2.5. Индексы……………………………………………………………………………………………………………….. 273
12.3. Клиентская библиотека MongoDB………………………………………………………………………………… 274
12.3.1. Подключение к серверу MongoDB…………………………………………………………………….. 274
12.3.2. Выбор базы данных……………………………………………………………………………………………. 275
12.3.3. Выбор коллекции………………………………………………………………………………………………… 275
12.3.4. Добавление документов……………………………………………………………………………………… 276
12.3.4.1. Добавление одного документа…………………………………………………………… 276
12.3.4.2. Добавление нескольких документов………………………………………………….. 277
12.3.5. Поиск документа…………………………………………………………………………………………………. 278
12.3.5.1. Написание условий поиска………………………………………………………………… 278
Условия простого сравнения………………………………………………………………………… 279
Поиск документа по объектному идентификатору…………………………………….. 280
Условия, использующие операторы сравнения………………………………………….. 280
Составные условия, содержащие логические операторы…………………………. 281
12.3.5.2. Указание набора выдаваемых атрибутов…………………………………………. 284
12.3.5.3. Типы значений атрибутов у выдаваемого документа……………………… 285
12.3.6. Фильтрация документов…………………………………………………………………………………….. 285
12.3.6.1. Выдача всех документов из коллекции……………………………………………… 286
12.3.6.2. Сортировка выданных документов……………………………………………………. 286
12.3.6.3. Выдача части отфильтрованных документов………………………………….. 287
12.3.6.4. Курсор. Получение отфильтрованных документов…………………………. 287
12.3.7. Исправление документов……………………………………………………………………………………. 289
12.3.7.1. Исправление одного документа…………………………………………………………. 289
12.3.7.2. Исправление нескольких документов………………………………………………… 291
12.3.8. Удаление документов…………………………………………………………………………………………. 292
12.3.8.1. Удаление одного документа………………………………………………………………. 292
12.3.8.2. Удаление нескольких документов……………………………………………………… 292
12.4. Вместо упражнения………………………………………………………………………………………………………… 292
Урок 13. Mongoose: объектные модели и их написание………………………… 294
13.1. Введение в объектные модели. Mongoose…………………………………………………………………….. 294
13.2. Mongoose: подключение к базе данных……………………………………………………………………….. 295
13.3. Mongoose: создание моделей…………………………………………………………………………………………. 296
13.3.1. Схемы Mongoose…………………………………………………………………………………………………. 297
13.3.1.1. Написание перечней атрибутов…………………………………………………………. 297
13.3.1.2. Типы значений атрибутов, поддерживаемые Mongoose………………….. 297
13.3.1.3. Указание простых индексов……………………………………………………………….. 298
13.3.1.4. Дополнительные параметры атрибутов……………………………………………. 299
13.3.1.5. Создание схем……………………………………………………………………………………… 301
13.3.1.6. Указание индексов любой сложности……………………………………………….. 303
13.3.1.7. Виртуальные атрибуты и создание…………………………………………………… 303
13.3.2. Создание моделей……………………………………………………………………………………………….. 305
13.4. Упражнение. Перевод веб-приложения на работу с базой данных MongoDB (часть 1) 305
Урок 14. Mongoose: запись данных………………………………………………………. 310
14.1. Mongoose: добавление, правка и удаление документов……………………………………………… 310
14.1.1. Добавление документов……………………………………………………………………………………… 310
14.1.1.1. Добавление одного документа…………………………………………………………… 310
14.1.1.2. Добавление нескольких документов………………………………………………….. 311
14.1.2. Правка документов……………………………………………………………………………………………… 312
14.1.2.1. Правка одного документа…………………………………………………………………… 312
Способ первый: в стиле моделей Mongoose………………………………………………… 312
Способ второй: в стиле клиентской библиотеки MongoDB………………………. 314
14.1.2.2. Правка нескольких документов………………………………………………………….. 316
14.1.3. Удаление документов…………………………………………………………………………………………. 316
14.1.3.1. Удаление одного документа………………………………………………………………. 316
14.1.3.2. Удаление нескольких документов……………………………………………………… 317
14.2. Низкоуровневые и высокоуровневые инструменты…………………………………………………….. 317
14.3. Упражнение. Перевод веб-приложения на работу с базой данных MongoDB (часть 2) 318
Урок 15. Mongoose: выборка данных……………………………………………………. 324
15.1. Mongoose: поиск документов…………………………………………………………………………………………. 324
15.1.1. Базовые инструменты поиска……………………………………………………………………………. 324
15.1.1.1. Особенности указания значений в условиях поиска………………………… 325
15.1.2. Запрос к базе данных и получение результата……………………………………………….. 325
15.1.3. Конструирование запросов на поиск………………………………………………………………… 326
15.1.3.1. Условия простого сравнения………………………………………………………………. 327
15.1.3.2. Условия, использующие операторы сравнения………………………………… 328
15.1.3.3. Составные условия с логическими операторами……………………………… 330
15.1.3.4. Указание выдаваемых атрибутов………………………………………………………. 330
15.2. Mongoose: фильтрация документов………………………………………………………………………………. 331
15.2.1. Базовые инструменты фильтрации……………………………………………………………………. 331
15.2.2. Конструирование запросов на фильтрацию…………………………………………………….. 331
15.2.2.1. Сортировка документов……………………………………………………………………… 331
15.2.2.2. Выдача части отфильтрованных документов………………………………….. 332
15.3. Mongoose: получение количества документов…………………………………………………………….. 332
15.4. Упражнение. Перевод веб-приложения на работу с базой данных MongoDB (часть 3) 333
Урок 16. Mongoose: агрегатные вычисления и расширение моделей……. 334
16.1. Агрегатные вычисления…………………………………………………………………………………………………. 334
16.1.1. Конвейер агрегатных вычислений и его создание…………………………………………… 334
16.1.1.1. Стадия фильтрации документов………………………………………………………… 336
16.1.1.2. Стадия сортировки документов…………………………………………………………. 336
16.1.1.3. Стадия формирования групп………………………………………………………………. 336
Поддерживаемые агрегатные вычисления………………………………………………….. 337
Выполнение агрегатных вычислений по всем документам из коллекции… 339
16.1.1.4. Стадия фильтрации групп…………………………………………………………………… 339
16.1.1.5. Стадия сортировки групп……………………………………………………………………. 340
16.1.1.6. Стадия выборки части групп……………………………………………………………… 340
16.1.2. Получение результатов агрегатных вычислений…………………………………………….. 341
16.1.3. Выборка связанных документов……………………………………………………………………….. 341
16.1.3.1. Стадия связывания документов………………………………………………………….. 341
16.1.3.2. Доступ к атрибутам поддокументов………………………………………………….. 342
16.1.3.3. Стадия разворачивания массива……………………………………………………….. 343
16.2. Упражнение. Создание веб-страницы наиболее активных пользователей………………. 344
16.3. Расширение функциональности моделей……………………………………………………………………… 346
16.3.1. Обычные методы моделей………………………………………………………………………………….. 346
16.3.2. Статические методы моделей……………………………………………………………………………. 348
16.3.3. Методы, задающие условия при конструировании запросов………………………… 348
16.4. Упражнение. Расширение моделей……………………………………………………………………………….. 349
16.5. Самостоятельные упражнения………………………………………………………………………………………. 351
Часть IV. Фронтенды и бэкенды. Веб-фреймворк React….. 353
Урок 17. Программирование бэкендов средствами Express………………….. 355
17.1. Традиционные и двухзвенные веб-приложения. Фронтенды и бэкенды……………………. 355
17.2. REST…………………………………………………………………………………………………………………………………. 357
17.2.1. Введение в REST…………………………………………………………………………………………………. 357
17.2.2. Практическая реализация REST………………………………………………………………………… 357
17.2.3. Разграничение доступа в стиле REST. Жетонная аутентификация……………….. 359
17.3. Программные инструменты, применяемые при разработке бэкендов……………………….. 360
17.3.1. Инструменты Express для отправки ответов…………………………………………………….. 360
17.3.2. Инструменты Express для проверки типа требуемых клиентом данных……….. 361
17.3.3. Инструменты Express для получения от пользователя данных
в формате JSON……………………………………………………………………………………………………………….. 362
17.3.4. Инструменты Mongoose для преобразования документов в JSON…………………. 363
17.4. Работа с жетонами пользователей средствами библиотеки jsonwebtoken……………….. 364
17.5. Обработка межсайтовых запросов. Библиотека cors………………………………………………….. 367
17.5.1. Проблема с доступом к «чужим» cookie……………………………………………………………. 370
17.6. Упражнение. Превращение веб-приложения в бэкенд………………………………………………… 370
Урок 18. Программирование фронтендов. React: компоненты……………… 382
18.1. Одностраничные фронтенды. Экраны………………………………………………………………………….. 382
18.2. Веб-фреймворк React……………………………………………………………………………………………………… 383
18.2.1. Введение в React…………………………………………………………………………………………………. 383
18.2.1.1. Компоненты…………………………………………………………………………………………. 383
18.2.1.2. Реактивные данные. Пропы и состояния компонентов…………………….. 385
18.2.1.3. Передача данных между компонентами. Спуск и подъем данных…. 385
18.2.1.4. Разработка React-фронтендов……………………………………………………………. 386
18.2.2. React-проект: создание и структура…………………………………………………………………. 387
18.2.2.1. Создание React-проекта……………………………………………………………………… 387
18.2.2.2. Структура React-проекта……………………………………………………………………. 387
18.2.3. Разработка компонентов……………………………………………………………………………………. 389
18.2.3.1. Объявление компонентов……………………………………………………………………. 389
18.2.3.2. Формирование содержимого компонентов. Язык JSX. Фрагменты…. 391
Указание встроенных стилей……………………………………………………………………….. 394
Условный вывод…………………………………………………………………………………………….. 394
Вывод последовательностей………………………………………………………………………… 395
Вывод потомков…………………………………………………………………………………………….. 396
18.2.3.3. Работа с состояниями компонентов…………………………………………………… 397
18.2.3.4. Обработка событий…………………………………………………………………………….. 398
18.2.3.5. Взаимодействие с элементами управления………………………………………. 399
18.2.3.6. Прямое обращение к DOM компонента. Рефы………………………………….. 400
Использование рефов для постоянного хранения данных………………………… 401
18.2.3.7. Хуки………………………………………………………………………………………………………. 401
18.2.3.8. Стилизация фронтенда……………………………………………………………………….. 404
18.2.3.9. Использование внедренных элементов в компонентах……………………. 406
18.2.4. Использование компонентов……………………………………………………………………………… 406
18.2.5. Запуск React-проекта на выполнение……………………………………………………………….. 407
18.3. Упражнение. Написание фронтенда (часть 1)……………………………………………………………… 407
18.3.1. Вывод перечня дел……………………………………………………………………………………………… 407
18.3.2. Поиск и сортировка дел……………………………………………………………………………………… 412
18.3.3. Реализация входа и выхода……………………………………………………………………………….. 415
Урок 19. React: контексты и маршрутизация……………………………………….. 420
19.1. Контексты React……………………………………………………………………………………………………………… 420
19.2. Упражнение. Написание фронтенда (часть 2)……………………………………………………………… 422
19.3. Навигация во фронтендах. Пакет React Router……………………………………………………………. 425
19.3.1. Основные понятия React Router…………………………………………………………………………. 426
19.3.2. Маршрутизация средствами React Router……………………………………………………….. 426
19.3.2.1. Маршрутизатор…………………………………………………………………………………… 426
19.3.2.2. Коммутатор………………………………………………………………………………………….. 427
19.3.2.3. Маршруты……………………………………………………………………………………………. 428
19.3.3. Навигация средствами React Router…………………………………………………………………. 429
19.3.3.1. Гиперссылки………………………………………………………………………………………… 429
Link: простая гиперссылка……………………………………………………………………………. 429
NavLink: расширенная гиперссылка……………………………………………………………. 430
19.3.3.2. Перенаправление…………………………………………………………………………………. 431
Компонент Navigate………………………………………………………………………………………. 431
Хук useNavigate()…………………………………………………………………………………………… 432
19.3.4. Получение значений URL-параметров……………………………………………………………… 432
19.3.5. Получение дополнительного значения…………………………………………………………….. 433
19.4. Упражнение. Написание фронтенда (часть 3)……………………………………………………………… 433
19.5. Самостоятельные упражнения………………………………………………………………………………………. 444
Часть V. Ввод веб-приложений в эксплуатацию……………… 445
Урок 20. Повышение производительности веб-приложений…………………. 447
20.1. Кеширование…………………………………………………………………………………………………………………… 447
20.1.1. Кеширование на стороне клиента…………………………………………………………………….. 448
20.1.1.1. Кеширование статических файлов средствами Express…………………… 448
20.1.1.2. Кеширование сгенерированных программно ресурсов
средствами Express…………………………………………………………………………………………….. 450
20.1.1.3. Управление кешированием средствами библиотеки
express-cache-ctrl…………………………………………………………………………………………………. 451
20.1.2. Кеширование на стороне сервера……………………………………………………………………… 453
20.1.2.1. Кеширование шаблонов средствами Express……………………………………. 453
20.1.2.2. Кеширование произвольных данных средствами библиотеки cache-manager 453
Библиотека cache-manager-fs-hash: файловое хранилище
кешированных данных………………………………………………………………………………….. 456
20.2. Сжатие ответов……………………………………………………………………………………………………………….. 457
20.3. Самостоятельные упражнения………………………………………………………………………………………. 458
Урок 21. Дополнительная защита веб-приложений………………………………. 459
21.1. Защита от других распространенных сетевых атак средствами библиотеки helmet. 459
21.2. Защита от атак CSRF……………………………………………………………………………………………………… 460
21.3. Защита базы данных MongoDB…………………………………………………………………………………….. 463
21.3.1. Создание суперадминистратора……………………………………………………………………….. 463
21.3.2. Создание пользователей…………………………………………………………………………………….. 465
21.3.3. Вход на сервер MongoDB в веб-приложении…………………………………………………… 466
21.4. Самостоятельные упражнения………………………………………………………………………………………. 467
Урок 22. Журналирование. Библиотека morgan…………………………………… 468
22.1. Введение в библиотеку morgan……………………………………………………………………………………… 468
22.2. Задание формата записей………………………………………………………………………………………………. 469
22.2.1. Предопределенные форматы……………………………………………………………………………… 469
22.2.2. Написание строк форматов……………………………………………………………………………….. 470
22.2.3. Расширенные инструменты для работы с форматами записей………………………. 471
22.2.3.1. Создание своих предопределенных форматов…………………………………. 471
22.2.3.2. Создание своих литералов для строк форматов………………………………. 472
22.3. Задание параметров журналирования…………………………………………………………………………. 473
22.3.1. Вывод журнала в файл……………………………………………………………………………………….. 473
22.3.2. Вывод журнала в последовательность файлов……………………………………………….. 474
22.4. Самостоятельное упражнение………………………………………………………………………………………. 476
Урок 23. Ввод веб-приложений в эксплуатацию…………………………………… 477
23.1. Отладочный и эксплуатационный режимы работы веб-приложения……………………….. 477
23.2. Подготовка фронтенда и бэкенда к эксплуатации………………………………………………………. 478
23.2.1. Подготовка бэкенда……………………………………………………………………………………………. 479
23.2.2. Подготовка фронтенда……………………………………………………………………………………….. 480
23.2.3. Создание эксплуатационной редакции фронтенда и встраивание ее
в бэкенд……………………………………………………………………………………………………………………………. 481
23.3. Подготовка веб-приложения к эксплуатации………………………………………………………………. 482
23.4. Развертывание веб-приложения…………………………………………………………………………………….. 483
23.5. Самостоятельные упражнения………………………………………………………………………………………. 483
Заключение………………………………………………………………………………………….. 485
Приложения…………………………………………………………………………………… 487
Приложение 1. Node.js: подготовка к работе………………………………………… 488
П1.1. Установка Node.js…………………………………………………………………………………………………………… 488
П1.2. Проверка работоспособности Node.js………………………………………………………………………….. 493
Приложение 2. Visual Studio Code: установка и использование…………….. 494
П2.1. Установка Visual Studio Code………………………………………………………………………………………… 494
П2.2. Запуск и завершение работы Visual Studio Code…………………………………………………………. 500
П2.3. Главное окно Visual Studio Code…………………………………………………………………………………… 500
П2.4. Расширения Visual Studio Code и работа с ними…………………………………………………………. 503
П2.5. Работа с отдельными файлами……………………………………………………………………………………… 509
П2.5.1. Создание файлов………………………………………………………………………………………………… 509
П2.5.2. Открытие файлов………………………………………………………………………………………………… 510
П2.5.2.1. Работа с вкладками главной области……………………………………………….. 510
П2.5.2.2. Разделение главной области на секции…………………………………………….. 511
Разделение на секции при открытии файлов………………………………………………. 511
Разделение на секции после открытия файлов……………………………………………. 514
П2.5.3. Сохранение файлов……………………………………………………………………………………………. 514
П2.5.4. Отмена правок, сделанных в файле………………………………………………………………….. 515
П2.5.5. Закрытие файлов………………………………………………………………………………………………… 515
П2.6. Работа с папками……………………………………………………………………………………………………………. 516
П2.6.1. Открытие папки………………………………………………………………………………………………….. 516
П2.6.1.1. Область Открытые редакторы боковой панели…………………………….. 518
П2.6.2. Работа с содержимым открытой папки……………………………………………………………. 519
П2.6.2.1. Создание файлов и папок…………………………………………………………………… 519
П2.6.2.2. Открытие файлов………………………………………………………………………………… 520
П2.6.2.3. Закрытие файлов…………………………………………………………………………………. 520
П2.6.2.4. Переименование файлов и папок………………………………………………………. 520
П2.6.2.5. Перемещение файлов и папок……………………………………………………………. 521
П2.6.2.6. Удаление файлов и папок…………………………………………………………………… 521
П2.7. Работа с программным кодом……………………………………………………………………………………….. 521
П2.7.1. Автоматическая установка отступов……………………………………………………………….. 521
П2.7.2. Синтаксическая подсветка кода……………………………………………………………………….. 522
П2.7.3. Команды для работы с кодом……………………………………………………………………………. 522
П2.7.4. Списки быстрого выбора…………………………………………………………………………………… 522
П2.7.5. Подсказки по коду………………………………………………………………………………………………. 523
П2.7.6. Выявление ошибок……………………………………………………………………………………………… 524
П2.7.6.1. Ошибки времени компиляции…………………………………………………………….. 524
П2.7.6.2. Ошибки времени выполнения…………………………………………………………….. 525
П2.7.7. Просмотр структуры программного кода………………………………………………………… 526
П2.7.8. Поиск и замена……………………………………………………………………………………………………. 528
П2.7.8.1. Поиск и замена в файле из активной папки………………………………………. 528
Поиск………………………………………………………………………………………………………………. 528
Замена…………………………………………………………………………………………………………….. 529
П2.7.8.2. Поиск и замена в файлах……………………………………………………………………. 530
Поиск………………………………………………………………………………………………………………. 530
Замена…………………………………………………………………………………………………………….. 532
П2.8. Терминал…………………………………………………………………………………………………………………………. 533
П2.9. Отладка…………………………………………………………………………………………………………………………… 534
П2.9.1. Запуск приложения для отладки………………………………………………………………………. 535
П2.9.2. Точки останова…………………………………………………………………………………………………… 535
П2.9.3. Пошаговое выполнение кода…………………………………………………………………………….. 537
П2.9.4. Просмотр состояния приложения……………………………………………………………………… 539
П2.9.5. Просмотр вывода приложения………………………………………………………………………….. 541
П2.9.6. Создание конфигурации отладки……………………………………………………………………… 541
П2.10. Вспомогательные инструменты………………………………………………………………………………….. 543
П2.10.1. Область Сценарии NPM боковой панели……………………………………………………….. 543
П2.10.2. Палитра команд……………………………………………………………………………………………….. 544
П2.10.3. Создание нескольких главных окон……………………………………………………………….. 545
П2.10.4. Мини-карта……………………………………………………………………………………………………….. 546
П2.11. Настройка Visual Studio Code……………………………………………………………………………………… 547
П2.11.1. Задание параметров Visual Studio Code…………………………………………………………. 547
П2.11.2. Задание цветовой схемы………………………………………………………………………………….. 550
П2.11.3. Задание тем значков………………………………………………………………………………………… 551
Приложение 3. MongoDB: установка……………………………………………………. 552
Приложение 4. MongoDB Shell: установка и использование…………………. 558
П4.1. Установка MongoDB Shell……………………………………………………………………………………………… 558
П4.2. Запуск и завершение MongoDB Shell……………………………………………………………………………. 560
Приложение 5. MongoDB Compass: установка и использование…………… 561
П5.1. Установка MongoDB Compass……………………………………………………………………………………… 561
П5.2. Запуск и завершение работы MongoDB Compass………………………………………………………. 562
П5.3. Главное окно MongoDB Compass…………………………………………………………………………………. 563
П5.4. Работа с соединениями………………………………………………………………………………………………….. 564
П5.4.1. Создание соединений…………………………………………………………………………………………. 564
П5.4.2. Перечни соединений…………………………………………………………………………………………… 565
П5.4.3. Удаление соединений………………………………………………………………………………………… 566
П5.5. Подключение к серверам MongoDB и отключение от них…………………………………………. 566
П5.5.1. Подключение к серверу……………………………………………………………………………………… 566
П5.5.1.1. Правка соединения……………………………………………………………………………… 567
П5.5.1.2. Подключение с входом……………………………………………………………………….. 567
П5.5.2. Просмотр списка баз данных и коллекций………………………………………………………. 567
П5.5.3. Отключение от сервера……………………………………………………………………………………… 569
П5.6. Работа с базами данных………………………………………………………………………………………………… 569
П5.6.1. Создание базы данных………………………………………………………………………………………. 569
П5.6.2. Удаление базы данных………………………………………………………………………………………. 570
П5.7. Работа с коллекциями……………………………………………………………………………………………………. 570
П5.7.1. Создание коллекции…………………………………………………………………………………………… 570
П5.7.2. Удаление коллекции…………………………………………………………………………………………… 571
П5.8. Работа с индексами………………………………………………………………………………………………………… 571
П5.8.1. Создание индекса……………………………………………………………………………………………….. 571
П5.8.2. Удаление индекса………………………………………………………………………………………………. 573
П5.9. Работа с документами……………………………………………………………………………………………………. 574
П5.9.1. Добавление документов в коллекцию………………………………………………………………. 574
П5.9.2. Просмотр документов, имеющихся в коллекции……………………………………………… 575
П5.9.2.1. Фильтрация и сортировка документов……………………………………………… 577
П5.9.3. Правка и удаление документов…………………………………………………………………………. 578
П5.9.4. Прочие операции над документами…………………………………………………………………. 579
П5.10. Экспорт и импорт документов…………………………………………………………………………………….. 580
П5.10.1. Экспорт документов…………………………………………………………………………………………. 580
П5.10.2. Импорт документов………………………………………………………………………………………….. 581
П5.11. Встроенная программа Mongosh………………………………………………………………………………… 582
Приложение 6. Postman: установка и использование……………………………. 583
П6.1. Установка Postman………………………………………………………………………………………………………… 583
П6.2. Запуск и завершение работы Postman…………………………………………………………………………. 584
П6.3. Главное окно Postman……………………………………………………………………………………………………. 585
П6.4. Отправка клиентских запросов…………………………………………………………………………………….. 587
П6.4.1. Задание целевого интернет-адреса и HTTP-метода……………………………………….. 587
П6.4.2. Указание GET-параметров………………………………………………………………………………… 588
П6.4.3. Указание POST-параметров………………………………………………………………………………. 590
П6.4.4. Указание жетона пользователя для аутентификации…………………………………….. 590
П6.4.5. Указание заголовков запроса……………………………………………………………………………. 591
П6.4.6. Работа с cookie……………………………………………………………………………………………………. 591
П6.4.7. Отправка созданного клиентского запроса……………………………………………………… 594
П6.5. Просмотр серверных ответов………………………………………………………………………………………… 594
П6.5.1. Просмотр тела ответа………………………………………………………………………………………… 595
П6.5.2. Просмотр cookie, полученных с ответом…………………………………………………………. 596
П6.5.3. Просмотр заголовков ответа……………………………………………………………………………… 596
П6.6. Работа с вкладками главной области…………………………………………………………………………… 597
П6.7. Работа с историей Postman…………………………………………………………………………………………… 599
Приложение 7. Описание файлового архива………………………………………… 601
Предметный указатель…………………………………………………………………………. 602
Дронов Владимир Александрович, профессиональный программист, писатель и журналист, работает с компьютерами с 1987 года. Автор более 30 популярных компьютерных книг, в том числе «Django 2.1. Практика создания веб-сайтов на Python», “HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера“, «Python 3. Самое необходимое», «Python 3 и PyQt 5. Разработка приложений», “Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS“, “Angular 4. Быстрая разработка сверхдинамических Web-сайтов на TypeScript и PHP” и книг по продуктам Adobe Flash и Adobe Dreamweaver различных версий. Его статьи публикуются в журналах “Мир ПК” и “ИнтерФейс” (Израиль) и интернет-порталах “IZ City” и “TheVista.ru”.