Flask中的模板的使用

2025-07-21 08:05:14

Flask中的模板的使用 Flask中的模板的使用简介：本文讲解Flask中的模板的使用。Flask项目创建参考这篇文章：通过命令行的方式快速创建一个flask项目创建模板文件在应用程序目录下创建一个名为 templates 的文件夹，用于存放模板文件。在 templates 文件夹中创建一个名为 index.html 的 HTML 模板文件。代码语言：javascript代码运行次数：0运行复

Flask中的模板的使用

简介：本文讲解Flask中的模板的使用。

Flask项目创建参考这篇文章：通过命令行的方式快速创建一个flask项目

创建模板文件

在应用程序目录下创建一个名为 templates 的文件夹，用于存放模板文件。在 templates 文件夹中创建一个名为 index.html 的 HTML 模板文件。

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Template Example</title>
</head>
<body>
    <h1>Hello, Flask!</h1>
    <p>Welcome to Flask template example.</p>
</body>
</html>

模板中的变量

Flask 允许我们在模板中使用变量，以便动态地显示内容。可以在视图函数中将数据传递给模板，在模板中使用 Jinja2 模板语法来渲染变量。

代码语言：javascript代码运行次数：0运行复制

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    username = 'John'
    return render_template('index.html', username=username)

if __name__ == '__main__':
    app.run(debug=True)

在模板中，我们可以通过双花括号 {{ variable }} 来渲染变量。

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, {{ username }}</title>
</head>
<body>
    <h1>Hello, {{ username }}!</h1>
    <p>Welcome to Flask template example.</p>
</body>
</html>

运行结果展示

模板中的控制结构

除了渲染变量外，Flask 模板还支持使用控制结构，如条件语句和循环语句。

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User List</title>
</head>
<body>
    <h1>User List</h1>
    <ul>
        {% for user in users %}
        <li>{{ user }}</li>
        {% endfor %}
    </ul>
</body>
</html>

代码语言：javascript代码运行次数：0运行复制

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    users = ['Alice', 'Bob', 'Charlie']
    return render_template('user_list.html', users=users)

if __name__ == '__main__':
    app.run(debug=True)

运行结果展示

模板的继承

代码语言：javascript代码运行次数：0运行复制

Flask 模板支持继承，这使得我们可以创建一个基础模板，并在其他模板中扩展和覆盖它。

base.html:

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>{% block title %}My Website{% endblock %}</title>
	</head>
	<body>
	    <nav>
	        <a href="/">Home</a>
	        <a href="/about">About</a>
	    </nav>
	    {% block content %}
	    {% endblock %}
	</body>
	</html>

index.html:

代码语言：javascript代码运行次数：0运行复制

{% extends 'base.html' %}

{% block title %}Home - My Website{% endblock %}

{% block content %}
<h1>Welcome to My Website!</h1>
<p>This is the home page.</p>
{% endblock %}

运行结果

编写一个运行的后端代码

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2024-0-12，如有侵权请联系 cloudcommunity@tencent 删除htmlflask渲染变量继承

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1156021.html

推荐阅读

留言与评论（共有 19 条评论）

本站网友源昌宝墅湾	0秒前发表
可以在视图函数中将数据传递给模板
本站网友句容二手房	21分钟前发表
render_template app = Flask(__name__) @app.route('/') def index()
本站网友马啸	20分钟前发表
users = ['Alice'
本站网友莱西租房	11分钟前发表
initial-scale=1.0"> <title>Hello
本站网友罗冰生	7分钟前发表
username = 'John' return render_template('index.html'
本站网友见解独到	21分钟前发表
这使得我们可以创建一个基础模板
本站网友打豆豆3366	13分钟前发表
render_template app = Flask(__name__) @app.route('/') def index()
本站网友叠拼别墅	28分钟前发表
username=username) if __name__ == '__main__'
本站网友南京百家湖国际花园	20分钟前发表
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
本站网友三维图像	14分钟前发表
以便动态地显示内容
本站网友青岛大学东校区	24分钟前发表
users=users) if __name__ == '__main__'
本站网友学做早餐	3分钟前发表
Flask项目创建参考这篇文章：通过命令行的方式快速创建一个flask项目创建模板文件在应用程序目录下创建一个名为 templates 的文件夹
本站网友东莞严打	20分钟前发表
{{ username }}!</h1> <p>Welcome to Flask template example.</p> </body> </html>运行结果展示模板中的控制结构除了渲染变量外
本站网友心脏移植	6分钟前发表
分享自作者个人站点/博客
本站网友深圳四海一家自助餐	7分钟前发表
users=users) if __name__ == '__main__'
本站网友蓝岸尚城	9分钟前发表
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
本站网友 6种一定要打的自费疫苗	17分钟前发表
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
本站网友黑管是什么乐器	26分钟前发表
'Charlie'] return render_template('user_list.html'

Flask中的模板的使用