Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承

1.Flask模板介绍

前置:理解渲染机制即上篇笔记中render_template()功能是如何实现的!

1)找到html文件地址

2)读取html文件中的内容

3)替换html中的特殊字符

4)将html的内容发送给浏览器

 1 
 2 
 3 DOCTYPE html>
 4 html lang="en">
 5 head>
 6     meta charset="UTF-8">
 7     title>Titletitle>
 8 head>
 9 body>
10     nav>
11         导航条
12     nav>
13     h1 style="color: #f00">你好, 当前的时间是:{{time}} {{user}}h1>
14 body>
15 html>
 1 # Flask py文件
 2 
 3 import os
 4 from datetime import datetime
 5 
 6 from flask import Flask,render_template
 7 app = Flask(__name__)
 8 
 9 
10 @app.route('/')
11 def index():
12     return 'index'
13 
14 
15 @app.route('/html')
16 def html_from_file():
17     """ 把html文件的内容在浏览器展现出来"""
18     return render_template('index.html')
19 
20 
21 @app.route('/show/html')
22 def html_show():
23     """ 理解渲染机制 """
24     # 1. 找到磁盘上的html文件地址(全路径)
25     file_name = os.path.join(os.path.dirname(__file__), 'templates', 'index.html')
26     print(file_name)
27     # 2. 读取html文件中的内容
28     now_time = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
29     with open(file_name, 'r', encoding='utf-8') as f:
30         html = f.read()
31         # 3. 替换html中的特殊字符({{time}})
32         html = html.replace('{{time}}', now_time)
33         # 4. 将html的内容发送给浏览器
34         return html

 

什么是模板?

  • 模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取
  • 使用真实值替换变量,再返回最终得到的字符串,这个过程称为渲染

 

为什么学模板?刚刚的示例代码,将所有的业务逻辑代码都写在一个py文件里面,公共的业务变更需要修改多处代码;掌握模板之后,就可以解决上述问题。

 

2.入门Flask模板

2.1.模板引擎Jinja2

模板引擎:可以简单理解为,它就是对模板(html)中的内容按照一定规则(变量)进行替换。得到最终我们给客户端展示的页面(模板)

  • Flask使用Jinja2作为默认模板引擎,安装Flask的时候已经自动安装了;不需要再次安装Jinja2了
  • 如果不是Flask框架,是其他框架想要使用模板引擎,也是可以安装的。通过pip进行安装:pip install Jinja2;或者通过源码安装:python setup.py install(把源码先下载下来,进入setup.py文件的目录)

 

Jinja2的默认配置

  • template_folder='templates':这个是模板存放的默认目录,也可以自定义但是不建议改,就用它默认的就行了,便于项目成员理解共识

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图

 

  • render_template():(x)html自动转义,把html读取出来,也可以对它里面一些变量进行替换,在Jinja2里面这些变量的格式为双大括号开头,双大括号结尾,如:{{name}}
  • render_template_string():字符串自动转义,html是以字符串赋值给一个变量的时候,可以用这个方法,可以将html响应结果展示出来;如果跟render_template一样传html文件名时,render_template_string是不会读取里面文件的,只会将这个文件名展示出来

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图1

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图2Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图3

  • {% autoescape %}:手动设置是否转义
  • 全局函数和辅助对象:增强模板的功能

 

什么是转义?

把有特殊意义的字符显示出来,例如:

  • html标签中的:<>
  • 代码中的&:&
  • 特殊字符转义对照表;详细的可以百度键入关键字“HTML特殊转义字符对照表”进行搜索

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图4

示例:

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图5Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图6

 

2.2.模板常用全局对象

  • config:Flask的配置信息

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图7Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图8

  • request:请求的对象
  • session:会话对象
  • g:请求相关的全局变量(如:g.user)

 Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图9Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图10

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图11

2.3.模板常用全局函数

  • url_for():URL解析函数(如:静态文件地址解析、链接跳转地址解析);传入视图函数,显示其url路径;

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图12

