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

news2024/11/16 11:58:01

前言:

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

一、传递变量到Jinja2

app.py

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


    <!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:字典健和对象的属性也可以通过中括号的方式来获取,如下面这样获取

{{ user.name }}
{{ user['name'}}

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

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

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)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1420111.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mcu专用看门狗复位芯片(如MAX706)

mcu专用看门狗复位芯片&#xff08;如MAX706&#xff09; 为什么要使用电压复位芯片RESET引脚WDO引脚MR引脚WDI引脚 国产替代型号应用电路1 推荐电路&#xff08;用一个跳线帽使能/关闭看门狗功能&#xff0c;调试MCU时防止看门狗芯片随便触发复位功能&#xff09;&#xff0c;…

ChatGPT PLUS升级步骤--支付宝、微信

AI伴随着我们已经有一年多了&#xff0c;这一年多里我使用ChatGPT做ppt、生成绘画、写文案、做旅游攻略&#xff0c;还有一些医学知识&#xff0c;医学知识我感觉没有回答的很好&#xff0c;对比于医生给的建议我个人觉得还是医生的比较好&#xff0c;Chat GPT回答的比较官方 …

【极数系列】Flink集成DataSource读取文件数据(08)

文章目录 01 引言02 简介概述03 基于文件读取数据3.1 readTextFile(path)3.2 readFile(fileInputFormat, path)3.3 readFile(fileInputFormat, path, watchType, interval, pathFilter, typeInfo)3.4 实现原理3.5 注意事项3.6 支持读取的文件形式 04 源码实战demo4.1 pom.xml依…

ROS学习笔记11——ROS中的重名问题

一、ros功能包重名——ros工作空间覆盖 功能包重名时&#xff0c;会按照 ROS_PACKAGE_PATH 查找&#xff0c;在前的会优先执行。ROS 会解析 .bashrc 文件&#xff0c;并生成 ROS_PACKAGE_PATH ROS包路径&#xff0c;即调用功能包的顺序&#xff0c;该变量中按照 .bashrc 中配置…

leetcode—跳跃游戏—贪心算法

1 跳跃游戏1 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&a…

图像畸变校正(2)

畸变校正是一种用于矫正图像或视频中的失真或畸变的技术。这种失真通常是由摄像头镜头的特性或角度造成的&#xff0c;可能会导致图像中的对象形状、大小或位置不准确。以下是畸变校正的一般方法&#xff1a; 摄像头模型建立&#xff1a; 首先&#xff0c;需要建立摄像头的模型…

【React教程】(1) React简介、React核心概念、React初始化

目录 ReactReact 介绍React 特点React 的发展历史React 与 Vue 的对比技术层面开发团队社区Native APP 开发 相关资源链接 EcmaScript 6 补充React 核心概念组件化虚拟 DOM 起步初始化及安装依赖Hello World React React 介绍 React 是一个用于构建用户界面的渐进式 JavaScrip…

海外云手机为什么吸引用户?

近年来&#xff0c;随着全球化的飞速发展&#xff0c;海外云手机逐渐成为各行各业关注的焦点。那么&#xff0c;究竟是什么让海外云手机如此吸引用户呢&#xff1f;本文将深入探讨海外云手机的三大吸引力&#xff0c;揭示海外云手机的优势所在。 1. 高效的社交媒体运营 海外云…

Android 13以上版本读写SD卡权限适配

如题&#xff0c;最近工作上处理的问题&#xff0c;把解决方案简单逻列出来&#xff0c;供有需要的朋友参考之 解决方案&#xff1a; 1、配置权限 <uses-permission android:name"android.permission.READ_MEDIA_IMAGES" /><uses-permission android:name&q…

PyQt5零基础入门(八)——按钮控件(QPushButton、QToolButton)

前言 按钮控件是图形用户界面(GUI)中常用的交互元素&#xff0c;用于触发特定的事件或行为。在Qt框架中&#xff0c;QPushButton和QToolButton是两种常用的按钮控件。 后边我们将以test.png为按钮图标&#xff0c;对比使用两种按钮控件。 普通按钮控件(QPushButton) QPushB…

禁止 ios H5 中 bounces 滑动回弹效果

在开发面向 iOS 设备的 HTML5 应用时&#xff0c;控制页面的滚动行为至关重要&#xff0c;特别是禁用在 Safari 中默认的滑动回弹效果。本文旨在提供一个简洁明了的解决方案&#xff0c;帮助开发者在特定的 Web 应用中禁用这一效果。 1. 什么是滑动回弹效果&#xff1f; 在 iO…

编写交互式 Shell 脚本

在日常的系统管理和自动化任务中&#xff0c;使用 Shell 脚本可以为我们节省大量时间和精力。 文章将以输入 IP 为例&#xff0c;通过几个版本逐步完善一个案例。 原始需求 编写一个交互式的 Shell 脚本&#xff0c;运行时让用户可以输入IP地址&#xff0c;并且脚本会将输入…

【高效开发工具系列】Wolfram Alpha

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【RT-DETR有效改进】2024.1最新MFDS-DETR的HS-FPN改进特征融合层(降低100W参数,全网独家首发)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的改进机制是最近这几天最新发布的改进机制MFDS-DETR提出的一种HS-FPN结构,其是一种为白细胞检测设计的网络结构,主要用于解决白细胞数据集中的多尺度挑战。它的基本原理包括两个关键部分:特征…

“全”实力认可 | 美创科技领跑CCSIP 2023全景图数据安全领域

近日&#xff0c;FreeBuf咨询正式发布《CCSIP&#xff08;China Cyber Security Industry Panorama&#xff09;2023中国网络安全行业全景册&#xff08;第六版&#xff09;》。本次全景册面向广大国内安全厂商&#xff0c;由厂商自主申报并填写信息征集表&#xff0c;经FreeBu…

【俄乌之战】乌克兰声称280台俄罗斯服务器被毁,损失数据超2 PB

乌克兰报告针对俄罗斯政府关键基础设施和私营公司的多次网络攻击&#xff0c;导致全国范围内的中断和大量数据丢失。 乌克兰 HUR&#xff08;乌克兰国防部主要情报局&#xff09;的网络安全专家声称对IPL Consulting进行了成功的网络攻击。据报道&#xff0c;他们摧毁了整个IT…

uniapp H5 实现上拉刷新 以及 下拉加载

uniapp H5 实现上拉刷新 以及 下拉加载 1. 先上图 下拉加载 2. 上代码 <script>import DragableList from "/components/dragable-list/dragable-list.vue";import {FridApi} from /api/warn.jsexport default {data() {return {tableList: [],loadingHi…

SV-7041T 多媒体教学广播IP网络有源音箱

SV-7041T是深圳锐科达电子有限公司的一款2.0声道壁挂式网络有源音箱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;可达到功率30W。同时它可以外接一个30W的无源副音箱&#xff0c;用在面积较大的场所。5寸进口全频低音喇…

leetcode刷题(剑指offer) 50.Pow(x, n)

50.Pow(x, n) 实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c;xn &#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出&#x…

MGRE实验报告二

实验要求&#xff1a; 实验预览图&#xff1a; 实验分析&#xff1a; 1、对R1-R5配置IP地址&#xff0c;同时R1-R5每个路由器各有一个环回 2.1、对R1、R3、R4路由器开启虚拟接口1&#xff0c;分别配置隧道IP、接口封装协议&#xff0c;接口类型、定义封装源、开启伪广播功能&…