Självstudie: Hantera statiska filer och använda mallarvning med Flask i Visual Studio

2025-08-08

I den här artikeln beskrivs steg 3 i självstudieserien Arbeta med Flask-webbramverket i Visual Studio.

Föregående steg i den här självstudieserien skapar en minimal Flask-app med en enda sida med fristående HTML. Moderna webbappar består vanligtvis av många sidor och använder delade resurser som CSS- och JavaScript-filer för att ge konsekvent formatering och beteende. I steg 3 arbetar du med Visual Studio-objektmallar för att lägga till innehåll i Flask-projektet och utöka funktionerna i programmet.

I steg 3 i självstudien lär du dig att:

Använd Visual Studio-mallar för att snabbt lägga till nya filer med standardkod
Hantera statiska filer från Flask-koden
Lägga till fler sidor i Flask-appen
Använd mallarv för att skapa en rubrik och navigering mellan sidor

Förutsättningar

En Visual Studio-lösning och Flask-programprojekt som skapats i steg 1: Skapa Flask-projekt och uppdaterat i steg 2: Omstrukturera Flask-projektet.

Utforska objektmallar i Visual Studio

När du utvecklar ett Flask-program lägger du vanligtvis till många fler Python-, HTML-, CSS- och JavaScript-filer. För varje filtyp (och andra filer som web.config som du kan behöva för distribution) tillhandahåller Visual Studio praktiska objektmallar för att komma igång. Du kan använda dessa mallar för att snabbt lägga till nya filer av olika slag med standardkod.

Om du vill visa tillgängliga mallar går du till Solution Explorer i Visual Studio och öppnar projektstrukturen.
Högerklicka på mappen där du vill skapa en ny fil och välj Lägg till>nytt objekt. Dialogrutan Lägg till nytt objekt öppnas:
Om du vill använda en mall väljer du önskad mall, anger ett namn på filen och väljer Lägg till.

Visual Studio lägger till filen i det aktuella projektet och markerar ändringarna för källkontroll.

Förstå hur Visual Studio identifierar objektmallar

Visual Studio-projektfilen (.pyproj) innehåller en projekttypsidentifierare som markerar filen som ett Python-projekt. Visual Studio använder den här typen av identifierare för att identifiera och visa endast de objektmallar som är lämpliga för projekttypen. Visual Studio följer den här metoden för att tillhandahålla en omfattande uppsättning objektmallar för många projekttyper utan att be dig att sortera igenom dem varje gång.

Hantera statiska filer från din app

I en webbapp som skapats med Python (med hjälp av ett ramverk) körs dina Python-filer alltid på webbvärdens server och överförs aldrig till en användares dator. Andra filer som CSS och JavaScript används endast av webbläsaren, så värdservern levererar dem helt enkelt as-is när de begärs. Dessa typer av filer kallas "statiska" filer, och Flask kan leverera dem automatiskt utan att du behöver skriva någon kod. I HTML-filer kan du till exempel referera till statiska filer med hjälp av en relativ sökväg i projektet. Den första proceduren i det här avsnittet visar hur du använder en statisk CSS-fil med en befintlig sidmall.

När du behöver leverera en statisk fil från kod, till exempel via en API-slutpunktsimplementering, tillhandahåller Flask en praktisk metod. Du kan referera till filer med hjälp av relativa sökvägar i en mapp med namnet statisk i projektroten. Den andra proceduren i det här avsnittet visar hur du arbetar med en enkel statisk datafil från kod.

I båda procedurerna kan du ordna filerna under mappen statisk enligt dina önskemål.

Använda statisk CSS-fil i en mall

Följ dessa steg för att använda en statisk fil i en mall:

I Solution Explorerhögerklickar du på mappen HelloFlask i projektet, väljer Lägg till>Ny mappoch ger mappen namnet statisk.
Högerklicka på mappen statisk och välj Lägg till>nytt objekt.
I dialogrutan Lägg till nytt objekt väljer du mallen formatmall, namnger filen site.csoch väljer sedan Lägg till.

