简介
在本实验中，我们将学习如何在 Flask 中创建和使用模板。模板是 Web 应用程序的关键部分。它们使我们能够生成动态 HTML 页面，每次加载时都可以显示不同的数据。我们将使用与 Flask 捆绑在一起的 Jinja2 模板引擎。
注意：你需要自己创建代码文件并在环境中运行它。你可以在 Web 5000 上预览 Flask 服务状态。
创建基础布局
我们的第一步是创建一个将用于所有页面的基础布局。这个基础布局将包括我们应用程序的常见元素，如导航栏和页面标题。
<!-- 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（不要重复自己）原则，使其更易于维护且更不易出错。