Zelfstudie: Een Flask-app maken met weergaven en paginasjablonen in Visual Studio

Dit artikel bevat stap 2 in de reeks zelfstudies Werken met het Flask-webframework in Visual Studio.

Met Visual Studio kunt u Flask-toepassingen maken op basis van projectsjablonen die een uitgebreider uitgangspunt bieden voor uw projecten. stap 1 in de zelfstudie beschrijft hoe u een Flask-app maakt met één pagina, waarbij alle code zich in één bestand bevindt. In stap 2 herstructureer u de code en maakt u een structuur voor paginasjablonen om verdere ontwikkeling mogelijk te maken. In het bijzonder wilt u code voor de toepassingsweergaven scheiden van andere aspecten, zoals opstartcode.

In stap 2 van de zelfstudie leert u het volgende:

• Toepassingscode herstructureren om weergaven van opstartcode te scheiden
• Een weergave weergeven met behulp van een paginasjabloon

Voorwaarden

• Een Visual Studio-oplossing en Een Flask-toepassingsproject dat is gemaakt in stap 1: Visual Studio-oplossing en Flask-project maken.

Flask-project herstructureren voor verdere ontwikkeling

Met de sjabloon Blank Flask Web Project kunt u een project maken met één app.py-bestand dat opstartcode naast één weergave bevat. Als u de ontwikkeling van een app met meerdere weergaven en sjablonen wilt toestaan, moet u deze functies scheiden.

Volg deze stappen om uw Flask-project aan te passen om verdere ontwikkeling mogelijk te maken:

1. Klik in Solution Explorermet de rechtermuisknop op de Flask-projectmap (BasicProject) en selecteer Nieuwe map toevoegen>.

   

2. Geef de nieuwe toepassingsmap de naam HelloFlask-.

3. Klik met de rechtermuisknop op de map HelloFlask en selecteer Add>New Item om een nieuw bestand te maken.

4. Selecteer in het dialoogvenster Nieuw item toevoegen de sjabloon Leeg Python-bestand:

   1. Geef het bestand een naam __init__.py. De bestandsnaam moet twee voorlooptekens en twee eindonderstrepingstekens (_) rond het woord init-bevatten.

   2. Selecteer toevoegen.

   

5. Voeg de volgende code toe aan het nieuwe bestand, waarmee het Flask exemplaar wordt gemaakt en de toepassingsweergaven worden geladen:

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

6. Maak in de map HelloFlask een nieuw Python-bestand met de naam views.py.

   Belangrijk

   Zorg ervoor dat u de bestandsnaam opgeeft als views.py. De naam weergave is belangrijk vanwege de import HelloFlask.views verklaring in het __init__.py-bestand. Als de naam weergaven niet hetzelfde is in beide gevallen, geeft Visual Studio een fout weer tijdens de uitvoeringstijd.

7. Voeg de volgende code toe aan het views.py-bestand. Met deze code wordt de naam van de functie gewijzigd en wordt de retourroute naar het /home-eindpunt gedefinieerd:

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

   Deze code bevat ook de paginarenderingscode uit het app.py-bestand en importeert het app-object dat is gedeclareerd in het __init__.py bestand.

8. Maak in de map HelloFlask een submap met de naam sjablonen. De map is voorlopig leeg.

9. Vervang in de flask-projectmap (BasicProject) de inhoud van het app.py-bestand door de volgende code:

   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. Nadat u de code hebt bijgewerkt, wijzigt u de naam van het app.py bestand in runserver.py.

11. Controleer of uw geherstructureerde Flask-projectstructuur eruitziet als in het volgende voorbeeld:

    

Geherstructureerd programma uitvoeren en routes controleren

U bent nu klaar om uw project uit te voeren in Visual Studio:

1. Selecteer in Visual Studio Foutopsporing>Start de foutopsporing (F5) of selecteer Webserver op de hoofdwerkbalk (de browser die u ziet, kan variëren):

2. Wanneer de toepassing in de browser wordt geopend, probeert u zowel de / (hoofdmap) als /home URL-route-eindpunten in de browser:

   

Bijgewerkt programma uitvoeren in Foutopsporingsprogramma

U kunt ook onderbrekingspunten instellen op verschillende onderdelen van de code en de opstartvolgorde van de app volgen in het Foutopsporingsprogramma:

1. Stel verschillende onderbrekingspunten in, zoals de volgende punten:

   • De eerste regel van het runserver.py-bestand
   • De eerste regel van het __init__.py-bestand
   • De return "Hello Flask!" regel in het views.py-bestand

