Создайте приложение базы данных фильмов Blazor(часть 1. Создайте Blazor Web App)

Эта статья — первая часть Blazor руководства по созданию приложения для базы данных фильмов, в котором объясняются основы создания ASP.NET Core Blazor Web App с возможностями управления базой данных фильмов.

В этой части серии руководств рассказывается, как создать Blazor Web App, использующий статическую серверную отрисовку (static SSR). Статический SSR означает, что содержимое отрисовывается на сервере и отправляется клиенту для отображения в ответ на каждый запрос.

Предварительные требования

Visual Studio (последняя версия) с рабочей нагрузкой ASP.NET и веб-разработки

Последние версии:

• Visual Studio Code
• Комплект средств разработки на C#
• Пакет SDK для .NET

Инструкции visual Studio Code (VS Code) для разработки ASP.NET Core в этом руководстве используют .NET CLI, который является частью пакета SDK для .NET. Команды .NET CLI выполняются во встроенном терминале VS Code, в котором по умолчанию используется командная оболочка PowerShell. Терминал открывается путем выбора нового терминала в меню терминала в строке меню меню.

Пакет SDK для .NET (последний выпуск)

Интерфейс командной строки .NET является частью пакета SDK для .NET. Чтобы выдать команды, влияющие на проект, откройте командную оболочку в корневой папке проекта.

Создание класса Blazor Web App

В Visual Studio:

• Выберите Создать новый проект в начальном окне или выберите Файл>Создать>Проект в строке меню.

• В диалоговом окне "Создание проекта" выберите Blazor Web App из списка шаблонов проектов. Нажмите кнопку Далее.

• В диалоговом окне Настройка нового проекта введите для проекта имя BlazorWebAppMovies в поле Имя проекта, с учетом регистра. Важно использовать именно это имя проекта, чтобы пространства имён совпадали в коде, который вы копируете из руководства в создаваемое приложение.

• Убедитесь, что расположение приложения подходит. Установите флажок Разместить решение и проект в одном каталоге в соответствии с предпочтительным расположением файла решения. Нажмите кнопку Далее.

• В диалоговом окне "Дополнительные сведения" используйте следующие параметры:

  • Платформа. Убедитесь, что выбрана последняя платформа . Если раскрывающийся список Visual Studio Framework не включает последнюю доступную платформу .NET ,обновите Visual Studio и перезапустите учебник.
  • Тип проверки подлинности: Нет
  • Настройка для HTTPS: выбрано
  • Режим интерактивной отрисовки: сервер
  • Расположение интерактивных элементов: Для каждой страницы/компонента
  • Включение примеров страниц: выбрано
  • Не используйте операторы верхнего уровня: не выбрано
  • Используйте TLD dev.localhost в URL-адресе приложения: не выбрано
  • Нажмите кнопку создания.

В некоторых разделах этой серии руководств в инструкциях для Visual Studio используются команды EF Core для добавления миграций и обновления базы данных. EF Core команды выдаются с помощью подключенных служб Visual Studio. Дополнительные сведения приведены далее в этом руководстве.

В этом руководстве предполагается, что у вас есть знакомство с VS Code. Если вы не знакомы с VS Code, ознакомьтесь с документацией по VS Code. Видео, перечисленные на странице "Вводные видео", предназначены для предоставления вам обзора функций VS Code.

Убедитесь, что установлен последний пакет средств разработки C# и пакет SDK для .NET.

В VS Code:

Создайте новый проект:

• Перейдите в представление обозревателя и нажмите кнопку "Создать проект .NET". Кроме того, можно открыть палитру команд с помощью Ctrl+Shift+P, а затем ввести ".NET", чтобы найти и выбрать команду .NET: New Project.

• Blazor Web App Выберите шаблон проекта из списка.

• В диалоговом окне "Расположение проекта" создайте или выберите папку для проекта.