常用场景:html常常会进行href页面跳转,如果直接指定路由(即路径),当视图函数路由发生变更时,就会找不到。实际开发中路由地址会变,但是视图函数一般不会变,这时候我们就可以使用url_for对视图函数进行反向解析获取其路由,这样html页面就能正常跳转了

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图13

👇这么写,是常用手法

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图14

 

2.4.模板上下文处理器

  • 通过装饰器@app.context_processor实现
  • 在模板的上下文中添加新的内容
  • 内容可以是变量,也可以是函数

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图15

2.5.模板中变量的使用

思考:dict/list/tuple这些类型的数据怎么渲染?(开篇讲过,渲染:使用真实值替换变量,再返回最终得到的字符串展示,这个过程称为渲染)

模板当中变量的语法:{{ value }},双括号开头双大括号结尾;这个默认规则我们同样是可以在模板引擎配置中改成3个大括号.....都可以,建议不要动,使用 默认统一规范

 

  • 简单数据类型的渲染,如字符串、整型、浮点型:{{ value }}
  • dict类型数据的渲染:{{ object.attribute }}或{{ object['attribute'] }}
  • list/tuple类型数据的渲染:{{ object[index] }}
  • list/tuple嵌套dict复杂类型数据的渲染:详见示例代码

在使用render_template读取解析html模板时,将变量传递进去

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图16

 1 # app.py
 2 
 3 from flask import Flask, render_template
 4 
 5 app = Flask(__name__)
 6 
 7 @app.route('/index')
 8 def index1():
 9     return 'hello zhangsan'
10 
11 
12 @app.route('/')
13 def index():
14     # 1. 简单数据类型的渲染
15     age = 40
16     money = 65.89
17     name = '张三'
18     # 2. 用户信息 dict
19     user_info = {
20         'username': '张三',
21         'nickname': '三个',
22         'address.city': '广州',
23         'address.area': '天河'
24     }
25     # 3. 元组和列表
26     tuple_city = ('北京', '上海', '广州', '深圳')
27     list_city = ('北京', '上海', '广州', '深圳')
28 
29     # 4. 复杂的数据结构
30     list_user = [
31         {
32             'username': '张三',
33             'address': {
34                 'city': '广州'
35             }
36         },
37         {
38             'username': '李四',
39             'address': {
40                 'city': '北京'
41             }
42         }
43     ]
44     return render_template('index.html',
45                            age=age,
46                            money=money,
47                            name=name,
48                            user_info=user_info,
49                            tuple_city=tuple_city,
50                            list_city=list_city,
51                            list_user=list_user)
 1 
 2 
 3 DOCTYPE html>
 4 html lang="en">
 5 head>
 6     meta charset="UTF-8">
 7     title>Titletitle>
 8 head>
 9 body>
10     h3>1. 简单数据类型的渲染h3>
11     p>我的年龄: {{ age }}p>
12     p>我的钱包: {{ money }}p>
13     p>我的名字:{{ name }}p>
14 
15     h3>2. 用户信息 dicth3>
16     p>用户名: {{ user_info.username }}p>
17     p>用户昵称: {{ user_info.nickname }}p>
18     p>用户的地址:{{ user_info['address.city'] }}- {{ user_info['address.area'] }}p>
19 
20     h3>3. 元组和列表h3>
21     p>
22         {{ tuple_city[0] }} br/>
23         {{ tuple_city[1] }} br/>
24         {{ tuple_city[2] }} br/>
25         {{ tuple_city[3] }} br/>
26     p>
27     p>
28         {{ list_city[0] }} br/>
29         {{ list_city[1] }} br/>
30         {{ list_city[2] }} br/>
31         {{ list_city[3] }} br/>
32     p>
33 
34     h3>4. 复杂的数据结构h3>
35     p>
36         第一个:br/>
37         用户名:{{ list_user[0].username }};地址: {{ list_user[0]['address']['city'] }}
38     p>
39     p>
40         第二个:br/>
41         用户名:{{ list_user[1].username }};地址: {{ list_user[1]['address']['city'] }}
42     p>
43 body>
44 html>

 

思考:长度为100的list对象如何渲染?

 

3.Flask模板语法

