Chapter(Python)(Flask)(Jinja2模版)

基础使用

创建模板

  1. 在应用同级目录下创建模板文件夹 templates . 文件夹名称固定写法
  2. 在 templates 文件夹下, 创建 应用 同名文件夹. 例 Book
  3. 在应用同名文件夹下创建 网页模板 文件. 例 : index.html
from flask import Flask, render_template

# 创建一个Flask对象
app = Flask(__name__)

# 模板默认查找的目录是 templates 如果想修改模板目录,可以下面这样设置
# app = Flask(__name__, template_folder='template')


@app.route('/')
def func_01():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)

模板传参

参数少可以直接这么传

from flask import Flask, render_template

# 创建一个Flask对象
app = Flask(__name__)

# 模板默认查找的目录是 templates 如果想修改模板目录,可以下面这样设置
# app = Flask(__name__, template_folder='template')


@app.route('/')
def func_01():
    return render_template('index.html', name = '蒋浩')


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是模板渲染</p>
    <p>{{ name }}</p>
</body>
</html>

如果你的参数项过多,那么可以将所有的参数放到一个字典中,然后在传这个字典参数的时候,使用两个星号,将字典打散成关键字参数(也叫命名参数)

from flask import Flask, render_template

# 创建一个Flask对象
app = Flask(__name__)


# 模板默认查找的目录是 templates 如果想修改模板目录,可以下面这样设置
# app = Flask(__name__, template_folder='template')


@app.route('/')
def func_01():
    context = {
        'name': 'momo',
        'age': 18,
        'country': 'china',
        'childrens': {
            'name': 'mjz',
            'height': '62cm'
        }
    }
    return render_template('index.html', **context)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是模板渲染</p>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ childrens.name }}</p>
</body>
</html>

当然你也可以直接传,不打散

from flask import Flask, render_template

# 创建一个Flask对象
app = Flask(__name__)


# 模板默认查找的目录是 templates 如果想修改模板目录,可以下面这样设置
# app = Flask(__name__, template_folder='template')


@app.route('/')
def func_01():
    context = {
        'name': 'momo',
        'age': 18,
        'country': 'china',
        'childrens': {
            'name': 'mjz',
            'height': '62cm'
        }
    }
    return render_template('index.html', context = context)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是模板渲染</p>
    <p>{{ context.name }}</p>
    <p>{{ context.childrens.name }}</p>
</body>
</html>

模板也可以使用url_for

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是模板渲染</p>
    <p>{{ url_for('func_01_login') }}</p>
    <a href="{{ url_for('func_01', name='zhangsan', age=20) }}">登录</a>
</body>
</html>

过滤器

有时候我们想要在模版中对一些变量进行处理,那么就必须需要类似于 Python 中的函数一样,可以将这个值传到函数中,然后做一些操作

在模版中,过滤器相当于是一个函数,把当前的变量传入到过滤器中,然后过滤器根据自己的功能,再返回相应的值,之后再将结果渲染到页面中

from flask import Flask, render_template

# 创建一个Flask对象
app = Flask(__name__)


@app.route('/')
def func_01():
    return 'Hello World'


@app.route('/login/')
def func_01_login():
    return render_template('index.html', param = 10.5)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
    <h1>过滤器的使用</h1>
    <p>过滤前的数据:{{ param }}</p>
    <p>过滤后的数据:{{ param | int }}</p> <!-- 过滤为整数 -->
</body>
</html>

内置过滤器

过滤器是通过管道符号 | 使用的,例如: { name | length }} 将返回 name 的长度

过滤器相当于是一个函数,把当前的变量传入到过滤器中,然后过滤器根据自己的功能,再返回相应的值,之后再将结果渲染到页面中

过滤器解释举例
abs(value)返回一个数值的绝对值-1 | abs
int(value)将值转换为int类型
float(value)将值转换为float类型
string(value)将变量转换成字符串
safe(value)如果开启了全局转义,那么safe过滤器会将变量关掉转义content_html | safe
escape(value)或e转义字符,会将<、> 等符号转义成HTML 中的符号content | escape 或 content | e
first(value)返回一个序列的第一 个元素names | first
format(value,*arags,**kwargs)格式化字符串{{ “%s”- “%s” | format(‘Hello?’,“Foo!”) }} 输出 Hello?-Fool!
last(value)返回一个序列的最后 一个元素names | last
length(value)返回一个序列或者字典的长度names | length
join(value,d=‘+’)将一个序列用d这个参数的值拼接成字符串
lower(value)将字符串转换为小写
upper(value)将字符串转换为大写
replace(value,old,new)替换将 old 替换为 new 的字符串
truncate(value,length=255,killwords=False)截取 length 长度的字符串
striptags(value)删除字符串中所有的 HTML 标签,如果出现多个空格,将替换成一个空格
trim截取字符串前面和后面的空白字符
wordcount(s)计算一个长字符串中单词的个数
default(value,default_value,boolean=false)

