Flask-app och flaskprojektlayout med Blueprint & Bootstrap

flask app flask project layout with blueprint bootstrap

Denna handledning förklarar hur man använder Flask App, Flask Blueprint och Flask Bootstrap i ett Flask-projekt:

I det här ämnet kommer vi att flytta oss lite bort från arketypen Flask-Appbuilder för att bygga vår förståelse för Flask Blueprints. Läs vår handledning om kolv, kolvmallar och vyer och kolv med databaser som MongoDB, SQLite och MySQL. Vi har använt ett exempelprojekt som heter flaskTutorialApp.

Du kan dock också skapa projektet från grunden med hjälp av kolven fab create-app-kommando. Det här kommandot skapar den ställning som krävs för ett Flask-projekt tillsammans med en applikationskatalog baserad på det applikationsnamn som du har gett.

=> Se Flaskträningsserien för alla

I den här handledningen förklarar vi om Flask App, Flask Blueprint och Flask Bootstrap. Vi utvecklar vår Flask-app inledningsvis med befintliga byggnadsställningar från Flask-Appbuilder. Vi skapar sedan en flaskritning som heter hello2. Slutligen kommer vi att beskriva Flask Docker-konceptet genom att docka vår Flask-app.

Vad du kommer att lära dig:

• Kolvapp
• Kolvritning
  • Skapa flaskritningsfiler och kataloger
  • Flask Blueprint Directory Structure
  • Skapa flaskritningsmall
  • Registrera en flaskritning med flaskapp
  • Exempel på applikation med modulär kolv med flaskritning
• Flask Bootstrap
• Flask Docker
  • Testar kolvritningen
  • Vanliga frågor
• Slutsats
  • Rekommenderad läsning

Kolvapp

Flask App är ett annat namn för en Flask Application. Om du märker koden skriven i __init__.py-filen kommer du att märka att en instans av Flask skapas och variabeln heter som app. Förekomsten av klassen Flask är Flask Application, som är förekomsten av WSGI-applikationen.

Kolvritning

Flask Blueprint låter oss hålla samman relaterade funktioner och hjälper till med bättre utvecklingsmetoder. Några av fördelarna med Flask Blueprints är följande:

1. Enkel organisering av storskaliga applikationer.
2. Ökar återanvändbarheten för koden genom att registrera samma Blueprint flera gånger.
3. En uppsättning operationer spelas in och kan därefter spelas om efter att ha registrerat en ritning.

Med ovanstående bakgrund på Flask Blueprint kan vi gå vidare och designa vår första Blueprint. Vi kan också tänka på Blueprint som en modul. Låt oss skapa en HelloWorld-ritning.

Alla komponenter, resurser och funktioner i en ritning hålls och organiseras separat från Flask-applikationens andra källkod. Det betyder att en flaskritning kan ha sina vyer, former, modeller, statiska filer och mallar.

Du kan skapa flera ritningar från samma uppsättning resurser. Men det är sannolikt att det skapar förvirring och är inte en bra praxis.

Skapa flaskritningsfiler och kataloger

Låt oss börja skapa en flaskritning med namnet hello2. Använd det nedan angivna skriptet för att skapa katalogstrukturen efter att du har aktiverat din virtuella miljö genom att använda källan venv / bin / aktivera efter att ha gått till applikationskatalogen.

Vi vill att vår hello2 Blueprint ska ha sina åsikter som vi kommer att importera i dess __init__.py. Vi skapar en separat katalog för vår ritning med mallar och statiska kataloger för att återge flaskvyer och betjäna statiska resurser.

Flask Blueprint Directory Structure

Katalogstrukturen för Blueprint ska se ut som visas nedan. Använd trädkommandot för att skapa en liknande utdata.

Låt oss nu definiera en enkel vy inuti views.py. Öppna hello2 / views.py och ange nedanstående kodavsnitt.

Vi importerar Blueprint-klassen och render_template-metoden. Sedan skapar vi ett Blueprint-objekt genom att ge namnen på mallen och statiska kataloger.

Sedan definierar vi en rutt med hjälp av dekoratören @ hello2.route och en styrenhet med namnet hello2_view. Denna styrenhet är en Python-funktion. I den här funktionen tilldelar vi ett värde till en variabel som kallas hälsning och skickar det sedan till render_template-metoden.

Skapa flaskritningsmall

Nu ska vi skapa mallen hello.html. Om du har läst våra tidigare självstudier måste du ha märkt att mallen har samma namn som vi skapade för att göra HelloWorld-vyn. För denna hello2 Blueprint skapar vi en ny mall genom att utöka den tidigare.

Lägg också märke till att vi har använt en sökväg semantisk hello2 / hello.html när vi ringer render_template för att göra hälsningar i mallen. Detta mönster undviker konflikter mellan mallarna med samma namn.

Använd kodkodavsnittet nedan för att skapa hello.html och spara det under hello2 / templates / hello2 / path.

Den här mallen liknar nästan hello.html. Det ärver dock de flesta av sina HTML-delar från hello.html. Lägg märke till användningen av {% block hej%} och {% endblock%}. Blockera hej i hello2 / hello.html åsidosätter block hallo för basmallen hello.html.

