1. 默认静态文件约定Flask默认从应用目录下的static/文件夹提供静态文件。你只需要创建这个文件夹并将静态资源放入其中即可myflaskapp/ ├── app.py ├── templates/ │ └── index.html └── static/ ├── css/ │ └── style.css # 样式文件 ├── js/ │ └── main.js # JavaScript文件 └── images/ └── logo.png # 图片文件2. 在模板中引用静态文件不要硬编码路径使用url_for(static, filename...)生成静态文件的URL。这样做的好处是即使将来应用挂载到子路径如/myappURL也会自动调整。templates/index.html!DOCTYPE html html head meta charsetutf-8 titleRUNOOB Flask 教程/title !-- 引用CSS文件 -- link relstylesheet href{{ url_for(static, filenamecss/style.css) }} !-- 网站图标favicon -- link relicon href{{ url_for(static, filenameimages/favicon.ico) }} /head body !-- 引用图片 -- img src{{ url_for(static, filenameimages/logo.png) }} altRUNOOB Logo width200 h1欢迎来到 RUNOOB/h1 p这是一个使用 Flask 构建的 Web 应用。/p !-- 引用JavaScript文件 -- script src{{ url_for(static, filenamejs/main.js) }}/script /body /htmlurl_for()参数生成的URLurl_for(static, filenamecss/style.css)/static/css/style.cssurl_for(static, filenameimages/logo.png)/static/images/logo.pngurl_for(static, filenamejs/main.js)/static/js/main.js3. CSS文件示例创建一个基本样式文件让页面看起来更专业static/css/style.cssbody { 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; }4. 自定义静态文件路径如果不想使用默认的static/文件夹可以在创建Flask应用时自定义from flask import Flask # static_folder服务器上的文件夹路径 # static_url_pathURL中的访问路径 app Flask(__name__, static_folderpublic, # 静态文件放在 public/ 目录下 static_url_path/assets) # 通过 /assets 路径访问 # 此时访问 /assets/css/style.css 对应文件 public/css/style.css参数默认值说明static_folderstatic存放静态文件的本地文件夹static_url_pathNone使用static_folder的名称静态文件对外暴露的URL前缀5. 直接访问静态文件除了在模板中通过url_for()引用你也可以直接在浏览器中访问静态文件。例如项目结构为myflaskapp/ ├── app.py └── static/ └── css/ └── style.css启动应用后访问http://127.0.0.1:5000/static/css/style.css即可直接查看该CSS文件的内容。6. 静态文件的缓存与控制浏览器会缓存静态文件以加快加载速度。在开发阶段如果你修改了CSS或JS文件但浏览器没有更新可以方法操作强制刷新Ctrl F5Windows或Cmd Shift RMac清除缓存浏览器开发者工具 → 禁用缓存添加版本参数{{ url_for(static, filenamecss/style.css, v1) }}在生产环境中可以通过在文件名中加入版本号如style.v1.css或使用查询参数来实现缓存更新。7. 开发与生产环境的区别环境静态文件服务方式原因开发环境Flask内置服务static/方便调试无需额外配置生产环境Nginx、Apache等专业Web服务器效率远高于Python代码服务Flask内置的静态文件服务只适合开发环境。在生产环境中应该由Nginx、Apache等专业Web服务器直接处理静态文件这样效率远高于通过Python代码来服务。生产环境部署示例Nginx配置片段location /static/ { alias /var/www/myapp/static/; expires 30d; }生产部署的详细内容将在后续章节中详细介绍。8. 静态文件管理最佳实践实践说明✅使用url_for()始终通过url_for(static, filename...)生成URL✅合理组织目录按文件类型分目录css/、js/、images/、fonts/✅合并与压缩生产环境可合并多个CSS/JS文件并压缩减少HTTP请求✅使用CDN对于公共库如Bootstrap、jQuery可考虑使用CDN加速❌硬编码路径避免在模板中写死/static/css/style.css❌生产环境用Flask提供静态生产环境应使用Nginx等专业服务器小结本章介绍了Flask中静态文件的管理方式。Flask默认从static/目录提供静态文件在模板中通过url_for(static, filename...)生成正确的静态文件URL避免硬编码路径带来的维护问题也可以通过static_folder和static_url_path参数自定义静态文件目录和访问路径。静态文件在开发环境由Flask内置服务提供方便调试在生产环境则应交给Nginx等专业Web服务器处理以获得更好的性能。合理的静态文件组织和引用方式是构建专业Web应用的基础。
1. 默认静态文件约定Flask默认从应用目录下的static/文件夹提供静态文件。你只需要创建这个文件夹并将静态资源放入其中即可myflaskapp/ ├── app.py ├── templates/ │ └── index.html └── static/ ├── css/ │ └── style.css # 样式文件 ├── js/ │ └── main.js # JavaScript文件 └── images/ └── logo.png # 图片文件2. 在模板中引用静态文件不要硬编码路径使用url_for(static, filename...)生成静态文件的URL。这样做的好处是即使将来应用挂载到子路径如/myappURL也会自动调整。templates/index.html!DOCTYPE html html head meta charsetutf-8 titleRUNOOB Flask 教程/title !-- 引用CSS文件 -- link relstylesheet href{{ url_for(static, filenamecss/style.css) }} !-- 网站图标favicon -- link relicon href{{ url_for(static, filenameimages/favicon.ico) }} /head body !-- 引用图片 -- img src{{ url_for(static, filenameimages/logo.png) }} altRUNOOB Logo width200 h1欢迎来到 RUNOOB/h1 p这是一个使用 Flask 构建的 Web 应用。/p !-- 引用JavaScript文件 -- script src{{ url_for(static, filenamejs/main.js) }}/script /body /htmlurl_for()参数生成的URLurl_for(static, filenamecss/style.css)/static/css/style.cssurl_for(static, filenameimages/logo.png)/static/images/logo.pngurl_for(static, filenamejs/main.js)/static/js/main.js3. CSS文件示例创建一个基本样式文件让页面看起来更专业static/css/style.cssbody { 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; }4. 自定义静态文件路径如果不想使用默认的static/文件夹可以在创建Flask应用时自定义from flask import Flask # static_folder服务器上的文件夹路径 # static_url_pathURL中的访问路径 app Flask(__name__, static_folderpublic, # 静态文件放在 public/ 目录下 static_url_path/assets) # 通过 /assets 路径访问 # 此时访问 /assets/css/style.css 对应文件 public/css/style.css参数默认值说明static_folderstatic存放静态文件的本地文件夹static_url_pathNone使用static_folder的名称静态文件对外暴露的URL前缀5. 直接访问静态文件除了在模板中通过url_for()引用你也可以直接在浏览器中访问静态文件。例如项目结构为myflaskapp/ ├── app.py └── static/ └── css/ └── style.css启动应用后访问http://127.0.0.1:5000/static/css/style.css即可直接查看该CSS文件的内容。6. 静态文件的缓存与控制浏览器会缓存静态文件以加快加载速度。在开发阶段如果你修改了CSS或JS文件但浏览器没有更新可以方法操作强制刷新Ctrl F5Windows或Cmd Shift RMac清除缓存浏览器开发者工具 → 禁用缓存添加版本参数{{ url_for(static, filenamecss/style.css, v1) }}在生产环境中可以通过在文件名中加入版本号如style.v1.css或使用查询参数来实现缓存更新。7. 开发与生产环境的区别环境静态文件服务方式原因开发环境Flask内置服务static/方便调试无需额外配置生产环境Nginx、Apache等专业Web服务器效率远高于Python代码服务Flask内置的静态文件服务只适合开发环境。在生产环境中应该由Nginx、Apache等专业Web服务器直接处理静态文件这样效率远高于通过Python代码来服务。生产环境部署示例Nginx配置片段location /static/ { alias /var/www/myapp/static/; expires 30d; }生产部署的详细内容将在后续章节中详细介绍。8. 静态文件管理最佳实践实践说明✅使用url_for()始终通过url_for(static, filename...)生成URL✅合理组织目录按文件类型分目录css/、js/、images/、fonts/✅合并与压缩生产环境可合并多个CSS/JS文件并压缩减少HTTP请求✅使用CDN对于公共库如Bootstrap、jQuery可考虑使用CDN加速❌硬编码路径避免在模板中写死/static/css/style.css❌生产环境用Flask提供静态生产环境应使用Nginx等专业服务器小结本章介绍了Flask中静态文件的管理方式。Flask默认从static/目录提供静态文件在模板中通过url_for(static, filename...)生成正确的静态文件URL避免硬编码路径带来的维护问题也可以通过static_folder和static_url_path参数自定义静态文件目录和访问路径。静态文件在开发环境由Flask内置服务提供方便调试在生产环境则应交给Nginx等专业Web服务器处理以获得更好的性能。合理的静态文件组织和引用方式是构建专业Web应用的基础。
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
