Flask
Statische Dateien
Suche…
Statische Dateien verwenden
Für Webanwendungen werden häufig statische Dateien wie CSS- oder JavaScript-Dateien benötigt. Um statische Dateien in einer Flask-Anwendung zu verwenden, erstellen Sie einen Ordner mit dem Namen static in Ihrem Paket oder neben Ihrem Modul. Dieser steht unter /static in der Anwendung zur Verfügung.
Eine Beispielprojektstruktur für die Verwendung von Vorlagen lautet wie folgt:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py ist ein einfaches Beispiel für Flask mit Template-Rendering.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
Um die statische CSS- und JavaScript-Datei in der Vorlage index.html verwenden zu können, müssen wir den speziellen 'statischen' Endpunktnamen verwenden:
{{url_for('static', filename = 'style.css')}}
Index.html kann also Folgendes enthalten:
<html>
<head>
<title>Static File</title>
<link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename = 'script.js')}}"></script>
</head>
<body>
<h3>Hello World!</h3>
</body>
</html>
Nach dem Ausführen von app.py wird die Webseite in http: // localhost: 5000 / angezeigt.
Statische Dateien in der Produktion (vom Frontend-Webserver bereitgestellt)
Der integrierte Webserver von Flask kann statische Assets bereitstellen, und dies funktioniert gut für die Entwicklung. Bei Produktionsbereitstellungen, die die Flask-Anwendung mit etwas wie uWSGI oder Gunicorn bedienen, müssen statische Dateien jedoch normalerweise auf den Frontend-Webserver (Nginx, Apache usw.) übertragen werden. Dies ist eine kleine / einfache Aufgabe mit kleineren Apps, insbesondere wenn sich alle statischen Assets in einem Ordner befinden. Bei größeren Apps und / oder solchen, die Flask-Plug-Ins verwenden, die statische Assets bereitstellen, kann es schwierig werden, sich die Speicherorte all dieser Dateien zu merken und sie manuell in ein Verzeichnis zu kopieren / zu sammeln. Dieses Dokument zeigt, wie Sie das Flask-Collect-Plugin verwenden , um diese Aufgabe zu vereinfachen.
Beachten Sie, dass der Schwerpunkt dieser Dokumentation auf der Erfassung statischer Assets liegt. Zur Veranschaulichung dieser Funktionalität wird in diesem Beispiel das Flask-Bootstrap-Plugin verwendet, das statische Assets bereitstellt. Außerdem wird das Flask-Script-Plugin verwendet, mit dem das Erstellen von Befehlszeilenaufgaben vereinfacht wird. Keines dieser Plugins ist für dieses Dokument von entscheidender Bedeutung. Sie werden hier nur verwendet, um die Funktionalität zu demonstrieren. Wenn Sie keine Flask-Script zu verwenden, sollten Sie die Bewertung Flask-Collect - Dokumentation für alternative Möglichkeiten , die nennen collect Befehl .
Beachten Sie auch, dass die Konfiguration Ihres Frontend-Webservers für diese statischen Assets außerhalb des Geltungsbereichs dieses Dokuments liegt. In diesem Abschnitt finden Sie einige Beispiele für Nginx und Apache, um weitere Informationen zu erhalten. Es genügt zu sagen, dass Sie Alias-URLs verwenden, die mit "/ static" in das zentralisierte Verzeichnis beginnen, das Flask-Collect in diesem Beispiel für Sie erstellt.
Die App ist wie folgt aufgebaut:
/manage.py - The app management script, used to run the app, and to collect static assets
/app/ - this folder contains the files that are specific to our app
| - __init__.py - Contains the create_app function
| - static/ - this folder contains the static files for our app.
| css/styles.css - custom styles for our app (we will leave this file empty)
| js/main.js - custom js for our app (we will leave this file empty)
| - templates/index.html - a simple page that extends the Flask-Bootstrap template
Erstellen Sie zunächst Ihre virtuelle Umgebung und installieren Sie die erforderlichen Pakete: (your-virtualenv) $ pip install flask flask-script flask-bootstrap flask-collect
Legen Sie die oben beschriebene Dateistruktur fest:
$ touch manage.py; mkdir -p app / {statisch / {css, js}, Vorlagen}; Berühren Sie app / { init .py, static / {css / styles.css, js / main.js}}
manage.pyden Inhalt für diemanage.py,app/__init__.pyundapp/templates/index.html:
# manage.py
#!/usr/bin/env python
import os
from flask_script import Manager, Server
from flask import current_app
from flask_collect import Collect
from app import create_app
class Config(object):
# CRITICAL CONFIG VALUE: This tells Flask-Collect where to put our static files!
# Standard practice is to use a folder named "static" that resides in the top-level of the project directory.
# You are not bound to this location, however; you may use basically any directory that you wish.
COLLECT_STATIC_ROOT = os.path.dirname(__file__) + '/static'
COLLECT_STORAGE = 'flask_collect.storage.file'
app = create_app(Config)
manager = Manager(app)
manager.add_command('runserver', Server(host='127.0.0.1', port=5000))
collect = Collect()
collect.init_app(app)
@manager.command
def collect():
"""Collect static from blueprints. Workaround for issue: https://github.com/klen/Flask-Collect/issues/22"""
return current_app.extensions['collect'].collect()
if __name__ == "__main__":
manager.run()
# app/__init__.py
from flask import Flask, render_template
from flask_collect import Collect
from flask_bootstrap import Bootstrap
def create_app(config):
app = Flask(__name__)
app.config.from_object(config)
Bootstrap(app)
Collect(app)
@app.route('/')
def home():
return render_template('index.html')
return app
# app/templates/index.html
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}
{% block navbar %}
<div class="navbar navbar-fixed-top">
<!-- ... -->
</div>
{% endblock %}
{% block content %}
<h1>Hello, Bootstrap</h1>
{% endblock %}
- Mit diesen Dateien können Sie jetzt das Verwaltungsskript zum Ausführen der App verwenden:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- Jetzt sammeln Sie Ihre statischen Assets zum ersten Mal. Bevor Sie dies tun, sollten Sie noch einmal darauf hinweisen, dass Sie KEINEN
static/Ordnerstatic/Ordner auf der obersten Ebene Ihrer App haben sollten. Hier werden von Flask-Collect alle statischen Dateien abgelegt, die von Ihrer App und den verschiedenen Plugins, die Sie verwenden, erfasst werden. Wenn Sie einen tun habenstatic/in der obersten Ebene der App - Ordner, sollten Sie es vollständig , bevor Sie fortfahren löschen, wie mit einem sauberen Schiefer beginnt , ist ein wichtiger Teil der Bezeugung / zu verstehen , was Flask-Collect tut. Beachten Sie, dass diese Anweisung nicht für den täglichen Gebrauch geeignet ist. Sie soll lediglich veranschaulichen, dass Flask-Collect dieses Verzeichnis für Sie erstellt, und dann eine Reihe von Dateien dort ablegt.
Mit diesem Befehl können Sie den folgenden Befehl ausführen, um Ihre statischen Assets zu sammeln:
$ ./manage.py collect
Danach sollten Sie sehen, dass Flask-Collect diesen Ordner static/ Ordner der obersten Ebene erstellt hat und die folgenden Dateien enthält:
$ find ./static -type f # execute this from the top-level directory of your app, same dir that contains the manage.py script
static/bootstrap/css/bootstrap-theme.css
static/bootstrap/css/bootstrap-theme.css.map
static/bootstrap/css/bootstrap-theme.min.css
static/bootstrap/css/bootstrap.css
static/bootstrap/css/bootstrap.css.map
static/bootstrap/css/bootstrap.min.css
static/bootstrap/fonts/glyphicons-halflings-regular.eot
static/bootstrap/fonts/glyphicons-halflings-regular.svg
static/bootstrap/fonts/glyphicons-halflings-regular.ttf
static/bootstrap/fonts/glyphicons-halflings-regular.woff
static/bootstrap/fonts/glyphicons-halflings-regular.woff2
static/bootstrap/jquery.js
static/bootstrap/jquery.min.js
static/bootstrap/jquery.min.map
static/bootstrap/js/bootstrap.js
static/bootstrap/js/bootstrap.min.js
static/bootstrap/js/npm.js
static/css/styles.css
static/js/main.js
Und das ist es: Verwenden Sie den collect Befehl, wenn Sie Änderungen an CSS oder JavaScript Ihrer App vornehmen oder wenn Sie ein Flask-Plugin aktualisiert haben, das statische Assets bereitstellt (wie in diesem Beispiel Flask-Bootstrap).