Flask
File statici
Ricerca…
Utilizzo di file statici
Le applicazioni Web richiedono spesso file statici come file CSS o JavaScript. Per utilizzare i file statici in un'applicazione Flask, creare una cartella denominata static nel pacchetto o accanto al modulo e sarà disponibile in /static sull'applicazione.
Una struttura di esempio di progetto per l'utilizzo di modelli è la seguente:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py è un esempio di base di Flask con il rendering del modello.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
Per utilizzare il file CSS statico e JavaScript nel modello index.html, è necessario utilizzare il nome di endpoint "statico" speciale:
{{url_for('static', filename = 'style.css')}}
Quindi, index.html può contenere:
<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>
Dopo aver eseguito app.py vedremo la pagina Web in http: // localhost: 5000 / .
File statici in produzione (offerti dal server Web frontend)
Il webserver integrato di Flask è in grado di servire asset statici, e questo funziona bene per lo sviluppo. Tuttavia, per le distribuzioni di produzione che utilizzano qualcosa come uWSGI o Gunicorn per servire l'applicazione Flask, l'attività di servire i file statici è solitamente scaricata sul server Web frontend (Nginx, Apache, ecc.). Questo è un compito piccolo / facile con le app più piccole, specialmente quando tutte le risorse statiche si trovano in una cartella; tuttavia, per le app più grandi e / o quelle che utilizzano i plug-in di Flask che forniscono risorse statiche, può diventare difficile ricordare le posizioni di tutti questi file e copiarli / raccoglierli manualmente in una directory. Questo documento mostra come utilizzare il plugin Flask-Collect per semplificare tale compito.
Si noti che l'obiettivo di questa documentazione è sulla raccolta di asset statici. Per illustrare questa funzionalità, in questo esempio viene utilizzato il plug-in Flask-Bootstrap, che fornisce risorse statiche. Utilizza anche il plug-in Flask-Script, che viene utilizzato per semplificare il processo di creazione di attività da riga di comando. Nessuno di questi plugin è fondamentale per questo documento, sono solo in uso qui per dimostrare la funzionalità. Se si sceglie di non utilizzare Flask-Script, è necessario rivedere i documenti Flask-Collect in modi alternativi per chiamare il comando collect .
Nota anche che la configurazione del tuo server web frontend per servire queste risorse statiche è al di fuori dello scopo di questo documento, ti consigliamo di controllare alcuni esempi usando Nginx e Apache per maggiori informazioni. Basti dire che sarete aliasing degli URL che iniziano con "/ static" nella directory centralizzata che Flask-Collect creerà per voi in questo esempio.
L'app è strutturata come segue:
/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
Innanzitutto, crea il tuo ambiente virtuale e installa i pacchetti richiesti: (your-virtualenv) $ pip installa flask-script flask-bootstrap flask-collect
Stabilire la struttura del file descritta sopra:
$ touch manage.py; mkdir -p app / {static / {css, js}, templates}; touch app / { init .py, static / {css / styles.css, js / main.js}}
Stabilisci i contenuti per i file
manage.py,app/__init__.pyeapp/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 %}
- Con questi file, puoi ora utilizzare lo script di gestione per eseguire l'app:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- Ora, per raccogliere le risorse statiche per la prima volta. Prima di fare ciò, vale la pena di notare che NON dovresti avere una cartella
static/nel livello principale della tua app; è qui che Flask-Collect posizionerà tutti i file statici che raccoglierà dalla tua app e dai vari plug-in che potresti utilizzare. Se si dispone di unastatic/cartella nel livello superiore della vostra app, è necessario cancellarlo del tutto prima di procedere, come punto di partenza con una lavagna pulita è una parte fondamentale della testimonianza / capire che cosa fa Flask-Collect. Nota che questa istruzione non è applicabile per l'uso quotidiano, ma è semplicemente per illustrare il fatto che Flask-Collect creerà questa directory per te, quindi inserirà un gruppo di file.
Detto ciò, è possibile eseguire il seguente comando per raccogliere le risorse statiche:
$ ./manage.py collect
Dopo aver fatto ciò, dovresti vedere che Flask-Collect ha creato questa cartella static/ primo livello e contiene i seguenti file:
$ 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
E questo è tutto: usa il comando collect ogni volta che apporti modifiche al CSS o JavaScript della tua app, o quando hai aggiornato un plugin Flask che fornisce risorse statiche (come Flask-Bootstrap in questo esempio).