3.模板

于 2020-09-26 14:21:14 发布
阅读量308 收藏
点赞数
文章标签： 过滤器 字符串 python java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/only_tokimeki/article/details/109298320
版权

模板

Jinja模板介绍

模板
  1. 在渲染模板的时候，默认会从项目根目录目录下的"templates"目录下查找模板
  2. 如果不想把模板文件放在"templates"目录下，那么可以在"flask"初始化的时候指定"template_folder"来指定模板文件路径
模板：Jinja2、mako
Jinja2
  1. 让前端开发者和后端开发者工作分离
  2. 减少flask项目代码的耦合性，页面逻辑放在模板中，业务逻辑放在视图函数中，将页面逻辑和业务逻辑解耦有利于代码的维护
  3. 提供了控件语句，继承等高级功能，减少开发的复杂度
Mako：Django、Jinja2等模板借鉴了很多语法和API
  1. 从性能上看和Jinja2相近
  2. 有大型网站使用，有成功案例
  3. 有名的web框架支持，pylons和pyramid这两个web框架内置模板的Mako
  4. 支持模板中几乎原生的python语法的代码，对python工程师比较友好，开发效率高
  5. 自带完整的缓存系统。提供了非常友好的扩展接口，很容易切换成其他的缓存系统

image-20200902184735044

模板传参及其技巧

  1. 在使用"render_template"渲染模板的时候，可以传递参数u，以后直接在模板中使用就可以了

app.py

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():

    return render_template('index.html',data='Hello World')


if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{ data }}
</body>
</html>

image-20200902184846270

  1. 如果参数过多，可以将所有的字典放到一个字典中，然后在传入这个字典参数的时候，使用两个星号，将字典打散成关键参数

app.py

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = {
        "word":"Hello World",
        "number":1
    }
    return render_template('index.html',**data)

if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{ number }}
{{ word }}
</body>
</html>

image-20200902185238857

在模板中使用url_for

如图：

image-20200902185856234

其中,<a href="{{ url_for('Hello_world',number=1) }}">点击</a>，url_for用法与在视图函数中的用法一致，第一个参数为视图函数的名称，后续参数为传递的用户端的参数。

过滤器的基本使用

介绍

过滤器是通过管道符号(|)进行使用的，例如:((name|length)),将返回name的长度。过滤器相当于是一个函数，把当前的变量传入到过滤器中，然后过滤器根据自己的功能，再返回响应的值，之后再将结果渲染到页面中。

函数

Jinja2中内置了许多过滤器，在这里可以看到所有的过滤器，现对一些常用的过滤器进行讲解:

  1. abs(value):返回一个数值的绝对值。例如:-1|abs。
  2. ☆default(value,default_value,boolean=false):如果当前变量没有值，则会使用参数中的值来代替。 name|default('xiaotuo') == 如果name不存在，则会使用xiaotuo来代替。boolean=False默认是在只 有这个变量为undefined的时候才会使用default中的值，如果想使用python的形式判断是否为false，则可以传递Boolean=true。也可以使用or来代替
  3. escape(value)或e:转义字符,会将等符号转义成HTML中的符号。例如content|escape或content|e
  4. first(value):返回一个序列的第一个元素。name|first
  5. **format(value,*args,kwargs):格式化字符串。
  6. last(value):返回一个序列的最后一个元素。示例:names|last。
  7. length(value):返回一个序列或者字典的长度。示例:names|length
  8. join(value,d='u'):将一个序列用d这个参数的值拼接成字符串
  9. safe(value):如果开启了全局转义，那么safe过滤器会将变量关掉转义。示例:content_html|safe
  10. int(value):将值转换为int类型
  11. float(value):将值转换为float类型
  12. lower(value):将字符串转换为小写
  13. upper(value):将字符串转换为大写
  14. replace(value,old,new):替换将old替换为new的字符串
  15. truncate(value,length=253,killwords=False):截取length长度的字符串
  16. striptags(value):删除字符串中所有的HTML标签，如果出现多个空格，将替换成一个空格
  17. trim:截取字符串前面和后面的空白字符
  18. string(value):将变量转换成字符串
  19. wordcount(s):计算一个长字符串中单词的个数

举一个小栗子：

app.py

from flask import Flask,render_template,request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html',word="hello word")

if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{ word|wordcount }} 个单词 ;
{{ word|length }} 个字符
</body>
</html>

image-20200902190817812

image-20200902190901589

转义字符串

