【python】flask模板渲染引擎Jinja2，使得前后端交互更加便捷

news2024/11/25 6:41:26

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN新星创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，面试宝典等分享。

所属的专栏：flask框架零基础，进阶应用实战教学
景天的主页：景天科技苑

文章目录

  • Jinja2模板引擎
    • 模板基本使用
    • pycharm未识别模板文件配置
    • 模板输出变量
    • 总结

Jinja2模板引擎

flask在执行过程中的流程
在这里插入图片描述

Flask内置的模板引擎Jinja2，它的设计思想来源于 Django 的模板引擎DTP(DjangoTemplates)，并扩展了其语法和一系列强大的功能。

  • Flask提供的 render_template 函数封装了该模板引擎Jinja2
  • render_template 函数的第一个参数是模板的文件名，后面的参数都是键值对，表示模板中变量对应的数据值。
    我们在安装flask的时候就依赖安装了Jinja2
    在这里插入图片描述

模板基本使用

  1. 在flask应用对象创建的时候，设置template_folder参数，默认值是templates也可以自定义为其他目录名，需要手动创建模板目录。
from flask import Flask, render_template
app = Flask(__name__, template_folder="templates")

2.在手动创建 templates 目录下创建一个模板html文件 index.html，代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
</head>
<body>
  <h1>{{content}}</h1>
</body>
</html>

3.在视图函数设置渲染模板并设置模板数据

from flask import Flask, render_template
#通过template_folder参数指定模板路径目录


app = Flask(__name__, template_folder="templates")


@app.route("/")
def index():
    title = "网页标题"
    content = "网页正文内容"
    #这里写模板文件。基于templates来写路径，locals()可以收集局部变量成字典类型数据，此处使用星星打散的方式，将字典数据转化为键值对形式传参
    #类似于这种
    # return render_template("index.html", title=title,content=content)

    return render_template("index.html", **locals())

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

运行程序，浏览器访问，可以看到网页标题和网页内容都是我们设置的字段内容
在这里插入图片描述

flask中提供了2个加载模板的函数：render_template与render_template_string。

render_template：基于参数1的模板文件路径，读取html模板内容，返回渲染后的HTML页面内容，类型是字符串，不是response对象。

render_template_string：基于参数1以字符串的方式传参的模板内容，返回渲染后的HTML页面内容。
在这里插入图片描述

代码案例：

from flask import Flask, render_template,render_template_string

app = Flask(__name__, template_folder="templates")


@app.route("/")
def index():
    title = "网页标题"
    content = "网页正文内容"
    print(locals())
    # 这里写模板文件。基于templates来写路径，locals()可以收集局部变量成字典类型数据，此处使用星星打散的方式，将字典数据转化为键值对形式传参
    # return render_template("index.html", title=title,content=content)

    html = render_template("index.html", **locals())
    print('rend_template返回',html,type(html))
    return html


#rend_template_string
@app.route("/tmp")
def tmp():
    title = "网页标题"
    content = "网页正文内容"
    #将网页内容以字符串的形式传参

    temp = """<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
</head>
<body>
  <h1>{{content}}</h1>
</body>
</html>
    """
    html = render_template_string(temp, **locals())
    print('rend_template_string返回',html, type(html))
    return html



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

浏览器访问/tmp路径url。返回也是字符串
在这里插入图片描述

pycharm未识别模板文件配置

pycharm中，当我们设置了模板文件，但是pycharm并未识别
在这里插入图片描述

此时我们可以设置当前项目的模板语言：
设置路径
files/settings/languages & frameworks/python template languages。
设置下拉框为jinja2，保存
在这里插入图片描述

设置指定目录为模板目录，鼠标右键->Mark Directory as …-> Template Folder
在这里插入图片描述

此时，pycahrm就不再有警告了
在这里插入图片描述

模板输出变量

{{ 变量名 }}，这种 {{ }} 语法叫做 变量代码块

Jinja2 模版中的变量代码块的输出的内容可以是Python的任意类型数据或者对象，只要它能够被 Python 的 __str__ 方法或者str()转换为一个字符串就可以，比如，可以通过下面的方式显示一个字典或者列表中的某个元素:

视图代码：

from flask import Flask, render_template, session, g

app = Flask(__name__, template_folder="templates")

app.config["SECRET_KEY"] = "my secret key"

