【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_stringapp = 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 htmlif __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, gapp = Flask(__name__, template_folder="templates")app.config["SECRET_KEY"] = "my secret key"@app.route("/")
def index():# 基本类型num = 100num2 = 3.14is_bool = Truetitle = "网页标题"# 复合类型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 = 300html = 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.mzph.cn/news/773220.shtml

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

相关文章

Spring Cloud 八：微服务架构中的数据管理

Spring Cloud 八：微服务架构中的数据管理

Spring Cloud 一&#xff1a;Spring Cloud 简介 Spring Cloud 二&#xff1a;核心组件解析 Spring Cloud 三&#xff1a;API网关深入探索与实战应用 Spring Cloud 四&#xff1a;微服务治理与安全 Spring Cloud 五&#xff1a;Spring Cloud与持续集成/持续部署&#xff08;CI/C…
阅读更多...
Eladmin-jpa基于SpringBoot和Vue的前后端分离后台管理系统​

Eladmin-jpa基于SpringBoot和Vue的前后端分离后台管理系统​

在当今快速发展的软件开发领域&#xff0c;前后端分离的架构模式已经成为主流。这种架构模式不仅可以提高开发效率&#xff0c;还能使系统更加易于维护和扩展。Eladmin-jpa是一个基于Spring Boot 2.6.4、Spring Boot Jpa、JWT、Spring Security、Redis和Vue的前后端分离的后台管…
阅读更多...
JS等比压缩图片方法

JS等比压缩图片方法

AI给出来的答案&#xff0c;AI真的能改变世界&#xff0c;以后程序员这个职业真的有可能不存在了。 function compressImage(image, callback) {// 创建一个 canvas 元素const canvas document.createElement(canvas);canvas.width 48;canvas.height 48;// 获取 canvas 的绘…
阅读更多...
[WTL/Win32]_[初级]_[如何设置ListView的列宽不出现水平滚动条]

[WTL/Win32]_[初级]_[如何设置ListView的列宽不出现水平滚动条]

场景 开发WTL/Win32的程序时&#xff0c;经常会用到表格控件CListViewCtrl。这个控件需要设置列的宽度&#xff0c;当用完100%的宽度来平均分配给列宽时&#xff0c;一加载数据多&#xff0c;就会出现垂直滚动条后&#xff0c;水平滚动条也会同时出现的问题。怎么设置才能让水…
阅读更多...
Stable Diffusion 本地部署教程

Stable Diffusion 本地部署教程

Stable Diffusion是一种用于构建和部署机器学习模型的开源工具。以下是在本地环境中部署 Stable Diffusion 的基本步骤： 步骤 1: 准备环境 确保你的系统中已经安装了以下软件和工具： Python（建议使用 Python 3.x）pip（Python 包管理工具）Docker（可选，用于容器化部署）…
阅读更多...
【研发日记】Matlab/Simulink开箱报告(十)——Signal Routing模块模块

【研发日记】Matlab/Simulink开箱报告(十)——Signal Routing模块模块

文章目录 前言 Signal Routing模块 虚拟模块和虚拟信号 Mux和Demux Vector Concatenate和Selector Bus Creator和Bus Selector 分析和应用 总结 前言 见《开箱报告&#xff0c;Simulink Toolbox库模块使用指南&#xff08;五&#xff09;——S-Fuction模块(C MEX S-Fun…
阅读更多...
三、 mariadb数据库用户管理

三、 mariadb数据库用户管理

1)查询有哪些用户 MariaDB> select user,host from mysql.user; ----------------- | user | host | ----------------- | root | 127.0.0.1 | | root | ::1 | | | localhost | | root | localhost | | | oldboy | | root | oldboy | ---------…
阅读更多...
单链表专题（上）（顺序表链表线性表）

单链表专题（上）（顺序表链表线性表）

在开始之前思考一个顺序表的问题 1. 中间/头部的插⼊删除&#xff0c;时间 复杂度为O(N) 2. 增容需要申请新空间&#xff0c;拷⻉数据&#xff0c;释放旧空间。会有不⼩的消耗。 3. 增容⼀般是呈2倍的增⻓&#xff0c;势必会有⼀定的空间浪费。例如当前容量为100&#xff0c;…
阅读更多...
类模板分文件编写

类模板分文件编写

问题&#xff1a; 类模板中成员函数创建时机是在调用阶段&#xff0c;导致分文件编写时链接不到 解决&#xff1a; 解决方式1&#xff1a;直接包含.cpp源文件 解决方式2&#xff1a;将声明和实现写到同一个文件中&#xff0c;并更改后缀名为.hpp&#xff0c;hpp是约定的名称…
阅读更多...
订单系统-RPC快速入门

订单系统-RPC快速入门