Låt oss nu öppna __init__.py-filen för hello2 Blueprint och nämna koden nedan i den.

I detta uttalande importerar vi alla dekorerade metoder som vi har skapat i views.py av hello2 Blueprint. Om det behövs kan vi bara importera de metoder / kontroller som är redo att användas eller testas.

Registrera en flaskritning med flaskapp

Låt oss nu öppna __init__.py under Flask-applikationskatalogen och registrera vår hello2 Blueprint som visas i nedanstående kod.

Observera också här att vi selektivt kan importera vyer och bara registrera de som är redo för användning eller testning.

C ++ - kodningsintervjufrågor

Låt oss köra vår Flask-app i felsökningsläge med kommandot python run.py från projektets rotkatalog och navigera till http: // localhost: 8080 / hello2 för att se om vyn på hello2 fungerar bra.

Resultatet i webbläsaren ska likna exemplet som visas nedan.

Låt oss arbeta med en bättre presentation av hello2-ritningen med hjälp av Twitters bootstrap-ramverk. Dessutom kommer du i nästa avsnitt att lära dig mer om de valfria parametrarna för att ändra beteendet hos en flaskritning. Låt oss se det med hjälp av ett exempel på en flaskritning som heter Flask Bootstrap.

Exempel på applikation med modulär kolv med flaskritning

Baserat på vårt lärande av hello2 Flask Blueprint, låt oss lägga till några fler ritningar för att förstå hur vi kan skapa modulära applikationer i Flask.

Låt oss anta att vi har en webbapplikation som serverar innehåll till besökare i form av e-böcker, handledning och kurser. Det har också lite ytterligare innehåll om information om laget och en hemsida.

Om vi ​​försöker tillgodose dessa nya funktioner i den befintliga applikationen måste vi skapa vyer i views.py och motsvarande mallar under applikationsmallkatalogen. På samma sätt måste vi skapa modeller och formulär i models.py och forms.py.

Att behålla all applikationskod blir dock besvärlig och samarbete med de andra gruppmedlemmarna kommer att vara för komplicerat och kan leda till konflikter eller komplicerat utvecklingsarbetsflöde.

För närvarande, i detta konventionella tillvägagångssätt, är applikationsstrukturen enligt nedan.

För att undvika ett sådant scenario kan vi använda Flask Blueprints för att skapa moduler specifika för funktionerna och respektive innehåll. Låt oss skapa några flaskritningar med sina separata resurser.

Var och en av Flask Blueprint-layouterna kommer att likna den som visas nedan.

Använd skriptet nedan för att skapa de filer och kataloger som krävs för de planerade flaskritningarna. Kör detta skript från projektets rotkatalog.

Låt oss först skapa funktioner för hemmodulen.

Öppna views.py under hemkatalogen och uppdatera den med koden nedan.

I den här filen har vi importerat Flask's Blueprint-klass och startat den med de nödvändiga parametrarna med separata mallar och en statisk mapp. Sedan använder vi @home-dekoration för att deklarera den tillhörande vägen för visningsmetoden som kallas index.

Skapa nu en base.html Jinja2-mall under appens mallkatalog. Använd koden nedan för att uppdatera filen.

Vi har utökat från Bootstraps base.html. Lägg märke till användningen av div för klassbehållaren och hjältenheten. Dessutom har vi skapat en knapp för användarna att lära sig mer. Vi modifierade denna HTML och använde klasser från Twitters Bootstrap-ramverk.

Uppdatera nu sidan i webbläsaren på http: // localhost: 8080 / hello2.html för att se det ändrade utseendet på hello2.html.

Vyn på Ändrad Hello2 kommer att likna den som visas nedan.

Användningen av Flask-Bootstrap är helt beroende av de block som är tillgängliga för åsidosättande eller modifiering. Vi kan använda nedanstående block för att anpassa upplevelsen. En detaljerad lista över alla möjliga block kan ses på https://pythonhosted.org/Flask-Bootstrap/basic-usage.html.

Ibland när vi bara vill ändra ett block istället för att helt ersätta det kan vi använda Jinja2s super () -funktion för att uppnå resultaten.

bästa gratis reservprogramvara för Windows 7

Skapa en fil som heter hello2.css under hello2 / static och placera nedanstående kodavsnitt för att utforma styckets färg i hello2 / hello.html.

Ta kodavsnittet som visas nedan och placera det i hello2 / hello.html.

Öppna nu views.py av Flask Blueprint hello2 och ändra blueprint-uttalandet enligt nedan.

Navigera till Flask Blueprints registrerade URL, dvs. http: // localhost: 8080 / hello2 igen. Resultatet på grund av de ändringar som gjorts hittills bör se ut som visas nedan.

Flask Docker

Docker hjälper till att behålla en applikation. Det isolerar den miljö som Flask-applikationen behöver på ett sätt som inte kräver krav på fullständiga virtualiserade miljöer som virtuella maskiner.