• В палитре команд присвойтите проекту BlazorWebAppMoviesимя, включая сопоставление заглавной буквы. Важно использовать именно это имя проекта, чтобы пространства имён совпадали в коде, который вы копируете из руководства в создаваемое приложение.

• Нажмите кнопку "Создать проект ", чтобы создать приложение.

Убедитесь, что установлен последний пакет SDK для .NET.

В оболочке командной строки:

• cd Используйте команду, чтобы изменить каталог на место создания папки проекта (например, cd c:/users/Bernie_Kopell/Documents).

• Используйте команду dotnet new с шаблоном проекта blazor, чтобы создать новый проект Blazor Web App. Параметр -o|--output option, переданный команде, создает проект в новой папке в текущем каталоге оболочки. Присвойте проекту BlazorWebAppMoviesимя, включая сопоставление прописной буквы, поэтому пространства имен соответствуют коду, скопированного из учебника в приложение.

  dotnet new blazor -o BlazorWebAppMovies
  

Выполнить приложение

Нажмите клавишу F5 на клавиатуре, чтобы запустить приложение.

Visual Studio отображает следующее диалоговое окно, если проект не настроен на использование SSL:

Выберите Да, если вы доверяете сертификату SSL для ASP.NET Core.

Отобразится следующее диалоговое окно.

Выберите "Да", чтобы подтвердить риск и установить сертификат.

Visual Studio:

• Компилирует и запускает приложение.
• Запускает браузер https://localhost:{PORT}по умолчанию, в котором отображается пользовательский интерфейс приложения. Заполнитель {PORT} — это случайный порт, назначенный приложению при создании приложения. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проекта Properties/launchSettings.json .

Перейдите на страницы приложения, чтобы убедиться, что приложение работает нормально.

В VS Code нажмите клавишу F5 , чтобы запустить приложение.

В строке выбора отладчика в палитре команд в верхней части пользовательского интерфейса VS Code выберите C#. В следующем запросе выберите конфигурацию запуска по умолчанию (C#: BlazorWebAppMovies [Default Configuration]).

Браузер по умолчанию запускается по адресу http://localhost:{PORT}, где отображается интерфейс приложения. Заполнитель {PORT} — это случайный порт, назначенный приложению при создании приложения. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проекта Properties/launchSettings.json .

Перейдите на страницы приложения, чтобы убедиться, что приложение работает нормально.

В командной оболочке, открывшейся в корневой папке проекта, выполните dotnet watch команду, чтобы скомпилировать и запустить приложение:

dotnet watch

Приложение компилируется и запускается. Приложение запускается по адресу http://localhost:{PORT}, где {PORT} — это случайный порт, назначаемый приложению при его создании. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проекта Properties/launchSettings.json .

Перейдите на страницы приложения, чтобы убедиться, что приложение работает нормально.

Примечание.

При запуске приложения с помощью .NET CLI по умолчанию используется первый профиль запуска в launchSettings.json, у которого commandName имеет значение Project. Чтобы использовать другой профиль (например, https), передайте параметр -lp|--launch-profile в dotnet watch или dotnet run, либо переместите предпочтительный профиль в начало файла.

Остановка приложения

Остановите приложение с помощью одного из следующих подходов:

• Закройте окно браузера.
• В среде Visual Studio выполните одно из следующих действий:

  • Нажмите кнопку "Остановить" в строке меню Visual Studio:

    

  • Нажмите клавиши SHIFT+F5 на клавиатуре.

Остановите приложение с помощью следующего подхода:

1. Закройте окно браузера.
2. В приложении VS Code либо:
   • В меню "Запуск" выберите "Остановить отладку".
   • Нажмите клавиши SHIFT+F5 на клавиатуре.

Остановите приложение с помощью следующего подхода:

1. Закройте окно браузера.
2. В командной оболочке нажмите клавиши CTRL +C.

Анализ файлов проекта

В следующих разделах содержится обзор папок и файлов проекта.

