Cvičení – přístup k datům ze komponenty Blazor

5 min

Aktuální pevně zakódované pizzy v aplikaci je potřeba nahradit databází. Rozhraní Microsoft Entity Framework můžete použít k přidání připojení ke zdrojům dat. V této aplikaci používáme k ukládání pizzy databázi SQLite.

V tomto cvičení přidáte balíčky pro podporu funkcí databáze, připojíte třídy k back-endové databázi a přidáte pomocnou třídu pro předběžné načtení dat pro pizzy společnosti.

Přidání balíčků, které podporují přístup k databázi

Pokud je aplikace pořád spuštěná, zastavte ji.
V editoru Visual Studio Code vyberte Terminál>nový terminál.
V novém terminálu nastavte umístění do adresáře BlazingPizza .
```
cd BlazingPizza
```

Spuštěním těchto příkazů přidejte balíčky Microsoft.EntityFrameworkCore, Microsoft.EntityFrameworkCore.Sqlite a System.Net.Http.Json :

dotnet add package Microsoft.EntityFrameworkCore --version 9.0.0
dotnet add package Microsoft.EntityFrameworkCore.Sqlite --version 9.0.0
dotnet add package System.Net.Http.Json --version 9.0.0

Tyto příkazy přidávají odkazy na balíčky do souboru BlazingPizza.csproj:

  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.0-*" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.0-*" />
    <PackageReference Include="System.Net.Http.Json" Version="9.0.0-*" />
  </ItemGroup>

Přidání kontextu databáze

V editoru Visual Studio Code vytvořte novou složku ve složce BlazingPizza . Pojmenujte to Data.
Ve složce Data vytvořte nový soubor s názvem PizzaStoreContext.cs.

Do nového souboru zadejte tento kód pro třídu:

using Microsoft.EntityFrameworkCore;

namespace BlazingPizza.Data;

public class PizzaStoreContext : DbContext
{
    public PizzaStoreContext(DbContextOptions options) : base(options)
    {
    }

    public DbSet<PizzaSpecial> Specials { get; set; }
}

Tato třída vytvoří kontext databáze, který můžeme použít k registraci databázové služby. Kontext nám také umožňuje mít kontroler, který přistupuje k databázi.

Uložte změny pomocí ctrl+S.

Přidání kontroleru

Ve složce BlazingPizza vytvořte novou složku. Pojmenujte to Kontrolery.
Ve složce Kontrolery vytvořte nový soubor. Pojmenujte ho SpecialsController.cs.

Zadejte tento kód pro třídu:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using BlazingPizza.Data;

namespace BlazingPizza.Controllers;

[Route("specials")]
[ApiController]
public class SpecialsController : Controller
{
    private readonly PizzaStoreContext _db;

    public SpecialsController(PizzaStoreContext db)
    {
        _db = db;
    }

    [HttpGet]
    public async Task<ActionResult<List<PizzaSpecial>>> GetSpecials()
    {
        return (await _db.Specials.ToListAsync()).OrderByDescending(s => s.BasePrice).ToList();
    }
}