Dessutom har dockercontainrar ett minimalt fotavtryck och är bekvämare att hantera och skala med hjälp av en orkestrationsplattform. Dessa dagar, när alla andra applikationer också har containeriserad distribution, måste vi också lära oss att distribuera vår exempelapplikation som en dockercontainer.

En Linux-baserad behållare kan köras på Windows och en MAC. En dockad Flask-app kan således distribueras i alla operativsystem oavsett vilket operativsystem den byggdes i.

I det här avsnittet kommer vi att förklara stegen för dockning av en Flask-app. Vi kommer att docka projektet så att det kan distribueras i en container med alla beroenden förpackade i det.

Först, installera Docker på din maskin.

sudo apt-get install docker.io

När installationen är klar går du in i vårt exempelprojekts rotkatalog och skapar en Dockerfile.

Skriv koden nedan i den Dockerfilen.

Uppdatera config.py-filen och ändra databasen till SQLite, som visas nedan.

Dessutom, om det här är första gången du arbetar med SQLite i den här handledningsserien, skapar du administratörsanvändaren med hjälp av kolven fab create-admin kommando.

Kontrollera om administratörsanvändaren kan logga in på applikationen.

Bygg nu dockerbilden i vårt exempelprogram med hjälp av kommandot nedan.

Det här kommandot tar lite tid eftersom det laddar ner resurser från dockerhubben. När detta kommando är klart, kontrollera att bilderna har dykt upp med hjälp av kommandot nedan.

Kör nu den nyligen skapade Docker-avbildningen.

Konsolen visar loggmeddelandena för utvecklingsservern.

Installation av Docker resulterar i skapandet av ett virtuellt nätverkskort med namnet docker0. Hitta IP-adressen med sudo ifconfig-kommandot. När du har fått IP-adressen till Docker kan du komma åt applikationen genom att navigera till nedanstående URL.

http: //: 5001

När du väl är säker på utvecklingen av applikationen kan du distribuera din Docker-avbildning till Docker Hub så att de andra kan ladda ner och använda.

Testar kolvritningen

Låt oss nu skapa några tester för att testa Blueprint hello2. Låt oss se om vår exempelapp returnerar rätt HTTP-kod när klienten skickar en Get-begäran om resurser vid / hello2-slutpunkt eller inte. Om du kommer ihåg registrerade vi vår Flask Blueprint hello2 med en url_prefix med värdet som / hello2.

Skapa en fil som heter test_blueprint.py under test och lägg till följande test i den.

HTTP 308 avser Permanent Redirect, och det förväntas att vår Flask-app behöver omdirigera begäran till de resurser som är relaterade till Blueprint kallas hello2.

Låt oss nu lägga till ytterligare ett test för att kontrollera rotvägen för resurserna i vår Blueprint. Låt oss lägga till ett test för att se om det har ett värde eller inte.

Låt oss nu köra dessa tester tillsammans med de andra testerna för att säkerställa att de klarar.

Du skulle se en liknande produktion av testresultaten, som visas nedan.

Genomför nu alla ändringar i repo och publicera dessa ändringar i fjärrförvaret på Github. Jämför skillnaderna med koden med huvudgrenens och skapa en pull-begäran om det inte finns några konflikter.

Pull-begäran åberopar de byggjobb som ingår i vårt Github-arbetsflöde. Om alla kontroller för dragbegäranden från tutorial-4 inte misslyckas kan vi säkert slå samman den här grenen med mastern.

Vanliga frågor

F # 1) Vad är Flask BluePrint?

Svar: Flask Blueprint är ett sätt att strukturera en Flask Application i mindre och återanvändbara moduler. En Flask Blueprint har sina separata resurser som vyer, mallar, statiska filer, modeller, formulär etc. Vi använder Flask Blueprint-metoden för att skapa lättskötta och skalbara flaskapplikationer.

F # 2) Hur använder du Flask Blueprint?

Svar: För att använda Flask Blueprint måste vi importera den och registrera den med Flask Application-objektet med hjälp av metoden app.register_blueprint. Vi kan skicka ett värde till url_prifix-parametern för att förbereda en sökväg till flaskens ritning.

Slutsats

I denna handledning förklarade vi Flask Blueprints tillsammans med begrepp för att skapa statiska resurser för en Flask-app. Vi undersökte fördelarna med att använda Flask Blueprint tillsammans med tankarna på blueprint-resurser med hjälp av ett Flask-plugin som heter Flask-Bootstrap.

Vi täckte också koncepten för att skapa Docker-avbildningen i exempelprogrammet Flask tutorial. Dessutom skapade vi också två tester för att validera flaskritningarna.

I vår nästa handledning kommer vi att täcka de vanligt följda mönstren medan vi bygger funktioner i webbapplikationerna med Flask.

=> Besök här för att lära dig kolv från repor

Rekommenderad läsning

• Flask API-handledning med exempel | Utöka flaskan med API: er
• Topp 31 populära Python Flask-intervjufrågor med svar
• Django Vs Flask Vs Node: Vilket ramverk ska man välja
• Flaskdesignmönster och bästa metoder för webbapplikationer
• (Topp 10) Bästa apputvecklingsprogramvaruplattformar från 2021
• Topp 51 Bootstrap intervjufrågor och svar