123 lines
8.5 KiB
Markdown
123 lines
8.5 KiB
Markdown
# ТехноМаркет — лабораторная работа № 1
|
||
|
||
Проект **ASP.NET Core MVC**: запускаемый сайт с единым макетом и четырьмя
|
||
страницами. Выполнен в рамках дисциплины «Разработка web-приложений».
|
||
|
||
## Автор
|
||
|
||
| Поле | Значение |
|
||
|------|----------|
|
||
| ФИО | Рыбалов Кирилл Андреевич |
|
||
| Группа | РПО 23/1 |
|
||
| Год | 2026 |
|
||
| Вариант | не задан, тема выбрана самостоятельно — интернет-магазин электроники |
|
||
|
||
## Как запустить
|
||
|
||
1. Установить .NET SDK (в работе использовался SDK 10.0, проект собран под .NET 10).
|
||
2. Открыть файл решения `TechMarket.slnx` или папку проекта `TechMarket`.
|
||
3. Запустить проект командой:
|
||
|
||
```
|
||
dotnet run --project TechMarket
|
||
```
|
||
|
||
4. Открыть в браузере адрес **http://localhost:5213** (настройка из `launchSettings.json`).
|
||
|
||
## Страницы сайта
|
||
|
||
| Страница | Адрес | Что на ней |
|
||
|----------|-------|------------|
|
||
| Главная | `/` | описание магазина, 3 преимущества, кнопка «Перейти в каталог» |
|
||
| Каталог | `/catalog` | 4 статичные карточки-заглушки товаров (позже — из БД) |
|
||
| О системе | `/about` | для кого сервис и какие роли появятся |
|
||
| Контакты | `/contacts` | адрес, телефон и форма обратной связи (с сообщением «принято» через TempData) |
|
||
| Ошибка | `/error` | страница 404 с понятным текстом и ссылкой на главную |
|
||
|
||
## Что реализовано в коде
|
||
|
||
- маршрутизация по соглашению `/{controller}/{action}/{id?}` + атрибутные маршруты
|
||
у страниц каталога, о системе и контактов;
|
||
- макет `_Layout.cshtml` со шапкой, меню «Главная · Каталог · О системе · Контакты»
|
||
и подвалом с группой, ФИО и годом;
|
||
- `_ViewStart.cshtml` задаёт общий макет, `_ViewImports.cshtml` включает Tag Helpers;
|
||
- форма контактов построена на Tag Helpers (`asp-controller`, `asp-action`, `asp-for`)
|
||
с проверкой полей на стороне сервера и в браузере;
|
||
- Bootstrap 5 подключён локально (файлы лежат в `wwwroot/lib`);
|
||
- своя CSS-тема: акцентный цвет, стили карточек, состояния наведения;
|
||
- светлая / тёмная тема через CSS-переменные с сохранением выбора в `localStorage`;
|
||
- фавикон и Open Graph-теги, кастомная страница 404.
|
||
|
||
## Структура проекта
|
||
|
||
```
|
||
TechMarket/
|
||
├── Controllers/HomeController.cs — контроллер страниц и обработки формы
|
||
├── Models/ — модели: ошибка и форма контактов
|
||
├── Views/
|
||
│ ├── Home/ — страницы: Главная, Каталог, О системе, Контакты, 404
|
||
│ └── Shared/ — макет и общие представления
|
||
├── wwwroot/
|
||
│ ├── css/site.css — своя тема оформления
|
||
│ ├── js/site.js — переключатель светлой / тёмной темы
|
||
│ └── lib/ — локальные библиотеки Bootstrap 5 и jQuery
|
||
├── Program.cs — точка входа: сервисы и конвейер запросов
|
||
└── appsettings.json — настройки приложения
|
||
```
|
||
|
||
---
|
||
|
||
## Контрольные вопросы
|
||
|
||
### 1. Чем ASP.NET Core отличается от классического ASP.NET Framework?
|
||
|
||
ASP.NET Core — полностью переписанный, модульный кросс-платформенный фреймворк, в то время как классический ASP.NET Framework работает только на Windows и зависит от IIS.
|
||
|
||
- **Кросс-платформенность:** ASP.NET Core запускается на Windows, Linux и macOS через встроенный Kestrel-сервер, не зависящий от IIS.
|
||
- **Модульность:** каждая функция подключается как отдельный NuGet-пакет (Middleware), а не встроена в ядро.
|
||
- **Производительность:** Kestrel оптимизирован под асинхронные сценарии и обрабатывает запросы значительно быстрее.
|
||
- **Среда выполнения:** поддержка self-contained и framework-dependent деплоя, Docker-контейнеры, systemd-юниты.
|
||
- **Конфигурация:** вместо web.config используется appsettings.json + environment variables.
|
||
|
||
### 2. Что такое middleware и в каком порядке они выполняются при обработке запроса?
|
||
|
||
Middleware — компоненты, образующие конвейер (pipeline), через который проходит каждый HTTP-запрос. Каждый middleware может обработать запрос, передать его дальше или вернуть ответ, не передавая дальше.
|
||
|
||
Типичный pipeline:
|
||
|
||
1. **ExceptionHandler** — перехват необработанных исключений
|
||
2. **HSTS** — принудительное HTTPS
|
||
3. **HttpsRedirection** — перенаправление HTTP на HTTPS
|
||
4. **UseStaticFiles** — раздача статических файлов из `wwwroot`
|
||
5. **Routing** — сопоставление URL с маршрутами
|
||
6. **UseEndpoints** — вызов контроллера/действия
|
||
|
||
В TechMarket используется `UseStatusCodePagesWithReExecute("/Home/Error")` для перехвата кодов 404/500 и отображения пользовательской страницы ошибки.
|
||
|
||
### 3. Зачем нужны `_ViewStart.cshtml` и `_ViewImports.cshtml`?
|
||
|
||
**`_ViewStart.cshtml`** выполняется перед каждым представлением и задаёт `Layout = "_Layout"` — общий макет для всех страниц.
|
||
|
||
**`_ViewImports.cshtml`** подключает общие `using`-директивы и Tag Helpers:
|
||
- `@using TechMarket` — доступ к моделям.
|
||
- `@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers` — включение Tag Helpers.
|
||
|
||
### 4. Откуда берутся CSS/JS/изображения и как они подключаются через Razor?
|
||
|
||
Файлы хранятся в `wwwroot/` и подключаются через Razor:
|
||
```html
|
||
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
|
||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||
```
|
||
Тег `~` разрешается в корень `wwwroot`, `asp-append-version` добавляет хеш для инвалидации кеша браузера.
|
||
|
||
### 5. Что такое Tag Helper и почему он удобнее обычного HTML?
|
||
|
||
Tag Helper — серверная замена HTML-тегов с атрибутами, начинающимися с `asp-`:
|
||
|
||
- **Автоматическая генерация URL:** `<a asp-controller="Home" asp-action="Index">` вместо ручного прописывания пути.
|
||
- **Валидация:** `<input asp-for="Name" />` автоматически генерирует атрибуты для клиентской валидации.
|
||
- **Безопасность:** экранирование значений, защита от XSS.
|
||
- **Кеш:** `asp-append-version="true"` для инвалидации кеша без написания хелпера.
|
||
- **Читаемость:** разметка выглядит как чистый HTML с серверными атрибутами. |