Tato třída vytvoří řadič, který nám umožní vyhledávat v databázi speciality pizzy a vrátí je jako JSON na adrese URL (http://localhost:5000/specials).

Uložte změny.

Načtení dat do databáze

Aplikace zkontroluje, jestli existuje existující databáze SQLite, a vytvoří ji s některými předem připravenými pizzami.

V adresáři Dat vytvořte nový soubor. Pojmenujte ho SeedData.cs.

Zadejte tento kód pro třídu:

namespace BlazingPizza.Data;

public static class SeedData
{
    public static void Initialize(PizzaStoreContext db)
    {
        var specials = new PizzaSpecial[]
        {
            new PizzaSpecial()
            {
                Name = "Basic Cheese Pizza",
                Description = "It's cheesy and delicious. Why wouldn't you want one?",
                BasePrice = 9.99m,
                ImageUrl = "img/pizzas/cheese.jpg",
            },
            new PizzaSpecial()
            {
                Id = 2,
                Name = "The Baconatorizor",
                Description = "It has EVERY kind of bacon",
                BasePrice = 11.99m,
                ImageUrl = "img/pizzas/bacon.jpg",
            },
            new PizzaSpecial()
            {
                Id = 3,
                Name = "Classic pepperoni",
                Description = "It's the pizza you grew up with, but Blazing hot!",
                BasePrice = 10.50m,
                ImageUrl = "img/pizzas/pepperoni.jpg",
            },
            new PizzaSpecial()
            {
                Id = 4,
                Name = "Buffalo chicken",
                Description = "Spicy chicken, hot sauce and bleu cheese, guaranteed to warm you up",
                BasePrice = 12.75m,
                ImageUrl = "img/pizzas/meaty.jpg",
            },
            new PizzaSpecial()
            {
                Id = 5,
                Name = "Mushroom Lovers",
                Description = "It has mushrooms. Isn't that obvious?",
                BasePrice = 11.00m,
                ImageUrl = "img/pizzas/mushroom.jpg",
            },
            new PizzaSpecial()
            {
                Id = 7,
                Name = "Veggie Delight",
                Description = "It's like salad, but on a pizza",
                BasePrice = 11.50m,
                ImageUrl = "img/pizzas/salad.jpg",
            },
            new PizzaSpecial()
            {
                Id = 8,
                Name = "Margherita",
                Description = "Traditional Italian pizza with tomatoes and basil",
                BasePrice = 9.99m,
                ImageUrl = "img/pizzas/margherita.jpg",
            },
        };
        db.Specials.AddRange(specials);
        db.SaveChanges();
    }
}

Třída používá předaný kontext databáze, vytvoří některé PizzaSpecial objekty v poli a pak je uloží.

V Průzkumníku souborů vyberte Program.cs.
Nahoře přidejte odkaz na nový PizzaStoreContext:
```
using BlazingPizza.Data;
```
Tento příkaz umožňuje aplikaci používat novou službu.

Vložte tento segment nad metodu app.Run();:

// Initialize the database
var scopeFactory = app.Services.GetRequiredService<IServiceScopeFactory>();
using (var scope = scopeFactory.CreateScope())
{
    var db = scope.ServiceProvider.GetRequiredService<PizzaStoreContext>();
    if (db.Database.EnsureCreated())
    {
        SeedData.Initialize(db);
    }
}

app.Run();

Tato změna vytvoří obor databáze s PizzaStoreContext. Pokud databáze ještě není vytvořená, zavolá SeedData statickou třídu a vytvoří ji.

V tuto chvíli aplikace nefunguje, protože PizzaStoreContext ještě není inicializována. Do souboru Program.cs přidejte tento kód pod aktuální služby (řádky, které začínají builder.Services.):
```
  builder.Services.AddHttpClient();
  builder.Services.AddSqlite<PizzaStoreContext>("Data Source=pizza.db");
```
Tento kód zaregistruje dvě služby. První příkaz AddHttpClient umožňuje aplikaci přístup k příkazům HTTP. Aplikace k získání kódu JSON pro speciality pizzy používá HttpClient. Druhý příkaz zaregistruje nový PizzaStoreContext a poskytne název souboru databáze SQLite.

Použití databáze k zobrazení pizz

Nyní můžeme nahradit pevně zakódovanou pizzu na stránce Index.razor .

V Průzkumníku souborů rozbalte stránky a pak vyberte Index.razor.
Nahraďte existující metodu OnInitialized() tímto kódem:
```
protected override async Task OnInitializedAsync()
{
    specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
}
```
Note

Tento kód nahrazuje OnInitialized() znakem OnInitializedAsync(). Speciální položky se teď budou vracet jako JSON z aplikace asynchronně.
Je potřeba opravit některé chyby. Do direktivy @inject přidejte tyto příkazy @page:
```
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager
```
Uložte všechny provedené změny a pak vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

Při spuštění aplikace dojde k chybě za běhu. JsonReader vyvolal výjimku.
Mějte na paměti, že aplikace by měla vytvářet JSON na (http://localhost:5000/specials). Přejděte na adresu URL.

Aplikace neví, jak tuto žádost směrovat. Dozvíte se o směrování v modulu o směrování Blazor. Pojďme tuto chybu opravit.
Vyberte Shift + F5 nebo vyberte Zastavit ladění.
V Průzkumníku souborů vyberte Program.cs.

Přibližně uprostřed souboru, po řádcích, které začínají app., přidejte tento koncový bod:

app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");

Kód by teď měl být:

...
app.MapRazorPages();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
...

Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

Aplikace by teď měla fungovat, ale pojďme zkontrolovat, jestli se JSON vytváří správně.
Přejděte na (http://localhost:5000/specials) a podívejte se na:

Json obsahuje pizzy uvedené v sestupném pořadí ceny, jak je uvedeno ve speciálním kontroleru pizzy.

Váš názor

Byla tato stránka užitečná?