在模板中，是默认关闭字符串的转义的。如图：

image-20200902191538379

image-20200902191547523

在 index.html中通过使用

  1. 'safe'过滤器，可以关闭一个字符串的自动转移

  2. 'escape'过滤器，对某一个字符串进行转义

  3. 'autoescape' 标签，可以对它里面的代码块关闭自动转义

即可是否进行转义字符。如下：

image-20200902192930049

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
1.原字符串：{{ button }}  <br>
2.开启转义：{{ button|escape }} <br>
3.关闭转义：{{ button|safe }} <br>
{% autoescape off %}
4.开启转义：    {{ button|escape }} <br>
{% endautoescape %}
{% autoescape on %}
5.关闭转义：    {{ button|safe }} <br>
{% endautoescape %}
</body>
</html>

自定义过滤器

过滤器本质上就是一个函数，如果在模板中调用这个过滤器，那么就会将这个变量的值作为第一个参数传给过滤器这个函数，然后函数的返回值会作为这个过滤器的返回值。

自定义一个过滤器函数名称test，过滤器名称为my_test，如下：

image-20200902193317871

过滤器函数：

@app.template_filter('my_test')
def test(value):
    value = value.replace("hello world",'')
    return value

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{ word }} <br>
{{ word|my_test }}
</body>
</html>

定义过滤器函数后，通过调用过滤器的名称，来进行使用，自定义的过滤器的功能。

时间处理过滤器案例

app.py

from flask import Flask,render_template
from datetime import datetime,timedelta

app = Flask(__name__)

@app.route('/')
def index():
    data = {
        "time":datetime.now(),
        "time2": datetime(2020,4,27,23,14,0),
        "time3": datetime.now()+timedelta(days=-1)
    }
    return render_template('index.html',**data)

# 时间过滤器函数
@app.template_filter('handle_time')
def handle_time(time):
    """
    time 距离现在的时间是多少
    如果时间间隔小于1分钟以内，那么就显示'刚刚'
    如果是大于1分钟小于等于1小时以内，那么就显示'xx分钟前'
    如果是大于1小时小于等于24小时内，那么就显示'xx小时前'
    如果大于24小时小于30天以内，那么就显示'xx天前'
    否则就是具体时间:例2017年10月20日
    :param time:
    :return:
    """
    if isinstance(time,datetime):
        now = datetime.now()
        # 两个时间相减，得到描述
        timestamp = (now - time).total_seconds()
        if timestamp < 60:
            return '刚刚'
        elif timestamp < 60*60 and timestamp >= 60:
            minutes = timestamp/60
            return "%s 分钟前" % int(minutes)
        elif timestamp >= 60*60 and timestamp < 60*60*24:
            hours = timestamp/(60*60)
            return  "%s 小时前" % int(hours)
        elif timestamp>= 60*60*24 and timestamp < 60*60*24*30:
            days = timestamp / (60*60*24)
            return "%s 天前" % int(days)
        else:
            return time.strftime('%Y/%m/%d %H:%M')
    else:
        return time


if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{ time }} <br>
{{ time2|handle_time }}<br>
{{ time3|handle_time }}
</body>
</html>

image-20200902194209544

判断语句if

用法
{% if 语句 %}

{% elif 语句 %}

{% else %}

{% endif %}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% if number < 18 %}
    小于18
{% elif number == 18 %}
    等于18
{% else %}
    大于18
{% endif %}
</body>
</html>

for循环语句详解

用法

'for ... in ...':'for'循环可以遍历任何一个序列包括列表、字典、元祖，并且可以进行反向遍历。

{% for .. in .. %}
 	代码块
{%endfor%}
示例：

app.py

from flask import Flask,render_template
from datetime import datetime,timedelta

app = Flask(__name__)

@app.route('/')
def index():
    datas = {"{}".format(i):"".format(i) for i in range(18)}
    return render_template('index.html',datas=datas)

if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% for data in datas %}
{{ data }} <br>
{% endfor %}
</body>
</html>

image-20200902195024563

获取当前的遍历状态

loop.index:当前迭代的索引(从i开始)

loop.index0:当前迭代的索引(从0开始)

loop.first:是否是第一次迭代，返回True或者False

loop.last:是否是最后一次迭代，返回True或者False

loop.length:序列的长度

另外，不可以使用'continue'和'break'表达式来控制循环的执行

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% for data in datas %}
{{ loop.index }} <br>
{% endfor %}
</body>
</html>