3.1.模板语法_模板标签

在【模板中变量的使用】笔记中,对list和tuple这两种python数据类型进行渲染的时候。发现长度非常长的时候,去取它的下标来进行渲染非常的不方便。模板标签就可以很好解决这个问题!

 

什么是模板标签?我们能在模板中,也就是html中写python的逻辑代码(条件判断、循环、赋值)吗?

 

模板标签语法:

1):{% tag %}

2):第二种是有tag开始和结束,一一对应的,比如写python逻辑代码if,在{% if  %}开始,但是它不知道什么时候结束。最后用{% endif %}结尾,它就知道结束了

{% tag %}
内容
{% endtag %}
  • 模板标签示例模板:条件表达式


{% if condition_a %}
    满足了A条件
{% elif condition_b %}
    满足了B条件
{% else %}
    都不满足
{% endif %}
  • if标签中的is判断,以及一些其他的内置判断条件
    • defined/undefined:变量是否已经定义
    • none:变量是否为None
    • number/string:数字/字符串判断
    • even/odd:奇偶判断
    • upper/lower:大小写判断
{% if value is defined %}
.......
{% endif %}
  • if 标签中除了is还有其他逻辑控制判断
    • and , or
    • == , !=
    • > ,
    • >= ,
    • in , not in
  • for循环,示例:如果{% for....... %}循环成立,显示for循环下面的语句块;如果for循环里面没有任何东西就会显示{% else %}下面的语句块

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图17

示例代码:

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图18

 1 # app.py
 2 
 3 from flask import Flask, render_template
 4 
 5 app = Flask(__name__)
 6 
 7 @app.route('/tag')
 8 def tag():
 9     """  模板标签的使用 """
10     var = None
11     a = 2
12     list_user = [
13         {'username': '张三', 'age': 32, 'address': '北京'},
14         {'username': '李四', 'age': 22}
15     ]
16     # list_user = []
17     return render_template('tag.html',
18                            var=var,
19                            a=a,
20                            list_user=list_user)
 1 
 2 
 3 DOCTYPE html>
 4 html lang="en">
 5 head>
 6     meta charset="UTF-8">
 7     title>模板标签的使用title>
 8 head>
 9 body>
10     h3>if 的使用h3>
11     {% if var is none %}
12     p>var 是 nonep>
13     {% else %}
14     p>var 不是 nonep>
15     {% endif %}
16 
17     {% if a is defined %}
18      p>a定义了p>
19     {% else %}
20      p> a 没有定义p>
21     {% endif %}
22     {% if a == 2 %}
23     p>a 是 2p>
24     {% endif %}
25 
26     h3>for循环的使用h3>
27     {% for item in list_user %}
28         p>用户名:{{ item.username }},年龄:{{ item.age }}p>
29     {% else %}
30         p>用户信息为空p>
31     {% endfor %}
32 body>
33 html>
  • for循环体内的变量

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图19

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图20

思考:如果要在for循环中使用continue/break怎么办?

解决方案: jinja_env = Environment(extensions=['jinja2.ext.loopcontrols']) 下图这个扩展方式为覆盖,用的=。不建议,推荐使用添加扩展,下面的示例代码会有;同时 jinja2还有一些其他的扩展,感兴趣点击看下;

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图21

示例代码

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图22

 1 # app.py
 2 
 3 from flask import Flask, render_template
 4 
 5 
 6 app = Flask(__name__)
 7 # 添加扩展:为模板引擎添加扩展,支持break/continue语法
 8 app.jinja_env.add_extension('jinja2.ext.loopcontrols')
 9 
