LabEx
EntrerRejoindre

Démarrage avec le framework web Flask

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Ce laboratoire vous guidera tout au long du processus d'installation de Flask, un cadre web léger pour Python. Vous allez apprendre à créer une application Flask de base, à l'exécuter localement et à comprendre les concepts de base de routage et de rendu de modèles.

Note: Vous devez créer le fichier de code vous-même et l'exécuter dans l'environnement. Vous pouvez prévisualiser l'état du service Flask sur Web 5000.

Configuration de Flask

Pour commencer avec Flask, vous devez l'installer et configurer un nouveau projet. Suivez les instructions ci-dessous :

  1. Installez Flask en exécutant la commande suivante dans votre terminal ou invite de commandes :

    pip install flask

  2. Ouvrez un nouveau fichier et enregistrez-le sous le nom app.py.

    cd ~/projet
touch app.py

  3. Importez le module Flask et créez une instance de la classe Flask :

    from flask import Flask

app = Flask(__name__)

Création d'une route de base

Les routes dans Flask définissent les modèles d'URL pour votre application. Créons une route de base qui affiche un message "Bonjour, le monde!".

  1. Ajoutez le code suivant à votre fichier app.py :

    @app.route("/")
def hello_world():
    return "Hello, World!"

  2. Enregistrez le fichier.

Exécution de l'application

Maintenant que vous avez configuré votre application Flask et créé une route de base, exécutons l'application et voyons-la en action.

  1. Dans votre terminal ou invite de commandes, accédez au répertoire où se trouve votre fichier app.py.

  2. Exécutez la commande suivante pour démarrer le serveur de développement Flask :

    flask run --host=0.0.0.0

--host=0.0.0.0 est utilisé pour rendre l'application accessible publiquement. Si vous ne spécifiez pas cela, l'application ne sera disponible que sur votre machine locale.

Ensuite, basculez vers l'onglet Web 5000 et rafraîchissez la page.

Ajout de modèles HTML

Flask utilise des modèles Jinja2 pour générer du contenu HTML. Créons un fichier de modèle et le rendons dans notre route.

  1. Créez un nouveau répertoire dans votre projet appelé templates.

  2. Dans le répertoire templates, créez un nouveau fichier appelé index.html.

  3. Ouvrez le fichier index.html et ajoutez le code HTML suivant :

    <!doctype html>
<html>
  <head>
    <title>Flask Quickstart</title>
  </head>
  <body>
    <h1>Bonjour, Flask!</h1>
  </body>
</html>

  4. Modifiez votre fichier app.py pour rendre le modèle index.html :

    from flask import render_template

@app.route("/")
def hello_world():
    return render_template("index.html")

Exécution de l'application à nouveau

Maintenant que nous avons ajouté un modèle HTML, exécutons à nouveau l'application et voyons le modèle rendu.

  1. Arrêtez le serveur de développement Flask s'il est toujours en cours d'exécution (appuyez sur Ctrl+C).

  2. Exécutez la commande suivante pour redémarrer le serveur :

    flask run --host=0.0.0.0

Vous devriez maintenant voir le message "Bonjour, Flask!" affiché dans le modèle HTML.

Hello, Flask!

Ajout de contenu dynamique

Flask nous permet de passer du contenu dynamique à nos modèles. Modifions notre route pour passer un paramètre de nom et afficher un message de bienvenue personnalisé.

  1. Modifiez votre fichier app.py pour accepter un paramètre de nom dans la route :

    @app.route("/<name>")
def hello(name):
    return render_template("index.html", name=name)

  2. Ouvrez le fichier index.html et modifiez la balise <h1> pour afficher le message de bienvenue personnalisé :

    <h1>Bonjour, {{ name }}!</h1>

Exécution de l'application à nouveau

Exécutons à nouveau l'application et testons la fonctionnalité de contenu dynamique.

  1. Arrêtez le serveur de développement Flask s'il est toujours en cours d'exécution (appuyez sur Ctrl+C).

  2. Exécutez la commande suivante pour redémarrer le serveur :

    flask run --host=0.0.0.0

  3. Copiez l'URL de l'onglet Web 5000 et collez-la dans un nouvel onglet de votre navigateur.

Copying Web 5000 URL

  1. Ajoutez /LabEx à la fin de l'URL et appuyez sur Entrée.

Hello LabEx webpage

  1. Changez la valeur du paramètre name dans l'URL et appuyez sur Entrée.

Sommaire

Dans ce laboratoire, vous avez appris à commencer avec Flask en configurant un nouveau projet, en créant des routes, en rendant des modèles et en passant du contenu dynamique. Flask est un outil puissant pour construire des applications web, et ce laboratoire fournit une base solide pour une exploration et un développement ultérieurs.