我如何让jinja2识别html文件中的占位符（例如'{{var}}'）

问题描述 投票：0回答：1

我选择和其他一些学生一起制作一个飞行管理系统程序。我的职责是确保对于字典中的某些输入键：值对，这些值应使用 

jinja2
在 HTML 中显示。我对此完全陌生，所以我尽力在这里说清楚。

这是我的 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>Boarding Pass</title>
    
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <style>
        /* General Styles */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .main {
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
            padding: 20px;
            position: relative;
            box-sizing: border-box;
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .header i {
            font-size: 18px;
            color: #004080;
        }

        .header h6 {
            font-size: 16px;
            color: #004080;
            margin: 0;
            text-align: center;
            flex-grow: 1;
        }

        .pass {
            margin-top: 20px;
        }

        .shipping-info-head,
        .shipping-info-head1,
        .shipping-info-head2 {
            font-size: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .shipping-info-head h6,
        .shipping-info-head1 h2,
        .shipping-info-head2 p {
            margin: 0;
            color: #000000;
        }

        .shipping-info-head h6 {
            font-size: 18px;
            color: #0077cc;
        }

        .shipping-info-head1 h2 {
            font-size: 20px;
            color: #000000;
        }

        h1 {
            font-size: 24px;
            color: #004080;
            text-align: center;
            margin: 20px 0;
        }

        .barcode {
            width: 100%;
            height: 50px;
            background: url('https://www.pngall.com/wp-content/uploads/2/Barcode-PNG-Photo.png') no-repeat center;
            background-size: cover;
            margin-top: 20px;
        }

        .details-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .details-row p {
            font-size: 14px;
            color: #333;
            margin: 0;
        }

        h4 {
            font-size: 24px;
            color: #000000;
            text-align: center;
            margin: 20px 0;
        }
    </style>

</head>
<body>

<div class="main">
    <div class="header">
        <h6>Boarding Pass</h6>
    </div>
    
    <div class="pass">
        <div class="shipping-info-head">
            <h6>{{ details("departure") }}</h6>
            <h6>{{ arrival }}</h6>
        </div>
        <div class="shipping-info-head1">
            <h2>{{ shrt_departure }}</h2>
            <h4><i class="fa fa-arrow-circle-right" style="font-size:30px"></i></h4>
            <h2>{{ shrt_arrival }}</h2>
        </div>
        <div class="shipping-info-head2">
            <p>{{ departure_time }}</p>
            <p>{{ arrival_time }}</p>
        </div>
    </div>
    <h1>{{ passenger_name }}</h1>

    <div class="details-row">
        <p>Terminal</p>
        <p>Platform</p>
    </div>
    <div class="details-row">
        <p>{{ terminal }}</p>
        <p>{{ platform }}</p>
    </div>

    <div class="details-row">
        <p>Date</p>
        <p>Ticket Number</p>
    </div>
    <div class="details-row">
        <p>{{ travel_date }}</p>
        <p>{{ ticket_number }}</p>
    </div>

    <div class="details-row">
        <p>Seat</p>
        <p>Class</p>
    </div>
    <div class="details-row">
        <p>{{ seat_number }}</p>
        <p>{{ travel_class }}</p>
    </div>

    <div class="barcode"></div>
</div>

</body>
</html>

这是 Python 文件，其中包含我使用的一些示例字典；

from flask import Flask, render_template, request

# Initialize the Flask application
app = Flask(__name__)

# Define a function to handle undefined variables
def get_or_none(details, key):
  return details.get(key) or None  # Return None if key is not found

# Define the route for the form to capture user input
@app.route('/', methods=['GET', 'POST'])
def home():
  details = {
    "shrt_departure": "Van",
    "shrt_arrival": "SF",
    "departure": "Vancouver",
    "arrival": "San Francisco",
    "departure_time": "02:36pm",
    "arrival_time": "06:00pm",
    "passenger_name": "John Elliot",
    "terminal": "A",
    "platform": "6",
    "travel_date": "29/8/2019",
    "ticket_number": "94367",
    "seat_number": "17",
    "travel_class": "Economy"
  }

  # Handle form submission
  if request.method == 'POST':
    for key, value in details.items():
      details[key] = request.form.get(key, value)  # Update details with form data

  # Update template context with a function to handle undefined variables
  return render_template('gui_.html', details=get_or_none)

if __name__ == "__main__":
  app.run(debug=True, port=5501)

我遇到的问题是我无法让 HTML 文件识别 

jinja2
引用。

例如，网页中的 {{departure}} 应该替换为“温哥华”。相反，网页整体显示“{{departure}}”。

如何解决？

我在 VS Code 中完成了所有这些工作。

我尝试询问 Gemini AI 出了什么问题。它告诉我检查 Flask 是否已安装，以及文件是否位于同一文件夹中。我保证了所有这些。我仍然无法纠正错误。我什至尝试使用一个更简单的例子；它仍然向我显示同样的错误。

python html flask jinja2
1个回答
0
投票

命令

render_template(templ, **kwargs)
期望渲染模板的名称并将值传递给模板。就你而言，字典
details
。要将其传递给模板，您可以将整个字典作为值分配给键。然后可以在模板中使用的密钥下访问
details
。

Jinja 的一个特殊功能是，不使用括号，也可以使用点来访问字典的值。

以下示例使用全局变量

details
，因为我假设您无论如何都会在应用程序中使用数据库。否则，应尽可能避免全局变量。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
    <style>
        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 0.4rem;
        }
        .btn {
            width: 100%;
            padding: 0.4rem;
        }
        .form-group label {
            font-weight: bold;
        }
        #details {
            margin: 1.6rem 0;
        }
        #details > * {
            margin: 0.4rem 0;
        }
        .details-row {
            display: flex;
            flex-direction: column;
        }
        .details-row span {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form method="post">
        {% for k,v in details.items() -%}
        <div class="form-group">
            <label for="{{k}}">{{ k | replace('_', ' ') | capitalize }}</label>
            <input type="text" id="{{k}}" name="{{k}}" value="{{v}}" />
        </div>
        {% endfor -%}
        <button type="submit" class="btn block">Submit</button>
    </form>

    <div id="details">
        <h1>{{ details.ticket_number }} - {{ details.passenger_name }}</h1>
        <h2>
            {{ details.departure }} ({{ details.shrt_departure | upper }}) → 
            {{ details.arrival }} ({{ details.shrt_arrival | upper }})
        </h2> 
        <div class="details-row">
            <span>Seat</span> {{ details.seat_number }} ({{ details.travel_class }})
        </div>
        <div class="details-row">
            <span>Departure</span> {{ details.travel_date }}, {{ details.departure_time }}
        </div>
        <div class="details-row">
            <span>Arrival</span> {{ details.arrival_time }}
        </div>
        <div class="details-row">
            <span>Gate</span>{{ details.terminal }}{{ details.platform }}
        </div>
    </div>
</body>
</html>

from flask import (
    Flask, 
    render_template, 
    request
)

app = Flask(__name__)

details = {
    "shrt_departure": "Van",
    "shrt_arrival": "SF",
    "departure": "Vancouver",
    "arrival": "San Francisco",
    "departure_time": "02:36pm",
    "arrival_time": "06:00pm",
    "passenger_name": "John Elliot",
    "terminal": "A",
    "platform": "6",
    "travel_date": "29/8/2019",
    "ticket_number": "94367",
    "seat_number": "17",
    "travel_class": "Economy"
}

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        for k,v in request.form.items():
            if k in details: 
                details[k] = v
    return render_template('index.html', details=details)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.