当我刚开始使用 Python Flask 时，我发现让我的 HTML 与我的后端通信非常混乱。本文希望尽可能简单地解释这一点。

文件结构

让我们保持简单，只处理 2 个文件——app.py 和 templates/index.html。

templates/index.html
app.py

代码

app.py 里面的代码

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    fruits = ['apple', 'orange', 'pear', 'pineapple', 'durian']
    return render_template(
        'index.html',
        name='bob',
        age=40, 
        fruits=fruits
    )

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

index.html 里面的代码

    Name: {{name}}



    Age: {{age}}






{% for fruit in fruits %}
    {{fruit}}
{% endfor %}

发生了什么

通常，当我在 Python flask 中使用 render_template 函数时，我只是简单地做一些类似 return render_template('index.html') 的事情。

但是，请注意我们在“index.html”参数后面还有其他关键字参数。

return render_template(
      'index.html',
      name='bob',
      age=40, 
      fruits=fruits
  )

这些关键字参数负责将数据从我们的后端传递到我们的 HTML 前端。更多示例：

return render_template(
      'index.html',
      name='bob'
  )

# 只有变量 'name'（值为 'bob'）被传递给我们的前端

return render_template(
      'index.html',
      age=40
  )

# 只有变量 'age'（值为 40）被传递给我们的前端

return render_template(
      'index.html',
      name='bob',
      age=40
  )

# 变量 name='bob' 和 age=40 都传递给我们的前端。

我们的 HTML 前端如何处理这个

注意——由于 jinja2 库的原因，我们在HTML中的处理请看如下代码。

    Name: {{name}}



    Age: {{age}}






{% for fruit in fruits %}
    {{fruit}}
{% endfor %}

注意双花括号内的姓名和年龄，例如。 {{name}}。 这是将一个简单变量传递给我们的 HTML 前端的方法。

至于水果，它是一个列表，我们使用 for 循环来显示所有水果。 注意到这种奇怪的语法 {% for fruit in fruits %} 和 {% endfor %} 。 因为有 jinja2，这变得非常方便。

然后我们将双花括号放在 fruit 周围，这也恰好是 {% for fruit in fruits %} 中的迭代器变量。 这使我们能够展示每个单独的水果。

最后

希望本文对您有所帮助！