Flask使用Jinja2渲染模版使用变量实战

前言:

Flask 使用 Jinja2 作为其默认模板引擎,这意味着您可以直接在 Flask 应用程序中使用 Jinja2 模板。您可以创建模板文件,然后在视图函数中渲染这些模板,将动态数据传递给模板进行渲染,并最终生成最终的 HTML 页面。

一、传递变量到Jinja2

app.py

python 复制代码
from flask import Flask,render_template

app = Flask(__name__)


class User:
    def __init__(self,username,email):
        self.username = username
        self.email = email

@app.route('/')
def index():
    hobby = "游戏"
    person = {
        "name": "张三",
        "age": 181
    }
    user = User("李四", "xx@qq.com")
    return render_template("index.html", hobby=hobby, person=person, user=user)


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

index.html

python 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>变量使用</title>
    </head>
    <body>
      <h1>我的兴趣爱好是:{{ hobby }}</h1>
      <p>person的姓名是:{{ person.name }},person的年龄是:{{ person.age }}</p>
      <p>user的用户名是:{{ user.name }},user的邮箱是:{{ user.email }}</p>
    </body>
    </html>

运行项目效果

PS:字典健和对象的属性也可以通过中括号的方式来获取,如下面这样获取

python 复制代码
{{ user.name }}
{{ user['name'}}

二、使用关键字参数方式传递

以上案例中,传递了3个变量到模版中,在变量较多的情况下,首先可以把所有的变量放到字典中,然后再给render_template传递参数时使用**语法,将字典变成关键字参数,以上的视图函数可以修改为下面的形式:

python 复制代码
from flask import Flask, render_template

app = Flask(__name__)


class User:
    def __init__(self, username, email):
        self.username = username
        self.email = email


@app.route('/')
def index():
    hobby = "游戏"
    person = {
        "name": "张三",
        "age": 18
    }
    user = User("李四", "xx@qq.com")
    context = {
        "hobby": hobby,
        "person": person,
        "user": user
    }
    return render_template("index.html", **context)


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

最后执行效果其实是一样的

相关推荐
神奇小汤圆14 分钟前
Flink SQL 从编写到提交运行的全过程解析
后端
Logintern0917 分钟前
LangSmith如何根据id关系,在服务端把扁平列表重建为树形结构,用于页面渲染Trace视图
python
月光船幽幽36 分钟前
呼吸孔设计重塑系统稳定性
python·科技·算法
Bryce学亮41 分钟前
FileLine,基于 Qt 6 + QML 构建的跨平台文件传输与即时通讯工具
数据库·c++·人工智能·python·qt·github
拿铁铁41 分钟前
2026实操场景下平板坡口机噪音问题注意事项梳理汇总
python·电脑
饼干哥哥43 分钟前
Codex 必改的8 个基础配置
前端·人工智能·后端
lingran__1 小时前
Linux 基础常用指令万字详解(上)|文件目录命令,结合底层原理剖析
linux·运维·服务器·后端·centos·linux基础指令
夜雪一千1 小时前
Python从HTML提取纯文本、去空格、比对内容是否变化:方案+合理性分析
开发语言·python·html
情可轻 秦任之1 小时前
ASP.NET页面优化,性能提升8倍的方法
后端·asp.net
王中阳Go2 小时前
用TRAE Work批量优化学员简历,原来2天的活现在2小时就干完了
后端·面试·agent