如果当前变量没有值,则会使用参数中的值来代替。如果想使用 python 的形式判断是否为 false
则可以传递 boolean=true 也可以使用 or 来替换

name | default('xiaotuo')


 <h1>default过滤器</h1>
过滤前的昵称数据是:{{nick_name}}<br>
过滤后的昵称数据是:{{nick_name | default('用户1',boolean=true)}}<br>
过滤后的昵称数据是:{{nick_name or '用户2'}}

<body>
    <h1>转义字符过滤器</h1>
    <!-- 模板中默认 做了转义字符的效果 -->
    转义前的数据是:{{ info | safe }}  <!-- 不转义:不将特殊字符转换成 &lt;类似的数据 -->
   	
   	<!-- 范围内 -->
   	{% autoescape true %} <!-- false代表不再转义特殊字符 / true 转义特殊字符 &lt;-->
   		{{info }}  <!-- 转义:将特殊字符转换成 &lt;类似的数据 -->
   	{% endautoescape %}
</body>

自定义过滤器

只有当系统提供的过滤器不符合需求后,才须自定义过滤器,过滤器本质上就是一个函数

如果在模版中调用这个过滤器,那么就会将这个变量的值作为第一个参数传给过滤器这个函数

然后函数的返回值会作为这个过滤器的返回值

需要使用到一个装饰器: @app.template_filter(‘过滤器名称’)

from flask import Flask, render_template

# 创建一个Flask对象
app = Flask(__name__)

# 将模版设置为自动加载模式
app.config['TEMPLATES_AUTO_RELOAD'] = True


@app.template_filter('cut')
def cut(value):
    value = value.replace("我是九你是三,除了你还是你", '你不用多好,我喜欢就好')
    return value


@app.route('/')
def func_01():
    return 'Hello World'


@app.route('/login/')
def func_01_login():
    return render_template('index.html', text = '我是九你是三,除了你还是你')


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
    <h1>过滤器的使用</h1>
    <p>过滤前的数据:{{ text }}</p>
    <p>过滤后的数据:{{ text | cut }}</p>
</body>
</html>

模板选择结构

所有的控制语句都是放在 {% … %} 中,并且有一个语句 {% endxxx %} 来进行结束

IF 语句和 Python 中的类似,可以使用 >,<,<=,>=,==,!= 来进行判断,也可以通过 and,or,not,() 来进行逻辑合并操作

from flask import Flask, render_template

# 创建一个Flask对象
app = Flask(__name__)


@app.route('/')
def func_01():
    return 'Hello World'


@app.route('/login/')
def func_02_login():
    return render_template('index.html', name='aaa', age=18)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
    <h1>选择结构</h1>
    {% if name == 'aaa' %}
    <p>华为</p>
    {% elif name == 'bbb'%}
    <p>荣耀</p>
    {% else %}
    <p>小米</p>
    {% endif %}

    {% if age >= 18 %}
    <p>{{ age }}岁,成年人,可以通宵打游戏</p>
    {% else %}
    <p>{{ age }}岁,未成年人,可以通宵学习</p>
    {% endif %}
</body>
</html>

模板循环结构

FOR 循环可以遍历任何一个序列包括列表、字典、元组。并且可以进行反向遍历,以下将用几个例子进行解释

Jinja2 中的 for 循环没有 break 和 continue 语句

变量描述
loop.index当前迭代的索引(从1开始)
loop.index0当前迭代的索引(从0开始)
loop.first是否是第一次迭代,返回True或False
loop.last是否是最后一次迭代,返回True或False
loop.length序列的长度
# 列表
<ul>
   {% for user in users%}
       <li>{{ user}}</li>
   {% endfor %}
</ul>

# 字典
<tr>
   {% for key in person.keys() %}
        <td>{{ key }}</td>
   {% endfor %}
</tr>
<tr>

<tr>
   {% for val in person.values() %}
        <td>{{ val }}</td>
   {% endfor %}
</tr>

<tr>
   {% for item in person.items() %}
        <td>{{ item }}</td>
   {% endfor %}
</tr>

<tr>
   {% for key,value in person.items() %}
        <td>{{ value }}</td>
   {% endfor %}
</tr>

如果序列中没有值的时候,进入 else 并且反向遍历用过滤器 reverse

<ul>
   {% for user in users | reverse %}
       <li>{{ user }}</li>
   {% else %}
        <li>没有任何用户</li>
   {% endfor %}
