深入理解ipeirotis/dealing_with_data项目中的Jinja模板技术

2025-06-04 18:27:52作者：胡唯隽

什么是Jinja模板引擎

Jinja是一个现代化的、设计优雅的模板引擎，它是Python web开发中最流行的模板语言之一。在Flask框架中，Jinja被用作默认的模板引擎，它允许开发者将业务逻辑与表现层分离，使代码更加清晰可维护。

为什么需要模板引擎

在传统的web开发中，我们经常需要在Python代码中直接嵌入HTML字符串，这种方式有几个明显的缺点：

代码可读性差：HTML和Python代码混杂在一起
维护困难：修改界面需要改动Python代码
复用性差：相同的HTML结构无法复用
协作不便：前端开发人员需要理解Python代码

Jinja模板引擎完美解决了这些问题，它允许我们将HTML代码保存在单独的文件中，并通过简单的语法实现动态内容的渲染。

基础模板使用

创建第一个模板

让我们从创建一个简单的模板开始。在项目中，我们首先创建一个index.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>My Flask App</title>
</head>
<body>
    <h1>Hello World!</h1>
    <h4>Welcome to the Flask Lesson</h4>
    <hr>
    <div style="color: green">
        <strong>Below an image is displayed</strong>
        <p>
        <img width="300" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/58/NYU_logo.svg/1280px-NYU_logo.svg.png"/>
        <p>This is a simple example how to use HTML in Flask templates</p>
    </div>
</body>
</html>

然后在Flask应用中使用render_template函数渲染这个模板：

from flask import Flask, render_template

app = Flask(__name__, template_folder='/path/to/templates')

@app.route("/")
def home():
    return render_template("index.html")

模板变量

Jinja最强大的功能之一是支持变量替换。我们可以创建index2.html模板：

<html>
  <title>My main page</title>
  <body>
    <h1>Hello, {{ username }}!</h1>
    <h1>Today is {{ today }}</h1>
  </body>
</html>

然后在Python代码中传递这些变量：

import datetime

@app.route("/")
def home():
    today = datetime.date.today()
    return render_template("index2.html", username="Panos Ipeirotis", today=today)

高级模板功能

循环结构

Jinja支持类似Python的循环结构，可以方便地渲染列表数据。例如，我们可以创建一个演员列表页面：

@app.route("/actors")
def actors():
    persons = [
        {"name": "Robert De Niro", "age": 73},
        {"name": "Leonardo DiCaprio", "age": 42},
        {"name": "Tom Hanks", "age": 60},
        {"name": "Tom Cruise", "age": 54}
    ]
    return render_template('actors.html', title="My favorite actors", actors=persons)

对应的模板文件actors.html：

<body>
    <h2>{{ title }}</h2>
    <ul>
        {% for i in actors %}
        <li>Name: {{ i.name }}; age: {{ i.age }}</li>
        {% endfor %}
    </ul>
</body>

条件语句

Jinja还支持条件判断，我们可以根据数据的不同状态显示不同的内容：

<body>
    <h2>{{ title }}</h2>
    <ul>
        {% for i in actors %}
            <li>
                {% if i.age == 60 %}
                    <u>Name: {{ i.name }}; age: {{ i.age }}</u>
                {% elif i.age > 50 %}
                    <strong>Name: {{ i.name }}; age: {{ i.age }}</strong>
                {% else %}
                    Name: {{ i.name }}; age: {{ i.age }}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</body>

实际应用示例

让我们看一个更实际的例子，展示食物营养成分表：

@app.route("/food")
def food():
    food_items = [
        {"food": "Apple pie, 1 piece", "calories": 405, "protein": 3, "fat": 18, "carbohydrate": 60},
        {"food": "Banana", "calories": 105, "protein": 1, "fat": 0, "carbohydrate": 27},
        {"food": "Beaf steak", "calories": 240, "protein": 23, "fat": 15, "carbohydrate": 0},
        {"food": "Carrot", "calories": 30, "protein": 1, "fat": 0, "carbohydrate": 7},
        {"food": "Chicken soup, 1 cup", "calories": 60, "protein": 4, "fat": 2, "carbohydrate": 7}
    ]
    return render_template('food.html', food_items=food_items)

对应的模板可以添加条件格式，突出显示高热量食物：

<table border="1">
    <tr>
        <th>Food</th>
        <th>Calories</th>
        <th>Protein</th>
        <th>Fat</th>
        <th>Carbohydrate</th>
    </tr>
    {% for item in food_items %}
    <tr {% if item.calories > 300 %}style="background-color: #ffcccc"{% endif %}>
        <td>{{ item.food }}</td>
        <td>{{ item.calories }}</td>
        <td>{{ item.protein }}</td>
        <td>{{ item.fat }}</td>
        <td>{{ item.carbohydrate }}</td>
    </tr>
    {% endfor %}
</table>