2. Start de app in het foutopsporingsprogramma door Foutopsporing>Start Debugging of F5te selecteren.

3. Terwijl het foutopsporingsprogramma wordt uitgevoerd, doorloopt u de code met F10of voert u de code uit vanaf elk onderbrekingspunt met F5-. U kunt ook foutopsporingsbesturingselementen gebruiken op de hoofdwerkbalk in Visual Studio, zoals de opties Doorgaan, Stoppen, Herstartenen Stap:

   

4. Wanneer u klaar bent, selecteert u Ctrl+C- gevolgd door een willekeurige toets om de toepassing te stoppen. U kunt ook alle geopende browservensters voor de routes sluiten.

Wijzigingen doorvoeren in broncodebeheer

Nadat u de code hebt geherstructureer en de updates hebt getest, kunt u uw wijzigingen controleren en doorvoeren in broncodebeheer:

1. Sla de wijzigingen in uw projectbestanden op, zoals met de sneltoets Ctrl+S.

2. Selecteer op de Git-besturingselementenbalk de niet-doorgevoerde wijzigingen (potlood 5) om het venster Git Changes te openen:

   

3. Voer in het venster Git Changes een doorvoerbericht in en selecteer Alledoorvoeren:

   

   Wanneer de doorvoering is voltooid, wordt in Visual Studio het bericht weergegeven Commit <hash> lokaalgemaakt.

4. (Optioneel) Push de doorgevoerde wijzigingen naar uw externe opslagplaats:

   1. Selecteer op de Git-balk de uitgaande/binnenkomende commits (pijlen 1/0).

   2. Selecteer synchroniseren (vervolgens pushen) of pushen.

   

   U kunt ook meerdere lokale commits verzamelen voordat u ze naar de externe opslagplaats doorstuurt.

Voor volgende procedures in deze reeks zelfstudies raadpleegt u deze sectie voor de stappen voor het doorvoeren van wijzigingen in broncodebeheer.

Frequentie van commits en pushes bepalen

Als u wijzigingen doorvoert in broncodebeheer, wordt een record gemaakt in het wijzigingenlogboek en een punt waarnaar u de opslagplaats naar behoefte kunt terugdraaien. U kunt ook elke commit bekijken om de specifieke wijzigingen te onderzoeken.

Commits in Git zijn goedkoop. Het kan de voorkeur hebben om uw wijzigingen in kleine hoeveelheden met frequente doorvoeringen in te dienen, in plaats van een groot aantal wijzigingen te verzamelen en deze als één doorvoering in te dienen.

U hoeft niet elke kleine wijziging door te voeren in afzonderlijke bestanden. Het is gebruikelijk om een doorvoering te maken wanneer u een functie toevoegt, een structuur wijzigt, zoals wordt weergegeven in deze stap van de reeks zelfstudies of om wat code te herstructureren. Het is ook een goede gewoonte om met uw samenwerkingspartners af te stemmen om overeenstemming te bereiken over de granulariteit van doorvoeringen die voor iedereen het beste werken.

Hoe vaak u commits maakt en hoe vaak u commits naar een externe repository pusht, zijn twee verschillende zaken. Mogelijk verzamelt u meerdere commits in uw lokale opslagplaats voordat u ze naar de externe opslagplaats verstuurt. De frequentie van uw commits is afhankelijk van hoe uw team de repository wil beheren.

Sjablonen gebruiken om pagina's en weergaven weer te geven

De functie home in het views.py-bestand genereert een HTTP-antwoord zonder opmaak voor de pagina. De meeste echte webpagina's reageren met uitgebreide HTML-pagina's die vaak livegegevens bevatten. De belangrijkste reden waarom ontwikkelaars weergaven definiëren met behulp van een functie, is het dynamisch genereren van inhoud.

De retourwaarde voor de weergave is slechts een tekenreeks. U kunt elke HTML in een tekenreeks samenstellen met behulp van dynamische inhoud. Omdat het het beste is om markeringen van gegevens te scheiden, is het beter om de markering in een sjabloon te plaatsen en de gegevens in code te bewaren.

Weergaven aanpassen om inline-HTML te gebruiken

De eerste stap is het converteren van de weergaveverwerking voor het gebruik van inline-HTML voor de pagina met een aantal dynamische inhoud:

1. Vervang de inhoud van het bestand views.py door de volgende code:

   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. Sla uw wijzigingen op en voer uw app opnieuw uit.

3. Vernieuw de pagina een paar keer om te bevestigen dat de datum en tijd worden bijgewerkt. Wanneer u klaar bent, stopt u de app.

