Переписана л/р 5, актуализированы тексты работ 1-4
29
README.md
@ -1,37 +1,38 @@
|
||||
# Интернет-программирование, ИС, УлГТУ, 2022-2023
|
||||
# Интернет-программирование, ИС, УлГТУ
|
||||
|
||||
Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, 2022-2023 учебный год.
|
||||
Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, направление 09.03.03 Прикладная информатика (Авторизация бизнес-решений).
|
||||
|
||||
## Правила оформления и сдачи лабораторных работ
|
||||
|
||||
1. Лабораторные работы выполняются в аудитории или дистанционно.
|
||||
2. Посещать лабораторные занятия обязательно только для сдачи работ.
|
||||
3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://files.ulstu.ru/s/WidAoc9F8BwinRc) есть об этом отметка.
|
||||
3. Лабораторная работа считается завершённой, если в [таблице с прогрессом в LMS](https://lms.ulstu.ru/course/view.php?id=2028) есть об этом отметка.
|
||||
4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия.
|
||||
5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы.
|
||||
6. Иных отчётов помимо Вашего кода или других артефактов, необходимых для выполнения задания, предоставлять не надо.
|
||||
6. Если необходимо оформить отчёт о выполнении лабораторной работы, об этом будет написано дополнительно.
|
||||
7. Крайне не рекомендуется затягивать с выполнением лабораторных работ, т.к. их выполнение и защита должны быть последовательны.
|
||||
|
||||
## Лабораторные работы
|
||||
|
||||
Обязательные лабораторные работы:
|
||||
|
||||
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
|
||||
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
|
||||
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
|
||||
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
|
||||
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md)
|
||||
- [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
|
||||
- [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
|
||||
- [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
|
||||
- [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
|
||||
- [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md)
|
||||
|
||||
Лабораторные работы на выбор:
|
||||
|
||||
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
|
||||
* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md)
|
||||
* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md)
|
||||
* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)
|
||||
- [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
|
||||
- [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md)
|
||||
- [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md)
|
||||
- [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)
|
||||
|
||||
## Правила допуска до экзамена
|
||||
|
||||
Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend.
|
||||
Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному.
|
||||
|
||||
Для допуска к экзамену надо защитить все обязательные работы и любую из необязательных на выбор.
|
||||
Для допуска к экзамену надо защитить все обязательные работы и две их необязательных на выбор.
|
||||
В сумме 8, что соответствует учебному плану.
|
||||
|
@ -7,14 +7,14 @@
|
||||
## Ход выполнения работы
|
||||
|
||||
1. Выбрать тематику своего будущего сайта.
|
||||
2. Зарегистрироваться в Figma или аналоге.
|
||||
2. Зарегистрироваться в Figma или аналоге (например, Lunacy).
|
||||
3. Создать макет сайта согласно требованиям.
|
||||
|
||||
## Выбор тематики будущего веб-сайта
|
||||
|
||||
В рамках данного курса вам необходимо будет создать небольшое веб-приложение.
|
||||
|
||||
> Разработка таких приложений обычно делятся на 2 части: разработка frontend и backend.
|
||||
> Разработка таких приложений обычно делятся на 2 части: разработка presentation layer (frontend) и business logic layer (backend).
|
||||
>
|
||||
> Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя.
|
||||
> То есть визуальные стили, шаблоны страниц и т.д.
|
||||
@ -64,26 +64,26 @@
|
||||
К сожалению, приложение работает только на английском языке.
|
||||
Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).
|
||||
|
||||
> В качестве альтернативы можете использовать Gimp, Adobe XD, Adobe Photoshop.
|
||||
> В качестве альтернативы можете использовать Lunacy, Sketch, Gimp.
|
||||
|
||||
## Требования к макету
|
||||
|
||||
1. Два frame: для desktop и для мобильного устройства (например, iPhone 14).
|
||||
2. На макете должны быть следующие блоки:
|
||||
- Блок с ссылками. Например, шапка сайта.
|
||||
Ссылки можно оформить в виде текста с подчёркиванием.
|
||||
- Блок с компонентами.
|
||||
На каждом компоненте можно использовать svg-иконку.
|
||||
Компоненты необходимо расположить в несколько столбцов для desktop-версии.
|
||||
- Блок с таблицей.
|
||||
Для мобильной версии можно добавить горизонтальную прокрутку.
|
||||
- Блок с формой.
|
||||
Элементы формы для desktop-версии можно расположить в несколько столбцов.
|
||||
Для мобильной - в один.
|
||||
3. Обязательно черновик должен быть переименован в формат `Фамилия Имя, группа`.
|
||||
1. Вы можете сделать либо многостраничный сайт, либо одностраничный (его ещё называются landing-page).
|
||||
2. Для каждой страницы необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 14).
|
||||
3. На макете на любой странице должны быть следующие блоки:
|
||||
|
||||
## Сдача лабораторной работы
|
||||
- Блок с ссылками. Например, шапка сайта.
|
||||
Ссылки можно оформить в виде текста с подчёркиванием.
|
||||
Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужный frame или его часть (для landing-page).
|
||||
- Блок с карточками.
|
||||
В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое.
|
||||
Карточки необходимо расположить в несколько столбцов для desktop-версии.
|
||||
В мобильной версии обычно карточки располагаются друг под другом.
|
||||
Пример карточек: блок с анонсами новостей и событий.
|
||||
- Блок с формой.
|
||||
Элементы формы для desktop-версии можно расположить в несколько столбцов.
|
||||
Для мобильной - в один.
|
||||
Не забудьте кнопку отправки формы!
|
||||
Пример формы: обратная связь, подписка на новости, форма входа в систему.
|
||||
|
||||
Для очной защиты достаточно показать работающий макет преподавателю.
|
||||
|
||||
В случае дистанционной сдачи л/р необходимо скинуть ссылку на макет (проверьте её в режиме инкогнито / приватного окна) в [эту форму](https://forms.yandex.ru/u/63eef4a8d046880f47ffe776/) и написать об этом в [чате telegram](https://t.me/+MGRd5PxIoV83NTgy).
|
||||
4. Обязательно файл с Вашим макетом должен быть переименован в формат `Фамилия Имя, группа`.
|
||||
|
@ -46,13 +46,51 @@
|
||||
|
||||
## Создание документа HTML
|
||||
|
||||
На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы.
|
||||
На основании макета, выполненного в рамках [лабораторной работы №1](../lw02/README.md), необходимо добавить в HTML-документ элементы.
|
||||
|
||||
Главный документ должен иметь название `index.html`.
|
||||
Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
|
||||
Например, `orders.html`, `feedback.html` или `sitemap.html`.
|
||||
|
||||
Для landing-page все блоки страницы должны быть обёрнуты в отдельные div-контейнеры со своим идентификатором, например:
|
||||
|
||||
```html
|
||||
...
|
||||
<body>
|
||||
<div id="nav">
|
||||
<!-- Тут навигация. -->
|
||||
</div>
|
||||
<div id="welcome">
|
||||
<!-- Тут приветственное сообщение от автора. -->
|
||||
</div>
|
||||
<div id="features">
|
||||
<!-- Тут блок с карточками-фичами какой-нибудь системы. -->
|
||||
</div>
|
||||
<div id="order-form">
|
||||
<!-- Тут форма для заказа. -->
|
||||
</div>
|
||||
</body>
|
||||
...
|
||||
```
|
||||
|
||||
При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок.
|
||||
Например:
|
||||
|
||||
```html
|
||||
<div class="card first">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Заголовок новости-карточки 1</h3>
|
||||
</div>
|
||||
<div class="card-body">Текст новости-карточки.</div>
|
||||
</div>
|
||||
...
|
||||
<div class="card last">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Заголовок новости-карточки 2</h3>
|
||||
</div>
|
||||
<div class="card-body">Текст новости-карточки.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты".
|
||||
Или же сразу добавлять стили к только что созданным элементам.
|
||||
@ -94,10 +132,10 @@ body {
|
||||
margin-left: 1em;
|
||||
margin-right: 14pt;
|
||||
margin-bottom: 15px;
|
||||
/*same as "margin: 60px 14pt 15px 1em;"*/
|
||||
/* Можно заменить просто на "margin: 60px 14pt 15px 1em;" */
|
||||
|
||||
padding: 10px 50px;
|
||||
/*same as "padding: 10px 50px 10px 50px;"*/
|
||||
/* Можно заменить просто на "padding: 10px 50px 10px 50px;" */
|
||||
|
||||
font-size: 14px;
|
||||
font-family: "Times New Roman", serif;
|
||||
|
@ -41,7 +41,7 @@ JavaScript — слаботипизированный мультипарадиг
|
||||
|
||||
Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных.
|
||||
Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером.
|
||||
Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом.
|
||||
Из-за особенностей связи и реализации backend (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом.
|
||||
Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно).
|
||||
Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript.
|
||||
|
||||
|
@ -75,8 +75,6 @@ _P.S. Современные приложения на технологиях Mi
|
||||
|
||||
Предлагаю установить среду разработки на PHP **XAMPP**: <https://www.apachefriends.org/ru/index.html>.
|
||||
|
||||
> Внимание! На текущий момент (март 2023) лучше устанавливать XAMPP 8 с PHP 8 внутри.
|
||||
|
||||
При установке не забудьте снять ненужные флажки:
|
||||
|
||||
![](xampp-1.png)
|
||||
|
208
lw05/README.md
@ -3,16 +3,18 @@
|
||||
## Цель работы
|
||||
|
||||
Получить навыки в создании кросс-платформенного веб-приложения в среде ASP.NET Core при помощи открытых кросс-платформенных инструментов.
|
||||
Освоить принцип проектирования API REST.
|
||||
|
||||
## Ход работы
|
||||
|
||||
1. Установка Visual Studio Code.
|
||||
2. Установка .NET (Core) SDK.
|
||||
3. Создание простейшего веб-приложения.
|
||||
4. Настройка Visual Studio Code для отладки приложения.
|
||||
5. Изучение основных концепций ASP.NET Core.
|
||||
6. Изменение pipeline.
|
||||
7. Оформление кода и отчёта.
|
||||
3. Настройка Visual Studio Code для работы с C# (.NET).
|
||||
4. Создание ASP-NET-приложения через VS Code.
|
||||
5. Запуск и отладка C#-приложения в VS Code.
|
||||
6. Изучение основных концепций ASP.NET Core.
|
||||
7. Изменение pipeline
|
||||
8. Подключение Swagger Gen+UI для демонстрации
|
||||
|
||||
## Прочтите внимательно перед выполнением работы
|
||||
|
||||
@ -39,10 +41,10 @@ Visual Studio Code (VS Code) -- кросс-платформенный инстр
|
||||
dotnet --list-sdks
|
||||
```
|
||||
|
||||
Если вывод будет содержать строку наподобие `7.0.202 [C:\Program Files\dotnet\sdk]` и номер версии будет из актуальных (на апрель 2023 это 6.0, 7.0), то всё хорошо.
|
||||
Если вывод будет содержать строку наподобие `8.0.202 [C:\Program Files\dotnet\sdk]` и номер версии будет из актуальных, то всё хорошо.
|
||||
В противном случае необходимо произвести установку.
|
||||
|
||||
Для этого необходимо установить .NET SDK (5.0 или 6.0) с официального сайта: <https://dotnet.microsoft.com/download>.
|
||||
Для этого необходимо установить .NET SDK с официального сайта: <https://dotnet.microsoft.com/download>.
|
||||
|
||||
> ASP.NET Core - это платформа для создания веб-приложений, использующих .NET.
|
||||
> C# - язык программирования, позволяющий работать с .NET.
|
||||
@ -50,75 +52,60 @@ dotnet --list-sdks
|
||||
После установки SDK под свою систему и возможной перезагрузки компьютера выполните повторно команду из начала раздела.
|
||||
Теперь она должна выводить данные корректно.
|
||||
|
||||
## Создание простейшего веб-приложения
|
||||
## Настройка Visual Studio Code для работы с C# (.NET)
|
||||
|
||||
Создавать простейшее веб-приложение на ASP.NET Core будем из консоли (командной строки).
|
||||
Во-первых, это даёт вам возможность поработать с командной строкой.
|
||||
Во-вторых, этот метод взаимодействия с утилитами / платформами / серверами является распространённым в профессиональной разработке и администрировании.
|
||||
В-третьих, где ещё, если не в нашем курсе? :)
|
||||
Для того, чтобы удобно работать в VS Code с C#, необходимо установить расширение [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit).
|
||||
|
||||
После установки расширение будет отображаться что-то наподобие следующего:
|
||||
|
||||
![](vsc-extension-installed.png)
|
||||
|
||||
## Создание ASP-NET-приложения через VS Code
|
||||
|
||||
Создайте пустую папку где-нибудь на Вашем компьютере.
|
||||
Постарайтесь не использовать в пути до этой папки пробелы и отличные от английских букв и цифр символы.
|
||||
|
||||
Перейдите в папку при помощи команды `cd`.
|
||||
Например, `cd d:\labworks\ip`.
|
||||
Иногда в windows требуется первой командой указать букву диска, например, `d:`, а потом уже делать _change directory (cd)_.
|
||||
Откройте эту папку в Visual Studio Code.
|
||||
Для этого выберите пункт меню "Открыть папку" (Open Folder) со стартовой страницы или меню "Файл" (File).
|
||||
|
||||
После этого введите следующую команду:
|
||||
Далее для создания нового C#-приложения нажмите F1.
|
||||
Должна открыться строка команд по середине VC Code сверху.
|
||||
В появившейся строке введите `.net new`, а затем выберите пункт ".NET: New project..." и нажмите Enter.
|
||||
|
||||
```
|
||||
dotnet new web -n hw-app
|
||||
```
|
||||
![](net-new-project.png)
|
||||
|
||||
Что здесь происходит:
|
||||
После этого выберите тип проекта как "ASP.NET Core Empty".
|
||||
|
||||
* _dotnet_ - общая команда для работы с платформой .NET (dot - это "точка" по-английски);
|
||||
* _new_ - команда по созданию чего-то нового;
|
||||
* _web_ - шаблон для создания простейшего веб-приложения. Есть и другие шаблоны, их можете поискать самостоятельно или с помощью команды `dotnet new`;
|
||||
* _-n_ - начало аргумента _name_, то есть задание имени будущего веб-приложения;
|
||||
* _hw-app_ - название будущего приложения. Можете использовать своё название.
|
||||
![](net-project-type.png)
|
||||
|
||||
В результате выполненных шагов в вашей папке создастся ещё одна папка, в которой будет примерно следующий набор файлов:
|
||||
Далее введите название проекта.
|
||||
Например, `IntProgLw5`.
|
||||
|
||||
![](project-tree.png)
|
||||
На заключительном шаге выберите каталог по умолчанию.
|
||||
|
||||
Если у Вас также, то значит всё хорошо.
|
||||
В итоге на экране просмотра файлов в последнем блоке "Solution Explorer" должно быть видно название проекта.
|
||||
|
||||
## Настройка Visual Studio Code для отладки приложения
|
||||
![](solution-explorer.png)
|
||||
|
||||
Теперь пришло время соединить предыдущие пункты.
|
||||
Всё готово к первому запуску и отладке приложения!
|
||||
|
||||
Для этого перейдите в консоли в папку с приложением.
|
||||
В примере выше это будет _d:\labworks\ip\hw-app_.
|
||||
После этого наберите команду `code .`.
|
||||
Это должно запустить Visual Studio Code с открытой папкой с проектом, т.е. в дереве файлов должны быть те же файлы, что и на снимке экрана выше.
|
||||
Если этого не произошло, Вы можете самостоятельно открыть папку через меню _File_ -> _Open Folder_.
|
||||
## Запуск и отладка C#-приложения в VS Code
|
||||
|
||||
Если Вы зайдёте в файл _.csproj_, VS Code снизу справа предложит установить необходимые расширения для работы с такими файлами.
|
||||
Установите расширение _C#_.
|
||||
|
||||
![](vsc-extension-show.png)
|
||||
|
||||
![](vsc-extension-install.png)
|
||||
|
||||
Возможно придётся перезагрузить VS Code.
|
||||
|
||||
После этого возникнет подсказка о добавлении необходимых задач для найденного проекта на языке C#.
|
||||
Можете смело их добавить.
|
||||
|
||||
![](vsc-add-assets.png)
|
||||
|
||||
В итоге должна создаться папка _.vscode_ с двумя файлами.
|
||||
|
||||
Теперь, пока не вдаваясь в подробности кучи сгенерированного кода, зайдите в _Startup.cs_ и поставьте точку останова после `endpoints.MapGet("/",...`.
|
||||
Пока не вдаваясь в подробности некоторого сгенерированного кода, зайдите в _Program.cs_, перенесите часть строки с `=> "Hello world");` на новую и поставьте точку останова в это место.
|
||||
|
||||
![](breakpoint-set.png)
|
||||
|
||||
При нажатии на F5 у Вас должен запуститься веб-сервер: в _Debug Console_ снизу будет выведено много информации.
|
||||
Скорее всего у Вас одновременно с этим запустится веб-браузер с Вашим пока ещё пустым сайтом.
|
||||
Если этого не произошло, можете поискать ссылку вида <http://localhost:5000> в выводе консоли отладки самостоятельно.
|
||||
Для запуска приложения и включения режима отладки необходимо нажать `F5`.
|
||||
|
||||
> _localhost_ - это домен локального ПК.
|
||||
VS Code может спросить, какой язык и какой проект необходимо отлаживать.
|
||||
Выберите C# и стандартную конфигурацию вашего приложения.
|
||||
|
||||
![](vsc-debug-run-1.png)
|
||||
![](vsc-debug-run-2.png)
|
||||
|
||||
В итоге должен открыться веб-браузер по ссылке <http://localhost:5062/> или похожей.
|
||||
|
||||
> _localhost_ - это домен (адрес) локального ПК.
|
||||
> Никто другой Ваш сайт по такому адресу не увидит.
|
||||
|
||||
Заметьте, что выполнение программы остановилось в точке останова:
|
||||
@ -132,53 +119,61 @@ dotnet new web -n hw-app
|
||||
Перед ознакомлением с основами ASP.NET Core, необходимо ознакомиться с основами построения веб-серверов.
|
||||
Как минимум надо вспомнить или узнать, что такое: протокол HTTP, запрос, ответ, тип запроса (GET, POST, PUT, ...) код ответа (200 OK, 404 NOT FOUND, 500, ...), составные части URL (схема, домен, путь, query-string, hash).
|
||||
|
||||
После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: <https://docs.microsoft.com/ru-ru/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-7.0#recommended-learning-path>.
|
||||
После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: <https://learn.microsoft.com/ru-ru/aspnet/core/introduction-to-aspnet-core#recommended-learning-path>.
|
||||
|
||||
Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст.
|
||||
|
||||
ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса.
|
||||
После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру).
|
||||
|
||||
Визуально это можно изобразить так:
|
||||
|
||||
```
|
||||
<запрос> <ответ>
|
||||
↑↑ ↓↓
|
||||
------------------------
|
||||
| обработчик 1 |
|
||||
------------------------
|
||||
↑↑ ↓↓
|
||||
------------------------
|
||||
| обработчик 2 |
|
||||
------------------------
|
||||
↑↑ ↓↓
|
||||
------------------------
|
||||
| обработчик 3 |
|
||||
------------------------
|
||||
```
|
||||
|
||||
Примеры обработчиков:
|
||||
|
||||
* проверка, что запрос клиентом составлен правильно;
|
||||
* проверка доступа клиента к запрашиваемому ресурсу;
|
||||
* если по пути из запроса найден файл на веб-сервере, то можно его вернуть;
|
||||
* а если файл не найден, может какая-то подпрограмма может забрать обработку на себя?
|
||||
* "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо";
|
||||
* отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим;
|
||||
* обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования).
|
||||
- проверка, что запрос клиентом составлен правильно;
|
||||
- проверка доступа клиента к запрашиваемому ресурсу;
|
||||
- если по пути из запроса найден файл на веб-сервере, то можно его вернуть;
|
||||
- а если файл не найден, может какая-то подпрограмма может забрать обработку на себя?
|
||||
- "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо";
|
||||
- отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим;
|
||||
- обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования).
|
||||
|
||||
Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить.
|
||||
В ASP.NET Core для этого существует класс _Startup.cs_ и метод _Configure_.
|
||||
Как раз в нём настраивается порядок следования обработчиков.
|
||||
В ASP.NET Core для этого существуют класс _WebApplicationBuilder_ и _WebApplication_, использование которых и можно видеть в файле _Program.cs_ нашего проекта.
|
||||
|
||||
В простейшем приложении порядок обработчиков такой:
|
||||
В нашем простейшем приложении порядок обработчиков примерно такой:
|
||||
|
||||
* если окружение, в котором запускается сайт, для разработки, то надо включить обработчик по отрисовке красивых страниц с подробностями ошибок;
|
||||
* необходимо включить обработчик, который сможет следить за тем, какие конкретно ресурсы запрашиваются;
|
||||
* включатся обработчик по сопоставлению путей из запросов другим обработчикам;
|
||||
* добавляется обработчик для _GET_-запросов по пути _/_: в ответ клиенту всегда пишется строка _"Hello World!"_.
|
||||
|
||||
Можете самостоятельно поискать по коду, как описанные выше строки отображаются в исходный код на _C#_.
|
||||
1. _(неявно)_ Если запрос составлен с ошибками, выводить код `400 BAD REQUEST`.
|
||||
2. _(неявно)_ Если приложение выбросило исключение, вывод специальную страницу и код `500 INTERNAL SERVER ERROR`.
|
||||
3. Если поступил GET-запрос на главную страницу (`/`), то выводится строка `Hello World!`.
|
||||
|
||||
Как видите, пока ничего сложного.
|
||||
|
||||
Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером.
|
||||
Например, тем самым, что запускает ваше веб-приложение по адресу <http://localhost:5000>.
|
||||
Например, тем самым, что запускает ваше веб-приложение по адресу <http://localhost:хххх>.
|
||||
|
||||
Это делается в файле _Program.cs_ (знакомый файл?) в методе _Main_ (знакомый метод?).
|
||||
Здесь у нас настраивается хост: то есть та часть приложения, которая может предоставить доступ к вашему веб-приложения из внешнего мира.
|
||||
Другими словами, здесь и настраивается веб-сервер.
|
||||
ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о котором Вы даже можете не знать.
|
||||
В этом, и в простоте настройки, и заключается его лёгкость.
|
||||
А это делается в строке `app.Run();`.
|
||||
|
||||
Таким образом, мы выяснили, что наше приложение - это набор обработчиков.
|
||||
Они настраиваются в _Startup.cs_ в специальном методе.
|
||||
Веб-сервер для доступа к нашему веб-приложению настраивается в _Program.cs_.
|
||||
> В рамках этого руководства не будем вдаваться в подробности того, что спрятано под этой строкой, а также под командой `WebApplication.CreateBuilder(args)` из начала файла.
|
||||
|
||||
Что находится в других файлах, можете изучить самостоятельно.
|
||||
Дам только наводку, что launchSettings необходимы для запуска веб-сервера, а appsettings - для настройки веб-приложения.
|
||||
Что находится в файлах помимо _Program.cs_, можете изучить самостоятельно.
|
||||
Дам только наводку, что launchSettings необходим для запуска веб-сервера, а appsettings - для настройки веб-приложения.
|
||||
|
||||
## Изменение pipeline
|
||||
|
||||
@ -189,9 +184,48 @@ ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о
|
||||
Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать.
|
||||
Например:
|
||||
|
||||
* При запросе _/time_ (через браузер необходимо будет перейти по адресу <http://localhost:5000/time>) должно выводиться текущее время.
|
||||
* При запросе _/whoami_ должна выводиться информация о текущем браузере.
|
||||
* При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт в query-строке в параметре _status_. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как <http://localhost:5000/error?status=403> и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра.
|
||||
- При GET-запросе _/time_ (через браузер необходимо будет перейти по адресу <http://localhost:5000/time>) должно выводиться текущее время строкой в формате "ДД.ММ.ГГГГ ЧЧ:ММ.СС", например, "12.04.1961 09:07:00".
|
||||
- При запросе _/whoami_ должна выводиться информация о текущем браузере.
|
||||
- При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт из параметра обработчика `[FromQuery] int status`. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как <http://localhost:5000/error?status=403> и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра.
|
||||
|
||||
Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик.
|
||||
Там есть свойство `.Request`, которое должно Вам помочь.
|
||||
|
||||
## Подключение Swagger Gen+UI для демонстрации
|
||||
|
||||
Как проверить, что новые обработчики работают корректно?
|
||||
|
||||
Для этого необходимо установить дополнительную зависимость в приложение и добавить обработчик для отображения нового интерфейса.
|
||||
|
||||
Для этого в "Solution Explorer" нажмите правой кнопкой мыши на название проекта (на втором уровне вложенности!) и выберите пункт "Open In Integrated Terminal".
|
||||
|
||||
В появившейся командой строке введите команду `dotnet add package Swashbuckle.AspNetCore`.
|
||||
|
||||
![](swagger-installed.png)
|
||||
|
||||
Далее в _Program.cs_ до построения приложения `builder.Build()` добавьте следующие строки:
|
||||
|
||||
```csharp
|
||||
builder.Services.AddEndpointsApiExplorer();
|
||||
builder.Services.AddSwaggerGen();
|
||||
```
|
||||
|
||||
> Этот код добавляет вспомогательные службы для обработчика-генератора контракта нашего API.
|
||||
|
||||
Также до `app.Run()` добавьте следующие строки:
|
||||
|
||||
```csharp
|
||||
app.UseSwagger();
|
||||
app.UseSwaggerUI();
|
||||
```
|
||||
|
||||
> Этот код добавляет обработчики для возврата контакта API и интерфейс для просмотра этого контракта.
|
||||
|
||||
Чтобы проверить наши обработчики, необходимо при отладке приложения в адресной строке добавить `/swagger` к адресу сайта.
|
||||
Должна открыться похожая страница:
|
||||
|
||||
![](swagger-test.png)
|
||||
|
||||
Пример демонстрации работы query-параметра _status_ в запросе кода ошибки:
|
||||
|
||||
![](swagger-error.png)
|
||||
|
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 16 KiB |
BIN
lw05/net-new-project.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
lw05/net-project-type.png
Normal file
After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 10 KiB |
BIN
lw05/solution-explorer.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
lw05/swagger-error.png
Normal file
After Width: | Height: | Size: 47 KiB |
BIN
lw05/swagger-installed.png
Normal file
After Width: | Height: | Size: 92 KiB |
BIN
lw05/swagger-test.png
Normal file
After Width: | Height: | Size: 55 KiB |
Before Width: | Height: | Size: 14 KiB |
BIN
lw05/vsc-debug-run-1.png
Normal file
After Width: | Height: | Size: 9.7 KiB |
BIN
lw05/vsc-debug-run-2.png
Normal file
After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 34 KiB |
BIN
lw05/vsc-extension-installed.png
Normal file
After Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 14 KiB |