Web后端学习笔记Flask（2）模板

模板渲染：

在flask中，视图函数可以直接通过render_template进行模板渲染。在flask中，模板文件是存放在template文件夹中：在调用模板文件的时候，模板文件的路径从template文件夹之后开始写，必须写完整的路径，在渲染模板的时候，默认是从项目的templates文件夹查找模板。

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件@app.route('/')
def hello_world():return 'Hell Wold!'@app.route('/index/')
def index():return render_template("index/index.html")if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

如果不想将模板文件放到template文件夹下，则可以修改Flask默认的模板文件路径，进入Flask的定义文件，可以看到Flask的初始化的默认参数，在初始化Flask的时候修改对应的路径即可：

模板传参及其技巧：

在模板渲染的时候，同时也需要将后台的数据渲染到前台。

后端的代码：

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件@app.route('/')
def hello_world():return 'Hell Wold!'@app.route('/index/')
def index():return render_template("index/index.html", username="Knight-boy", age=18, country="China")    # 传递参数if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.container{width: 200px;height: 200px;border: 1px solid blanchedalmond;background: burlywood;}</style>
</head>
<body><div class="container"><h4>用户名: {{ username }}</h4><h4>年龄: {{ age }}</h4><h4>国别: {{ country }}</h4></div>
</body>
</html>

渲染的结果：

如果需要传入的参数较多，可以将参数写入到字典中，在进行传参

后台代码：

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件@app.route('/')
def hello_world():return 'Hell Wold!'@app.route('/index/')
def index():info = {"username": "knight","age": 33,"country": "China"}return render_template("index/index.html", info=info)  # 这里参数名字与变量名相同即可if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.container{width: 200px;height: 200px;border: 1px solid blanchedalmond;background: burlywood;}</style>
</head>
<body><div class="container"><h4>用户名: {{ info["username"] }}</h4><h4>年龄: {{ info["age"] }}</h4><h4>国别: {{ info["country"] }}</h4></div>
</body>
</html>

还有一种写法，在前端代码中，如果不需要通过字典名获取变量，可以在后端渲染页面传入参数的时候，将字典转换成关键字参数即可，（这种方法使用较多）

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件@app.route('/')
def hello_world():return 'Hell Wold!'@app.route('/index/')
def index():info = {"username": "knight-b","age": 20,"country": "China"}return render_template("index/index.html", **info)if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.container{width: 200px;height: 200px;border: 1px solid blanchedalmond;background: burlywood;}</style>
</head>
<body><div class="container"><h4>用户名: {{ username }}</h4><h4>年龄: {{ age }}</h4><h4>国别: {{ country }}</h4></div>
</body>
</html>

模板中使用URL_FOR

在模板中也会使用url_for，例如在首页中，一般会有一个跳转按钮，再点击跳转按钮之后，会跳转到登录界面

{% 适合执行逻辑代码 %}

代码实现：在html代码中，可以使用url_for获取视图函数对应的url

后端代码：

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件@app.route('/')
def index():return render_template("HTML/index.html")@app.route('/login/')
def login():return render_template("HTML/login.html")if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

首页代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.container{width: 200px;height: 150px;border: 1px solid blanchedalmond;background: burlywood;}</style>
</head>
<body><div class="container"><a href="{{ url_for("login") }}">登陆</a></div>
</body>
</html>

登录页代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆</title><style>.container{width: 250px;height: 170px;border: 1px solid black;background: aquamarine;margin: 20px auto;}.container .username{display: block;margin: 0 auto;margin-top: 15px;}.container .password{display: block;margin: 0 auto;margin-top: 15px;}.container .sub{display: block;margin: 0 auto;margin-top: 15px;}</style>
</head>
<body><div class="container"><input type="text" placeholder="用户名" class="username"><input type="password" placeholder="密码" class="password"><input type="submit" class="sub"></div>
</body>
</html>

过滤器基本使用：

过滤器是通过管道符号（|）进行使用的，例如{{ name|length }}，将返回name的长度。过滤器相当于一个函数，把当前的变量传入到过滤器中，过滤器根据自己的功能，再返回相应的值，之后再将结果渲染到页面。jingja2中内置了很多的过滤器，常用到的过滤器有：

1. abs(value), -1 | abs

2. first(value): 返回一个序列的第一个值 value | first

3. last(value): 返回最后一个值 value | last

更多的可以参考jingja2的手册：

后端代码：

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件@app.route('/')
def index():return render_template("HTML/index.html", position=-6)if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.container{width: 200px;height: 150px;border: 1px solid blanchedalmond;background: burlywood;}</style>
</head>
<body><div class="container"><span>The position is : {{ position|abs }}</span></div>
</body>
</html>

