通过

教程：在 Visual Studio 中使用 Flask 提供静态文件服务并进行模板继承

本文介绍教程系列中的步骤 3 在 Visual Studio中使用 Flask Web 框架。

本教程系列中的前几个步骤创建了一个包含单页自包含 HTML 的最小 Flask 应用。 新式 Web 应用通常由许多页面组成，并使用 CSS 和 JavaScript 文件等共享资源提供一致的样式和行为。 在步骤 3 中，使用 Visual Studio 项模板将内容添加到 Flask 项目并扩展应用程序的功能。

在本教程的步骤 3 中，你将了解如何：

  • 使用 Visual Studio 项模板通过样本代码快速添加新文件
  • 从 Flask 代码提供静态文件
  • 向 Flask 应用添加更多页面
  • 使用模板继承创建页眉和跨页面导航

先决条件

在 Visual Studio 中浏览项模板

开发 Flask 应用程序时，通常会添加更多 Python、HTML、CSS 和 JavaScript 文件。 对于每种文件类型（以及可能需要部署的 web.config 等其他文件），Visual Studio 提供了便捷的 项目模板，帮助您开始。 可以使用这些模板通过样板代码快速添加新类型的文件。

  1. 若要查看可用的模板，请转到 Visual Studio 中的 解决方案资源管理器 并打开项目结构。

  2. 右键单击要在其中创建新文件的文件夹，然后选择 添加>新项。 此时会打开“添加新项”对话框：

    显示 Visual Studio 2022 中“添加新项”对话框中可用模板的屏幕截图。

    显示 Visual Studio 中“添加新项”对话框中可用模板的屏幕截图。

  3. 若要使用模板，请选择所需的模板，输入文件的名称，然后选择 添加。

Visual Studio 将文件添加到当前项目，并标记源代码管理所做的更改。

了解 Visual Studio 如何标识项模板

Visual Studio 项目文件（.pyproj） 包含项目类型标识符，将该文件标记为 Python 项目。 Visual Studio 使用此类型标识符来识别并仅显示适合项目类型的项模板。 Visual Studio 遵循此方法，为许多项目类型提供丰富的项模板，而无需每次都要求你对其进行排序。

从应用提供静态文件

在使用 Python 生成的 Web 应用中（使用任何框架），Python 文件始终在 Web 主机的服务器上运行，永远不会传输到用户的计算机。 其他文件（如 CSS 和 JavaScript）仅供浏览器使用，因此主机服务器只需在请求时 as-is 传递它们。 这些类型的文件称为“静态”文件，Flask 可以自动交付这些文件，而无需编写任何代码。 例如，在 HTML 文件中，可以使用项目中的相对路径来引用静态文件。 本部分中的第一个过程演示如何将静态 CSS 文件与现有页面模板配合使用。

需要从代码（例如通过 API 终结点实现）传递静态文件时，Flask 提供了一种方便的方法。 可以使用项目根目录中名为 静态 的文件夹内的相对路径来引用文件。 本部分中的第二个过程演示如何从代码处理简单的静态数据文件。

在这两个过程中，可以根据偏好组织 静态 文件夹下的文件。

在模板中使用静态 CSS 文件

按照以下步骤在模板中使用静态文件：

  1. 在 解决方案资源管理器中，右键单击项目中的 HelloFlask 文件夹，选择“添加>新文件夹”，并将文件夹命名 为静态。

  2. 右键单击 静态 文件夹，然后选择“添加>新项。

  3. 在“添加新项 对话框中，选择 样式表 模板，将文件命名为 site.cs，然后选择 添加。

    Visual Studio 将 site.css 文件添加到项目中，并在编辑器中打开该文件。 下面是更新的 Flask 项目结构的示例：

    显示解决方案资源管理器中的静态文件结构的屏幕截图。

  4. 将 site.css 文件的内容替换为以下样式：

    .message {
    font-weight: 600;
    color: blue;
}

  5. 将 HelloFlask/templates/index.html 文件的内容替换为以下标记：

    <html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>

    此代码将教程系列步骤 2 中的 <strong> HTML 元素替换为引用 message 样式类的 <span> 元素。 以这种方式使用样式类可让你更灵活地设置 HTML 元素的样式。

  6. 通过选择“文件”>“全部保存”或使用 Ctrl+Shift+S 键盘快捷方式来保存项目更改。 （此步骤不是必需的，因为在开发项目时，Visual Studio 会自动保存文件。

  7. 运行项目并观察结果。 完成后，停止应用。

  8. （可选）可以将更改提交到源代码管理并更新远程存储库。 有关详细信息，请参阅本教程系列步骤 2 中的 提交对源代码管理 的更改。

从代码提供静态文件

Flask 提供了一个名为 send_static_file 的函数，可以从代码调用，以引用项目 静态 文件夹中的任何文件。 以下过程创建一个返回静态数据文件的简单 API 终结点：

  1. 在 静态 文件夹中，创建名为 data.json的静态 JSON 数据文件。 可以使用 文本 文件模板作为文件的基础。

  2. 将 JSON 文件的内容替换为以下代码，该代码提供一些示例数据来演示机制：

    {
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}

  3. 在 HelloFlask/views.py 文件中，添加包含路由 /api/data 终结点的函数，该终结点使用 send_static_file 方法返回静态数据文件：

    @app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')

  4. 保存项目更改，然后再次运行项目。 浏览到 /api/data 路由终结点，并确认应用返回静态文件：

    屏幕截图显示了斜线主页路由的更新应用程序页面视图和斜线 API 斜线数据路由的静态文件输出。

  5. 完成后，停止应用。

