Självstudie: Skapa en Flask-app med vyer och sidmallar i Visual Studio

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

Med Visual Studio kan du skapa Flask-program från projektmallar som ger en mer omfattande utgångspunkt för dina projekt. steg 1 i självstudien beskriver hur du skapar en Flask-app med en sida, där all kod finns i en enda fil. I steg 2 omstrukturerar du koden och skapar en struktur för sidmallar för att möjliggöra vidare utveckling. I synnerhet vill du separera kod för programvyerna från andra aspekter som startkod.

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

Förutsättningar

• En Visual Studio-lösning och Flask-programprojekt som skapats i Steg 1: Skapa Visual Studio-lösning och Flask-projekt.

Omstrukturering av Flask-projekt för vidare utveckling

Med mallen Blank Flask Web Project kan du skapa ett projekt med en enda app.py fil som innehåller startkod tillsammans med en enda vy. Om du vill tillåta ytterligare utveckling av en app med flera vyer och mallar måste du separera dessa funktioner.

Följ de här stegen för att justera Flask-projektet så att du kan utveckla det vidare:

1. I Solution Explorerhögerklickar du på Flask-projektmappen (BasicProject) och väljer Lägg till>ny mapp.

   

2. Ge den nya programmappen namnet HelloFlask.

3. Högerklicka på mappen HelloFlask och välj Lägg till>nytt objekt för att skapa en ny fil.

4. I dialogrutan Lägg till nytt objekt väljer du filmallen Tom Python-fil:

   1. Ge filen namnet __init__.py. Filnamnet bör innehålla två inledande och två avslutande understreckstecken (_) runt ordet init.

   2. Välj Lägg till.

   

5. Lägg till följande kod i den nya filen, som skapar Flask-instansen och läser in programvyerna:

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. I mappen HelloFlask skapar du en annan ny Python-fil med namnet views.py.

   Viktig

   Se till att ange filnamnet som views.py. Namnet vyer är viktigt på grund av import HelloFlask.views-instruktionen i __init__.py-filen. Om namnet på vyerna och inte är detsamma i båda instanserna, visar Visual Studio ett fel vid körning.

7. Lägg till följande kod i filen views.py. Den här koden byter namn på funktionen och definierar returvägen till /home slutpunkten:

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   Den här koden innehåller också sidåtergivningskoden från app.py-filen och importerar det app objekt som deklareras i __init__.py-filen.

8. I mappen HelloFlask skapar du en undermapp med namnet mallar. Mappen är tom för tillfället.

9. I Flask-projektmappen (BasicProject) ersätter du innehållet i app.py-filen med följande kod:

   import os
   from HelloFlask import app    # Imports the code from HelloFlask/__init__.py
   
   if __name__ == '__main__':
       HOST = os.environ.get('SERVER_HOST', 'localhost')
   
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
   
       app.run(HOST, PORT)
   

10. När du har uppdaterat koden byter du namn på filen app.py till runserver.py.

11. Bekräfta att den omstrukturerade Flask-projektstrukturen ser ut som i följande exempel:

    

    

Kör omstrukturerat program och kontrollera vägar

Nu är du redo att köra projektet i Visual Studio:

1. I Visual Studio väljer du Felsöka>Starta felsökning (F5) eller välj Webbserver i huvudverktygsfältet (webbläsaren kan variera):

2. När programmet öppnas i webbläsaren kan du prova både URL-routningsslutpunkterna / (rot) och /home.

   

Kör uppdaterat program i felsökningsprogrammet

Du kan också ange brytpunkter i olika delar av koden och följa startsekvensen för appen i felsökningsprogrammet:

1. Ange flera brytpunkter, till exempel följande punkter:

   • Den första raden i filen runserver.py
   • Den första raden i filen __init__.py
   • Raden return "Hello Flask!" i filen views.py

2. Starta appen i Felsökningsprogrammet genom att välja Felsökning>Starta felsökning eller F5.

3. När felsökningsprogrammet körs går du igenom koden med F10eller kör koden från varje brytpunkt med F5. Du kan också använda felsökningskontroller i huvudverktygsfältet i Visual Studio, till exempel Fortsätt, Stoppa, Starta omoch steg alternativ:

   

4. När du är klar väljer du Ctrl+C följt av valfri nyckel för att stoppa programmet. Du kan också stänga alla öppna webbläsarfönster för vägarna.

Utföra ändringar i källkontrollen

När du har omstrukturerat koden och testat uppdateringarna kan du granska och checka in ändringarna i källkontrollen:

För efterföljande procedurer i den här självstudieserien kan du läsa det här avsnittet om stegen för att genomföra ändringar i källkontrollen.

Fastställa frekvensen för incheckningar och push-överföringar

Om du genomför ändringar i källkontrollen skapas en post i ändringsloggen och en punkt där du kan återställa lagringsplatsen efter behov. Du kan också undersöka varje commit för att granska de specifika ändringarna.

Incheckningar i Git är billiga. Det kan vara bättre att skicka dina ändringar i små mängder med frekventa incheckningar, i stället för att ackumulera ett stort antal ändringar och skicka dem som en enda incheckning.

Du behöver inte checka in varje liten ändring i enskilda filer. Det är vanligt att göra en incheckning när du lägger till en funktion, ändra en struktur enligt det här steget i självstudieserien eller omstrukturera kod. Det är också bra att diskutera med dina medarbetare för att komma överens om detaljnivån på de commiteringar som fungerar bäst för alla.

