Ćwiczenie — tworzenie i uruchamianie aplikacji internetowej platformy Blazor

Ukończone

Skonfigurujmy nasze środowisko programistyczne platformy .NET i utwórzmy pierwszą aplikację internetową platformy Blazor.

Ten moduł umożliwia korzystanie z interfejsu wiersza polecenia platformy .NET, programu Visual Studio Code lub programu Visual Studio 2022 na potrzeby programowania lokalnego. Jeśli programujesz przy użyciu programu Visual Studio Code, pamiętaj o zainstalowaniu rozszerzenia C# Dev Kit , którego używamy w tym module.

W tym module jest używany zestaw .NET 8.0 SDK. Upewnij się, że masz zainstalowany program .NET 8.0, uruchamiając następujące polecenie w preferowanym terminalu poleceń:

dotnet --list-sdks

Zostanie wyświetlone dane wyjściowe podobne do następującego przykładu:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 8 . Jeśli żadna z nich nie znajduje się na liście lub polecenie nie zostanie znalezione, zainstaluj najnowszy zestaw SDK platformy .NET 8.0.

Tworzenie nowej aplikacji internetowej platformy Blazor przy użyciu zestawu deweloperskiego języka C#

Aby utworzyć nowy projekt aplikacji internetowej platformy Blazor w programie Visual Studio Code przy użyciu zestawu deweloperskiego języka C#:

1. Uruchom paletę poleceń przy użyciu Ctrl+Shift+P, a następnie wpisz ".NET".

2. Znajdź i wybierz polecenie .NET: Nowy projekt .

3. Wybierz pozycję Aplikacja internetowa platformy Blazor na liście rozwijanej.

4. Wybierz folder, w którym chcesz utworzyć nowy projekt.

5. Nadaj projektowi nazwę BlazorApp i naciśnij Enter , aby potwierdzić.

6. Wyświetl nowy projekt aplikacji Platformy Blazor w Eksplorator rozwiązań.

Opcjonalnie: tworzenie nowej aplikacji Platformy Blazor przy użyciu interfejsu wiersza polecenia platformy .NET

Aby utworzyć projekt aplikacji internetowej platformy Blazor przy użyciu zestawu .NET SDK z poziomu wiersza polecenia, użyj następującego polecenia:

dotnet new blazor

Niezależnie od tego, czy aplikacja Blazor została utworzona przy użyciu programu Visual Studio Code, czy interfejsu wiersza polecenia platformy .NET, wygenerowany projekt zawiera następujące pliki i strony:

• Program.cs to punkt wejścia dla aplikacji, która uruchamia serwer i gdzie konfigurujesz usługi app services i oprogramowanie pośredniczące.
• App.razor jest składnikiem głównym aplikacji.
• Route.razor konfiguruje router Blazor.
• Katalog Components/Pages zawiera kilka przykładowych stron sieci Web dla aplikacji.
• Plik BlazorApp.csproj definiuje projekt aplikacji i jego zależności. Można je wyświetlić, klikając dwukrotnie węzeł projektu w Eksplorator rozwiązań.
• Plik launchSettings.json w katalogu Properties definiuje różne ustawienia profilu dla lokalnego środowiska deweloperskiego. Numer portu jest automatycznie przypisywany podczas tworzenia projektu i zapisywany w tym pliku.

Uruchamianie aplikacji przy użyciu zintegrowanego debugera

1. W programie Visual Studio Code wybierz pozycję Uruchom z menu.

2. Wybierz pozycję Rozpocznij debugowanie.

3. Wybierz pozycję C# z listy rozwijanej Wybierz debuger .

4. Wybierz pozycję C#: BlazorApp [Konfiguracja domyślna]

   Spowoduje to skompilowanie i uruchomienie aplikacji z włączonym debugowaniem. Aplikacja powinna zostać automatycznie otwarta w domyślnej przeglądarce. Przeglądarka może wyświetlić ostrzeżenie o tym, że witryna nie jest bezpieczna. to bezpieczne, aby kontynuować.

   

Opcjonalnie: uruchamianie aplikacji przy użyciu interfejsu wiersza polecenia platformy .NET

1. W oknie terminalu skopiuj i wklej następujące polecenie, aby uruchomić aplikację i obserwować zmiany plików:

   dotnet watch
   

   To polecenie kompiluje i uruchamia aplikację, a następnie stosuje wszelkie zmiany kodu do uruchomionej aplikacji. Aplikacja powinna zostać automatycznie otwarta w domyślnej przeglądarce. Przeglądarka może wyświetlić ostrzeżenie, że witryna nie ma jeszcze prawidłowego certyfikatu; to bezpieczne, aby kontynuować.

