![cae8cdbc1e4ee00ec499d6c6d0ddc3af.png](https://i-blog.csdnimg.cn/blog_migrate/ecc76e38c7e73395bd280ae4ab789d42.jpeg)
前面总拿小明和小红做例子,他俩都烦了,所以这次咱们开门见山,先思考一个问题:平时我们上淘宝、上知乎,网站是怎么验证身份的呢?
很多小伙伴肯定会大声说:用户名和密码啊!没错,那网页上是如何实现的呢?
很简单,用户输入用户名和密码后,将它们打包发送给服务器,服务器校验后即可登录。为了方便,我们可以用宏(Macro)。
一、宏的定义
Jinja2中的宏功能有些类似于传统程序语言中的函数,跟python中的函数类似,可以传递参数,但不能有返回值,有声明和调用两部分。让我们先声明一个宏:
<!--宏定义-->
{% macro input(name, type='text', value='') -%}
<input type="{{type}}" name="{{name}}" value="{{value|e}}">
{%- endmacro %}
上面的代码定义了一个宏,宏定义要加macro,宏定义结束要加endmacro标志。宏的名称就是input,它有3个参数,分别是name、type和value,后两个参数有默认值。调用时用下面这个表达式:
<p>用户名:{{ input('username') }}</p>
<p>密 码:{{ input('password', type='password') }}</p>
在工程中templates的文件夹下新建index.html文件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>宏的定义和使用</title>
</head>
<body>
<!--宏定义-->
{% macro input(name, type='text', value='') -%}
<input type="{{type}}" name="{{name}}" value="{{value|e}}">
{%- endmacro %}
<!--宏的使用-->
<div style="color: #0000FF;">
<p>用户名:{{ input('username') }}</p>
<p>密 码:{{ input('password', type='password') }}</p>
<p>登 录:{{ input('submit', type='submit', value='登录') }}</p>
</div>
</body>
</html>
Python文件中需要引入模板文件,如下:
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def macro():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
在命令行执行文件就可以看到登录界面了:
![c3d977cf64ed1b033a746e2ac72e176c.png](https://i-blog.csdnimg.cn/blog_migrate/25db43d4437545e8c2bdf2d204c02270.png)
二、宏的导入
一个宏可以被不同的模板使用,所以可以将其声明在一个单独的模板文件中,需要使用时导入即可。
导入的方法类似于python中的import,在templates文件夹下修改index.html文件,并新建form.html文件存储宏。index.html文件代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>宏的定义和使用</title>
</head>
<body>
{% import 'form.html' as form %}
<div style="color: #0000FF;">
<p>用户名:{{ form.input('username') }}</p>
<p>密 码:{{ form.input('password', type='password') }}</p>
<p>登 录:{{ form.input('submit', type='submit', value='登录') }}</p>
</div>
</body>
</html>
form.html代码如下:
{% macro input(name, type='text', value='') -%}
<input type="{{type}}" name="{{name}}" value="{{value|e}}">
{%- endmacro %}
上面的代码用于单独存放宏,使用{% import 'form.html' as form %}方法可以将其导入到index.html文件中。Python文件与前面相同,命令行运行后得到相同的结果:
![c3d977cf64ed1b033a746e2ac72e176c.png](https://i-blog.csdnimg.cn/blog_migrate/25db43d4437545e8c2bdf2d204c02270.png)
三、include的使用
宏文件不仅可以被引用,还可以引用其他宏。Include语句可以把一个模板引入到另一个模板中,类似于把一个模板模板的代码复制到另外一个模板的指定位置。下面通过一个实例来说明。
在templates文件夹下修改index.html文件,并新建header.html文件和footer.html。index.html文件代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.header{
width:100%;
height:40px;
margin:20px 20px;
}
.footer{
width:100%;
height:40px;
margin:20px 20px;
}
.content{
width:100%;
height:40px;
margin:20px 20px;
}
</style>
</head>
<body>
{% include "header.html" %}
<div class="content">
这是网页内容!
</div>
{% include "footer.html" %}
</body>
</html>
header.html文件内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div class="header">
这是网页头部!
</div>
</body>
</html>
footer.html文件内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div class="footer">
这是网页尾部!
</div>
</body>
</html>
可以看出,include把一个模板的代码复制到另外一个模板的指定位置,{% include "header.html" %}和{% include "footer.html" %}把头文件和尾文件引入到index.html文件中。
以上就是关于宏功能的应用。此外,细心的小伙伴可能会发现,点击提交按钮并没有什么用,原因是我们只是进行了设计,并没有提交数据功能和验证功能,在今后的学习中将会讲到。
网页中相同的部分很多,反复写相同的代码不仅可能会出错,还浪费时间让程序员无比厌倦,为了让程序整洁一致,下一次我们将介绍模板的继承。
![feaad97947070dcfcb568753380d8d1d.png](https://i-blog.csdnimg.cn/blog_migrate/23271e33f4260e9e8a670c21d506f3c8.jpeg)