image-20200902195255963

案例：九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tbody>
            {% for i in range(1,10) %}
                <tr>
                    {% for j in range(1,i+1) %}
                        <td>{{ j }}*{{ i }}={{ i*j }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>

image-20200902195354365

宏的概念和基本使用

概念

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

用法
{% marco 函数%}
    函数
{% endmarco %}
示例

app.py

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = {
        "username":"code",
        "password":"123456"
    }
    return render_template('index.html',**data)

if __name__ == '__main__':
    app.run(debug=True)

index.html

{% import "./macors.html" as macros %} 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
</head>
<body>
    <h1>登录</h1>
    <table>
        <tbody>
            <tr>
                <td>用户名:</td>
                <td>{{ macros.input(name="username",value=username) }}</td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>{{ macros.input(name="password",type="password",value=password) }}</td>
            </tr>
            <tr>
                <td></td>
                <td>{{ macros.input(value="提交",type="submit") }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

用来导入定义的宏函数

{% import "./macors.html" as macros %}

macors.html

{% macro input(name="",value="",type="text") %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}"/>
{% endmacro %}

image-20200902200144187

image-20200902200246448

宏的导入和注意事项
导入宏

  1. import "路径" as 别名

  2. from "路径" import 宏的名字 [as 别名]

  3. 宏文件路劲，不要以相对路劲去寻找,都要以'templates'作为绝对路劲去寻找

如果想要在导入宏的时候，就把当前模板的一些参数传给宏所在的模板，那么就应该在导入的时候使用"with context"

如：from xxx import xx with context

include标签使用详解

用法

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

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

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

格式: {% include "url" %}

app.py

from flask import Flask,render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% include "header.html" %}
</body>
</html>

header.html

<header>我是头部</header>

image-20200902200850438

image-20200902200856795

set和with语句以及模板中定义变量

在模板中，可以使用"set"语句来定义变量，示例如下:

{% set 变量名=值 %}
{{ 变量名 }}

在'with'块中通过'set'定义的变量，只能在这个'with'块中使用

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% set a=1 %}
{{ a }}
<br>
{% with %}
    {% set a=2 %}
    {{ a }}
{% endwith %}
<br>
{{ a }}
</body>
</html>

image-20200902201145028

加载静态文件

  1. 加载静态文件使用的是"urf_for"函数u，然后第一个参数需要为"static",第二个参数需要为"filename='路径' "，示例:
{{ url_for('static',filename="在static下的相对路径") }}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='index.css') }}">
</head>
<body>
    <button>点击</button>
</body>
</html>

index.css

button{
    background-color: yellow;
}

image-20200902201416308

image-20200902201423460

模板继承详解

为什么需要继承模板?

模板继承可以把一些公用的代码单独抽取出来放到一个父模板中，以后子模板直接就可以使用了。这样可以重复性的代码，以后修改起来比较方便

模板继承语法

使用"extends"语句，来指明继承的父模板，父模板的路径，也是相对于'templates'文件夹下的绝对路径。示例代码如下:

{% extends "xxx.html" %}

示例：

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}
        父标题
    {% endblock %}</title>
</head>
<body>
{% block body %}
    父模板
{% endblock %}
</body>
</html>

index.html

{% extends "base.html" %}

{% block title %}
子标题
{% endblock %}

{% block body %}
子模板
{% endblock %}

image-20200902202317009

block语法

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

在父模板中:

{% block block的名字 %}
{% endblock %}

在子模板中

{% block block的名字 %}
	子模板的代码
{% endblock%}
调用父模板代码block中的代码

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

{% block block的名字 %}
	{{super()}}
{% endblock%}

index.html

{% extends "base.html" %}

{% block title %}
子标题
{% endblock %}

{% block body %}
      {{ super() }}
子模板
{% endblock %}

image-20200902202328964

调用另外一个block中的代码

如果想要在另外一个模板中使用其他模板中的代码。那么可以通过"{{self.xxx()}}"就可以了。示例代码如下:

其中xxx为block名称

{% extends "base.html" %}

{% block title %}
子标题
{% endblock %}

{% block body %}
    {{ self.title() }}
子模板
{% endblock %}

image-20200902202410259

其他注意事项

  1. 子模板中的代码，第一行，应该是"extends"

  2. 子模板中，如果要实现自己的代码，应该放到block中。如果放到其他地方，则不会被渲染

米津玄师的一枚粉丝
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值