Web后端学习笔记Flask（2）模板
模板渲染：
在flask中，视图函数可以直接通过render_template进行模板渲染。在flask中，模板文件是存放在template文件夹中：在调用模板文件的时候，模板文件的路径从template文件夹之后开始写，必须写完整的路径，在渲染模板的时候，默认是从项目的templates文件夹查找模板。
from flask import Flask, render_template
app = 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_template
app = 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_template
app = 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_template
app = 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_template
app = 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_template
app = 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_template
app = 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_template
app = 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 value
if __name__ == '__main__':
app.run(debug=True) # 开启debug模式
自定义时间处理过滤器：
from flask import Flask, render_template
from datetime import datetime
app = 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() - time
seconds = 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 time
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 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_template
app = 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 %}
----------------------------------------------------------------------------------------------------------------------------------------