Udało Ci się pomyślnie uruchomić pierwszą aplikację Platformy Blazor!

Tworzenie nowej aplikacji platformy Blazor

Program Visual Studio to w pełni funkcjonalne środowisko IDE na potrzeby programowania na platformie .NET, które ułatwia tworzenie aplikacji Platformy Blazor.

Aby używać programu Visual Studio do tworzenia i pracy z aplikacjami internetowymi Platformy Blazor, pamiętaj o zainstalowaniu obciążenia "ASP.NET i tworzenia aplikacji internetowych" przy użyciu instalatora programu Visual Studio.

Aby utworzyć nową aplikację internetową platformy Blazor przy użyciu programu Visual Studio:

1. Uruchom program Visual Studio i wybierz pozycję Utwórz nowy projekt.

2. W oknie Tworzenie nowego projektu wpisz Blazor w polu wyszukiwania i naciśnij Enter.

3. Wybierz szablon Aplikacji internetowej platformy Blazor i wybierz pozycję Dalej.

   

4. W oknie Konfigurowanie nowego projektu wprowadź nazwę projektu BlazorApp i wybierz pozycję Dalej:

   

5. W oknie Dodatkowe informacje wybierz pozycję .NET 8.0 (obsługa długoterminowa) z listy rozwijanej Framework, jeśli nie została jeszcze wybrana, a następnie kliknij przycisk Utwórz.

   Podczas tworzenia aplikacji internetowej platformy Blazor można wybrać spośród różnych opcji, takich jak to, czy włączyć uwierzytelnianie, jakie tryby renderowania interakcyjnego i ile aplikacji chcesz interakcyjnej. W przypadku tej aplikacji upewnij się, że wybrano wartości domyślne w następujący sposób:

   • Typ uwierzytelniania: Brak
   • Tryb renderowania interakcyjnego: serwer
   • Lokalizacja interakcyjności: na stronę/składnik

   

Projekt zostanie utworzony i załadowany w programie Visual Studio. Przyjrzyj się zawartości projektu przy użyciu Eksplorator rozwiązań.

Utworzono kilka plików, aby udostępnić prostą aplikację Blazor, która jest gotowa do uruchomienia:

• Program.cs to punkt wejścia dla aplikacji, która uruchamia serwer i gdzie konfigurujesz usługi app services i oprogramowanie pośredniczące.
• App.razor jest składnikiem głównym aplikacji.
• Route.razor konfiguruje router Blazor.
• Katalog Components/Pages zawiera kilka przykładowych stron sieci Web dla aplikacji.
• Plik BlazorApp.csproj definiuje projekt aplikacji i jego zależności. Można je wyświetlić, klikając dwukrotnie węzeł projektu w Eksplorator rozwiązań.
• Plik launchSettings.json w katalogu Properties definiuje różne ustawienia profilu dla lokalnego środowiska deweloperskiego. Numer portu jest automatycznie przypisywany podczas tworzenia projektu i zapisywany w tym pliku.

Uruchom aplikację

Kliknij przycisk Rozpocznij debugowanie (zielona strzałka) na pasku narzędzi debugowania w programie Visual Studio, aby uruchomić aplikację.

Po uruchomieniu aplikacji możesz zastosować zmiany kodu do uruchomionej aplikacji, klikając przycisk Przeładowywanie na gorąco.

Aplikację można zatrzymać w dowolnym momencie, klikając przycisk Zatrzymaj na górnym pasku narzędzi.

Przy pierwszym uruchomieniu aplikacji internetowej w programie Visual Studio skonfiguruje certyfikat dewelopera do hostowania aplikacji za pośrednictwem protokołu HTTPS, a następnie wyświetli monit o zaufanie certyfikatowi. Zalecamy zaakceptowanie zaufania certyfikatowi. Certyfikat jest używany tylko do programowania lokalnego i bez niego większość przeglądarek narzeka na bezpieczeństwo witryny internetowej.

Poczekaj na uruchomienie aplikacji w przeglądarce. Po przejściu na następującą stronę pomyślnie uruchomisz swoją pierwszą aplikację Platformy Blazor.

Użyj tej aplikacji Platformy Blazor w poniższych ćwiczeniach.