10 '''
11 该扩展为覆盖不建议使用
12 from jinja2 import Environment
13 app.jinja_env=Environment(extensions=['jinja2.ext.loopcontrols'])
14 '''
15 @app.route('/tag')
16 def tag():
17     """  模板标签的使用 """
18     var = None
19     a = 2
20     list_user = [
21         {'username': '张三', 'age': 32, 'address': '北京'},
22         {'username': '李四', 'age': 22},
23         {'username': '王五', 'age': 32, 'address': '北京'},
24         {'username': '王文', 'age': 22}
25     ]
26     # list_user = []
27     return render_template('tag.html',
28                            var=var,
29                            a=a,
30                            list_user=list_user)
 1 
 2 
 3 DOCTYPE html>
 4 html lang="en">
 5 head>
 6     meta charset="UTF-8">
 7     title>模板标签的使用title>
 8     style type="text/css">
 9         .odd {
10             background-color: #f00;
11             color: #fff;
12         }
13         .even {
14             background-color: aqua;
15             color: #fff;
16         }
17     style>
18 head>
19 body>
20     h3>for 循环 dicth3>
21     {% for user in list_user %}
22         p class="{{ loop.cycle('odd','even') }}">
23         第{{ loop.index }}个用户,总共{{ loop.length }}个:br/>
24         {% for key, value in user.items() %}
25             {{ key }}: {{ value }}
26         {% endfor %}
27         p>
28     {% else %}
29         p>用户信息为空p>
30     {% endfor %}
31 
32     h3>for 循环 dict -breakh3>
33     {% for user in list_user -%}
34         p class="{{ loop.cycle('odd','even') }}">
35         第{{ loop.index }}个用户,总共{{ loop.length }}个:br/>
36         {% for key, value in user.items() -%}
37             {% if loop.index > 2 -%}    
38                 {% break -%}
39             {% endif -%}
40             {{ key }}: {{ value }}
41         {% endfor -%}
42         p>
43     {% else %}
44         p>用户信息为空p>
45     {% endfor %}
46 body>
47 html>

 

同时模板标签还支持添加注释,注释分为两种:

1)会在浏览器html源码中显示:  

2)不会在浏览器html源码中显示: {# 注释内容 #} 

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图23

 

去除HTML源码中多余的空白可以提高性能,不能忽视!去除方式,在块的开始或结束放置一个减号(-),不能有空格

 Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图24Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图25

 

 

 

  • 设置变量,进行赋值操作:先设置,后使用,可以通过import导入;

{% set key,value = (1,2) %}

建议设置变量的时候,和with代码块结合使用,实现块级作用域。这个变量只在with这个代码块中有效果。

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图26Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图27

 

思考:如下内容如何显示?

{{}}  {% %}

1)视为字符串: {{ ‘{{}} {% %}’ }}  

2)使用raw标签进行转义,使得特殊符号正常显示

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图28

 

3.2.模板语法_过滤器

思考:下面的场景如何实现?

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图29

什么是过滤器?

  • 过滤器:定义好规则,修改变量(如:格式化显示)
  • 过滤器的使用格式,用管道符号(|)分割,如:{{ name|striptags }},striptags就是过滤器,将name变量传递给striptags处理最后返回处理后的结果
  • 可以链式调用:{{ name|striptags|title }},name传递给多个过滤器
  • 可以用园括号传递可选参数{{ list|join(',')}}

 

过滤器的使用

方式一:用管道符( | )

{{ value|safe }}

 

方式二:使用便签{% filter 过滤器 %} {% endfilter %}

{% filter upper %}
    This text becomes uppercase
{% endfilter %}

过滤器upper对字符串This text。。。进行格式化显示

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图30

 

内置的过滤器

  • 求绝对值abs:{{ value|abs }}
  • 默认值显示:default(value,default_value='',boolean=False)
    • {{ value|default('默认值')}}:如果value变量没有定义,传递过来,default过滤器处理value返回“默认值” 
    • {{ value|d('默认值') }}:上面的简写

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图31

  •  html转义escapee:{{ value | escape }} 或 {{ value | e }}

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图32

👆由于浏览器一般默认对html自动转义成字符串输出,所以我们使用{% autoescape fale %}将其关闭。这时调试,过滤器e的作用就直观了。

 

自定义过滤器

方式一:使用装饰器@app.template_filter对自定义装饰器进行注册;推荐使用这个

  • 示例reverse:自定义装饰器名称
  • 示例reverse_filter函数:自定义装饰器的逻辑方法,需要传递被修改的变量s
