当前位置: 首页 > news >正文

[python][flask]flask静态资源

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

1. 默认静态文件夹

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

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 中引用静态资源:

<!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 应用时指定。

from flask import Flaskapp = 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 参数指定。

<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 参数来控制缓存时间。

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

 

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

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

 

6. 静态资源的版本控制

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

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

 

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

from flask import Flask, request, make_responseapp = 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 应用。

http://www.lryc.cn/news/599096.html

相关文章:

  • Spring Boot License 认证系统
  • 从零开始的云计算生活——番外6,使用zabbix对中间件监控
  • [SAP ABAP] 请求释放及传输
  • 二开---01
  • 基于多种主题分析、关键词提取算法的设计与实现【TF-IDF算法、LDA、NMF分解、BERT主题模型】
  • 【vue vapor jsx 未雨绸缪】
  • 篇五 网络通信硬件之PHY,MAC, RJ45
  • 统一调度与编排:构建自动化数据驱动平台
  • 【Java、C、C++、Python】飞机订票系统---文件版本
  • Fluent自动化仿真(TUI命令脚本教程)
  • RCE真实漏洞初体验
  • 制造业低代码平台实战评测:简道云、钉钉宜搭、华为云Astro、金蝶云·苍穹、斑斑低代码,谁更值得选?
  • NBIOT模块 BC28通过MQTT协议连接到EMQX
  • 栈与队列:数据结构核心解密
  • 《Uniapp-Vue 3-TS 实战开发》自定义环形进度条组件
  • 数据结构 二叉树(1)
  • 《Uniapp-Vue 3-TS 实战开发》自定义年月日时分秒picker组件
  • uniapp创建vue3+ts+pinia+sass项目
  • Linux 桌面市场份额突破 5%:开源生态的里程碑与未来启示
  • 【数据结构与算法】数据结构初阶:详解二叉树(六)——二叉树应用:二叉树选择题
  • 数据结构3-单双链表的泛型实现及ArrayList与LinkedList的区别
  • SpringBoot(黑马)
  • 【Unity笔记】OpenXR 之VR串流开发笔记:通过RenderTexture实现仅在PC端展示UI,在VR眼镜端隐藏UI
  • Java数组详解
  • S7-1500 与 ET200MP 的组态控制通信(Configuration Control)功能实现详解(下)
  • 【C++进阶】第7课—红黑树
  • SQLFluff
  • Microsoft-DNN NTLM暴露漏洞复现(CVE-2025-52488)
  • RWA的法律合规性如何保证?KYC/AML在RWA项目中的作用是什么?
  • 融合与智能:AI 浪潮驱动下数据库的多维度进化与产业格局重塑新范式