Урок 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