Статические файлы Flask

Любое полноценное веб-приложение зависит от статических ресурсов, таких как CSS, JavaScript и изображения.

В этой главе рассказывается, как Flask управляет статическими файлами и обслуживает их.

Соглашение о статических файлах по умолчанию

Flask по умолчанию из каталога приложенияstatic/Эта папка служит для статических файлов.

Вам просто нужно создать эту папку и поместить в неё статические ресурсы:

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

Ссылки на статические файлы в шаблонах

Не задавайте пути жёстко; используйтеurl_for('static', filename='...'), чтобы сгенерировать URL для статических файлов.

Преимущество в том, что даже если приложение позже будет смонтировано по подпути (например,/myapp), URL также будет автоматически корректироваться.

Пример

<!-- Путь к файлу: templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ПРИМЕР Flask Tutorial</title>
    <!-- Ссылка на CSS-файл -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

    <!-- Иконка сайта favicon -->
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>
    <!-- Ссылка на изображение -->
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Логотип EXAMPLE" width="200">

    <h1>Добро пожаловать в EXAMPLE</h1>
    <p>Это веб-приложение, созданное с помощью Flask.</p>

    <!-- Ссылка на файл JavaScript -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

Пользовательский путь к статическим файлам

Если вы не хотите использовать стандартную папкуstatic/, её можно настроить при создании приложения Flask:

Пример

from flask import Flask

# static_folder: путь к папке на сервере
# static_url_path: путь доступа в URL
app = Flask(__name__,
           static_folder="public",        # Статические файлы размещаются в каталоге public/
           static_url_path="/assets")     # Доступ осуществляется по пути /assets
# Теперь доступ к /assets/css/style.css соответствует файлу public/css/style.css
Параметр Значение по умолчанию Описание
static_folder "static" Локальная папка для хранения статических файлов
static_url_path None (использует имя static_folder) Публичный URL-префикс для статических файлов.

Пример CSS-файла

Создайте базовую таблицу стилей, чтобы страница выглядела более профессионально:

Пример

/* Путь к файлу: 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;
}

Посетитеhttp://127.0.0.1:5000/, результат будет следующим:

Различия между средами разработки и производственной средой

Встроенный в Flask сервер статических файлов подходит только длясреды разработки。

В производственных средах профессиональные веб-серверы, такие как Nginx и Apache, должны напрямую обрабатывать статические файлы, что гораздо эффективнее, чем обслуживать их через код Python.

Подробное описание развертывания в производственной среде будет представлено в следующих главах.

Другие расширения