</ul>

宏定义

模板中的宏跟python中的函数类似,可以传递参数,但是不能有返回值,可以将一些经常用到的代码片段放到宏中,然后把一些不固定的值抽取出来当成一个变量

提示:实际开发中,不会把宏在一个页面内定义 并直接使用一般把宏定义放到一个专门的文件夹中,方便进行统一管理之后,哪一个页面需要使用某个宏,需要导入宏才能使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask</title>
</head>
<body>
	<!-- 定义宏 -->
    {% macro input(name="",value="",type="text") %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
    {% endmacro %}

    <table>
        <tr>
            <td>用户名:</td>
            <td>{{ input(name='username', value='jianghao')}}</td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>{{ input(name='pwd', value="123", type='password') }}</td>
        </tr>
        <tr>
        <td></td>
        <td>{{ input(value='提交',type='submit') }}</td>
        </tr>
    </table>
</body>
</html>

宏导入

在 templates 一个文件夹里面定义一个 HTML 文件直接写宏定义就可以了

宏文件路径,不要以相对路径去寻找,都要以 templates 作为绝对路径去找

如果想要在导入宏的时候,就把当前模版的一些参数传给宏所在的模版,那么就应该在导入的时候使用 with context (固定写法)

# 方式一
{% from "users/users.html" import input as inp with context %}

# 方式二  使用就是 user.xxx
{% import "users/users.html" as user with context %}

导入模板

这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置

include 标签,如果想要使用父模版中的变量,直接用就可以了,不需要使用 with context

include 的路径,也是跟 import 一样,直接从 templates 根目录下去找,不要以相对路径去找

<!DOCTYPE html>
<html lang="en"> <head>
    <meta charset="UTF-8">
    <title>SXT</title>
</head> <body>
    <!--通过include 引入头部log信息-->
   {% include "common/head.html" %}
    <div>
    	这是首页内容
       {{ major }}
    </div>
    <hr>
   <!--通过include 引入底部版权信息-->
   {% include "common/footer.html" %}
</body>
</html>

set 与 with 标签

在模版中,可以使用 set 语句来定义变量

<!--set语句来定义变量,之后,那么在后面的代码中,都可以使用这个变量-->
{% set uname='sxt' %}
<p>用户名:{{ uname }}</p>

一旦定义了这个变量,那么在后面的代码中,都可以使用这个变量,就类似于 Python 的变量定义是一样的

with 语句定义的变量,只能在 with 语句块中使用,超过了这个代码块,就不能再使用了

<!--with语句来定义变量,只有在指定区域 才能使用这个变量-->
{% with classroom='python202' %}
    <p>班级:{{ classroom }}</p>
{% endwith %}

注意:关于定义的变量, with 语句也不一定要跟一个变量,可以定义一个空的 with 语句,需要在指定的区域才能使用的情况,可以set与with组合使用

{% with %}
	{% set  pname='李思思' %}
   		<p>娱乐县县长:{{ pname }}</p>
{% endwith %}

静态文件

加载静态文件使用的是 url_for 函数。然后第一个参数需要为 static ,第二个参数需要为一个关键字参数 filename=‘路径’

# 语法
{{ url_for("static",filename='xxx') }}

路径查找,要以当前项目的 static 目录作为根目录

在这里插入图片描述

模板继承

为什么需要模版继承:模版继承可以把一些公用的代码单独抽取出来放到一个父模板中,以后子模板直接继承就可以使用了,这样可以重复的利用代码,并且以后修改起来也比较方便

使用 extends 语句,来指明继承的父模板。父模板的路径,也是相对于 templates 文件夹下的绝对路径

{% extends "base.html" %}

一般在父模版中,定义一些公共的代码。子模板可能要根据具体的需求实现不同的代码,这时候父模版就应该有能力提供一个接口,让子模板来实现。从而实现具体业务需求的功能

默认情况下,子模板如果实现了父模版定义的block。那么子模板 block 中的代码就会覆盖掉父模板中的代码。如果想要在子模板中仍然保持父模板中的代码,那么可以使用 {{ super( ) }} 来实现

# 父模板
{% block block_body %}
    <p style="background-color: blue">我是父模版block_body处的内容</p>
{% endblock %}

# 子模板
{% block block_body%}
	{{ super() }}
	<p style="background-color: green">我是子模版block_body处的内容</p>
{% endblock %}

如果想要在另外一个模版中使用其他模版中的代码。那么可以通过 {{ self.其他block名字() }} 就可以了

{% block title %}
     sxt首页
{% endblock %}
{% block block_body%}
	{{ self.title() }}
    <p style="background-color: green">我是子模版block_body处的内容</p>
{% endblock %}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值