Zelfstudie: Werken met het Flask-webframework in Visual Studio

Dit artikel is de eerste stap in een reeks zelfstudies van drie delen die laat zien hoe u met Flask in Visual Studio kunt werken. Flask- is een lichtgewicht Python-framework voor webtoepassingen die de basisbeginselen bieden voor URL-routering en paginarendering. Flask wordt een 'micro'-framework genoemd omdat het niet rechtstreeks functies biedt, zoals formuliervalidatie, databaseabstractie, verificatie, enzovoort. Deze functies worden in plaats daarvan geleverd door speciale Python-pakketten met de naam Flask extensies. De extensies worden naadloos geïntegreerd met Flask, zodat ze lijken alsof ze deel uitmaken van Flask zelf. Flask zelf biedt bijvoorbeeld geen paginasjabloonengine. Templating wordt geleverd door extensies zoals Jinja en Jade, zoals beschreven in deze zelfstudie.

In stap 1 van de zelfstudie leert u het volgende:

• Een Visual Studio-oplossing en Een Flask-project maken
• Project standaardcode onderzoeken en het project uitvoeren
• Een Git-opslagplaats maken om wijzigingen in het Flask-project te onderhouden
• Werken met Besturingselementen voor Git-broncode
• Een virtuele omgeving maken voor het Flask-project

Deze zelfstudie verschilt van de snelstartgids Flask. Meer informatie over Flask en het gebruik van Flask-projectsjablonen om een uitgebreider uitgangspunt voor uw projecten te bieden. Met de sjablonen wordt het Flask-pakket automatisch geïnstalleerd wanneer u een project maakt, terwijl in de quickstart wordt uitgelegd hoe u het pakket handmatig installeert.

Voorwaarden

• Visual Studio 2022 in Windows met de volgende opties geselecteerd in het Visual Studio Installer:

  • Selecteer op het tabblad Workloads de optie Python-ontwikkeling. Zie Python-ondersteuning installeren in Visual Studiovoor meer informatie.

  • Selecteer op het tabblad Afzonderlijke onderdelen onder Hulpprogramma's voor codede optie Git voor Windows.

Flask-projectsjablonen zijn opgenomen in alle eerdere versies van Python Tools voor Visual Studio. De sjabloondetails kunnen verschillen van de beschrijvingen in deze zelfstudie.

Visual Studio voor Mac wordt niet ondersteund. Zie Wat gebeurt er met Visual Studio voor Mac voor meer informatie? Visual Studio Code op Windows, Mac en Linux werkt goed met Python via beschikbare extensies.

Visual Studio-oplossing en Flask-project maken

In stap 1 van deze zelfstudie maakt u één Visual Studio-oplossing voor twee afzonderlijke Flask-projecten. U maakt de projecten met behulp van verschillende Flask-projectsjablonen die zijn opgenomen in Visual Studio. Door de projecten in dezelfde oplossing te houden, kunt u eenvoudig heen en weer schakelen tussen verschillende bestanden voor vergelijking.

Volg deze procedure om de oplossing en een Flask-webproject te maken:

1. Selecteer in Visual Studio File>New>Project en zoek naar Flask. Selecteer vervolgens de sjabloon Blank Flask Web Project en selecteer Volgende.

   

2. Configureer uw nieuwe project en oplossing:

   1. Stel de Name van het Visual Studio-project in op BasicProject. Deze naam wordt ook gebruikt voor het Flask-project.

   2. Geef de Locatie voor Visual Studio op om de oplossing en het project op te slaan.

   3. Wis de optie Oplossing en project plaatsen in dezelfde map.

   4. Stel de naam van de -oplossing in op LearningFlask-. De oplossing fungeert als de container voor meerdere projecten in deze reeks zelfstudies.

3. Selecteer Aanmaken

4. Na een ogenblik wordt in Visual Studio de prompt weergegeven Python-pakketspecificatiebestandrequirements.txtis gedetecteerd in project BasicProject.:

   

   Het dialoogvenster geeft aan dat de geselecteerde sjabloon een requirements.txt-bestand bevat dat u kunt gebruiken om een virtuele omgeving voor het project te maken.

