Flask Template 模板

视图函数有两个作用：处理业务逻辑和返回响应内容。

在大型应用中，把业务逻辑和表现内容放在一起，会增加代码的复杂度和维护成本。通常会采用 MVC 架构，其中 View 部分主要是对模板的处理。

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

1. 使用模板的好处

视图函数只负责业务逻辑和数据处理(业务逻辑方面)
而模板则取到视图函数的数据结果进行展示(视图展示方面)
代码结构清晰,耦合度低

2. 模板基本使用

在项目下创建 templates 文件夹，用于存放所有模板文件，并在目录下创建一个模板文件 html 文件 hello.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我的模板html内容
</body>
</html>

创建视图函数，将该模板内容进行渲染返回。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('hello.html')

3. 模板变量

代码中传入字符串，列表，字典到模板中：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 往模板中传入的数据
    my_str = 'Hello Word'
    my_int = 10
    my_array = [3, 4, 2, 1, 7, 9]
    my_dict = {
        'name': 'xiaoming',
        'age': 18
    }
    return render_template(
        'hello.html',
        my_str=my_str,
        my_int=my_int,
        my_array=my_array,
        my_dict=my_dict
    )

模板中代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  我的模板html内容
  <br />{{ my_str }}
  <br />{{ my_int }}
  <br />{{ my_array }}
  <br />{{ my_dict }}
</body>
</html>

运行效果：

我的模板html内容
Hello Word
10
[3, 4, 2, 1, 7, 9]
{'name': 'xiaoming', 'age': 18}

4. 范例代码

@app.route('/')
def index():
    my_int = 18
    my_str = 'curry'
    my_list = [1, 5, 4, 3, 2]
    my_dict = {
        'name': 'durant',
        'age': 28
    }

    # render_template方法:渲染模板
    # 参数1: 模板名称  参数n: 传到模板里的数据
    return render_template(
        'hello.html',
        my_int=my_int,
        my_str=my_str,
        my_list=my_list,
        my_dict=my_dict
    )

if __name__ == '__main__':
app.run(debug=True)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <h2>我是模板</h2>
    {{ my_int }}
    <br>
    {{ my_str }}
    <br>
    {{ my_list }}
    <br>
    {{ my_dict }}
    <hr>
    <h2>模板的list数据获取</h2>
    <hr>
    {{ my_list[0] }}
    <br>
    {{ my_list.1 }}
    <hr>
    <h2>字典数据获取</h2>
    <hr>
    {{ my_dict['name'] }}
    <br>
    {{ my_dict.age }}
    <hr>
    <h2>算术运算</h2>
    <br>
    {{ my_list.0 + 10 }}
    <br>
    {{ my_list[0] + my_list.1 }}
</body>

</html>

下一章：Flask 静态文件

Web 应用程序通常需要静态文件，例如 JavaScript、CSS 或者图片文件。通常，网站的静态文件由 Web 服务器（比如Nginx、Apache、IIS等）提供服务，但在开发过程中，这些静态文件一般会保存在项目的 static 文件夹中，它将在应用程序的 /static 中提供。

上一章：Flask HTTP 方法

下一章：Flask 静态文件