Övning – Skapa en app
Vi kommer att skapa vårt program iterativt och fokusera på specifika koncept allteftersom. Vi startar med att skapa landningssidan för vårt program. Den kommer att visa formuläret som användaren ska använda.
Normalt sett är ingångspunkten för Flask-program en fil med namnet app.py. Vi kommer att följa denna konvention och skapa kärnan i vårt program. Vi kommer att utföra följande steg:
- Skapa vårt kärnprogram
- Lägga till vägen för vårt program
- Skapa HTML-mallen för vår webbplats
- Testa programmet
Skapa kärnprogrammet
Tillbaka i den instans av Visual Studio Code som vi använde tidigare, skapar du en ny fil med namnet app.py genom att klicka på Ny fil på fliken Explorer
Viktigt!
Om den här övningen är den första gången du använder Visual Studio Code för att skapa ett Python-program får du meddelanden om att installera Python-tillägget och lintern pylint. Välj Installera för att installera vart och ett av dessa tillägg.
Lägg till koden för att skapa ett Flask-programmet
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
Import-instruktionen innehåller referenser till Flask, som ligger i kärnan av alla Flask-program. Vi kommer att använda render_template om ett tag, när vi vill returnera vår HTML.
app kommer att vara vårt kärnprogram. Vi kommer att använda det när vi registrerar våra vägar i nästa steg.
Lägg till vägen
Vårt program kommer att använda en väg – /. Den här vägen kallas ibland antingen standard- eller index-vägen, eftersom det är den som kommer att användas om användaren inte anger något utöver namnet på domänen eller servern.
Lägg till följande kod i slutet av app.py
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Genom att använda @app.route anger vi den väg vi vill skapa. Sökvägen kommer att vara /, vilket är standardvägen. Vi anger att detta kommer att användas för GET. Om en GET-begäran kommer in för /, anropar Flask automatiskt den deklarerade funktionen omedelbart under dekoratören, i vårt fall index. I brödtexten för index indikerar vi att vi returnerar en HTML-mall med namnet index.html till användaren.
Skapa HTML-mallen för vårt formulär
Jinja, mallanvändningsmotorn för Flask, fokuserar mycket på HTML. Därför kan vi använda alla befintliga HTML-kunskaper och verktyg som vi redan har. Vi kommer att använda Bootstrap för att designa vår sida och göra den lite snyggare. Med hjälp av Bootstrap använder vi olika CSS-klasser i vår HTML. Om du inte är bekant med Bootstrap kan du ignorera klasserna och fokusera på HTML-koden (som är den delen som är viktig).
Viktigt!
HTML (Hypertext Markup Language) är ett standardpåläggsspråk som används för att skapa webbsidor. HTML består av en serie taggar och attribut för att skapa rubriker, stycken, listor, bilder, länkar och andra element som utgör en webbsida. När en användare begär en webbsida läser webbläsaren HTML-koden och renderar den som en visuell webbsida som användaren kan interagera med. Mer information om HTML finns i GRUNDerna för HTML.
Mallar för Flask måste skapas i en mapp med namnet templates, vilket passar bra. Nu ska vi skapa mappen, den nödvändiga filen och lägga till HTML-koden.
Skapa en ny mapp med namnet templates genom att välja Ny mapp i Explorer-verktyget i Visual Studio Code
Välj mappen templates som du skapade och välj Ny fil för att lägga till en fil i mappen
Kalla filen för index.html
Lägg sedan till följande HTML-kod
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
Kärnkomponenterna i HTML-koden ovan är textarea för den text som användaren vill översätta, och listmenyn (select) som användaren använder för att ange målspråk. Om du vill lägga till fler språk kan du se listan över språk som stöds för andra alternativ. Ange attributet value till språkkoden, till exempel pl for polska.
Testa programmet
Nu när vår inledande webbplats har skapats är det dags att testa den! Vi kommer att använda den integrerade terminalen i Visual Studio Code för att göra livet lite enklare.
Öppna den integrerade terminalen genom att välja Ctrl-' eller Cmd-' på en Mac
Kör följande kommando för att ställa in Flask-programmet till utveckling, vilket innebär att servern automatiskt läses in på nytt vid varje ändring
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentKör programmet!
flask runÖppna programmet i en webbläsare genom att gå till http://localhost:5000
Du borde nu se formuläret! Gratulerar!