5. Selecteer de X- aan de rechterkant om de prompt te sluiten. Verderop in deze zelfstudie maakt u de virtuele omgeving en zorgt u ervoor dat broncodebeheer de omgeving uitsluit. (De omgeving kan altijd later worden gemaakt vanuit het bestand requirements.txt.)

Git-besturingselementen onderzoeken

In de volgende procedure bent u vertrouwd met Visual Studio-ondersteuning voor Git-broncodebeheer.

Belangrijk

Met de release van Visual Studio 2019 versie 16.8, is de versiebeheerervaring van Git standaard ingeschakeld. Als u meer wilt weten over hoe het zich verhoudt tot Team Explorer, bekijkt u de pagina met de vergelijking van Git en Team Explorer naast elkaar.

Als u echter liever Team Explorer in Visual Studio 2019 wilt blijven gebruiken, gaat u naar Extra>Opties>Omgeving>Voorbeeldfuncties en schakelt u het selectievakje Nieuwe Git-gebruikerservaring in. (Deze optie is niet beschikbaar in Visual Studio 2022 en hoger.) Zie Verbinding maken met projecten in Team Explorervoor meer informatie.

1. Als u het project wilt doorvoeren in uw lokale broncodebeheer, selecteert u Toevoegen aan broncodebeheer rechtsonder in het hoofdvenster van Visual Studio en selecteert u vervolgens Git-:

   

   Het venster Git opslagplaats maken wordt geopend, waar u een nieuwe opslagplaats kunt maken en pushen.