Если вы создаете приложение, вам не нужно вносить изменения в файлы проекта в следующих разделах. Когда вы читаете описания папок и файлов, изучите их в проекте.

Если вы читаете только статьи и не создаете приложение, вы можете обратиться к завершенным примером приложения в Blazor репозитории примеров GitHub (dotnet/blazor-samples). Выберите последнюю папку версии в репозитории. Пример папки для проекта этого руководства называется BlazorWebAppMovies. Пример приложения — это завершенная версия приложения после выполнения всех шагов серии учебников. Код в примере не всегда соответствует шагам руководства до окончания серии.

Properties папка

Папка Properties содержит конфигурацию среды разработки launchSettings.json в файле.

wwwroot папка

Папка wwwroot содержит статические ресурсы, такие как изображения, JavaScript (.js) и файлы таблицы стилей (.css).

Components, Components/Pages и Components/Layout папки

Эти папки содержат Razor компоненты, часто называемые "компонентами" и вспомогательными файлами. Компонент является автономной частью пользовательского интерфейса с необязательной логикой обработки. Компоненты можно вкладывать друг в друга, повторно использовать и использовать в разных проектах.

Компоненты реализуются в файлах компонентов Razor с расширением имени файла .razor с помощью комбинации разметки HTML и C#.

Как правило, компоненты, вложенные в другие компоненты и не доступные напрямую ("routable") по URL-адресу, помещаются в папку Components . Компоненты, которые являются маршрутизируемыми по URL-адресу, обычно помещаются в папку Components/Pages .

Папка Components/Layout содержит следующие компоненты макета и таблицы стилей:

• MainLayout компонент (MainLayout.razor): основной компонент макета приложения.
• MainLayout.razor.css: таблица стилей для основного макета приложения.
• NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Этот компонент использует несколько NavLink компонентов для отображения ссылок навигации на другие Razor компоненты.
• NavMenu.razor.css: таблица стилей для меню навигации приложения.
• ReconnectModal компонент (ReconnectModal.razor): отражает состояние подключения на стороне сервера в пользовательском интерфейсе.
• ReconnectModal.razor.css: таблица стилей ReconnectModal для компонента.
• ReconnectModal.razor.js: файл JavaScript для ReconnectModal компонента.

Components/_Imports.razor файл

Файл импорта (_Imports.razor) включает общие Razor директивы для включения в компоненты приложения Razor . Razor директивы — это зарезервированные ключевые слова с префиксом @, которые используются в разметке Razor и изменяют способ компиляции или работы разметки компонента либо его элементов.

Components/App.razor файл

Компонент App (App.razor) является корневым компонентом приложения, который включает в себя:

• Разметка HTML.
• Компонент Routes.
• Скрипт Blazor (<script> тег для blazor.web.js).

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

Components/Routes.razor файл

Компонент Routes (Routes.razor) настраивает маршрутизацию для приложения.

appsettings.json файл

Файл appsettings.json содержит данные конфигурации, такие как строка подключения.

Предупреждение

Не сохраняйте секреты приложений, строка подключения, учетные данные, пароли, персональные идентификационные номера (ПИН-коды), частный код C#/.NET или закрытые ключи и токены в клиентском коде, который всегда небезопасн. В тестовой/предпродакшн- и производственной средах серверный код Blazor и веб-API должны использовать безопасные механизмы аутентификации, не требующие хранения учетных данных в коде проекта или файлах конфигурации. Вне локального тестирования разработки рекомендуется избегать использования переменных среды для хранения конфиденциальных данных, так как переменные среды не являются наиболее безопасным подходом. Для локального тестирования разработки средство Secret Manager рекомендуется для защиты конфиденциальных данных. Дополнительные сведения см. в разделе "Безопасное обслуживание конфиденциальных данных и учетных данных".

Program.cs файл

Файл Program.cs содержит код для создания приложения и настройки конвейера обработки запросов приложения.