@app.template_filter('reverse')
def reverse_filter(s):
    return s[::-1]

 

方式二:调用函数app.jinja_env.filters对自定义装饰器进行注册

  • 示例reverse:自定义装饰器名称
  • 示例reverse_filter函数:自定义装饰器的逻辑方法,需要传递被修改的变量s
def reverse_filter(s):
    return s[::-1]
app.jinja_env.filters['reverse'] = reverse_filter

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图33

3.3.模板语法_模板全局函数

思考:如何在模板中实现range函数的效果?

全局函数可在模板中直接使用

1 ul>
2 {% for i in range(10) %}
3   li>{{ i }}li>
4 {% endfor %}
5 ul>

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图34

模板提供的全局函数有:

  • range([start],stop[,step]):和python的range用法基本一致
  • dict(**items):转换成字典形式
  • cycler(*items):常用于css类名的循环。

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图35

应用场景简单说明:声明变量class_name,通过cycler()赋值给这个变量。标签的class属性值等于这个变量,通过next()获取下一个。使用css查找class并对其样式修改。

  • joiner(sep= ','):可用于字符串拼接;相当于python里面join的语法
  • url_for():URL解析函数(如:静态文件地址解析、链接跳转地址解析)

静态文件地址解析;使用link引用外部css文件时,需要加上rel=stylesheet;rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是:href连接的文档是一个样式表。

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图36

链接跳转地址解析

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图37

4.Flask模板中的宏

什么是宏?

把常用功能抽取出来,实现可重用;简单理解:宏≈函数;宏可以写在单独的html文件中。

 

4.1.模板中的宏

1)定义宏{% macro %}像书写函数一样定义宏,示例解析

  • 示例代码定义了一个input的宏
  • 调用input宏的时候,需要传入name、value、type、size;其中name是必传参数,value、type和size都有默认值,不传时使用默认值
  • 返回的内容为👇,调用input宏传递的参数,赋值给返回内容{{变量}}。其中value还经过了过滤器e进行了html转义。
Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图38Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图39

input type="{{ type }}" name="{{ name }}" value"{{ value|e }}" size="{{ size }}">

调用宏返回的内容

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图40

2)使用宏{{ 宏名() }}像调用函数一样调用。

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图41

3)完整示例

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图42

4.2.文件中的宏

可以把写在html文件中的宏,当成python的一个模块进行使用

1)导入宏,跟python使用模块方法一样。

  • {% import 'forms.html' as forms %}:导入宏文件forms.html,并重命名forms
  • {%  from 'forms2.html' import input2 %}:导入宏文件forms2.html中的input宏

2)使用宏

  • {{ forms.input('username' )}}

  • {{ input2('password' )}}

3)完成示例

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图43

5.Flask模板的继承

思考:为什么要对模板进行抽象和继承?模板的抽象继承,和python的面向对象是一样的。

思考:如下场景怎样设计(易维护、可扩展)?

  • 每个页面都引用了公共的头部,js,css
  • 有几个页面结构和内容及其相似(如:导航菜单)

 

5.1.继承实现

设定:有一个公用模板页面base.html。其他模板页面基于base.html修改自己页面的header、body等部分信息。其他的使用公共模板页面base.html

  1)在通用模板上,通过 {% block 部分名称%}{% endblock %} 将可变的部分圈出来;图示步骤一,使用block将可变的部分圈出来,命名为content。

  2)新模板页面,通过 {% extends "父模板" %} 继承通用模板;虽然新模板.html只有一行代码 {% extends "父模板" %} ,但是新模板目前是和父类模板展示效果一样的。

  3)新模板页面这时候要定制开发了,通过 {% block 选择要修改的可变部分名称%}你修改的新代码块{% endblock %} ,完成修改后,新模板页面展示你修改后的效果

  4)当你想保留可变部分,并且基本可变部分原先内容再添加新内容时,通过 {{ super() }}后面接你新的内容 ,既保留了可变部分又添加了你新增的部分

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图44

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图45

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图46

示例代码:

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图47

 