Hur ofta du gör commits och hur ofta du pushar commits till ett fjärrrepository är två olika saker. Du kan ackumulera flera ändringar i ditt lokala arkiv innan du pushar dem till fjärrlagringsplatsen. Frekvensen för dina incheckningar beror på hur ditt team vill hantera lagringsplatsen.

Använda mallar för att återge sidor och vyer

Funktionen home i filen views.py genererar ett HTTP-svar i klartext för sidan. De flesta verkliga webbsidor svarar med omfattande HTML-sidor som ofta innehåller livedata. Den främsta anledningen till att utvecklare definierar vyer med hjälp av en funktion är att generera innehåll dynamiskt.

Returvärdet för vyn är bara en sträng. Du kan skapa valfri HTML-kod i en sträng med dynamiskt innehåll. Eftersom det är bäst att separera markup från data är det bättre att placera markup i en mall och behålla datan i koden.

Justera vyer så att de använder infogad HTML

Det första steget är att konvertera visningsbearbetningen till att använda infogad HTML för sidan med dynamiskt innehåll:

1. Ersätt innehållet i views.py-filen med följande kod:

   from datetime import datetime
   from flask import render_template
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       html_content = "<html><head><title>Hello Flask</title></head><body>"
       html_content += "<strong>Hello Flask!</strong> on " + formatted_now
       html_content += "</body></html>"
   
       return html_content
   

2. Spara ändringarna och kör appen igen.

3. Uppdatera sidan några gånger för att bekräfta att datum och tid uppdateras. När du är klar stoppar du appen.

Skapa HTML-mall

Konvertera sedan sidrenderingsprocessen till att använda en HTML-mall:

1. Högerklicka på mappen mallar och välj Lägg till>nytt objekt för att skapa en ny fil.

2. I dialogrutan Lägg till nytt objekt väljer du HTML-sidemallen . Ge filen namnet index.html och välj Lägg till.

3. Ersätt det angivna innehållet i HTML-filen med följande markering:

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   I den här koden är {{ content }}-instruktionen en platshållare eller ersättningstoken (kallas även för en mallvariabel) som du anger ett värde för i koden.

Justera hemfunktionen för att ladda in mallen

Du måste ändra funktionen home för att använda metoden render_template. Den här metoden läser in HTML-mallen och anger ett värde för {{ content }} med hjälp av ett namngivet argument som matchar platshållarens namn.

1. I views.py-filen ersätter du funktionsdefinitionen home med följande kod:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           content = "<strong>Hello, Flask!</strong> on " + formatted_now)
   

   Flask söker automatiskt efter mallar i mallar mapp, så sökvägen till mallen är relativ till den mappen.

2. Spara dina projektändringar och kör appen igen.

   Observera att den infogade HTML-syntaxen (\<strong> ...) i content-värdet inte renderas som HTML eftersom mallmotorn (Jinja) automatiskt slipper HTML-innehåll. Automatisk utrymning förhindrar oavsiktliga sårbarheter för inmatningsattacker.

   Utvecklare samlar ofta in indata från en sida och använder dem som ett värde i en annan med hjälp av en mallplatshållare. Escapeing fungerar också som en påminnelse om att det är bäst att hålla HTML borta från koden.

   När du är klar stoppar du appen.

Använda distinkta platshållare

Du kan använda distinkta platshållare för varje datadel i HTML-koden. Justera sedan funktionen home igen för att ange de specifika platshållarvärdena:

1. Ersätt innehållet i index.html-filen med följande markering:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. I filen views.py ersätter du funktionsdefinitionen home med följande kod för att ange värden för alla platshållare:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           title = "Hello Flask",
           message = "Hello, Flask!",
           content = " on " + formatted_now)
   

3. Spara ändringarna och kör appen igen. Den här gången bör du se korrekt renderade utdata:

   

4. Du kan checka in ändringarna i källkontrollen och uppdatera fjärrlagringsplatsen. För mer information, se Kommittera ändringar till källkontroll.

Separata sidmallar

Mallar underhålls vanligtvis i separata HTML-filer, men du kan också använda en infogad mall. Separata filer rekommenderas för att upprätthålla en ren separation mellan markering och kod.

Använda .html-tillägget för mallar

Det .html tillägget för sidmallfiler är helt valfritt. Du kan alltid identifiera den exakta relativa sökvägen till filen i det första argumentet till funktionen render_template. Visual Studio (och andra redigerare) tillhandahåller dock vanligtvis funktioner som kodkomplettering och syntaxfärgning med .html filer, vilket uppväger det faktum att sidmallar inte är HTML.

När du arbetar med ett Flask-projekt identifierar Visual Studio automatiskt om HTML-filen som du redigerar faktiskt är en Flask-mall och tillhandahåller vissa funktioner för automatisk komplettering. Om du börjar ange en Flask-sidmallskommentare ({#) tillhandahåller Visual Studio automatiskt de avslutande #} tecknen. Kommandona Comment Selection och Uncomment Selection (på menyn Edit>Advanced) använder också mallkommentare i stället för HTML-kommentarer.

Ordna mallar i undermappar

Du kan använda undermappar och sedan referera till den relativa sökvägen under mallar mapp i anrop till funktionen render_template. Den här metoden är ett bra sätt att effektivt skapa namnområden för dina mallar.

Nästa steg