Visual Studio lägger till site.css-filen i projektet och öppnar filen i redigeraren. Här är ett exempel på den uppdaterade Flask-projektstrukturen:
Ersätt innehållet i filen site.css med följande stilar:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Ersätt innehållet i filen HelloFlask/templates/index.html med följande markering:
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
Den här koden ersätter html-elementet <strong> från steg 2 i självstudieserien med ett <span>-element som refererar till message-formatklassen. Om du använder en stilklass på det här sättet får du större flexibilitet när du utformar HTML-elementet.
Spara dina projektändringar genom att välja Fil>Spara alla eller använd kortkommandot Ctrl+Skift+S. (Det här steget är inte nödvändigt eftersom Visual Studio sparar filerna automatiskt när du utvecklar projektet.)
Kör projektet och observera resultatet. När du är klar stoppar du appen.
(Valfritt) Du kan checka in ändringarna i källkontrollen och uppdatera fjärrlagringsplatsen. Mer information finns i Checka in ändringar i källkontroll i steg 2 i den här självstudieserien.

Hantera statisk fil från kod

Flask tillhandahåller en funktion med namnet send_static_file som du kan anropa från kod för att referera till alla filer i projektets statiska mapp. Följande process skapar en enkel API-slutpunkt som returnerar en statisk datafil:

I mappen statisk skapar du en statisk JSON-datafil med namnet data.json. Du kan använda filmallen Text som grund för filen.
Ersätt innehållet i JSON-filen med följande kod som innehåller exempeldata för att demonstrera mekanismen:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
I filen HelloFlask/views.py lägger du till en funktion med vägen /api/data slutpunkt som returnerar den statiska datafilen med hjälp av metoden send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Spara dina projektändringar och kör projektet igen. Bläddra till /api/data vägslutpunkten och bekräfta att appen returnerar den statiska filen:
När du är klar stoppar du appen.

Ordna statiska filer och mappar

Du kan lägga till andra CSS-, JavaScript- och HTML-filer i din statiska mapp enligt dina projektbehov. Ett vanligt sätt att organisera statiska filer är att skapa undermappar med namnet teckensnitt, skriptoch innehåll (för formatmallar och andra filer).

Använda URL-vägar och frågeparametrar från API:er

Du kan hantera URL-variabler och frågeparametrar med API:er när du arbetar med Flask. Mer information finns i använd variabla URL-rutter och frågeparametrar i steg 1 av den här handledningsserien.

Lägg till sida i Flask-programmet

Att lägga till en annan sida i Flask-programmet omfattar följande uppgifter:

Lägg till en Python-funktion som definierar vyn
Lägga till en mall för sidans HTML-kod
Uppdatera URL-vägarna i Flask-projektets views.py-fil

Följ dessa steg för att lägga till sidan Om (/about) i projektet BasicProject Flask och länkar till den sidan från startsidan:

I Solution Explorerhögerklickar du på mappen HelloFlask/templates i projektet och väljer Lägg till>nytt objekt.

Tips

Om du inte ser kommandot Nytt objekt på menyn Lägg till ska du stoppa Flask-appen så att Visual Studio avslutar felsökningsläget efter behov.
I dialogrutan Lägg till nytt objekt väljer du mallen HTML-sida, namnger filen about.htmloch väljer sedan Lägg till.

Ersätt innehållet i about.html-filen med följande HTML-kod:

<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

I ett efterföljande steg ersätter du den explicita länken till startsidan med ett navigeringsfält.

I filen HelloFlask/views.py lägger du till en funktion med namnet about som använder mallen:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

I filen HelloFlask/templates/index.html lägger du till följande markering som den första instruktionen i <body>-elementet:
```
<div><a href="about">About</a></div>
```
Den här markeringen lägger till en länk till sidan /about för Flask-appen. I ett senare steg ersätter du den här länken med ett navigeringsfält.
Spara dina projektändringar och kör projektet igen. Bläddra till sidan /about och kontrollera navigeringen mellan de olika appsidorna.
När du är klar stoppar du appen.