@app.route("/")
def index():
    # 基本类型
    num = 100
    num2 = 3.14
    is_bool = True
    title = "网页标题"

    # 复合类型
    set_var = {1,2,3,4}
    list_var = ["小明", "小红", "小白"]
    dict_var = {"name": "root", "pwd": "1234557"}
    tuple_var = (1,2,3,4)

    # 更复杂的数据结构
    book_list = [
        {"id": 10, "title": "图书标题10a", "description": "图书介绍",},
        {"id": 13, "title": "图书标题13b", "description": "图书介绍",},
        {"id": 21, "title": "图书标题21c", "description": "图书介绍",},
    ]

    session["uname"] = "root"
    g.num = 300

    html = render_template("index.html", **locals())
    return html

@app.route("/user/<uid>")
def user1(uid):
    return "ok"

@app.route("/user")
def user2():
    return "ok"

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

模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
</head>
<body>
  <p>
    基本类型<br>
    num = {{num}}<br>
    {{num2}}<br>
    {{is_bool}}<br>
    {{title}}<br>
  </p>
  <p>
    {# 此处为模板注释 #}
    复合类型<br>
{#    {{set_var}}<br>#}
    {{set_var.pop()}}<br>
    {{list_var}}<br>
    {{list_var[1]}}<br>
    {{list_var.0}}<br>
    {{list_var[-1]}}，点语法不能写负数下标<br>
    {{dict_var}}<br>
    {{dict_var["name"]}}<br>
    {{dict_var.name}}<br>
    {{tuple_var}}<br>
    {{tuple_var.0}}<br>
  </p>
  <p>
    更复杂的数据结构<br>
    {{book_list}}<br>
    {{book_list.2}}<br>
    {{book_list.1.title}}<br>
  </p>

  <p>
    内置的全局变量 <br>
    {{request}}<br>
    {{request.path}}<br>
    {{request.method}}<br>
    {{session.get("uname")}}<br>
    {{g.num}}<br>
  </p>
   {#  配置信息#}


  <p>{{ config.ENV }}</p>
  <p>{{ url_for("user1", uid=3) }}</p>    {# /user/3 #}
  <p>{{ url_for("user2", uid=3) }}</p>    {# /user?uid=3 #}
</body>
</html>

页面访问
在这里插入图片描述

代码分析：

使用 {# #} 进行注释，注释的内容不会在html中被渲染出来

{#    <h1>{{ title }}!!</h1>#}
{#    <p>{{ data_list }}</p>#}
{#    <p>{{ data_list.1 }}</p>#}
    <p>{{ data_list[-1]}}</p>
    <p>{{ data_list | last }}</p>
    <p>{{ data_list | first }}</p>
    <p>{{ data_dict }}</p>
    <p>{{ data_dict.name }}</p>
    <p>{{ user_list.0 }}</p>
{#    <p>{{ user_list.0.name }}</p>#}

##模板中内置的变量和函数

你可以在自己的模板中访问一些 Flask 默认内置的函数和对象

####config

你可以从模板中直接访问Flask当前的config对象:

<p>{{ config.ENV }}</p>
<p>{{ config.DEBUG }}</p>

在这里插入图片描述
在这里插入图片描述

####request

就是flask中代表当前请求的request对象：

<p>{{ request.url }}</p>
<p>{{ request.path }}</p>
<p>{{ request.method }}</p>

####session

为Flask的session对象，显示session数据

 {{session.get("uname")}}

####g变量

在视图函数中设置g变量的 name 属性的值，然后在模板中直接可以取出
{{ g.name }}

####url_for()

url_for会根据传入的路由器函数名,返回该路由对应的URL,在模板中始终使用url_for()就可以安全的修改路由绑定的URL,则不比担心模板中渲染出错的链接:

 <p>{{ url_for("user1", uid=3) }}</p>    {# /user/3 #}
 <p>{{ url_for("user2", uid=3) }}</p>    {# /user?uid=3 #}

在这里插入图片描述
在这里插入图片描述

浏览器查看
在这里插入图片描述

如果我们定义的路由URL是带有参数的,则可以把它们作为关键字参数传入url_for(),Flask会把他们填充进最终生成的URL中:

{{ url_for('index', id=1)}}
/index/1      {#  /index/<int:id> id被声明成路由参数 #}
/index?id=1   {#  /index          id被声明成查询参数 #}

总结

flask内置的模板引擎Jinja2，它的设计思想来源于 Django 的模板引擎DTP(DjangoTemplates)，并扩展了其语法和一系列强大的功能。学会使用Jinja2，自己可以轻松开发出一个自己喜欢的网站，
我们在模板中多用变量，少用函数，函数放在视图函数中使用，这才符合MVT思想的路线。喜欢的朋友可以一键三连，flask高阶用法持续更新中！！！

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

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

相关文章

2010年之前电脑ubuntu安装nvidia驱动黑屏处理

2010年之前电脑ubuntu安装nvidia驱动黑屏处理

装好驱动 仿真fps直接到60Hz 陈旧设备 都是非常老旧的电脑&#xff0c;没钱换新电脑&#xff0c;就这么穷…… 电脑详细配置&#xff1a; 冲动 想装显卡驱动提升一下性能&#xff0c;结果……黑了 黑习惯了也无所谓&#xff0c;几分钟就能解决&#xff0c;关键还是太穷&…
阅读更多...
【C】盛最多水的容器（双指针）

【C】盛最多水的容器（双指针）

盛最多水的容器 原题目链接:点击跳转 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和(i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说…
阅读更多...
数据结构-树-006

数据结构-树-006

1二叉树 1.1目标二叉树 前序遍历&#xff1a;ABDHIEJCFKG 中序遍历&#xff1a;HDIBEJAFKCG 后序遍历&#xff1a;HIDJEBKFGCA 层序遍历&#xff1a;ABCDEFGHIJK运行结果&#xff1a; 运行结果符合目标二叉树的深度优先&#xff08;前序遍历&#xff0c;中序遍历&#xff0c;…
阅读更多...
【c++】【STL】stack类、queue类、deque类详解及模拟

【c++】【STL】stack类、queue类、deque类详解及模拟

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 今日主菜&#xff1a;stack和queue&#xff0c;deque类 主厨&#xff1a;邪王真眼 所属专栏&#xff1a;c专栏 主厨的主页&#xff1a;Chef‘s blog 这可是…
阅读更多...
Endnote(作者，年份)文中引用显示‘and etal‘与‘和 等‘

Endnote(作者，年份)文中引用显示‘and etal‘与‘和 等‘

软件版本&#xff1a;Endnote X9.1&#xff0c;样式&#xff1a;Harvard&#xff0c;其余使用(作者&#xff0c;年份)的样式均可&#xff0c;GBT7714就有作者年份类型 本教程适用于X系列~ Endnote20及以上版本请移步另一条博文&#xff0c;指路&#xff1a;&#xff08;我还没…
阅读更多...
“双碳”目标下资源环境中的可计算一般均衡（CGE）模型教程

“双碳”目标下资源环境中的可计算一般均衡（CGE）模型教程

原文链接&#xff1a;“双碳”目标下资源环境中的可计算一般均衡&#xff08;CGE&#xff09;模型https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247599079&idx4&sn82ea6c6f506cd20d1e0cd590faaa0611&chksmfa820200cdf58b16dc5b79746901cc9a4048b46db5…
阅读更多...
《自动机理论、语言和计算导论》阅读笔记：p5-p27

《自动机理论、语言和计算导论》阅读笔记：p5-p27

《自动机理论、语言和计算导论》学习第2天&#xff0c;p5-p27总结&#xff0c;总计23页。 一、技术总结 1.集合 (1)commutative law of union. (2)distribute law of union. 2.归纳法(induction) & 演绎法(deduction) (1)归纳法&#xff1a;从许多个别的事实或原理中…
阅读更多...
【zlm】问题记录：chrome更新引起的拉不出webrtc； 证书校验引起的放几秒中断

【zlm】问题记录：chrome更新引起的拉不出webrtc； 证书校验引起的放几秒中断

目录 chrome更新引起的拉不出webrtc 证书校验引起的放几秒中断 chrome更新引起的拉不出webrtc 【zlm】最新的chrome版本中的报错&#xff1a; 我有个问题event.js:8 [RTCPusherPlayer] DOMException: Failed to execute setRemoteDescription on RTCPeerConnection: Failed …
阅读更多...
LabVIEW焓差试验室流量计现场自动校准系统

LabVIEW焓差试验室流量计现场自动校准系统

LabVIEW焓差试验室流量计现场自动校准系统 在现代工业和科研领域&#xff0c;流量计的准确性对于保证生产过程的质量和效率非常重要。开发了一种基于LabVIEW的焓差试验室流量计现场自动校准系统&#xff0c;通过提高流量计校准的准确性和效率。 在空调器空气焓值法能效测量装…
阅读更多...
hololens 2 投屏 报错

hololens 2 投屏 报错

使用Microsoft HoloLens投屏时&#xff0c;ip地址填对了&#xff0c;但是仍然报错&#xff0c;说hololens 2没有打开&#xff0c; 首先检查 开发人员选项 都打开&#xff0c;设备门户也打开 然后检查系统–体验共享&#xff0c;把共享都打开就可以了
阅读更多...
【k8s】kubeasz 3.6.3 + virtualbox 搭建本地虚拟机openeuler 22.03 三节点集群 离线方案

【k8s】kubeasz 3.6.3 + virtualbox 搭建本地虚拟机openeuler 22.03 三节点集群 离线方案

kubeasz项目源码地址 GitHub - easzlab/kubeasz: 使用Ansible脚本安装K8S集群&#xff0c;介绍组件交互原理&#xff0c;方便直接&#xff0c;不受国内网络环境影响 拉取代码&#xff0c;并切换到最近发布的分支 git clone https://github.com/easzlab/kubeasz cd kubeasz gi…
阅读更多...
C++细节

C++细节

背景知识&#xff1a; 面向对象的编程中&#xff0c;类&#xff08;Class&#xff09;是创建对象的蓝图或模板&#xff0c;它包含了数据&#xff08;通常称为属性或变量&#xff09;和行为&#xff08;通常称为方法或函数&#xff09;。将数据封装为私有&#xff08;private&am…
阅读更多...
【Java】：类和对象

【Java】：类和对象

1.面向对象的初步认知 1.1 什么是面向对象 Java是一门面向对象的语言&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。用面向对象的思想来涉及程序&#xff0c;更符合人们对事物的认知…
阅读更多...
CDNS PCIe VIP debug info

CDNS PCIe VIP debug info

1. TLP payload的顺序是反向的&#xff0c;即大小端反的&#xff0c;比如下面的denalirc打印的信息看&#xff0c;pl是我们发TLP时的配置&#xff0c;Cfg才是真正的data顺序。 而seq写的时候如下&#xff1a;可以看到payload[2]时第三个8bit payload&#xff0c;但是我们是想配…
阅读更多...
JS加密解密之应用如何保存到桌面书签

JS加密解密之应用如何保存到桌面书签

前言 事情起因是这样的&#xff0c;有个客户解密了一个js&#xff0c;然后又看不懂里边的一些逻辑&#xff0c;想知道它是如何自动拉起谷歌浏览器和如何保存应用到书签的&#xff0c;以及如何下载应用的。继而诞生了这篇文章&#xff0c;讲解一下他的基本原理。 渐进式Web应用…
阅读更多...
UE5学习日记——蓝图节点前缀关键字整理

UE5学习日记——蓝图节点前缀关键字整理

一、起因 节点如海&#xff0c;中英文翻译的时候还是有差别的&#xff0c;比如&#xff1a; 同一个中文&#xff0c;可能在英文里完全不同&#xff0c;连出现位置可能都不一样 附加 Attach Actor To Component&#xff08;将Actor附加到组件&#xff09;Append Array&#xf…
阅读更多...
【竞技宝】DOTA2-PGL联赛：niu神无解 LGD2-0轻松击败DH

【竞技宝】DOTA2-PGL联赛：niu神无解 LGD2-0轻松击败DH

北京时间2024年3月26日,PGL联赛中国区的比赛在昨日正式打响,首日共进行了四场胜者组首轮的比赛,第四场比赛由LGD对阵DH。本场比赛,DH两局都在前中期和LGD有来有回,但niu的中期节奏完全摧毁了DH,最终LGD2-0轻松击败DH。以下是本场比赛的详细战报。 第一局: 首局比赛,LGD在天辉方…
阅读更多...
Python Flask框架 -- flask-migrate迁移ORM模型

Python Flask框架 -- flask-migrate迁移ORM模型

# 之前使用的这个db.create_all()很有局限性&#xff0c;它不能把在class里修改的东西同步上数据库&#xff0c;所以不用了 # with app.app_context(): # 请求应用上下文 # db.create_all() # 把所有的表同步到数据库中去 例如&#xff0c;在User类中增加一个email字段&…
阅读更多...
selenium自动化测试-unittest框架

selenium自动化测试-unittest框架

unittest框架的优点 (1)能够组织多个用例去执行 (2)提供丰富的断言方法 (3)能够生成测试报告 unittest框架的核心要素 1. TestCase测试用例 TestCase(测试用例)&#xff0c;最小的测试单元&#xff0c;创建的测试类需要继承该基类 步骤&#xff1a; &#xff08;1&#x…
阅读更多...
Vue2（十一）：全局事件总线、消息订阅与发布pubsub、TodoList的编辑功能、$nextTick、过渡与动画

Vue2（十一）：全局事件总线、消息订阅与发布pubsub、TodoList的编辑功能、$nextTick、过渡与动画

一、全局事件总线 1、思路解析 一种组件间通信的方式&#xff0c;适用于任意组件间通信。通俗理解就是一个定义在所有组件之外的公共x&#xff0c;这个x可以有vm或vc上的同款$on、$off、$emit&#xff0c;也可以让所有组件都访问到。 第一个问题&#xff1a;那怎样添加这个x才…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023