Flask Statische Dateien

Jede vollständige Webanwendung ist auf statische Ressourcen wie CSS, JavaScript und Bilder angewiesen.

Dieses Kapitel führt ein, wie Flask statische Dateien verwaltet und bereitstellt.

Standardkonvention für statische Dateien

Standardmäßig nutzt Flask im Anwendungsverzeichnis denstatic/Ordner, um statische Dateien bereitzustellen.

Sie müssen nur diesen Ordner erstellen und statische Ressourcen darin ablegen:

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

Verweisen auf statische Dateien in Templates

Pfade nicht fest codieren; verwenden Sieurl_for('static', filename='...'), um die URL für statische Dateien zu generieren.

Der Vorteil ist, dass sich die URL ebenfalls automatisch anpasst, selbst wenn die Anwendung später unter einem Unterpfad (z. B./myapp) eingebunden wird.

Beispiel

<!-- Dateipfad: templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BEISPIEL Flask-Tutorial</title>
    <!-- CSS-Datei referenzieren -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

    <!-- Website-Symbol Favicon -->
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>
    <!-- Referenzbild -->
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="BEISPIEL Logo" width="200">

    <h1>Willkommen bei EXAMPLE</h1>
    <p>Dies ist eine mit Flask erstellte Webanwendung.</p>

    <!-- Referenz auf JavaScript-Datei -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

Benutzerdefinierter Pfad für statische Dateien

Wenn Sie nicht den Standardstatic/-Ordner verwenden möchten, kann der Ordner beim Erstellen der Flask-Anwendung angepasst werden:

Beispiel

from flask import Flask

# static_folder: Ordnerpfad auf dem Server
# static_url_path: Zugriffspfad in der URL
app = Flask(__name__,
           static_folder="public",        # Statische Dateien werden im Verzeichnis public/ abgelegt
           static_url_path="/assets")     # Zugriff über den Pfad /assets
# Der Zugriff auf /assets/css/style.css entspricht nun der Datei public/css/style.css
Parameter Standardwert Beschreibung
static_folder "static" lokaler Ordner zum Speichern statischer Dateien
static_url_path None (verwendet den Namen von static_folder) Das öffentliche URL-Präfix für statische Dateien.

CSS-Datei-Beispiel

Erstellen Sie ein einfaches Stylesheet, damit die Seite professioneller aussieht:

Beispiel

/* Dateipfad: 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;
}

Besuchen Siehttp://127.0.0.1:5000/, der Effekt ist wie folgt:

Unterschiede zwischen Entwicklungs- und Produktionsumgebungen

Die integrierte Bereitstellung statischer Dateien von Flask eignet sich nur fürEntwicklungsumgebung。

In Produktionsumgebungen sollten professionelle Webserver wie Nginx und Apache statische Dateien direkt verarbeiten, was weitaus effizienter ist, als sie über Python-Code bereitzustellen.

Ausführliche Inhalte zur Produktionsbereitstellung werden in späteren Kapiteln vorgestellt.

Weitere Erweiterungen