2. Nadat u een opslagplaats hebt gemaakt, wordt de Git-besturingselementenbalk rechtsonder weergegeven in het hoofdvenster van Visual Studio:

   

   Van links naar rechts toont de Git-balk het aantal uitgaande/binnenkomende commits (pijlen #/#), het aantal niet-doorgevoerde wijzigingen (potlood #), de naam van de huidige branch en de naam van de huidige repository. Git-besturingselementen zijn ook beschikbaar in het menu Git op de hoofdwerkbalk.

3. Selecteer op de besturingsbalk van Git de wijzigingen (potlood #) om het venster Git Changes te openen. U kunt ook >Git-wijzigingen weergeven selecteren (Ctrl+O-, Ctrl+G):

   

   In dit venster ziet u details over niet-doorgevoerde wijzigingen, inclusief opgegeven wijzigingen. Omdat uw zojuist gemaakte project al automatisch is doorgevoerd in broncodebeheer, ziet u geen wijzigingen die in behandeling zijn.

4. Selecteer op de Git-balk de commits (pijlen #/#) en selecteer vervolgens Alle commits weergeven:

   

   Het venster Git-opslagplaats wordt geopend. U kunt ook Git-opslagplaats weergeven>selecteren (Ctrl+O-, Ctrl+R-):

   

   Dit venster toont details van de huidige opslagplaats in het linkerdeelvenster en de huidige tak met uitgaande/inkomende commits in het rechterdeelvenster.

   Als u de verschillenweergave voor het bestand wilt zien, selecteert u een commit in het middelste deelvenster. De vorige versie wordt aan de linkerkant weergegeven en de herziene versie wordt aan de rechterkant weergegeven. De details bevatten ook de auteur van de wijziging, de doorvoerer en het doorvoerbericht.

Terwijl u deze zelfstudie doorloopt, kunt u regelmatig de Git-besturingselementen in Visual Studio gebruiken om wijzigingen door te voeren en te pushen. In deze handleiding wordt u op de juiste punten herinnerd.

Broncodebeheer vanaf het begin gebruiken

Er zijn verschillende voordelen voor het gebruik van broncodebeheer vanaf het begin van een project. Wanneer u broncodebeheer vanaf het begin van een project gebruikt, met name als u ook een externe opslagplaats gebruikt, krijgt u regelmatig back-ups van uw project op een externe locatie. In tegenstelling tot het onderhouden van een project alleen op een lokaal bestandssysteem, biedt broncodebeheer ook een volledige wijzigingsgeschiedenis en de eenvoudige mogelijkheid om één bestand of het hele project terug te keren naar een eerdere status. De wijzigingsgeschiedenis helpt bij het bepalen van de oorzaak van regressies (testfouten).

Broncodebeheer is essentieel als meerdere personen aan een project werken, omdat het overschrijven beheert en conflictoplossing biedt. Broncodebeheer is in wezen een vorm van automatisering, die u goed voorbereidt op het automatiseren van buildprocessen, testen en releasebeheer. Het is de eerste stap bij het gebruik van Azure DevOps voor een project en omdat de toegangsbarrières zo laag zijn, is er echt geen reden om vanaf het begin broncodebeheer te gebruiken.

Zie voor meer informatie over broncodebeheer als automatisering The Source of Truth: The Role of Repositorys in DevOps, een artikel in MSDN Magazine geschreven voor mobiele apps die ook van toepassing zijn op web-apps.

Voorkomen dat Visual Studio projecten automatisch doorvoert

Volg deze stappen om te voorkomen dat Visual Studio automatisch een nieuw project doorvoert:

1. Selecteer Tools>Options>Source Control>Git Global Settings.

2. Wis de Wijzigingen doorvoeren na het samenvoegen standaard optie en selecteer OK.

Een virtuele omgeving maken en broncodebeheer uitsluiten

Nadat u broncodebeheer voor uw project hebt geconfigureerd, kunt u de virtuele omgeving maken met de benodigde Flask-pakketten die het project nodig heeft. Vervolgens kunt u het venster Git Changes gebruiken om de map van de omgeving uit te sluiten van broncodebeheer.

1. Klik in Solution Explorer-met de rechtermuisknop op het knooppunt Python-omgevingen en selecteer Omgeving toevoegen.

   

2. Selecteer in het dialoogvenster Omgeving toevoegenMaken om de standaardwaarden te accepteren. (U kunt desgewenst de naam van de virtuele omgeving wijzigen, waardoor de naam van de submap wordt gewijzigd, maar env- een standaardconventie is.)

   

3. Als Visual Studio om beheerdersbevoegdheden wordt gevraagd, geeft u uw toestemming. Wacht enkele minuten terwijl Visual Studio pakketten downloadt en installeert. Voor Flask en de bijbehorende afhankelijkheden kan het proces het uitbreiden van bijna 1000 bestanden in meer dan 100 submappen vereisen. U kunt de voortgang bekijken in het venster Visual Studio Output.

4. Selecteer op de Git-besturingselementenbalk de niet-doorgevoerde wijzigingen (waarin nu 99+) wordt weergegeven om het venster Git-wijzigingen te openen:

   

   Het maken van de virtuele omgeving brengt duizenden wijzigingen met zich mee, maar u hoeft ze niet op te nemen in broncodebeheer. U of iemand anders die het project kloont, kan de omgeving altijd opnieuw maken met behulp van het requirements.txt-bestand.

5. Als u de virtuele omgeving wilt uitsluiten van broncodebeheer, klikt u in het venster Git Changes met de rechtermuisknop op de map env en selecteert u Deze lokale items negeren:

   

   Nadat u de virtuele omgeving hebt uitgesloten, zijn de enige resterende wijzigingen in het projectbestand (.py) en het bestand .gitignore, dat een toegevoegde vermelding voor de map virtuele omgeving bevat.

   Als u de verschillenweergave voor het bestand .gitignore wilt zien, dubbelklikt u in het venster Git Changes op het bestand.

6. Voer in het venster Git Changes een doorvoerbericht in, zoals 'Initiële projectwijzigingen':

   

7. Selecteer in de vervolgkeuzelijst van Commit de optie Commit Staged en Push.

U kunt het venster Git-opslagplaats openen en bevestigen dat de geplande commits worden weergegeven in de Lokale Geschiedenis voor de huidige tak.

Inzicht in het doel van virtuele omgevingen

Een virtuele omgeving is een uitstekende manier om de exacte afhankelijkheden van uw toepassing te isoleren. Deze isolatiemethode voorkomt conflicten in een globale Python-omgeving en helpt zowel testen als samenwerken. Tijdens het ontwikkelen van een app brengt u in de loop van de tijd altijd veel nuttige Python-pakketten in. Door pakketten in een projectspecifieke virtuele omgeving te bewaren, kunt u eenvoudig het requirements.txt-bestand van het project bijwerken waarin die omgeving wordt beschreven, die is opgenomen in broncodebeheer. Wanneer u het project naar andere computers kopieert, inclusief buildservers, implementatieservers en andere ontwikkelcomputers, is het eenvoudig om de omgeving opnieuw te maken. U kunt de omgeving opnieuw maken met behulp van alleen het requirements.txt-bestand. Daarom hoeft de omgeving zich niet in broncodebeheer te bevinden. Zie Virtuele omgevingengebruiken voor meer informatie.

Virtuele omgeving verwijderen onder broncodebeheer

U kunt een virtuele omgeving verwijderen nadat deze onder broncodebeheer valt. Volg deze stappen:

1. Bewerk het bestand .gitignore om de map uit te sluiten:

   1. Open het bestand door bestand>>bestandte selecteren.

      U kunt het bestand ook openen vanuit Team Explorer-. Selecteer op de pagina InstellingenOpslagplaatsinstellingen. Ga naar de sectie Attribuutbestanden negeren & en selecteer de koppeling Bewerken naast .gitignore.

   2. Zoek de sectie aan het einde met de opmerking # Python Tools for Visual Studio (PTVS).

   3. Voeg na die sectie een nieuwe regel toe voor de map virtuele omgeving, zoals /BasicProject/env.

2. Open een opdrachtvenster en ga naar de map (zoals BasicProject) met de virtuele omgevingsmap, zoals env.

3. Voer de opdracht git rm -r env uit om de virtuele omgeving te verwijderen die momenteel onder broncodebeheer valt.

4. Voer uw wijzigingen door met de opdracht git commit -m 'Remove venv' of voer ze door vanaf de pagina Wijzigingen van Team Explorer-.

De standaardcode onderzoeken

In deze sectie bekijkt u de boilerplate code in het projectbestand (.py) die Visual Studio maakt op basis van uw sjabloonselectie.

1. Open Solution Explorer om uw oplossing en projectbestanden weer te geven. Het eerste project bevat slechts twee bestanden, app.py en requirements.txt:

   

   Het requirements.txt-bestand geeft de Flask-pakketafhankelijkheden op. De aanwezigheid van dit bestand nodigt u ertoe uit om bij het starten van het project een virtuele omgeving te creëren.

   Het enkele app.py-bestand bevat standaardcode voor een leeg Flask-webproject.

2. Open het app.py-bestand in de editor en bekijk de eerste sectie, een import instructie voor Flask.

   Met deze instructie maakt u een exemplaar van de Flask-klasse, die is toegewezen aan de variabele app. In deze sectie wordt ook een wsgi_app variabele toegewezen (wat handig is wanneer u implementeert op een webhost, maar momenteel niet wordt gebruikt):

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

3. De tweede sectie die moet worden beoordeeld, vindt plaats aan het einde van het bestand. Deze sectie bevat optionele code die u kunt gebruiken om de Flask-ontwikkelingsserver te starten.

   U kunt de code definiëren voor het gebruik van specifieke host- en poortwaarden uit omgevingsvariabelen of de standaardhost- en poortwaarde localhost:55551.

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

4. Het derde codegedeelte dat moet worden onderzocht, wijst een functie toe aan een URL-route, wat betekent dat de functie de resource levert die wordt geïdentificeerd door de URL.

   U definieert routes met behulp van de @app.route decorator van Flask met een argument dat de relatieve URL is van de hoofdmap van de site. Zoals u in de code kunt zien, retourneert de functie alleen een tekststring, wat voldoende is om de inhoud in een browser weer te geven. In de volgende stappen in deze reeks zelfstudies werkt u de code bij om uitgebreidere pagina's weer te geven met HTML.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Het naamargument in Flask-Klasse begrijpen

Het argument name in een Flask-klasse is de naam van de module of het pakket van de toepassing. Flask gebruikt de naam om te bepalen waar sjablonen, statische bestanden en andere resources van de app moeten worden gezocht. Voor apps in één module is __name__ altijd de juiste waarde. De naam is ook belangrijk voor extensies die informatie over foutopsporing nodig hebben. Zie de Flask-klassedocumentatie (flask.pocoo.org) voor meer informatie en andere argumenten.

Meerdere route-decorators gebruiken

Een functie kan meer dan één routedecorator hebben. U kunt zoveel decorators gebruiken als u wilt, als dezelfde functie meerdere routes gebruikt. Als u bijvoorbeeld de functie hello wilt gebruiken voor zowel de /-route als de /hello-route, gebruikt u de volgende code:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Variabele URL-routes en queryparameters gebruiken

Flask kan werken met variabele URL-routes en queryparameters. In een route markeert u een variabele met het kenmerk <variable_name>. Flask geeft de variabele door aan de functie met behulp van een benoemd argument in het URL-pad. Een route in de vorm van /hello/<name> genereert bijvoorbeeld een tekenreeksargument met de naam name aan de functie. Queryparameters zijn beschikbaar via de eigenschap request.args, met name via de methode request.args.get. De volgende code bevat een voorbeeld:

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Als u het type wilt wijzigen, moet u de variabele vooraf laten gaan door int, float, path (die slashes accepteert om mapnamen af te bakenen) en uuid. Zie Regels voor variabelen in de Flask-documentatie voor meer informatie.

Vereisten genereren na de installatie van het pakket

Visual Studio kan een requirements.txt-bestand genereren vanuit een virtuele omgeving nadat u andere pakketten hebt geïnstalleerd.

• In Solution Explorervouw het knooppunt Python-omgevingen uit, klik met de rechtermuisknop op uw virtuele omgeving en selecteer Genereren requirements.txt.

Het is een goede gewoonte om deze opdracht regelmatig te gebruiken wanneer u de omgeving wijzigt. Wijzigingen doorvoeren in uw requirements.txt-bestand naar broncodebeheer, samen met eventuele andere codewijzigingen die afhankelijk zijn van die omgeving. Als u continue integratie instelt op een buildserver, moet u het bestand genereren en wijzigingen doorvoeren wanneer u de omgeving wijzigt.

Het project uitvoeren

Nu bent u klaar om uw project uit te voeren in Visual Studio door deze procedure te volgen:

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

   

2. Met beide opdrachten wordt een willekeurig poortnummer toegewezen aan de omgevingsvariabele PORT en wordt het Python-app.py-bestand uitgevoerd.

   De code start de toepassing met behulp van die poort binnen de Flask-ontwikkelserver.

   Als Visual Studio het bericht 'Failed to start debugger' laat zien en aangeeft dat er geen opstartbestand is gevonden, klik met de rechtermuisknop op het bestand app.py in Solution Explorer en selecteer Instellen als opstartbestand.

3. Wanneer de server wordt gestart, wordt er een consolevenster geopend om het serverlogboek weer te geven. Visual Studio opent automatisch een browser naar http://localhost:<port>, waar u het bericht zou moeten zien dat wordt weergegeven door de functie hello.

   

4. Wanneer u klaar bent, sluit u het consolevenster, waardoor de Flask-ontwikkelserver wordt gestopt. U kunt ook Foutopsporing selecteren>Foutopsporing stoppen.

Foutopsporingsopdrachten vergelijken met Python-opdrachten van het project

Er is een verschil tussen het gebruik van de Debug menu-opdrachten en de serveropdrachten die worden vermeld in het Python submenu van het project.

Naast de foutopsporing menuopdrachten en werkbalkknoppen kunt u de server ook starten met behulp van de Python>Start-server of Python>Start foutopsporingsserver opdrachten in het contextmenu van het project.

Beide opdrachten openen een consolevenster waarin u de lokale URL (localhost:port) voor de actieve server ziet. U moet echter handmatig een browser met die URL openen, en het uitvoeren van de foutopsporingsserver start de Visual Studio-debugger niet automatisch. U kunt later een foutopsporingsprogramma toevoegen aan het actieve proces, als u wilt met behulp van de opdracht Foutopsporing>koppelen aan proces.

Volgende stap

stap 2: Een Flask-app maken met weergaven en paginasjablonen