Flask
Pliki statyczne
Szukaj…
Korzystanie z plików statycznych
Aplikacje internetowe często wymagają plików statycznych, takich jak pliki CSS lub JavaScript. Aby użyć plików statycznych w aplikacji Flask, utwórz folder o nazwie static w pakiecie lub obok modułu, który będzie dostępny w /static w aplikacji.
Przykładowa struktura projektu dla używania szablonów jest następująca:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py jest podstawowym przykładem kolby z renderowaniem szablonu.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
Aby użyć statycznego pliku CSS i JavaScript w szablonie index.html, musimy użyć specjalnej „statycznej” nazwy punktu końcowego:
{{url_for('static', filename = 'style.css')}}
Zatem index.html może zawierać:
<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>
Po uruchomieniu app.py zobaczymy stronę w http: // localhost: 5000 / .
Pliki statyczne w produkcji (obsługiwane przez serwer frontendowy)
Wbudowany serwer internetowy Flask jest w stanie obsługiwać zasoby statyczne, co działa dobrze w przypadku programowania. Jednak w przypadku wdrożeń produkcyjnych, które używają czegoś takiego jak uWSGI lub Gunicorn do obsługi aplikacji Flask, zadaniem udostępniania plików statycznych jest zwykle odciążenie serwera frontendowego (Nginx, Apache itp.). Jest to małe / łatwe zadanie z mniejszymi aplikacjami, zwłaszcza gdy wszystkie zasoby statyczne znajdują się w jednym folderze; w przypadku większych aplikacji i / lub korzystających z wtyczek Flask, które zapewniają zasoby statyczne, może być trudno zapamiętać lokalizację wszystkich tych plików i ręcznie skopiować / zebrać je w jednym katalogu. Ten dokument pokazuje, jak korzystać z wtyczki Flask-Collect, aby uprościć to zadanie.
Należy zauważyć, że dokumentacja koncentruje się na gromadzeniu zasobów statycznych. Aby zilustrować tę funkcjonalność, w tym przykładzie użyto wtyczki Flask-Bootstrap, która zapewnia zasoby statyczne. Wykorzystuje również wtyczkę Flask-Script, która służy do uproszczenia procesu tworzenia zadań z wiersza poleceń. Żadna z tych wtyczek nie ma krytycznego znaczenia dla tego dokumentu, są one tutaj używane tylko do zademonstrowania funkcjonalności. Jeśli nie zdecydujesz się na użycie skrzynkowego Script, będziemy chcieli, aby przejrzeć Kolba Collect dokumenty dotyczące alternatywnych sposobów wywoływania collect polecenia .
Zauważ też, że konfiguracja twojego serwera frontendowego do obsługi tych statycznych zasobów jest poza zakresem tego dokumentu, powinieneś sprawdzić kilka przykładów przy użyciu Nginx i Apache, aby uzyskać więcej informacji. Wystarczy powiedzieć, że będziesz aliasingował adresy URL zaczynające się od „/ static” do scentralizowanego katalogu, który Flask-Collect utworzy dla Ciebie w tym przykładzie.
Struktura aplikacji jest następująca:
/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
Najpierw utwórz środowisko wirtualne i zainstaluj wymagane pakiety: (your-virtualenv) $ pip install flask flask-script flask-bootstrap flask-collect
Ustal strukturę pliku opisaną powyżej:
$ touch manage.py; mkdir -p app / {static / {css, js}, templates}; dotknij aplikacji / { init .py, static / {css / styles.css, js / main.js}}
Ustal zawartość plików
manage.py,app/__init__.pyiapp/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 %}
- Po zainstalowaniu tych plików możesz teraz użyć skryptu zarządzania do uruchomienia aplikacji:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- Teraz po raz pierwszy zbierz zasoby statyczne. Zanim to zrobisz, warto zauważyć, że NIE powinieneś mieć folderu
static/na najwyższym poziomie aplikacji; w tym miejscu Flask-Collect umieści wszystkie pliki statyczne, które będzie zbierał z Twojej aplikacji i różnych wtyczek, których możesz używać. Jeśli nie maszstatic/folder na poziomie górnej części aplikacji, należy usunąć go całkowicie przed przystąpieniem, jak wychodząc z czystym kontem jest krytyczną częścią dawania świadectwa / rozumiejąc co Kolba Collect robi. Zauważ, że ta instrukcja nie ma zastosowania do codziennego użytku, to po prostu zilustrować fakt, że Flask-Collect stworzy dla ciebie ten katalog, a następnie umieści tam kilka plików.
Powiedziawszy to, możesz uruchomić następujące polecenie, aby zebrać zasoby statyczne:
$ ./manage.py collect
Po wykonaniu tej czynności powinieneś zobaczyć, że Flask-Collect utworzył ten folder static/ najwyższego poziomu i zawiera następujące pliki:
$ 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
I to: użyć collect polecenia kiedykolwiek wprowadzić zmiany do swojej aplikacji CSS lub JavaScript, lub po zaktualizowaniu wtyczki kolbie, zapewnia środki trwałe (jak statyczne skrzynkowego Bootstrap w tym przykładzie).