Flask est un cadre de développement Web. Avec Python, il existe deux modules que l'on peut utiliser pour le développement Web: Django et Flask. Cependant, Flask est plus léger et plus facile à apprendre. Dans ce tutoriel, nous construisons un site Web très simple en utilisant le module Flask de Python.

Pour commencer, installez Flask:

Pip Install Flask

Étape n ° 1: application Web minimale

L'application minimale peut être trouvée sur https: // flacon.paletsprojects.com / en / 2.0.x / QuickStart / # a-minimal-application. Ceci est une page Web qui affiche «Hello World». La première chose que nous avons faite a été de créer une instance de Flask () avec «__name__» comme argument. Le décorateur d'itinéraire est utilisé pour informer Flask l'url qui activera la fonction que nous avons écrite.

De Flask Import Flask
app = flacon (__ name__)
@app.itinéraire('/')
def index ():
Retour "Hello World"
Si "__name__" == "__main__":
appliquer.courir (debug = true)

Ensuite, dans le terminal de PyCharm, saisissez ce qui suit (où le nom de mon fichier Python est principal.py; Dans votre cas, remplacez principal.py avec le nom de fichier de votre python):

Définir FLASK_APP = Main.py
$ env: flask_app = "Main.py "
Flash Run

Une fois que vous exécutez «Flask Run», le terminal effacera une URL avec un port. Ce port URL: est où la page Web est chargée. Vous pouvez toujours appuyer sur Control + C pour arrêter. Dans mon cas, il dit: «Courir sur http: // 127.0.0.1: 5000 / (Appuyez sur Ctrl + C pour quitter) ». Alors, ouvrez votre navigateur Web et copiez et collez l'URL donnée. Dans mon cas, j'ai copié et collé «http: // 127.0.0.1: 5000 / ”. Veuillez également noter que les lignes précédentes doivent être exécutées chaque fois que vous redémarrez Pycharm pour qu'il fonctionne:

Étape # 2: Ajout de HTML

La première chose que vous devrez faire est d'ouvrir le dossier où se trouve le script Python et de créer un dossier appelé "modèles". Quand j'ai couru ceci, j'ai essayé de mettre le nom «modèle» comme nom de dossier, et l'ensemble du programme s'est écrasé et je n'ai pas fonctionné. Donc, il est impératif que vous appeliez le dossier "modèles". Dans ce dossier «Templates», créez un index.Fichier HTML avec votre code HTML. Ensuite, utilisez Render_Template () et passez «Index.html ”comme argument. Maintenant, si vous exécutez «Flask Run» dans le terminal, votre code HTML doit être rendu:

Mon Code HTML (index.html) Pour le moment, c'est le suivant:

CV de Kalyani
Cette page contiendra mon CV

Et, mon code de fichier Python (principal.py) est le suivant:

De Flask Import Flask, Render_Template
app = flacon (__ name__)
@app.itinéraire('/')
def index ():
return render_template ("index.html ")
Si "__name__" == "__main__":
appliquer.courir (debug = true)

Ce dernier rendra une page HTML simple.

Étape # 3: ajout de CSS

Maintenant, je veux ajouter CSS à mon HTML. Pour ce faire, créez un dossier appelé «statique» et créez un fichier appelé «Main.CSS ». Ici, le nom du fichier CSS réel peut être n'importe quoi. J'ai décidé d'appeler le mien «Main.CSS ». Cependant, le nom du dossier doit être «statique»! En fait, dans le dossier «statique», on peut placer tout ce qui est statique, comme le CSS, le javascript et les images. Donc, si vous allez mettre des images, JavaScript et CSS, vous souhaiterez peut-être créer.

Tout d'abord, écrivons le CSS (Main.css) je veux:

corps
marge: 0;
Couleur: # 333
Font-Family: Verdana;
taille de police: 20px;
Color en arrière-plan: RVB (201, 76, 76);

.Styled
Color d'arrière-plan: # 92A8D1;
Font-Family: Verdana;
taille de police: 20px;

Ici, dans l'index.html, nous devons écrire etlt; link rel = ”Stylesheet” type = ”text / css” href = ”url_for ('static', filename =" Main.css ")"> dans la tête du fichier html. Ici, le nom de fichier est le nom du fichier CSS (le mien est principal.CSS). Si par exemple le «principal.CSS »est situé avec un sous-dossier appelé« CSS », puis vous écrivriez ce qui suit:

.

Après cela, vous pouvez utiliser le CSS que vous avez créé. Par exemple, j'en ai créé un appelé «stylé» et je l'ai utilisé dans la classe H1.

Mon index.Le fichier HTML serait le suivant:

CV de Kalyani

Cette page contiendra mon CV

Alternativement, on peut également utiliser les éléments suivants:

.
[/ cce_python]
Dans ce cas, le code HTML ressemblerait à ceci:
[cc lang = "html" width = "100%" height = "100%" échappé = "true" theme = "Blackboard" nowrap = "0"]