【python】flask模板渲染引擎Jinja2，通过后端数据渲染前端页面

在这里插入图片描述

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

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

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，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高阶用法持续更新中！！！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于SpringBoot和Leaflet的行政区划地图掩膜效果实战

基于SpringBoot和Leaflet的行政区划地图掩膜效果实战

目录 前言 一、掩膜小知识 1、GIS掩膜的实现原理 2、图层掩膜流程 二、使用插件 1、leaflet-mask介绍 2、核心代码解释 三、完整实例实现 1、后台逻辑实现 2、省级行政区划查询实现 3、行政区划定位及掩膜实现 4、成果展示 总结 前言 在之前的博客提过按空间矢量…
阅读更多...
web服务应用术语

web服务应用术语

一、HTTP 协议详解 TCP 协议与 HTTP 协议 TCP 协议主要用于数据传输控制&#xff0c;而 HTTP 协议主要用于应用层面的数据交互。 HTTP 属于应用层协议&#xff0c;是建立在 TCP 协议基础之上的&#xff0c;HTTP 协议以客户端请求和服务器端响应为标准&#xff0c;浏览器通常称…
阅读更多...
智慧公厕，让数据和技术更好服务社会生活

智慧公厕，让数据和技术更好服务社会生活

智慧公厕&#xff0c;作为智慧城市建设中不可忽视的一部分&#xff0c;正逐渐受到越来越多人的关注。随着科技的不断进步&#xff0c;智能化公厕已经成为一种趋势&#xff0c;通过数据的流转和技术的整合&#xff0c;为社会生活带来了更好的服务。本文以智慧公厕源头实力厂家广…
阅读更多...
C#学习笔记3：Windows窗口计时器

C#学习笔记3：Windows窗口计时器

今日继续我的C#学习之路&#xff0c;今日学习自己制作一个Windows窗口计时器程序&#xff1a; 文章提供源码解释、步骤操作、整体项目工程下载 完成后的效果大致如下&#xff1a;&#xff08;可选择秒数&#xff0c;有进度条&#xff0c;开始计时按钮等&#xff09; &#xf…
阅读更多...
宝塔面板操作一个服务器域名部署多个网站

宝塔面板操作一个服务器域名部署多个网站

此处记录IP一样&#xff0c;端口不一样的操作方式&#xff1a; 宝塔面板操作&#xff1a; 1、创建第一个网站&#xff1a; 网站名用IP地址&#xff0c;默认80端口。 创建好后&#xff0c;直接IP访问就可以了。看到自带的默认首页 2、接下来部署第二个网站&#xff1a; 仍然是…
阅读更多...
HCIP—BGP路由发布

HCIP—BGP路由发布

R1和R2&#xff0c;R4和R5建立EBGP对等体 R1和R2&#xff08;R4和R5&#xff09;之间属于EBGP对等体&#xff0c;可以使用直连物理接口建立对等体关系&#xff0c;TTL值默认1。由于使用直连物理接口方式建立&#xff0c;刚好一跳到达。 [R1]bgp 100 [R1-bgp]router-i…
阅读更多...
【教程】PLSQL查看表属性乱码解决方法

【教程】PLSQL查看表属性乱码解决方法

一、前言 PL/SQL是Oracle数据库的编程语言&#xff0c;用于编写存储过程、触发器、函数等。 今天用plsql想查看表的属性&#xff0c;看看各个字段的注释&#xff0c;可是打开一看&#xff0c;居然是乱码的&#xff0c;如下面这样 如果在使用PL/SQL查看表属性时出现乱码&…
阅读更多...
uniapp开发小程序遇到的问题，持续更新中

uniapp开发小程序遇到的问题，持续更新中

一、uniapp引入全局scss 在App.vue中引入uni.scss <style lang"scss">/* #ifndef APP-NVUE */import "uni.scss";/* #endif */ </style>注意&#xff1a;nvue页面的样式在编译时&#xff0c;有很多样式写法被限制了&#xff0c;容易报错。所…
阅读更多...
R语言随机抽取数据，并作两组数据间t检验，并保存抽取的数据，并绘制boxplot

R语言随机抽取数据，并作两组数据间t检验，并保存抽取的数据，并绘制boxplot

前提&#xff1a;接着上述R脚本输出的seed结果来选择应该使用哪个seed比较合理&#xff0c;上个R脚本名字&#xff1a; “5utr_计算ABD中Ge1和Lt1的个数和均值以及按照TE个数小的进行随机100次抽样.R” 1.输入数据&#xff1a;“5utr-5d做ABD中有RG4和没有RG4的TE之间的T检验.c…
阅读更多...
LeetCode 面试经典150题 383.赎金信

LeetCode 面试经典150题 383.赎金信

题目&#xff1a; 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 思路&#x…
阅读更多...
TransE

TransE

