在 Flask 中创建和使用模板

简介

在本实验中，我们将学习如何在 Flask 中创建和使用模板。模板是 Web 应用程序的关键部分。它们使我们能够生成动态 HTML 页面，每次加载时都可以显示不同的数据。我们将使用与 Flask 捆绑在一起的 Jinja2 模板引擎。

注意：你需要自己创建代码文件并在环境中运行它。你可以在 Web 5000 上预览 Flask 服务状态。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL flask(("Flask")) -.-> flask/DataHandlingGroup(["Data Handling"]) flask(("Flask")) -.-> flask/CoreConceptsGroup(["Core Concepts"]) flask/DataHandlingGroup -.-> flask/incoming_request_data("Incoming Request Data") flask/DataHandlingGroup -.-> flask/response_objects("Response Objects") flask/CoreConceptsGroup -.-> flask/application_object("Application Object") flask/CoreConceptsGroup -.-> flask/useful_internals("Useful Internals") subgraph Lab Skills flask/incoming_request_data -.-> lab-136338{{"Flask 模板创建"}} flask/response_objects -.-> lab-136338{{"Flask 模板创建"}} flask/application_object -.-> lab-136338{{"Flask 模板创建"}} flask/useful_internals -.-> lab-136338{{"Flask 模板创建"}} end

创建基础布局

我们的第一步是创建一个将用于所有页面的基础布局。这个基础布局将包括我们应用程序的常见元素，如导航栏和页面标题。

<!-- flaskr/templates/base.html -->
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<nav>
  <h1>Flaskr</h1>
  <ul>
    {% if g.user %}
    <li><span>{{ g.user['username'] }}</span></li>
    <li><a href="{{ url_for('auth.logout') }}">退出登录</a> {% else %}</li>

    <li><a href="{{ url_for('auth.register') }}">注册</a></li>
    <li>
      <a href="{{ url_for('auth.login') }}">登录</a>
      {% endif %}
    </li>
  </ul>
</nav>
<section class="content">
  <header>{% block header %}{% endblock %}</header>
  {% for message in get_flashed_messages() %}
  <div class="flash">{{ message }}</div>
  {% endfor %} {% block content %}{% endblock %}
</section>

注册模板

接下来，我们将为注册页面创建一个模板。这个模板将扩展我们的基础布局，并填充此页面的特定内容。

<!-- flaskr/templates/auth/register.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}注册{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">用户名</label>
  <input name="username" id="username" required />
  <label for="password">密码</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="注册" />
</form>
{% endblock %}

登录模板

同样，我们将为登录页面创建一个模板。这个模板也将扩展我们的基础布局，并填充此页面的特定内容。

<!-- flaskr/templates/auth/login.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}登录{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">用户名</label>
  <input name="username" id="username" required />
  <label for="password">密码</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="登录" />
</form>
{% endblock %}

总结

在本实验中，我们学习了如何在 Flask 中创建和使用模板。我们创建了一个包含应用程序常见元素的基础布局，然后为注册和登录页面创建了特定的模板，这些模板扩展了基础布局并填充了它们的特定内容。这使我们能够保持代码的 DRY（不要重复自己）原则，使其更易于维护且更不易出错。