Flask Static Demo
Flask Static Demo
Flask是一个用Python编写的轻量级Web应用框架。在开发Web应用时，常常需要使用静态文件，如CSS、JavaScript、图片、视频和音频等。这些文件不会动态改变，而是直接提供给客户端浏览器使用。Flask提供了一种内置的方式来服务这些静态文件，通过/static目录。本文将详细介绍如何在Flask应用中高效地服务各种类型的静态文件。
文件结构
HTML文件
要在Flask中服务HTML文件，只需在项目根目录下创建一个templates文件夹，并将HTML文件添加到其中（例如templates/index.html）。使用Jinja模板引擎（{{ message }}），可以显示存储在变量中的文本。
<html>
<head>
<title>Flask Static Demo</title>
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>
main.py
在main.py中，我们使用Flask的render_template()函数来渲染HTML文件。最终代码如下：
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def hello():
message = "Hello, World"
return render_template('index.html',
message=message)
# run the application
if __name__ == "__main__":
app.run(debug=True)
输出结果：
The Flask is up and running on localhost port http://127.0.0.1:5000/
服务CSS文件
服务CSS文件与服务HTML文件类似，但需要将CSS文件放在static文件夹中而不是templates文件夹中。为了简单起见，我们使用一个非常简单的CSS文件。
h1{
color: red;
font-size: 36px;
}
现在，让我们使用link标签将其链接到HTML模板文件中，引用static文件夹中的CSS文件。
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>
输出结果：
localhost:5000
服务JavaScript文件
服务JavaScript文件与服务CSS文件类似，只需在static文件夹中创建JavaScript文件即可。
document.write("This is a Javascript static file")
现在将其链接到HTML中并运行Flask应用。
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<h1>{{message}}</h1>
<script src="/static/serve.js" charset="utf-8"></script>
</body>
</html>
输出结果：
Javascript static file
服务媒体文件（图片、视频、音频）
Flask还可以使用static文件夹来服务媒体文件，如图片、视频、音频、文本文件和PDF等。与CSS和JavaScript类似，媒体文件存储在static/文件夹中，并在HTML文件中链接。
步骤：
- 将所有媒体文件放在static/文件夹中。
- 使用/static/路径在HTML中链接它们。例如：
 }})
- 在main.py中，为需要渲染的任何静态文件创建路由。
- 运行Flask应用，媒体文件将与网页一起提供。
图片
在templates文件夹中创建一个image.html文件，并分别在main.py和image.html中添加以下代码。
# Images
@app.route("/image")
def serve_image():
message = "Image Route"
return render_template('image.html', message=message)
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<h1>{{message}}</h1>
<img src="/static/cat.jpg" alt="Cat image" width="20%" height="auto" />
<script src="/static/serve.js" charset="utf-8"></script>
</body>
</html>
输出结果：
Image Route
视频文件
要服务视频文件，在templates文件夹中创建一个video.html文件，并在main.py和video.html文件中添加以下代码。
# video
@app.route("/video")
def serve_video():
message = "Video Route"
return render_template('video.html', message=message)
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<h1>{{message}}</h1>
<video width="320" height="240" controls>
<source src="/static/ocean_video.mp4" type="video/mp4" />
</video>
<script src="/static/serve.js" charset="utf-8"></script>
</body>
</html>
输出结果：
Video Route
音频文件
通过创建一个audio.html模板文件并在main.py中添加以下代码，可以服务音频文件。
# audio
@app.route("/audio")
def serve_audio():
message = "Audio Route"
return render_template('audio.html', message=message)
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<h1>{{message}}</h1>
<audio controls>
<source src="/static/audio.mp3" />
</audio>
<script src="/static/serve.js" charset="utf-8"></script>
</body>
</html>
输出结果：
Audio Route
完整的Flask代码
为了简单起见，我们创建了一个简单的Flask应用，以便更好地理解如何在Flask中服务静态文件。
from flask import Flask
from flask import render_template
# creates a Flask application
app = Flask(__name__)
@app.route("/")
def hello():
message = "Hello, World"
return render_template('index.html', message=message)
@app.route("/video")
def serve_video():
message = "Video Route"
return render_template('video.html', message=message)
@app.route("/audio")
def serve_audio():
message = "Audio Route"
return render_template('audio.html', message=message)
@app.route("/image")
def serve_image():
message = "Image Route"
return render_template('image.html', message=message)
# run the application
if __name__ == "__main__":
app.run(debug=True)
要运行这个Flask应用，只需运行python main.py，输出结果如上所示。