Namnge funktion för din sida

Flask tillämpar inga begränsningar eller krav på namnet på sidfunktionen. Den @app.route-dekoratorn bestämmer URL:er för vilka Flask anropar funktionen för att generera ett svar. Utvecklare matchar vanligtvis sidfunktionsnamnet med vägen, men den här typen av matchning krävs inte.

Använd mallarv för sidhuvud och navigering

I stället för explicita navigeringslänkar på varje sida har många webbappar en varumärkesrubrik och ett navigeringsfält som innehåller de viktigaste sidlänkarna, popup-menyerna och så vidare. För att säkerställa konsekvens i appen bör sidhuvudet och navigeringsfältet vara samma på alla sidor, men du behöver inte upprepa samma kod i varje sidmall. Du kan definiera de gemensamma delarna av alla dina sidor i en enda fil.

Flasks mallsystem (Jinja som standard) ger två sätt att återanvända specifika element i flera mallar:

Innehåller är andra sidmallar som du infogar på en specifik plats i den refererande mallen med syntaxen {% include <template_path> %}. Du kan också använda en variabel om du vill ändra sökvägen dynamiskt i kod. Inkluderingar används vanligtvis i brödtexten på en sida för att införa den delade mallen på en specifik plats på sidan.
Inheritance använder syntaxen {% extends <template_path> %} i början av en sidmall för att ange en delad basmall som den refererande mallen bygger på. Arv används ofta för att definiera en delad layout, navigationsfält och andra strukturer för appens sidor. Den här metoden kräver refererande mallar för att bara lägga till eller ändra specifika områden i basmallen som kallas block.

För båda metoderna är <template_path>-värdet relativt appens mallar mapp (.. / eller ./ är också tillåtna).

En basmall avgränsar block med hjälp av taggarna {% block <block_name> %} och {% endblock %}. Om en refererande mall använder taggar med samma blocknamn åsidosätter blockinnehållet i den refererande mallen det matchande blocket i basmallen.

Följande steg visar arv av mallar:

I Solution Explorerhögerklickar du på mappen HelloFlask/templates och skapar en ny fil från mallen HTML-sida med namnet layout.html.

Ersätt innehållet i layout.html-filen med följande HTML-kod:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

Den här mallen innehåller ett block med namnet content, som identifierar allt innehåll som de refererande sidorna behöver ersätta.

I filen HelloFlask/static/site.css lägger du till följande formatmallar i slutet av filen:

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Dessa formatdefinitioner genererar ett intressant resultat för den här övningen. Den här genomgången visar inte responsiv design.

Ersätt innehållet i filen HelloFlask/templates/index.html med följande markering:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Den index mallen refererar nu till basmallen och åsidosätter content blocket. Du kan se att den här mallen förenklas med hjälp av arv.
Ersätt innehållet i filen HelloFlask/templates/about.html med följande markering, så att about mallen även refererar till basmallen och åsidosätter content block:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Kör appen igen och observera resultatet. Använd länkarna i navigeringsfältet för att växla mellan appsidor.
När du är klar stoppar du appen och sparar dina projektändringar.
Eftersom du har gjort betydande ändringar i appen är det ett bra tillfälle att spara ändringarna på en Git-lagringsplats. Mer information finns i Checka in ändringar i källkontroll i steg 2 i den här självstudieserien.

Genomgång av handledning

Grattis till att du har slutfört den här självstudien om Flask i Visual Studio.

I den här guiden lärde du dig att:

Skapa ett Flask-projekt med flera sidor
Använda mallar för att skapa olika sidvyer
Hantera statiska filer, lägga till sidor och använda mallarv

Dokumentation för Jinja Template Designer (jinja.pocoo.org)
url_for i dokumentationen för Flask-programobjektet (flask.pocoo.org)
Självstudiekällkodsexempel på GitHub (Microsoft/python-sample-vs-learning-flask)

Feedback

Var den här sidan till hjälp?