Python flask 模板详解

文章目录

  • 1 概述
    • 1.1 模板简介
    • 1.2 templates 文件
    • 1.3 简单应用
  • 2 模板语法
    • 2.1 for 循环
    • 2.2 if 判断
  • 3 模板的继承
    • 3.1 格式要求
    • 3.2 实现示例
    • 3.3 复用父模板的内容:super

1 概述

1.1 模板简介

  • 定义:定义好的 html 文件,用于快速开发 web 页面
  • Jinja2:Flask 配套的模板,修改后文件后,可自动加载,并且执行效率高

1.2 templates 文件

  • templates:用于存放所有的模板文件,固定文件名,不可修改,否则找不到对应的 html 文件
  • 比如:在 templates 文件夹下,创建一个 index.html,目录结构如下:
    在这里插入图片描述

templates 默认在项目路径下,也可自定义,如下:

# template_folder:定义模板的位置
app = Flask(__name__,template_folder=r'C:\templates')

1.3 简单应用

  • 目录结构同上(1.2 templates 文件)
  • 一下测试内容,替换对应的 xx.htmlxx.py 即可

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>我的模板html内容:<br/>{{ name }} <br/>{{ age }}
</body>
</html>

其中 {{ }} 表示引用变量

app.py:

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():name = '张三'age = 18return render_template('index.html',name=name,age=age)if __name__ == '__main__':app.run(debug=True)

浏览器访问结果:
在这里插入图片描述

2 模板语法

2.1 for 循环

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tbody>{% for l in test_list %}<tr><td> {{ l['name'] }}</td><td> {{ l['age'] }}</td><td> {{ l['sex'] }}</td></tr>{% endfor %}</tbody>
</table>
</body>
</html>

app.py:

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():test_list = [{'name': '张三', 'age': 18, 'sex': '女'},{'name': '李四', 'age': 19, 'sex': '男'},{'name': '王五', 'age': 20, 'sex': '女'}]return render_template('login.html',test_list=test_list)if __name__ == '__main__':app.run(debug=True)

浏览器访问结果:
在这里插入图片描述

2.2 if 判断

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
{% if name == '张三' %}
<p> 我是 {{ name }} </p>
{% elif name == '李四' %}
<p> 她是 {{ name }} </p>
{% else %}
<p> 不认识</p>
{% endif%}
</table>
</body>
</html>

app.py:

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():name = '张三'return render_template('login.html',name=name)if __name__ == '__main__':app.run(debug=True)

浏览器访问结果:

在这里插入图片描述

3 模板的继承

3.1 格式要求

# 继承来自 base.html 的样式
{% extends "base.html" %}# 数据格式
{% block 自定义名称 %}自定义内容
{% endblock %}

3.2 实现示例

目录结构:
在这里插入图片描述

base.html:公共部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>公共部分</title><style type="text/css">.container {width: 600px;height: 500px;margin: 0 auto;}header {background: blue;}article {background: white;height: 500px;}footer {background-color: red;}</style>
</head>
<body>
<div class="container"><header>{% block header %}{% endblock %}</header><article>{% block content %}{% endblock %}</article><footer>{% block footer %}123{% endblock %}</footer>
</div>
</body>
</html>

index.html 首页部分

{% extends 'base.html' %}{% block header%}首部
{% endblock %}{% block content %}内容
{% endblock %}{% block footer %}尾部
{% endblock %}

app.py:

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True)

浏览器访问效果:
在这里插入图片描述

3.3 复用父模板的内容:super

<!-- 语法格式:{{ supper() }}
--><!-- 示例:在上述 3.2 实现示例 的 index.html 中修改下列内容
-->
{% block footer %}{{ super() }}尾部
{% endblock %}

在这里插入图片描述

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

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

相关文章

【linux】git和gdb调试工具

在linux下提交代码同步到gitee 1.创建一个新的仓库&#xff08;演示步骤&#xff09; 2.init 这两个步骤用于识别提交代码的身份&#xff0c;一个你的名字&#xff0c;一个你的邮箱 开启本地仓库 克隆本地仓库成功 我们将这个仓库拷到了111目录底下. 我们发现少了一个.gitig…