HTML-sjabloon maken

Converteer vervolgens het weergaveproces voor pagina's om een HTML-sjabloon te gebruiken:

1. Klik met de rechtermuisknop op de sjablonen map en selecteer Add>New Item om een nieuw bestand te maken.

2. Selecteer in het dialoogvenster Add New Item de HTML Page bestandsjabloon. Geef het bestand een naam index.html en selecteer toevoegen.

3. Vervang de opgegeven inhoud van het HTML-bestand door de volgende markeringen:

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

   In deze code is de {{ content }}-instructie een tijdelijke aanduiding of vervangingsteken (ook wel een sjabloonvariabelegenoemd) waarvoor u in de code een waarde opgeeft.

De startpaginafunctie aanpassen om een sjabloon te laden

U moet de home functie wijzigen om de render_template methode te gebruiken. Met deze methode wordt de HTML-sjabloon geladen en wordt een waarde voor {{ content }} geleverd met behulp van een benoemd argument dat overeenkomt met de naam van de tijdelijke aanduiding.

1. Vervang in het bestand views.py de home functiedefinitie door de volgende code:

   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 zoekt automatisch naar sjablonen in de map sjablonen, dus het pad naar de sjabloon is relatief ten opzichte van die map.

2. Sla uw projectwijzigingen op en voer de app opnieuw uit.

   U ziet dat de inline-HTML-syntaxis (\<strong> ...) in de content waarde niet als HTML-code wordt weergegeven, omdat de sjabloonengine (Jinja) automatisch html-inhoud escapeert. Automatisch ontsnappen voorkomt onbedoelde beveiligingsproblemen bij injectieaanvallen.

   Ontwikkelaars verzamelen vaak invoer van de ene pagina en gebruiken deze als een waarde in een andere pagina met behulp van een tijdelijke aanduiding voor sjablonen. Escapen fungeert ook als een herinnering dat het het beste is om HTML uit de code te houden.

   Wanneer u klaar bent, stopt u de app.

Afzonderlijke tijdelijke aanduidingen gebruiken

U kunt afzonderlijke tijdelijke aanduidingen gebruiken voor elk stukje gegevens in de HTML-opmaak. Pas vervolgens de functie home opnieuw aan om de specifieke waarden voor tijdelijke aanduidingen op te geven:

1. Vervang de inhoud van het bestand index.html door de volgende markeringen:

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

2. Vervang in het bestand views.py de definitie van de home functie door de volgende code om waarden voor alle tijdelijke aanduidingen op te geven:

   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. Sla uw wijzigingen op en voer uw app opnieuw uit. Deze keer ziet u de correct weergegeven uitvoer:

   

4. U kunt uw wijzigingen doorvoeren in broncodebeheer en uw externe opslagplaats bijwerken. Zie Wijzigingen doorvoeren in broncodebeheervoor meer informatie.

Afzonderlijke paginasjablonen

Sjablonen worden meestal onderhouden in afzonderlijke HTML-bestanden, maar u kunt ook een inlinesjabloon gebruiken. Afzonderlijke bestanden worden aanbevolen om een schone scheiding tussen markeringen en code te behouden.

.html-extensie gebruiken voor sjablonen

De .html-extensie voor paginasjabloonbestanden is volledig optioneel. U kunt altijd het exacte relatieve pad naar het bestand in het eerste argument aan de functie render_template identificeren. Visual Studio (en andere editors) bieden echter doorgaans functies zoals het voltooien van code en syntaxiskleuring met .html bestanden, wat opweegt tegen het feit dat paginasjablonen geen HTML zijn.

Wanneer u met een Flask-project werkt, detecteert Visual Studio automatisch of het HTML-bestand dat u bewerkt een Flask-sjabloon is en bepaalde functies voor automatisch aanvullen biedt. Als u een opmerking van een Flask-paginasjabloon ({#) invoert, levert Visual Studio automatisch de afsluitende #} tekens op. De opdrachten Selectie van opmerkingen en Opmerkingen verwijderen (in het menu Bewerken>Geavanceerd bewerken) gebruiken ook sjabloonopmerkingen in plaats van HTML-opmerkingen.

Sjablonen ordenen in submappen

U kunt submappen gebruiken, en vervolgens verwijzen naar het relatieve pad in de map sjablonen bij aanroepen van de render_template functie. Deze methode is een uitstekende manier om effectief naamruimten te maken voor uw sjablonen.

Volgende stap

stap 3: statische bestanden weergeven, pagina's toevoegen en sjabloonovername gebruiken