思考:只有部分页面使用到的导航条怎么设计?

  • 按照继承的手法,我们可以将这些部分页面圈起来,继承的时候,然后重写他内容为空。但是这个方法是不是很low
  • 使用模板的包含语法进行实现才是最有解决方案

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图48

5.2.模板继承的包含语法

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图49

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图50

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图51

  • include “sidebar.html” ignore missing:sidebar.html不存在,不会报错
  • include “sidebar.html” ignore missingwith context:将模板的上下文对象传递到sidebar.html文件中
  • include “sidebar.html” ignore missing without context:将模板的上下文对象不传递到sidebar.html文件中
  • include without context的简单示例

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图52

 Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图53Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图54

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图55

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图56

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图57

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图58

5.3.继承与包含的区别

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图59

6.消息闪现

 

什么是消息闪现

思考:要在如下场景下给予操作提示,怎么实现?

  • 用户登录成功,提示:欢迎回来
  • 用户发布问题成功,提示:发帖成功

 

消息闪现

第一步:在视图中产生一个消息(提示/警告/错误)

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图38Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图39

flash(msg_content,msg_type)

#参数msg_content:消息内容
#参数msg_type:消息类型

View Code

第二步:在模板中展示消息

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图38Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图39

get_flashed_messages(category_filter=["error"])

#参数category_filter:对产生的消息按类别查询
#返回的是一个可迭代的对象

View Code

使用for循环获取get_flashed_messages返回的对象内容:category,message

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图60

实例:

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图61

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图62

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) – Flask模板语法与继承插图63

 get_flashed_messages参数说明

  • 参数不是必填的可以不传
  • with_categories=true:代表我们启用消息分类,之后针对消息类型,可以进行相关的过滤操作
  • category_filter=['error']:这里面参数是list,筛选参数msg_type:消息类型

code

 1 # app.py
 2 
 3 from flask import Flask, render_template, flash, redirect, request
 4 
 5 app = Flask(__name__)
 6 # session的安全机制,使用flash时需要设置该随机串
 7 app.secret_key = 'secret_keyabcdes334'
 8 
 9 # 用户登录之后,跳转到个人中心,在个人中心页面,展示一个提示:登录成功
10 
11 
12 @app.route('/login', methods=['GET', 'POST'])
13 def login():
14     """  用户登录 """
15     if request.method == 'POST':
16         print('处理了登录的逻辑')
17         flash('登录成功', 'success')
18         flash('欢迎回来', 'success')
19         flash('错误提示', 'error')
20         return redirect('/mine')
21     return render_template('login.html')
22 
23 
24 @app.route('/mine')
25 def mine():
26     """  个人中心 """
27     return render_template('mine.html')
 1 
 2 
 3 DOCTYPE html>
 4 html lang="en">
 5 head>
 6     meta charset="UTF-8">
 7     title>用户登录title>
 8 head>
 9 body>
10     h3>用户登录h3>
11     form action="{{ url_for('login') }}" method="post">
12         div>
13             input type="text" name="username" value="admin">
14         div>
15         div>
16             input type="password" name="password">
17         div>
18         div>
19             button type="submit">登录button>
20         div>
21     form>
22 body>
23 html>
 1 
 2 
 3 DOCTYPE html>
 4 html lang="en">
 5 head>
 6     meta charset="UTF-8">
 7     title>个人中心title>
 8     style type="text/css">
 9         .success {
10             color: #0f0;
11         }
12         .error {
13             color: #f00;
14         }
15     style>
16 head>
17 body>
18     h3>个人中心h3>
19     {% for category, message in get_flashed_messages(with_categories=true, category_filter=['error']) %}
20     p class="{{ category }}">
21         {{ category }} -{{ message }}
22     p>
23     {% endfor %}
24 body>
25 html>

 

6.重点掌握

  • 模板语法的使用(变量、标签、过滤器)
  • 模板的继承、包含、引用
  • 模板中的宏定义和使用
  • 消息闪现

 

文章来源于互联网:Python全栈工程师之从网页搭建入门到Flask全栈项目实战(4) - Flask模板语法与继承

THE END
分享
二维码