RPC快速入门 概述 关于rpc&#xff0c;只需要知道他是一种协议&#xff0c;项目之间能够远程调用函数。 快速入门 我们前边下载好的两个包&#xff0c;在idea中打开之后&#xff0c;我们创建这么几个文件夹。 至于是干什么的&#xff0c;以后细说。创建好之后我们在produc…
阅读更多...
【Java 面试题】面向对象和面向过程的区别

【Java 面试题】面向对象和面向过程的区别

面向对象和面向过程的区别&#xff1f; 面向对象编程&#xff08;OOP&#xff09;和面向过程编程&#xff08;POP&#xff09;是两种不同的编程范式&#xff0c;它们之间有一些重要的区别&#xff1a; 思想方式&#xff1a; 面向对象编程&#xff1a;将问题看作是一组对象之间…
阅读更多...
【OpenStack】创建并部署自己的Web服务器和应用

【OpenStack】创建并部署自己的Web服务器和应用

【OpenStack】创建并部署自己的Web服务器和应用 目录 【OpenStack】创建并部署自己的Web服务器和应用云服务的工作原理查看Swift Python SDK连接发送请求使用其他SDK和其他语言运行项目克隆存储库安装项目依赖项定义环境配置启动服务器推荐超级课程： Docker快速入门到精通
阅读更多...
C语言如何定义有参函教？

C语言如何定义有参函教？

一、问题 有参函数是函数的重点部分&#xff0c;那么如何定义有参函数呢&#xff1f; 二、解答 有参函数定义的⼀般形式如下。 类型声明符 函数名&#xff08;形式参数列表&#xff09; {声明部分;语句; } 在形参列表中给出的参数称为形式参数&#xff0c;它们可以是各种类型…
阅读更多...
从零开始搭建游戏服务器 第七节 创建GameServer

从零开始搭建游戏服务器 第七节 创建GameServer

目录 前言正文创建GameServer模块修改配置创建NettyClient连接到登录服登录服修改创建协议游戏服注册到登录服 总结 前言 上一节我们使用自定义注解反射简化了协议解包和逻辑处理分发流程。 那么到了这里登录服登录服的架构已经搭建的差不多了&#xff0c;一些比较简单的、并发…
阅读更多...
使用 Outline 构建 企业 or 个人 知识库面临的问题

使用 Outline 构建 企业 or 个人 知识库面临的问题

前不久&#xff0c;我写了一篇文章&#xff0c;介绍《如何在本地部署安装 Outline》&#xff0c;我之所以写这篇文章&#xff0c;主要原因是我最近需要做一个项目&#xff0c;使用 Outline 来构建一个公司级知识库。所以我需要在本地先搭建一个&#xff0c;来撰写一些前期的文档…
阅读更多...
【环境配置】Ubuntu MySQL 8.0.28 安装并允许外部客户端连接

【环境配置】Ubuntu MySQL 8.0.28 安装并允许外部客户端连接

文章目录 MySQL 安装步骤配置 MySQL Server 允许外部连接 MySQL 安装步骤 步骤一&#xff1a;在 MySQL 官网找到 apt 仓库&#xff0c;下载最新的仓库 点击 Download&#xff1a; 输入如下命令&#xff1a; sudo wget -c https://dev.mysql.com/get/mysql-apt-config_0.8…
阅读更多...
2014年认证杯SPSSPRO杯数学建模A题(第一阶段)轮胎的花纹全过程文档及程序

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

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

JVM（三）——字节码技术

三、字节码技术 1、类文件结构 一个简单的 HelloWorld.java package com.mysite.jvm.t5; // HelloWorld 示例 public class HelloWorld {public static void main(String[] args) {System.out.println("hello world");} }执行 javac -parameters -d . HellowWorld.…
阅读更多...
Selenium 自动化 —— 实战篇之自动登录163邮箱

Selenium 自动化 —— 实战篇之自动登录163邮箱

Selenium 自动化专栏系列文章 &#xff08;一&#xff09;入门和 Hello World 实例&#xff08;二&#xff09;使用WebDriverManager自动下载驱动&#xff08;三&#xff09;Selenium IDE录制、回放、导出Java源码&#xff08;四&#xff09;浏览器窗口操作&#xff08;五&…
阅读更多...
AI时代-普通人的AI绘画工具对比（Midjouney与Stable Diffusion）

AI时代-普通人的AI绘画工具对比（Midjouney与Stable Diffusion）

AI时代-普通人的AI绘画工具对比&#xff08;Midjouney与Stable Diffusion&#xff09; 前言1、基础对比Stable Diffusion&#xff08;SD&#xff09;SD界面安装与使用SD Midjouney&#xff08;MJ&#xff09; 2、硬件与运行要求对比Stable Diffusion硬件要求内存硬盘显卡 Midjo…
阅读更多...
最新文章

Copyright @ 2022~2023