Centos 7.5 安装 NVM 详细步骤

NVM&#xff08;Node Version Manager&#xff09;是一个用于管理Node.js版本的工具&#xff0c;它可以让你轻松地在多个版本之间切换。NVM 通过下载和管理 Node.js 的多个版本&#xff0c;为用户提供了一种灵活的方式来使用不同版本的 Node.js。如果你需要更多关于NVM的信息&a…

【云原生之kubernetes系列】--污点与容忍

污点与容忍 污点&#xff08;taints)&#xff1a;用于node节点排斥Pod调度&#xff0c;与亲和效果相反&#xff0c;即taint的node排斥Pod的创建容忍&#xff08;toleration)&#xff1a;用于Pod容忍Node节点的污点信息&#xff0c;即node节点有污点&#xff0c;也将新的pod创建…

超时引发的牛角尖二(hystrix中的超时)

至今我都清楚记得自己负责的系统请求云上关联系统时所报的异常信息。为了解决这个异常&#xff0c;我坚持让这个关联系统的负责人查看&#xff0c;并且毫不顾忌他的嘲讽和鄙视&#xff0c;甚至无视他烦躁的情绪。不过我还是高估了自己的脸皮&#xff0c;最终在其恶狠狠地抛下“…

Blender_查看版本

Blender_查看版本 烦人的烦恼&#xff0c;没找见哪儿可以查看版本&#xff1f; 算是个隐蔽的角落&#xff01;

[设计模式Java实现附plantuml源码~结构型]处理多维度变化——桥接模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…

10_机械臂运动学_机械臂C++逆解——2023

就是算&#xff01; 遨博机械臂改进DH参数表&#xff1a; 机械臂正运动学连杆变换通式&#xff1a; 其中si代表sin(θi),ci代表cos(θi) sij代表sin(θi-θj),cij代表cos(θi-θj) sijk代表sin(θi-θjθk),cijk代表cos(θi-θj-θk)&#xff0c;用两角和差公式直接展开即可. 每…

[Linux 进程控制(二)] 写时拷贝 - 进程终止

文章目录 1、写时拷贝2、进程终止2.1 进程退出场景2.1.1 退出码2.1.2 错误码错误码 vs 退出码2.1.3 代码异常终止引入 2.2 进程常见退出方法2.2.1 exit函数2.2.2 _exit函数 本片我们主要来讲进程控制&#xff0c;讲之前我们先把写时拷贝理清&#xff0c;然后再开始讲进程控制。…

前端文艺复兴:Vue3真的需要Pinia吗?

前言 说起Pinia&#xff0c;熟悉 vue3 开发的程序员肯定不会陌生&#xff0c;甚至被vue官方推荐取代vuex&#xff0c;成为vue全家桶之一。 疑惑 还记得之前用 vuex 时&#xff0c;更改 state 还分同步和异步&#xff08;这里有尤雨溪的回答www.zhihu.com/question/48… &…

【TCP/IP】用户访问一个购物网站时TCP/IP五层参考模型中每一层的功能

当用户访问一个购物网站时&#xff0c;网络上的每一层都会涉及不同的协议&#xff0c;具体网络模型如下图所示。 以下是每个网络层及其相关的协议示例&#xff1a; 物理层&#xff1a;负责将比特流传输到物理媒介上&#xff0c;例如电缆或无线信号。所以在物理层&#xff0c;可…

创建TextMeshPro字体文件

相比于Unity的Text组件&#xff0c;TextMesh Pro提供了更强大的文本格式和布局控制&#xff0c;更高级的文本渲染技术&#xff0c;更灵活的文本样式和纹理支持&#xff0c;更好的性能以及更易于使用的优点。但unity自带TextMeshPro字体不支持中文。这里使用普通字体文件生成Tex…

docker更换镜像源

添加的镜像源 {"registry-mirrors": ["https://registry.cn-hangzhou.aliyuncs.com", "https://reg-mirror.qiniu.com/", "https://docker.mirrors.ustc.edu.cn"] }docker更换镜像源之后一定要重启守卫 systemctl daemon-reloaddock…