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

news2025/4/6 10:15:06

在这里插入图片描述

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

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

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,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/1547081.html

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

相关文章

【医学实体识别】从糖尿病论文和临床指南中,做关键信息分类

从糖尿病论文和临床指南中&#xff0c;做关键信息分类 实体识别输入输出疾病实体治疗实体常规实体 算法设计BiLSTM-CRF 论文BiLSTM-CRF 应用BiLSTM-CRF VS 大模型 构建知识图谱 实体识别 比赛&#xff1a;https://tianchi.aliyun.com/competition/entrance/231687/information…

以太网PHY,MAC及其通信接口介绍

本文主要介绍以太网的 MAC 和 PHY&#xff0c;以及之间的 MII&#xff08;Media Independent Interface &#xff0c;媒体独立接口&#xff09;和 MII 的各种衍生版本——GMII、SGMII、RMII、RGMII等。 一&#xff1a;简介 从硬件的角度看&#xff0c;以太网接口电路主要由MA…

下载最新VMware,专业版本

VMware - Delivering a Digital Foundation For BusinessesRun any app on any cloud on any device with a digital foundation built on VMware solutions for modern apps, multi-cloud, digital workspace, security & networking.https://www.vmware.com/ 官网地址

Mysql新建数据库报错1044

mysql创建数据库报错 1044 - Access denied for user ‘root‘%‘ to database ‘XXX‘ 解决参考&#xff1a;MySQL新建表&#xff1a;1044 - Access denied for user ‘root‘%‘ to database ‘XXX‘终极解决方案_cannot create table [sheet]: 1044 - access denied -CSDN博…

Git学习(一)基于本地操作:Git初识、Git安装(Linux-ubuntu)、Git 基本操作、分支管理

目录 Git 初识 Git 安装&#xff08;Linux-ubuntu&#xff09; Git 基本操作 创建 Git 本地仓库 配置 Git 认识工作区、暂存区、版本库 添加文件 查看 .git 文件 修改文件 版本回退 撤销修改 情况一&#xff1a;对于工作区的代码&#xff0c;还没有 add 情况二&am…

面试经典150题【101-110】

文章目录 面试经典150题【101-110】9.回文数61.加一172.阶乘后的069.x的平方根50.Pow(x,n)149.直线上最多的点数52.N皇后II120.三角形最小路径和64.最小路径和63.不同路径II 面试经典150题【101-110】 6道偏数学的题和4道二维dp 9.回文数 一开始想转为字符串再判断。后来发现…

盛⽔最多的容器【双指针】

首先我们设该容器的两边为左右两边界。 这道题中的&#xff1a;盛⽔最大容量 底 * 高 左右两边界距离 * 左右两边界的较短板。 这道题如果用暴力求解&#xff0c;是个人都能想到怎么做&#xff0c;遍历所有的情况即可。 有没有更好的办法呢&#xff1f;我是搜了资料了解的。我…

计算机视觉技术:美颜SDK在直播平台的集成与优化

当下&#xff0c;美颜技术在直播平台中的应用变得愈发重要。接下俩&#xff0c;小编将深度讲解计算机视觉技术在美颜SDK集成与优化方面的应用&#xff0c;以提升直播平台的用户体验。 一、美颜技术的发展 传统的美颜功能只是简单地对图像进行柔化处理&#xff0c;而现在的美颜…

论文导读 | 漫谈图神经网络

本文主要介绍图神经网络相关内容&#xff0c;包括图神经网络的基本结构以及近期研究进展。 背景 在实际生活中&#xff0c;许多数据都可以用图的形式表达&#xff0c;比如社交网络、分子模型、知识图谱、计算机网络等。图深度学习旨在&#xff0c;显式利用这些数据中的拓扑结…

各类主流电商API商品采集接口的权限控制和功能权限控制

主流电商平台的API接口类型 参数说明 通用参数说明 url说明 /平台/API类型/ 平台&#xff1a;淘宝&#xff0c;京东等&#xff0c; API类型:[item_search,item_get,item_search_shop等]version:API版本key:调用key,测试key:test_api_keysecret:调用secret,测试secret:(不用填写…

