Fichiers statiques Flask

Toute application web complète repose sur des ressources statiques telles que CSS, JavaScript et images.

Ce chapitre présente comment Flask gère et sert les fichiers statiques.

Convention par défaut des fichiers statiques

Par défaut, Flask sert les fichiers statiques depuis le dossierstatic/du répertoire de l'application.

Il vous suffit de créer ce dossier et d'y placer les ressources statiques :

myflaskapp/
├── app.py
├── templates/
│   └── index.html
└── static/
    ├── css/
    │   └── style.css          # 样式文件
    ├── js/
    │   └── main.js            # JavaScript 文件
    └── images/
        └── logo.png           # 图片文件

Référencer les fichiers statiques dans les modèles

Ne codez pas les chemins en dur ; utilisezurl_for('static', filename='...')pour générer l'URL des fichiers statiques.

L'avantage est que même si l'application est ensuite montée sur un sous-chemin (par ex.,/myapp), l'URL s'ajustera également automatiquement.

Exemple

<!-- Chemin du fichier : templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EXEMPLE Tutoriel Flask</title>
    <!-- Référence du fichier CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

    <!-- Icône de site favicon -->
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>
    <!-- Image de référence -->
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo d'exemple" width="200">

    <h1>Bienvenue sur EXAMPLE</h1>
    <p>Ceci est une application web construite avec Flask.</p>

    <!-- Fichier JavaScript de référence -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

Chemin personnalisé des fichiers statiques

Si vous ne voulez pas utiliser le dossierstatic/par défaut, il peut être personnalisé lors de la création de l'application Flask :

Exemple

from flask import Flask

# static_folder: chemin du dossier sur le serveur
# static_url_path: chemin d'accès dans l'URL
app = Flask(__name__,
           static_folder="public",        # Les fichiers statiques sont placés dans le répertoire public/
           static_url_path="/assets")     # Accessible via le chemin /assets
# Maintenant, accéder à /assets/css/style.css correspond au fichier public/css/style.css
Paramètre Valeur par défaut Description
static_folder "static" dossier local pour stocker les fichiers statiques
static_url_path None (utilise le nom de static_folder) Le préfixe d'URL public pour les fichiers statiques.

Exemple de fichier CSS

Créez une feuille de style de base pour rendre la page plus professionnelle :

Exemple

/* Chemin du fichier : static/css/style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    color: #333;
}

h1 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

nav {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

nav a {
    color: #3498db;
    text-decoration: none;
    margin-right: 15px;
}

footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 14px;
}

Visitezhttp://127.0.0.1:5000/, l'effet est le suivant :

Différences entre les environnements de développement et de production

Le service de fichiers statiques intégré de Flask ne convient qu'àl'environnement de développement。

Dans les environnements de production, des serveurs web professionnels tels que Nginx et Apache doivent gérer directement les fichiers statiques, ce qui est bien plus efficace que de les servir via du code Python.

Le contenu détaillé sur le déploiement en production sera présenté dans les chapitres suivants.

autres extensions