Порядок строк в шаблоне Blazor Web App проекта изменяется в выпусках .NET, поэтому порядок строк в файле может не совпадать с порядком строк, описанных в Program.cs этом разделе.

WebApplicationBuilder создает приложение с предварительно заданными параметрами по умолчанию:

var builder = WebApplication.CreateBuilder(args);

Razor Службы компонентов добавляются в приложение путем вызова AddRazorComponents, что позволяет компонентам Razor отрисовываться и выполнять код на сервере, а AddInteractiveServerComponents также добавляет службы для поддержки отрисовки интерактивных серверных компонентов:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

WebApplication (хранящийся в переменной app в следующем коде) создается:

var app = builder.Build();

Затем настраивается конвейер HTTP-запроса.

Если приложение не запущено в Development среде:

• ПО промежуточного слоя обработчика исключений (UseExceptionHandler) обрабатывает ошибки и отображает пользовательскую страницу ошибок.
• ПО промежуточного слоя протокола HTTP Strict Transport Security (HSTS) обрабатывает UseHsts.

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

По умолчанию приложение ASP.NET Core не предоставляет страницу для кодов состояния ошибок HTTP, таких как код 404 Not Found (не найдено). Когда приложение задает код состояния ошибки HTTP 400-599 без текста, он возвращает код состояния и пустой текст ответа. Однако приложение, созданное из шаблона проекта Blazor Web App, вызывает UseStatusCodePagesWithReExecute, чтобы добавить ПО промежуточной обработки страниц с кодами состояния в конвейер обработки запросов для ненайденных страниц, которое формирует тело ответа путем повторного выполнения конвейера обработки запросов с использованием пути к странице ошибки «Не найдено» (/not-found):

app.UseStatusCodePagesWithReExecute("/not-found", 
    createScopeForStatusCodePages: true);

ПО промежуточного слоя перенаправления HTTPS (UseHttpsRedirection) принудительно применяет протокол HTTPS, перенаправляя HTTP-запросы на HTTPS, если порт HTTPS доступен:

app.UseHttpsRedirection();

Промежуточное ПО (UseAntiforgery) обеспечивает защиту antiforgery при обработке форм:

app.UseAntiforgery();

Метод Map Static Assets, использующий соглашения о маршрутизации эндпоинтов (MapStaticAssets), сопоставляет статические файлы, такие как изображения, скрипты и таблицы стилей, создаваемые во время сборки, как эндпоинты:

app.MapStaticAssets();

MapRazorComponents сопоставляет компоненты, определенные в корневом App компоненте, с заданной сборкой .NET и отрисовывает маршрутизируемые компоненты и AddInteractiveServerRenderMode настраивает поддержку интерактивной отрисовки на стороне сервера (интерактивная служба SSR) для приложения:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Примечание.

Методы расширения AddInteractiveServerComponents для AddRazorComponents и AddInteractiveServerRenderMode для MapRazorComponents позволяют приложению использовать интерактивный SSR, что становится актуальным только в последней части серии руководств по интерактивности. В нескольких следующих статьях компоненты приложения используют только статический SSR.

Приложение запускается вызовом Run на WebApplication (app):

app.Run();

Устраните неполадки с помощью готового примера

Если при работе по этому руководству у вас возникнет проблема, которую не удаётся решить с помощью текста, сравните свой код с завершённым проектом в репозитории примеров Blazor:

Blazor репозиторий примеров GitHub (dotnet/blazor-samples)

Выберите последнюю папку версии. Пример папки для проекта этого руководства называется BlazorWebAppMovies.

Дополнительные ресурсы

При использовании VS Code или .NET CLI в этом руководстве используется небезопасный протокол HTTP, чтобы упростить переход к внедрению безопасности SSL/HTTPS для пользователей Linux и macOS. Сведения о внедрении SSL/HTTPS см. в разделе "Принудительное применение HTTPS" в ASP.NET Core.

Следующие шаги

Далее: добавление модели и генерация её каркаса