Flask
Статические файлы
Поиск…
Использование статических файлов
Веб-приложениям часто требуются статические файлы, такие как файлы CSS или JavaScript. Чтобы использовать статические файлы в приложении Flask, создайте папку с именем static в вашем пакете или рядом с вашим модулем, и она будет доступна в /static в приложении.
Пример структуры проекта для использования шаблонов выглядит следующим образом:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py - это базовый пример Flask с визуализацией шаблона.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
Чтобы использовать статический файл CSS и JavaScript в шаблоне index.html, нам нужно использовать специальное «статическое» имя конечной точки:
{{url_for('static', filename = 'style.css')}}
Итак, index.html может содержать:
<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>
После запуска app.py мы увидим веб-страницу в http: // localhost: 5000 / .
Статические файлы в производстве (обслуживается веб-сервером frontend)
Встроенный веб-сервер Flask способен обслуживать статические активы, и это отлично работает для разработки. Тем не менее, для производственных развертываний, использующих что-то вроде uWSGI или Gunicorn для работы с флеш-приложением, задача обслуживания статических файлов - это та, которая обычно выгружается на внешний веб-сервер (Nginx, Apache и т. Д.). Это небольшая / простая задача с меньшими приложениями, особенно когда все статические активы находятся в одной папке; для более крупных приложений и / или тех, которые используют плагины Flask, которые предоставляют статические активы, тогда становится трудно запомнить места всех этих файлов и вручную копировать / собирать их в один каталог. В этом документе показано, как использовать плагин Flask-Collect для упрощения этой задачи.
Обратите внимание, что основное внимание в этой документации уделяется сбору статических активов. Чтобы проиллюстрировать эту функциональность, в этом примере используется плагин Flask-Bootstrap, который представляет собой статические активы. Он также использует плагин Flask-Script, который используется для упрощения процесса создания задач командной строки. Ни один из этих плагинов не критичен для этого документа, они просто используются здесь для демонстрации функциональности. Если вы решите не использовать Flask-Script, вам нужно будет просмотреть документы Flask-Collect для альтернативных способов вызова команды collect .
Также обратите внимание, что конфигурация вашего внешнего веб-сервера для обслуживания этих статических активов выходит за рамки этого документа, вы хотите узнать некоторые примеры, используя Nginx и Apache для получения дополнительной информации. Достаточно сказать, что вы будете использовать псевдонимы, которые начинаются с «/ static» в централизованный каталог, который Flask-Collect создаст для вас в этом примере.
Приложение структурировано следующим образом:
/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
Во-первых, создайте свою виртуальную среду и установите необходимые пакеты: (ваш-virtualenv) $ pip install flask-flask-script flask-bootstrap flask-collect
Установите файловую структуру, описанную выше:
$ touch manage.py; mkdir -p app / {static / {css, js}, шаблоны}; touch app / { init .py, static / {css / styles.css, js / main.js}}
Установите содержимое файлов
manage.py,app/__init__.pyиapp/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 %}
- С помощью этих файлов вы можете использовать сценарий управления для запуска приложения:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- Теперь, чтобы собрать ваши статические активы в первый раз. Прежде чем это сделать, стоит еще раз отметить, что у вас НЕ должно быть
static/папка на верхнем уровне вашего приложения; здесь Flask-Collect собирается разместить все статические файлы, которые он собирается собирать из вашего приложения, и различные плагины, которые вы могли бы использовать. Если у вас естьstatic/папка в верхнем уровне вашего приложения, вы должны удалить его полностью , прежде чем продолжить, так как начиная с чистым листом является важной частью свидетельствования / понимания того, что колба-Collect делает. Обратите внимание, что эта инструкция не применима для повседневного использования, это просто иллюстрирует тот факт, что Flask-Collect собирается создать для вас этот каталог, а затем он разместит там кучу файлов.
С учетом сказанного вы можете запустить следующую команду для сбора ваших статических активов:
$ ./manage.py collect
После этого вы должны увидеть, что Flask-Collect создал эту static/ папку верхнего уровня и содержит следующие файлы:
$ 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
И вот что: используйте команду collect когда вы делаете изменения в CSS или JavaScript вашего приложения, или когда вы обновили плагин Flask, который предоставляет статические активы (например, Flask-Bootstrap в этом примере).