使用 Flask 和 Jinja2 加载静态文件
在 Web 开发中，我们经常需要加载静态文件（如图片、JavaScript 文件、CSS 文件）来美化页面或增加交互性。Flask 框架提供了方便的方法来处理静态文件，并与 Jinja2 模板引擎无缝集成。本文将介绍如何在 Flask 中加载静态文件，并给出示例应用。
示例应用
下面是一个简单的示例应用，演示了如何在 Flask 中加载静态文件。假设我们有一个包含图片、JavaScript 文件和 CSS 文件的静态文件夹。
1. 创建静态文件夹
在项目目录中，创建一个名为 static 的文件夹，用于存放静态文件。在 static 文件夹中，我们可以进一步创建子文件夹来组织不同类型的静态文件。
例如：
1
2
3
4
5
6
7
8
- app.py
- static
- images
- logo.png
- js
- script.js
- css
- styles.css
当将 CSS 和 JavaScript 拆分成单独的静态文件后，你可以通过链接这些文件来实现相同的效果。以下是每个文件的内容和用途的详细介绍：
script.js 文件：
1
2
3
4
function scaleDownImage() {
var image = document.getElementById('image');
image.style.transform = "scale(0.5)";
}
script.js包含 JavaScript 代码。scaleDownImage()函数会在点击图片时触发。- 在函数中，使用
getElementById()方法获取图片元素，并将其缩放样式属性transform设置为scale(0.8)，即将图片缩小到原大小的 80%。
styles.css 文件：
1
2
3
4
5
6
7
8
9
10
11
12
.zoom-out {
transition: transform 1s ease;
}
.zoom-out:hover {
transform: scale(0.1);
position: relative;
left: -10px;
top: -10px;
rotate: rotate(5deg);
opacity: 0.7;
}
- 在
.zoom-out:hover伪类中，我们添加了以下属性来实现变混乱的特性：position: relative;：使图片相对于其原始位置进行定位。left: -10px;和top: -10px;：随机偏移图片的位置，使其在 x 和 y 轴上移动。rotate: rotate(5deg);：随机旋转图片，给出一个微小的旋转角度。opacity: 0.7;：降低图片的透明度，使其看起来更混乱。
通过将这些代码添加到 styles.css 文件中，当鼠标悬停在图片上时，图片将以缩小、偏移、旋转和降低透明度的方式产生混乱效果。
2. 编写 Flask 应用程序
在 app.py 中编写 Flask 应用程序的代码。以下是一个基本示例：
1
2
3
4
5
6
7
8
9
10
11
from flask import Flask, render_template
app = Flask(__name__)
# 定义根路由，渲染带有静态文件的模板
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
3. 编写模板
在项目目录中创建一个名为 templates 的文件夹，用于存放模板文件。在 templates 文件夹中，创建一个名为 index.html 的模板文件。
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>点击图片缩小效果</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<img src="{{ url_for('static', filename='images/logo.png') }}" class="zoom-out" onclick="scaleDownImage()">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
在上面的示例中，我们使用了 Jinja2 的模板语法来加载静态文件。通过在 URL 中使用 url_for 函数来生成静态文件的路径，可以确保在不同环境下正确引用静态文件。
4. 运行应用程序
保存并执行 app.py 脚本，然后在浏览器中访问 http://localhost:5000，即可查看加载了静态文件的页面。
结论
通过 Flask 和 Jinja2，我们可以轻松地加载静态文件，包括图片、JavaScript 文件和 CSS 文件。只需按照上述示例创建和配置项目，就可以在 Flask 应用中应用静态文件，从而增强页面的外观和功能。
