[python][flask]flask静态资源

在 Flask 中，静态资源（如图片、CSS 文件、JavaScript 文件等）通常存储在项目的 static 文件夹中。Flask 会自动为静态资源提供服务，使得你可以通过 URL 访问这些文件。以下是关于 Flask 中静态资源的使用方法和一些高级配置。

1. 默认静态文件夹

Flask 默认会将项目根目录下的 static 文件夹作为静态资源目录。例如，如果你的项目结构如下：

python 复制代码

my_flask_app/
│
├── app.py
├── static/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── script.js
│   └── images/
│       └── logo.png
└── templates/
    └── index.html

那么，你可以通过以下 URL 访问静态资源：

图片：http://127.0.0.1:5000/static/images/logo.png
CSS 文件：http://127.0.0.1:5000/static/css/styles.css
JavaScript 文件：http://127.0.0.1:5000/static/js/script.js

2. 在模板中引用静态资源

在 Flask 的模板中，可以通过 url_for 函数动态生成静态资源的 URL。url_for 函数会根据静态文件的路径生成正确的 URL，即使你更改了静态文件夹的名称或路径，它仍然可以正确工作。

例如，在 templates/index.html 中引用静态资源：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Static Example</title>
    <!-- 引用 CSS 文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Welcome to Flask Static Example</h1>
    <!-- 显示图片 -->
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
    <!-- 引用 JavaScript 文件 -->
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

3. 自定义静态文件夹

如果你希望使用不同的文件夹名称或路径来存储静态资源，可以通过 static_folder 参数在创建 Flask 应用时指定。

python 复制代码

from flask import Flask

app = Flask(__name__, static_folder='my_static')

在这种情况下，静态资源将存储在 my_static 文件夹中，URL 也会相应改变：

图片：http://127.0.0.1:5000/static/images/logo.png
CSS 文件：http://127.0.0.1:5000/static/css/styles.css
JavaScript 文件：http://127.0.0.1:5000/static/js/script.js

4. 自定义静态 URL 前缀

如果你希望为静态资源设置一个不同的 URL 前缀，可以通过 static_url_path 参数指定。

html 复制代码

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

在这种情况下，静态资源的 URL 将变为：

图片：http://127.0.0.1:5000/assets/images/logo.png
CSS 文件：http://127.0.0.1:5000/assets/css/styles.css
JavaScript 文件：http://127.0.0.1:5000/assets/js/script.js

在模板中引用时，url_for 函数会自动使用新的 URL 前缀：

复制代码

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

5. 静态资源的缓存控制

默认情况下，浏览器会缓存静态资源。如果你希望在开发过程中禁用缓存，可以通过设置 SEND_FILE_MAX_AGE_DEFAULT 参数来控制缓存时间。

python 复制代码

from flask import Flask

app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0  # 设置缓存时间为 0 秒

在生产环境中，通常会设置一个合理的缓存时间，例如：

python 复制代码

app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 31536000  # 设置缓存时间为 1 年

6. 静态资源的版本控制

为了避免浏览器缓存旧版本的静态资源，可以通过在文件名中添加版本号或时间戳来强制浏览器重新加载资源。例如：

python 复制代码

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css?v=1.0.1') }}">

或者，可以通过 Flask 的 after_request 钩子动态添加版本号：

python 复制代码

from flask import Flask, request, make_response

app = Flask(__name__)

@app.after_request
def add_version(response):
    if request.path.startswith('/static/'):
        response.headers['Cache-Control'] = 'public, max-age=31536000'
        response.headers['ETag'] = 'v1.0.1'
    return response

总结

在 Flask 中，静态资源的管理非常灵活。你可以通过默认的 static 文件夹存储静态文件，并通过 url_for 函数动态生成资源的 URL。此外，你还可以自定义静态文件夹的名称、路径和 URL 前缀，以及控制静态资源的缓存策略。这些功能使得 Flask 非常适合开发具有丰富静态资源的 Web 应用。