Webbserverprogrammering 1 · område 1 · lektion 4

Projektets arkitektur: vilken fil gör vad

Sex filer gör om en förfrågan till en sida. Det här är den enda gång under kursen som hela kedjan gås igenom samlat — allt senare bygger på att den här bilden sitter.

1. Renderingskedjan

En förfrågan kommer in. Servern går genom filerna i den här ordningen och skickar tillbaka färdig HTML.

2. De sex filerna

Här är filerna ur referensprojektet, som de faktiskt ser ut. Leta upp motsvarigheten i ditt eget projekt medan du läser.

1. Program.cs — startar servern

using Webbresan.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents(); //.AddInteractiveServerComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
app.UseHttpsRedirection();

app.UseAntiforgery();

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

app.Run();

Körs en gång, när servern startar. Inte per förfrågan. Tre rader att känna igen:

• AddRazorComponents() — anmäler att projektet har Razor-komponenter.
• MapRazorComponents<App>() — vid varje förfrågan, börja i App. Det är raden som kopplar ihop webbservern med din kod.
• app.Run() — nu lyssnar servern. Terminalen står kvar och väntar.

Raderna däremellan är pipelinen: varje förfrågan passerar dem i tur och ordning. UseHttpsRedirection skickar http till https, MapStaticAssets levererar filer ur wwwroot. UseAntiforgery och UseStatusCodePagesWithReExecute kommer i område 5 och 7 — känn bara igen namnen nu.

2. Components/App.razor — HTML-dokumentet

<!DOCTYPE html>
<html lang="sv">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <ResourcePreloader />
    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["Webbresan.styles.css"]" />
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="@Assets["_framework/blazor.web.js"]"></script>
</body>

</html>

Här finns <html>, <head> och <body> — en enda gång i hela projektet. Enskilda sidor innehåller aldrig <html>.

• lang="sv" — vilket språk texten är skriven på. En skärmläsare väljer uttal med det.
• <meta charset="utf-8" /> — raden som gör att åäö fungerar.
• <base href="/" /> — därför skrivs menylänkar utan inledande snedstreck.
• <Routes /> — här stoppas den valda sidan in.
• @Assets[…] — ger filen ett versionsnummer så att webbläsaren inte visar en gammal cachad stilmall.

3. Components/Routes.razor — väljer sida

<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Routern letar igenom projektet efter komponenter med @page och matchar adressen mot dem.

• DefaultLayout — vilken ram sidorna får om de inte säger annat.
• NotFoundPage — vad som visas när ingenting matchar. Det är den som gav 404 på /finns-inte.
• FocusOnNavigate — flyttar tangentbordsfokus till <h1> vid sidbyte, så att den som navigerar utan mus hamnar rätt.

4. Components/Layout/MainLayout.razor — ramen

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@Body är hålet där sidan hamnar. Allt annat är samma på alla sidor — det är därför menyn bara skrivs en gång.

5. Components/Pages/Home.razor — sidan

Sidan bidrar bara med sitt eget innehåll. Den innehåller inte <html>, <head> eller menyn — de kommer från App.razor och MainLayout. Komponentens tre delar står på referenssidan för lektion 3, och hela startsidans kod finns i guiden steg 3.

6. wwwroot/app.css — utseendet

Skickas som en egen fil, efter HTML:en, på webbläsarens eget initiativ. Se notisen om nätverksfliken ovan. Koden du lägger till här finns i guiden steg 8.

3. Lägga till en egen sida

Skapa en fil i Components/Pages/. Namnet på filen spelar ingen roll för adressen — det är @page som bestämmer den.

@page "/adressen"

<PageTitle>Adressen – Webbresan</PageTitle>

<h1>Steg 1 och 2: adressen och DNS</h1>

<p>Här kommer förklaringen.</p>

Spara, starta om servern och gå till /adressen.

4. Menyn

Öppna Components/Layout/NavMenu.razor och lägg till posten:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="adressen">Adressen</NavLink>
</div>

• NavLink är en komponent, inte <a>. Den märker själv när den pekar på sidan du står på och markerar sig.
• href="adressen" utan snedstreck först — på grund av <base href="/" /> i App.razor.

Startsidans länk behöver ett tillägg till:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Start</NavLink>
</div>

Match="NavLinkMatch.All" behövs bara där. Utan den skulle länken till "" räknas som aktiv på alla sidor, eftersom varje adress börjar med /. Ta bort den och ladda om, så ser du det.

5. Felsökning

Felen från det här momentet. Slå upp symptomet innan du fastnar.

6. Orden

Orden från det här passet. De används i uppgiften utan förklaring.