思腾合力携AI服务器亮相第二十一届中国电博会

博会已发展成为海峡两岸IT产业界规模最大、参展企业最多、产业配套最全的知名展会之一&#xff0c;今年以“数字赋能、创新制造”为主题&#xff0c;线下参展企业达400家。展会期间&#xff0c;举办了论坛与产业洽谈会等系列活动&#xff0c;进一步推动了两岸电子信息产业融合发…

码垛机与人工搬运:效率与安全性的比较分析

在现代包装行业中&#xff0c;泡沫箱因其轻便和保温特性被广泛用于商品的包装与运输。随着自动化技术的不断发展&#xff0c;码垛机成为提升泡沫箱生产效率、降低劳动强度的关键技术。本文旨在比较码垛机与人工码垛在泡沫箱生产中的优势&#xff0c;并探讨自动化码垛的未来发展…

4、事件修饰符、过滤器、自定义指令、生命周期

一、事件修饰符 按键别名enter 回车 delete 删除键 esc取消键 space 空格键 <script> export default {name: "KeyUp",methods:{keyUp(e){ console.log(e) }},skip(){window.location.href "http:www.xx.com"} } </script> <template>…

数学算法(算法竞赛、蓝桥杯)--最大公约数,欧几里得算法

1、B站视频链接&#xff1a;G05 最大公约数 欧几里得算法_哔哩哔哩_bilibili 题目链接&#xff1a;[NOIP2001 普及组] 最大公约数和最小公倍数问题 - 洛谷 #include <bits/stdc.h> using namespace std; typedef long long LL; LL x,y,ans;LL gcd(LL a,LL b){return b0?…

网工内推 | 松下电器,解决方案工程师,最高25K,IE认证优先

01 松下电器 招聘岗位&#xff1a;基盘解决方案架构师 职责描述&#xff1a; 1、网络的规划设计&#xff0c;架构实施和故障排渣以及调优 2、负责网络设备的选型、搭建、系统监控、故障解决、性能优化 3、负责对集团内相关业务&#xff0c;进行提案或项目管理相关工作 4、对…

Java多线程的常用方法和使用

多线程 哈喽大家好&#xff0c;我是薛慕昭&#xff0c;今天来回顾一下java的多线程&#xff0c;例如实现的方法等。 一、多线程常用方法 下面我们演示一下getName()、setName(String name)、currentThread()、sleep(long time)这些方法的使用效果。 public class MyThread e…

编译安装飞桨fastdeploy@FreeBSD(失败)

FastDeploy是一款全场景、易用灵活、极致高效的AI推理部署工具&#xff0c; 支持云边端部署。提供超过 &#x1f525;160 Text&#xff0c;Vision&#xff0c; Speech和跨模态模型&#x1f4e6;开箱即用的部署体验&#xff0c;并实现&#x1f51a;端到端的推理性能优化。包括 物…

铁威马TOS 6.0 Beta全球公测进行中,快来体验一下吧!

铁威马TOS 6.0 Beta已经正式上线啦 大家体验了吗? 今天和大家分享TOS 6.0的更新指南 01TOS 6 Beta更新指南 为了更好的体验TOS 6 请细阅以下指南 敲重点&#xff01; 本次更新仅适用于TOS 5.1.123 或以后的版本&#xff1b;如您的设备不符合更新条件&#xff0c;请勿更新…

2024年道路运输企业主要负责人证模拟考试题库及道路运输企业主要负责人理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年道路运输企业主要负责人证模拟考试题库及道路运输企业主要负责人理论考试试题是由安全生产模拟考试一点通提供&#xff0c;道路运输企业主要负责人证模拟考试题库是根据道路运输企业主要负责人最新版教材&#…

速看!2024广州国际服务机器人产业博览会

2024广州国际服务机器人产业博览会 时间&#xff1a;2024年12月19-21日 地点&#xff1a;中国进出口商品交易会琶洲展馆 近年来我国服务机器人智能化、个性化水平快速提升&#xff0c;使其需求领域不断扩展&#xff0c;销售额不断增长。尤其是疫情带动服务机器人需求增长&am…