组织静态文件和文件夹

可以根据项目需求，在 静态 文件夹中添加其他 CSS、JavaScript 和 HTML 文件。 组织静态文件的典型方法是创建名为 字体的子文件夹、脚本，以及 内容（对于样式表和任何其他文件）。

使用 API 中的 URL 路由和查询参数

使用 Flask 时，可以使用 API 处理 URL 变量和查询参数。 有关详细信息，请参阅本教程系列步骤 1 中的 使用变量 URL 路由和查询参数。

将页面添加到 Flask 应用程序

将另一页添加到 Flask 应用程序涉及以下任务：

  • 添加定义视图的 Python 函数
  • 为页面的 HTML 标记添加模板
  • 更新 Flask 项目的 views.py 文件中的 URL 路由

按照以下步骤将 About（/about） 页面添加到 BasicProject Flask 项目，并从主页链接到该页面：

  1. 在 解决方案资源管理器中，右键单击项目中的 HelloFlask/templates 文件夹，然后选择“添加 >新项”。

    提示

    如果在 “添加” 菜单上看不到“新建项” 命令，请确保停止 Flask 应用以使 Visual Studio 退出调试模式（如有必要）。

  2. 在“添加新项 对话框中，选择 HTML 页面 模板，将文件命名为 about.html，然后选择 添加。

  3. 将 about.html 文件的内容替换为以下 HTML 标记：

    <html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

    在后续步骤中，将主页的显式链接替换为导航栏。

  4. 在 HelloFlask/views.py 文件中，添加一个名为 about 的函数，该函数使用模板：

    @app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

  5. 在 HelloFlask/templates/index.html 文件中，添加以下标记作为 <body> 元素中的第一个语句：

    <div><a href="about">About</a></div>

    此标记将链接添加到 Flask 应用的 /about 页面。 在后面的步骤中，请将此链接替换为导航栏。

  6. 保存项目更改，然后再次运行项目。 浏览到 /about 页面，并检查各个应用页面之间的导航。

  7. 完成后，停止应用。

为页面函数命名

Flask 不会对页面函数的名称施加任何限制或要求。 @app.route 装饰器决定 Flask 调用函数以生成响应的 URL。 开发人员通常将页面函数名称与路由匹配，但不需要这种类型的匹配。

对标题和导航使用模板继承

许多 Web 应用在设计上不为每个页面提供显式的导航链接，而是通过品牌标题和导航栏来提供最重要的页面链接、弹出菜单等功能。 为了确保应用中的一致性，标题和导航栏在所有页面中都应相同，但不需要在每个页面模板中重复相同的代码。 可以在单个文件中定义所有页面的常见部分。

Flask 的模板化系统（默认情况下，Jinja）提供了两种跨多个模板重用特定元素的方法：

  • “包含”是可以使用语法 {% include <template_path> %} 在引用模板的特定位置插入的另一个页面模板。 如果要在代码中动态更改路径，也可以使用变量。 包含通常用于页面主体，在页面特定位置拉入共享模板。

  • 继承使用页面模板开头的 {% extends <template_path> %} 语法来指定共享基模板，然后会在此模板上生成引用模板。 继承通常用于定义应用的页面的共享布局、导航栏和其他结构。 此方法要求引用模板仅添加或修改基模板称为“块”的特定区域。

对于这两种方法，<template_path> 值都是相对于应用的 templates 文件夹（也允许使用 ../ 或 ./）。

基模板使用 {% block <block_name> %} 和 {% endblock %} 标记来描述块。 如果引用模板使用具有相同块名称的标记，则引用模板中的块内容将替代基模板中的匹配块。

以下步骤演示模板继承：

  1. 在 解决方案资源管理器中，右键单击 HelloFlask/templates 文件夹，并从 HTML 页面 模板创建新文件，其名称为 layout.html。

  2. 将 layout.html 文件的内容替换为以下 HTML 标记：

    <!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

    此模板包含一个名为 content的块，该块标识需要引用页面替换的所有内容。

  3. 在 HelloFlask/static/site.css 文件中，将以下样式添加到文件末尾：

    .navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    这些样式定义为本练习生成了一个有趣的结果。 本演练不演示响应式设计。

  4. 将 HelloFlask/templates/index.html 文件的内容替换为以下标记：

    {% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}

    index 模板现在引用基模板并替代 content 块。 可以看到，使用继承可以简化此模板。

  5. 将 HelloFlask/templates/about.html 文件的内容替换为以下标记，因此 about 模板还引用基模板并替代 content 块：

    {% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}

  6. 再次运行应用并观察结果。 使用导航栏链接在应用页面之间切换。

    屏幕截图，显示修改后的 Flask 应用，该应用使用模板继承在所有页面中呈现标题和导航栏。

  7. 完成后，停止应用并保存项目更改。

  8. 由于对应用进行了重大更改，因此最好将更改保存到 Git 存储库。 有关详细信息，请参阅本教程系列步骤 2 中的 提交对源代码管理 的更改。

教程评审

祝贺你完成 Visual Studio 中 Flask 的本教程。

在本教程中，你学习了如何：

  • 创建包含多个页面的 Flask 项目
  • 使用模板创建不同的页面视图
  • 提供静态文件、添加页面和使用模板继承

相关内容