Wat er gebeurt bij één pagina
Bij je eerste verzoek was één verzoek één antwoord. Met een stylesheet en een afbeelding erbij klopt dat niet meer: de browser krijgt eerst de HTML, leest daarin wat er nog ontbreekt, en haalt dat apart op.
Browser: De browser stuurt een GET naar /. Je typt het adres of klikt op een link; de pagina wordt opgevraagd. · Links tussen pagina’s
Server: Jouw functie stuurt het bestand. home() geeft een FileResponse: de inhoud van static/pages/home.html, ongewijzigd. · HTML in bestanden
Browser: De browser leest de HTML. Daarin staan een <link> naar CSS en een <img>. Die bestanden heeft hij nog niet. · Static files
Browser: Nog twee verzoeken. Een GET naar /static/css/style.css en een naar /static/kat.jpg, allebei apart. · Afbeeldingen tonen
Server: StaticFiles antwoordt. Zonder een functie van jou: app.mount geeft het bestand door zoals het op schijf staat. · Static files
Browser: De browser tekent alles. Pas als de CSS en de afbeelding binnen zijn, ziet de pagina eruit zoals bedoeld.
Stap 5 is de stap om te onthouden. Voor de CSS en de afbeelding draait er geen functie van jou; app.mount uit Static files beantwoordt die verzoeken zelf. Daarom heb je die ene regel nodig, en daarom heeft een fout in het pad van <link> of <img> niets met je Python-code te maken: het bestand wordt in stap 4 opgevraagd op een adres waar niets staat.
De pagina zelf staat op stap 2 wel achter een functie van jou. Zo kun je later per verzoek iets anders terugsturen, wat in Het gastenboek begint. Het volgende diagram, bij één klik, laat zien wat er dan tussen stap 2 en 3 bijkomt.
Zie het zelf
Open het tabblad Netwerk uit Kijken wat de browser doet en herlaad. Bij je eerste verzoek stond er één regel; nu staan er drie, in de volgorde van het diagram:
| Naam | Status | Type | Grootte |
|---|---|---|---|
| 127.0.0.1 | 200 | document | 1,2 kB |
| style.css | 200 | stylesheet | (schijfcache) |
| kat.jpg | 404 | json | 214 B |
De groottes verschillen per computer; de statuscode is wat telt. Deze lijst laat twee dingen zien die je in de les ook tegenkomt:
kat.jpgheeft status 404. De browser vroeg het bestand in stap 4, maar op dat adres stond niets: het pad in<img>klopt niet, ofapp.mountontbreekt. Het type isjson, want de foutmelding van FastAPI is JSON, geen plaatje. Je Python-code heeft er niets mee te maken, en de terminal logt het alsGET /static/kat.jpg 404.style.csskwam uit de schijfcache. De browser heeft de server niet eens gevraagd en toonde zijn eigen kopie. Pas je de CSS aan en verandert er niets, dan is dit de reden. Zet het vinkje Cache uitzetten aan zolang je werkt, of herlaad zonder cache.