Flask模板的介绍与使用
Flask模板的简单介绍
在Flask web程序中，通过业务逻辑函数得到的数据后，接下来需要根据这些数据生成HTTP响应（对于Web应用来说，HTTP响应是一个HTML文件）。在Flask Web开发中，一般是提供一个HTML模板文件，然后将数据传递到模板中，在渲染HTML模板文件后会得到最终的HTML响应文件。
使用Jinja2模板引擎
在Flask框架中，是使用Jinja2模板引擎对模板文件进行渲染，如果想要开发出一套易于维护的程序，那么就一定要将它的业务代码与逻辑代码分开。在Flask框架中，视图函数的作用是生成对访问请求的响应，一般来说，访问请求会改变程序的状态，而这种变化也会在视图函数中产生。在Flask程序中，业务逻辑部分也就是我们的后台，一般就是在python文件中编写，表现逻辑部分就会在HTML文件中编写，也就是模板文件。
在Flask程序中，模板文件是存储在templates文件夹中的，现在在templates文件夹中创建两个模板文件index.html与user.html，它们的代码，如下所示：
index.html
<h1>Hello world</h1>
user.html
<h1>hello {{name}}</h1>
在默认的情况下，Flask在程序文件夹中，会自动寻找templates子文件夹中的模板文件。
接下来，新建一个moban.py文件，代码如下所示：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/user/<name>')
def user(name):
return render_template('user.html', name=name)
if __name__ == '__main__':
app.run()
在上述代码中使用Flask的内置函数render_template()引用Jinja2模板引擎。
render_template函数的用法：
(function) render_template: (template_name_or_list: str | List[str], **context: Any) -> str
Renders a template from the template folder with the given context.
:param template_name_or_list: the name of the template to be
rendered, or an iterable with template names the first one existing will be rendered
:param context: the variables that should be available in the
context of the template.
第一个参数：表示本程序使用的模板文件名。
第二个参数：是一个“键-值”对，表示模板中变量对应的真实值。
Jinja2模板的基本元素
前面的Jinja2模板文件的index.html和user.html中，页面元素比较简单，在Jinja2模板文件中可以有更多的元素。
变量
在模板文件中user.html，“{{nme}}代码部分表示一个变量，功能是告诉模板引擎这个位置的信息是由业务逻辑进行处理。Jinja2非常强大，它除了可以识别普通变量之外，还可以识别其他类型的变量，例如列表、字典和对象等。
<p>字典中的值：{{mydict['key']}}</p>
<p>列表中的值：{{mydict[3]}}</p>
<p>列表中的值，具有可变索引：{{mydict[myintvar]}}</p>
<p>对象方法中的值：{{myjob.somemethod()}}</p>
过滤器
开发者如果想要修改变量的值，可以将过滤器添加到变量名的后面，在中间使用竖线进行隔离，例如，在模板文件中想要以首字母大写的形式显示变量name的值。
{{name | capitalize}}
Jinja2中常见的过滤器
（1）capitalize：把变量值的首字母转换成大写，将其他字母转换为小写。
（2）lower：把变量值全部转换为小写
（3）upper：把所有变量值转换为大写
（4）title：把变量中的所有单词的首字母都转换为大写
（5）trim：删除变量值中的首位空格
（6）stripags：在渲染前删除变量值中的所有HTML标签
下面代码将演示Flask Web中模板传递变量的方式。
untitled.py
from flask import Flask, render_template
class Myobj(object):
def __init__(self, name) -> None:
self.name = name
def get_name(self):
return self.name
app = Flask(__name__)
@app.route('/')
def index():
mydict = {'key1': '123', 'key2': 'hello'}
mylist = [123, 234, 456]
myintvar = 0
myobj = Myobj('Hyman')
return render_template('index.html', mydict=mydict, mylist=mylist, myintvar=myintvar, myobj=myobj)
if __name__ == '__main__':
app.run()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>一个来自字典的值:{{mydict['key']}}</p>
<p>一个来自列表的值：{{mylist[3]}}</p>
<p>一个来自具有变量索引的列表值{{mylist[myintvar]}}</p>
<p>一个来自对象方法的值{{myobj.get_name()}}</p>
</body>
</html>
控制结构
Flask中的Jinja2模板提供了多种控制结构，通过这些控制结构可以改变模板的渲染过程。例如，下面展示的条件控制语句。
{ %if user %}
你好{{user}},欢迎登录
{% else %}
登录错误
{ %endif% }
接下来在下面掩饰for循环在模板中的使用。
<ul>
{% for user in users %}
<li>用户列表：{{user}}</li>
{{% endfor %}}
</ul>
下面编写两个文件来实现控制结构与循环结构的使用。
app.py
from turtle import title
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
list1 = list(range(10))
my_list = [
{'id': 1, 'value': '我爱工作'},
{'id': 2, 'value': '工作使人快乐'},
{'id': 3, 'value': '沉迷工作无法自拔'},
{'id': 4, 'value': '日渐消瘦'},
{'id': 5, 'value': '以梦为马，不负韶华'},]
return render_template('index.html', title='hello world',list2=list1,my_list=my_list)
def do_listreverse(aa):
temp_li = list(aa)
temp_li.reverse()
return temp_li
app.add_template_filter(do_listreverse, 'listreverse')
if __name__ == '__main__':
app.run()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>{{title | listreverse | upper}}</h1>
<br>
<ul>
{% for item in my_list %}
<li>{{item.id}}----{{item.value}}</li>
{% endfor %}
</ul>
<ul>
{% for item in my_list %}
{% if loop.index == 1 %}
<li style="background-color: red;">{{loop.index}}----{{item.get('value')}}</li>
{% elif loop.index == 2 %}
<li style="background-color: gray;">{{loop.index}}----{{item.get('value')}}</li>
{% elif loop.index == 3 %}
<li style="background-color: blue;">{{loop.index}}----{{item.get('value')}}</li>
{% else %}
<li style="background-color: yellow;">{{loop.index}}----{{item.get('value')}}</li>
{% endif %}
{% endfor %}
</ul>
</body>
</html>
静态文件
在flask web程序中也同样可以使用静态文件，假如你是使用Pycharm创建Flask项目，它会自动生成static文件夹，该文件夹就是用于存储静态文件，比如说图片、css文件和JavaScript文件等。
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()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript"
src="{{url_for('static', filename='hello.js')}}"></script>
</head>
<body>
<input type="button" onclick="sayhello()" value="点击我啊">
</body>
</html>
hello.js
function sayhello(){
alert ("你好");
}
在上面的代码中，hello.js是保存在静态文件夹static中。
