Flask - 静态文件

Flask – 服务静态文件

Web 应用通常需要服务静态文件，例如 CSS 样式表、JavaScript 代码、图片和字体。Flask 在开发期间可以轻松处理这一点。

默认情况下，Flask 会在你的应用程序根目录（与你的主 Python 脚本或包位于同一目录）中查找名为 static 的文件夹作为静态文件存放位置。这些文件将通过 /static URL 路径访问。

要在模板中链接到静态文件，请使用特殊的 url_for() 函数，并将端点名称指定为 ‘static’。你还需要提供 filename 参数，它是相对于 static 文件夹的文件路径。

示例结构：

/your_project
    app.py
    /static
        style.css
        /js
            main.js
    /templates
        index.html

使用示例：

让我们创建一个简单的 Flask 应用 (app.py)，它渲染一个 HTML 模板 (templates/index.html)。HTML 中将包含一个按钮，该按钮触发 static/js/main.js 中定义的 JavaScript 函数。

Python 代码 (app.py)：

from flask import Flask, render_template

app = Flask(__name__) # 创建 Flask 应用程序实例

@app.route('/')
def index():
    # 渲染 index.html 模板
    return render_template('index.html')

if __name__ == '__main__':
    # 运行开发服务器
    app.run(debug=True)

HTML 模板 (templates/index.html)：

<!DOCTYPE html>
<html>
<head>
    <title>Static Files Example</title>
    <!-- 使用 url_for 链接到 JavaScript 文件 -->
    <script type="text/javascript"
            src="{{ url_for('static', filename='js/main.js') }}"></script>
    <!-- 你也可以类似地链接 CSS： -->
    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> -->
</head>
<body>
    <h1>Flask Static Files</h1>
    <p>Click the button below!</p>
    <input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

JavaScript 文件 (static/js/main.js)：

function sayHello() {
    // 显示一个简单的弹窗（常用于基本调试）
    alert("Hello from your static JavaScript file!");
}

当你运行 app.py 并在浏览器中导航到 / 时，Flask 将渲染 index.html。浏览器随后将请求 /static/js/main.js，Flask 会从你项目的 static/js/ 目录中提供该文件。点击按钮将执行 sayHello() 函数。

注意：虽然 Flask 的开发服务器可以服务静态文件，但通常建议配置你的生产 Web 服务器（如 Nginx 或 Apache）直接处理静态文件的服务，以获得更好的性能。