知识图谱嵌入表示实战——基于TransE、Pytorch的知识图谱嵌入项目&#xff08;源代码和运行实例&#xff09;_transe pytorch-CSDN博客文章浏览阅读4.1k次&#xff0c;点赞16次&#xff0c;收藏89次。知识图谱常用的嵌入方法主要有TransE、TransH、TransR、RESCAL、DistMult、C…
阅读更多...
【贪心]【字符串】【分类讨论】420 强密码检验器

【贪心]【字符串】【分类讨论】420 强密码检验器

本文涉及知识点 贪心 字符串 分类讨论 LeetCode420 强密码检验器 满足以下条件的密码被认为是强密码&#xff1a; 由至少 6 个&#xff0c;至多 20 个字符组成。 包含至少 一个小写 字母&#xff0c;至少 一个大写 字母&#xff0c;和至少 一个数字 。 不包含连续三个重复字…
阅读更多...
SQL Server 存储过程——SQL Server 储存过程的创建与使用

SQL Server 存储过程——SQL Server 储存过程的创建与使用

任务描述 本关任务&#xff1a;学习 SQL Server 中存储过程的创建和使用。 相关知识 存储过程提供了很多 T-SQL 语言没有的高级特性&#xff0c;其传递参数和执行逻辑的能力&#xff0c;为处理各种复杂任务提供了支持。并且&#xff0c;由于存储过程是经过编译后&#xff0c…
阅读更多...
云手机：实现便携与安全的双赢

云手机：实现便携与安全的双赢

随着5G时代的到来&#xff0c;云手机在各大游戏、直播和新媒体营销中扮演越来越重要的角色。它不仅节约了成本&#xff0c;提高了效率&#xff0c;而且在边缘计算和云技术逐渐成熟的背景下&#xff0c;展现出了更大的发展机遇。 云手机的便携性如何&#xff1f; 云手机的便携性…
阅读更多...
奇偶校验|ECC内存|海明码

奇偶校验|ECC内存|海明码

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;本篇文章给大家介绍数据出错和有什么方法能减少出错。 单比特翻转 由于硬件故障或其他原因&#xff0c;内存或其他存储设备中的单个比特位发生随机变化的现象。 例如&#xff0c;原本存储为1的位可能变为0&#xff0c;或…
阅读更多...
Git入门（Git快速下载，安装，配置，远程仓库，本地仓库，IDEA提交代码，VScode提交代码使用方案一体）

Git入门（Git快速下载，安装，配置，远程仓库，本地仓库，IDEA提交代码，VScode提交代码使用方案一体）

Git快速下载 通过阿里镜像可以自由挑选版本并快速下载CNPM Binaries Mirrorhttp://npm.taobao.org/mirrors/git-for-windows/ 这里安装最新版本 下载安装文件 安装完后双击文件即可开始安装git 安装 git的安装傻瓜式Next即可 配置 打开git&#xff1a;桌面空白处右击&#…
阅读更多...
雷卯推荐多种系列汽车级TVS供您选择

雷卯推荐多种系列汽车级TVS供您选择

1. 车规级TVS的应用 2.车规级TVS系列表格如下 3.方案推荐 12V汽车电源浪涌保护方案 方案优点&#xff1a;用于满足前装汽车的ISO7637-2 5A5BA测试&#xff0c;可采用单独大功率的TVS或PTCTVS的组合方案&#xff0c;满足ISO10605-2&#xff0c; 等级4&#xff0c;接触放电15K…
阅读更多...
Python包管理工具 pip 及其常用命令和参数用法

Python包管理工具 pip 及其常用命令和参数用法

目录 PIP 主要功能 安装包 升级包 卸载包 列出包 检查依赖 pip的配置和环境 主要用法 1&#xff1a;版本 2&#xff1a;安装 Python 库 3&#xff1a;升级库 4&#xff1a;卸载库 5&#xff1a;搜索库 6&#xff1a;查看已安装库详细信息 7&#xff1a;只下载库…
阅读更多...
[CISCN2019 华东北赛区]Web2

[CISCN2019 华东北赛区]Web2

[CISCN2019 华东北赛区]Web2 随便注册一个登录&#xff0c;发现 还有反馈页面&#xff0c;一看就知道大概率是xss&#xff0c;应该是为了得到管理员cookie扫描了一下&#xff0c;果然有admin.php后台登录 buu可以连接访问外网了&#xff0c;所以内部的xss平台关闭了&#xff0…
阅读更多...
2014年认证杯SPSSPRO杯数学建模A题(第一阶段)轮胎的花纹全过程文档及程序

2014年认证杯SPSSPRO杯数学建模A题(第一阶段)轮胎的花纹全过程文档及程序

2014年认证杯SPSSPRO杯数学建模 A题 轮胎的花纹 原题再现&#xff1a; 轮胎被广泛使用在多种陆地交通工具上。根据性能的需要&#xff0c;轮胎表面常会加工出不同形状的花纹。在设计轮胎时&#xff0c;往往要针对其使用环境&#xff0c;设计出相应的花纹形状。   第一阶段问…
阅读更多...
最新文章

Copyright @ 2022~2023