default过滤器详解：

对于传入的变量，如果有值，就返回变量的值，否则就返回default值，再在过滤器中，设置boolean参数为真，才可以将空字符串，空列表，null,None当作false来处理，否则即使有这些值，也会当作有值来处理。

escape过滤器：

转义字符，会将< >等符号转义成html中的符号。例如： content | escape, jingja2中的转义是默认开启的。

safe过滤器：

关闭字符串的自动转义，功能与{%autoescape off%} , {%endautoescape%}的类似

first / last过滤器：

获取序列的第一个或者最后一个元素

format过滤器：

用于格式化输出字符串 {{ “%s -- %s" }} | format(str1, str2)

length过滤器：
获取序列的长度

join过滤器：

将一个序列用特定的符号进行拼接

int, float， string过滤器：(用于模板的条件渲染)

对数值进行转换

lower, upper过滤器：

进行大小写转换

wordcount过滤器：

计算一个字符串中的单词数量

replace过滤器

实现字符串中的替换功能，replace(oldstr, newstr)

truncate过滤器：

截取一定长度的字符串，truncate(value, length, killwords=false), 后面的内容使用...表示，用于当显示内容较多时，显示缩略的内容。

stringtags过滤器：

删除字符串中所有的html标签，如果出现多个空格，将替换成一个空格。

后端代码:

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件@app.route('/')
def index():info = {"position": -6,"signature": None,"content": '<script>alert("Hell")</script>',"persons": ["tom", "lily", "Cart"],"age": "14","text": "This is aa cc aa"}return render_template("HTML/index.html", **info)if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.container{width: 300px;height: 250px;border: 1px solid blanchedalmond;background: burlywood;}.container span{display: block;}</style>
</head>
<body><div class="container"><span>The position is : {{ position|abs }}</span><span>The signature is : {{ signature|default('no signature at all', boolean=True) }}</span><span>The content is: {{ content|escape }}</span><span>The content is: {{ content|safe }}</span>   <!--关闭了自动转义，会弹出模态对话框--><span>First person is {{ persons|first }}</span><span>Last person is {{ persons|last }}</span><sapn>format use: {{ "%s -- %s" | format("hello", "cute")}}</sapn><span>Persons number is: {{ persons|length }}</span>{% if age|int >= 18 %}    <!--模板的条件选择渲染--><span>The age is ok</span>{% else %}<span>The age is not ok</span>{% endif %}<span>Replace result: {{ text|replace("aa", "***") }}</span><span>Truncated text is: {{ text|truncate(length=5) }}</span></div>
</body>
</html>

自定义过滤器：

在Jingja2内置的过滤器不能满足需求的时候，需要使用自定义的过滤器：

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件
app.config["TEMPLATES_AUTO_RELOAD"] = True          # 保证模板修改后能够自动加载@app.route('/')
def index():info = {"text": "This is aa cc aa"}return render_template("HTML/index.html", **info)@app.template_filter("cut_xx")     # 注册过滤器的名称
def cut_xx(string, newstr, oldstr):"""自定义过滤器:param string::param newstr::param oldstr::return:"""value = string.replace(oldstr, newstr)return valueif __name__ == '__main__':app.run(debug=True)     # 开启debug模式

自定义时间处理过滤器：

from flask import Flask, render_template
from datetime import datetimeapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件
app.config["TEMPLATES_AUTO_RELOAD"] = True          # 保证模板修改后能够自动加载@app.route('/')
def index():info = {"text": "This is aa cc aa","content": None,"create_time": datetime(2020, 4, 5, 2, 12, 22)}return render_template("HTML/index.html", **info)@app.template_filter("cut_xx")     # 注册过滤器的名称
def cut_xx(string, newstr, oldstr):"""自定义过滤器:param string::param newstr::param oldstr::return:"""value = string.replace(oldstr, newstr)return value@app.template_filter("handle_time")
def handle_time(time):"""发表时间距离现在时间1. 一分钟以内，显示刚刚2. 一小时以内，显示xx分钟3. 24小时以内，显示xx小时4. 大于二十四小时，显示xx天前:param time::return:"""if isinstance(time, datetime):time_span = datetime.now() - timeseconds = time_span.total_seconds()if seconds < 60:return "刚刚"elif seconds < 60 * 60:return "%d分钟前" % (seconds/60)elif seconds < 24 * 60 * 60:return "%d小时以前" % (seconds/60/60)else:return "%d天以前" % (seconds/24/60/60)else:return timeif __name__ == '__main__':app.run(debug=True)     # 开启debug模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.container{width: 300px;height: 250px;border: 1px solid blanchedalmond;background: burlywood;}.container span{display: block;}</style>
</head>
<body><div class="container"><span>The time is: {{ create_time|handle_time }}</span></div>
</body>
</html>

实现效果：

jingja2模板中条件判断，循环：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>.right{color: #7666c1;}.wrong{color: #19a71f;}</style>
</head>
<body>{% if username=="tom" %}<p class="right">hello, this is tom</p>{% else %}<p class="wrong">This is not tom</p>{% endif %}
</body>
</html>

for循环可以遍历任何一个序列，包括列表，字典，元组，并且可以进行反向遍历：

但是jingja模板中，不支持用continue和break来控制循环，且for循环中还提供了以下的变量，用来获取遍历的状态：

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

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

loop.first 是否是第一次迭代，返回bool值

loop.last 是否是最后一次迭代，返回bool值

loop.length 序列的长度

jingja2中的for循环可以由else,如果序列为空的话，会进入else语句：

后端代码：

from flask import Flask, render_templateapp = Flask(__name__)
app.config.from_pyfile("config.py", silent=False)   # 加载配置文件config, 也可以加载普通的txt文件
app.config["TEMPLATES_AUTO_RELOAD"] = True          # 保证模板修改后能够自动加载@app.route('/')
def index():info = {"username": "kit","persons": ["kit", "hack", "tom", "nancy"],"books": [{"name": "gone with wind","author": "unknown","price": 120,"count": 35},{"name": "Pride and Prejudice","author": "Jane Austing","price": 30,"count": 120},{"name": "Become Jane","author": "Jane Austing","price": 670,"count": 40}]}return render_template("HTML/index.html", **info)if __name__ == '__main__':app.run(debug=True)     # 开启debug模式

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>*{margin: 0;padding: 0;}.person{width: 200px;border: 1px solid #fcffe8;margin-bottom: 20px;overflow: hidden;}.person p{font-size: 18px;color: #783476;font-weight: bold;display: block;background: aqua;}.person .info{width: 100%;line-height: 20px;font-size: 16px;color: #123;background: #917e46;}table{border: 1px solid black;text-align: center;}table td, th{border: 1px solid black;}</style>
</head>
<body>{% for person in persons %}<div class="person"><p>Hello, I am {{ person }}</p><div class="info">coco</div></div>{% else %}<div class="person"><p>Hello, no person</p><div class="info">no one is here</div></div>{% endfor %}<table><thead><tr><th>index</th><th>book name</th><th>author</th><th>price</th><th>count</th></tr></thead><tbody>{% for book in books %}{% if loop.first %}<tr style="background: red">   <!--将第一行设置为背景颜色为红色-->{% elif loop.last %}<tr style="background: orange">{% else %}<tr>{% endif %}<td>{{ loop.index }}</td><td>{{ book["name"] }}</td><td>{{ book["author"] }}</td><td>{{ book["price"] }}</td><td>{{ book["count"] }}</td></tr>{% endfor %}</tbody></table></body>
</html>

实际效果：

jinja2中的宏，基本概念及使用：

宏类似于python中的函数，当一段代码需要反复使用的时候，可以将其封装为函数，这样在需要使用的时候就可以进行调用。模板中的宏可以传递参数，但是不能有返回值，可以将经常使用的代码片段放到宏中，然后把一些不固定的值抽取出来当成变量。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style></style>
</head>
<body><!--定义宏-->{% macro input(name, type="text", value="") %}<input type="{{ type }}" name="{{ name }}" value="{{ value }}">{% endmacro %}<!--使用宏--><div class="container"><label><p>用户名</p>{{ input("username") }}</label><label><p>密码</p>{{ input("password", "password") }}</label>{{ input("submit", "submit", "提交") }}</div>
</body>
</html>

宏的导入和注意事项：
通常在开发中，会将宏进行分类，放到单独的文件中，所以在其他的文件中需要调用宏的时候，首先需要将宏导入到文件中，才能够调用。

导入宏的方式和python中导入包非常类似，import xxx, import xxx as yyy, from xxx import yyy

{% from "HTML/login_form.html" import input %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style></style>
</head>
<body><!--使用宏--><div class="container"><label><p>用户名</p>{{ input("username") }}</label><label><p>密码</p>{{ input("password", "password") }}</label>{{ input("submit", "submit", "提交!") }}</div>
</body>
</html>

宏文件在其他文件夹中的时候，需要以templates文件夹为根目录，开始查找。不能通过相对路径查找。

如果需要在导入宏的时候，将当前一些模板的参数传给宏所在的模板，那么在导入的时候应该使用with context, 例如：
from xxx import yyy with context

include 标签使用：

1. include表示将另一个文件中的代码，复制粘贴到include的当前位置。（有点c++中inline函数的意思）

2. include完全可以直接调用父模板中的变量：

3. 在include文件的路径时，只需要按照templates根目录进行加载，不能使用相对路径。跟import的路径形式一样

例如，分别定义header.html以及footer.html

header.html:(html +css代码)

<style>.nav{width: 100%;height: 40px;overflow: hidden;background: aquamarine;}.nav ul{font-size: 18px;color: black;line-height: 40px;}.nav ul li:hover{background: blue;}.nav ul li{float: left;margin-left: 15px;}
</style><div class="nav"><ul><li>首页</li><li>课程详情</li><li>视屏教程</li><li>关于我们~</li><li>{{ username }}</li></ul>
</div>

footer.html

<style>.footer{width: 100%;height: 200px;background: black;color: white;}
</style><div class="footer">这是底部footer
</div>

例如，需要在index.html中include文件header.html以及footer.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}a{text-decoration: none;}.middle{width: 100%;height: 300px;background: burlywood;}</style>
</head>
<body>{% include "common/header.html" %}<div class="middle">中间部分</div>{% include  "common/footer.html" %}
</body>
</html>

此时，如果需要在不同的页面中使用header.html和footer.html.只需要在页面中include这两个文件即可。
set,with语句以及模板中定义常量：

在模板中，应该如何定义常量：{% set username=" xxx" %}

还可以使用with语句定义变量，with语句有起始和结束的地方，所以在with语句块内，可以使用该变量，但是在with语句块以外，不能使用这一变量。

{% with username="hell" %}

可以使用变量username的语句块

{% endwith %}

<body>{% set username="Tom" %}     <!--定义常量--><p>用户名：{{ username }}</p>{% with name="hell" %}<p>This is user {{ name }}</p>{% endwith %}
</body>

也可以定义一个空的with语句，在这个空的with语句中，可以使用set定义变量，定义的变量也只能在这个with语句块中使用：

{% with %}

{% set name="xxx" %}

可以使用变量username的语句块

{% endwith %}

jingja2中加载静态文件：

静态文件： css文件，js文件，字体文件，图片文件，在flask中，静态文件存储在static文件夹下，在flask中加载静态文件，文件路径需要使用url_for("static", filename="路径")进行加载，其中路径需要以static文件夹为根目录。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问首页</title><link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}"><script rel="script" src="{{ url_for('static', filename='JS/index.js') }}"></script></head>
<body><div class="container">加载静态文件</div><div class="picture"><img src="{{ url_for('static', filename='images/sunset.png') }}" alt=""></div>
</body>
</html>

jingja2中模板继承：

1. 为什么需要模板继承：
模板继承可以把一些公用的代码单独抽取出来，放到父模板中，以后子模版直接继承就可以使用了，减少重复性的代码，修改起来也更加的简单。

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

3. 在父模板中，只能实现一些公共的代码。这时候父模板应该有能力提供一个接口，让父模板来实现

实例：

父类的html代码：设计整个模板，header, footer是共用的部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}{% endblock %}</title><style>.nav{width: 100%;height: 40px;overflow: hidden;background: aquamarine;}.nav ul{font-size: 18px;color: black;line-height: 40px;}.nav ul li:hover{background: blue;}.nav ul li{float: left;margin-left: 15px;}.footer{width: 100%;height: 200px;background: black;color: white;}</style>
</head>
<body><div class="nav"><ul><li>首页</li><li>课程详情</li><li>视屏教程</li><li>关于我们~</li></ul></div>{% block content %}<!--相当于占位的功能，具体的内容在子模板中实现-->{% endblock %}<div class="footer">这是底部footer</div>
</body>
</html>

定义自类的代码，继承父类：

<!--首页实现，继承自模板-->
{% extends "common/base_template.html" %}   <!--继承父类-->{% block title %}CMS系统
{% endblock %}{% block content %}<style>*{margin: 0;padding: 0;}ul{list-style: none;}.content-block{width: 100%;height: 200px;background: purple;margin-top: 20px;}.content-block span{font-size: 18px;color: #ab811e;display: block;}.content-block .item{width: 50%;height: 100px;margin-top: 20px;z-index: 2;}</style><div class="content-block"><span>This is content</span><div class="item"></div></div>
{% endblock %}

----------------------------------------------------------------------------------------------------------------------------------------