练习 - 创建应用

10 分钟

我们将以迭代方式创建应用程序，在创建过程中重点关注特定的概念。首先，我们将为应用程序创建登陆页面，该页面将显示用户要使用的表单。

通常，Flask 应用程序的入口点是名为“app.py”的文件。我们将遵循这一约定并创建应用程序的核心。我们将执行以下步骤：

创建核心应用程序
为应用程序添加路由
为网站创建 HTML 模板
测试应用程序

创建核心应用程序

返回到之前使用的 Visual Studio Code 实例，通过单击“Explorer”选项卡中的“新建文件”来创建名为“app.py”的新文件

重要

如果此练习是你第一次使用 Visual Studio Code 创建 Python 应用程序，你将收到有关安装 Python 扩展和 Linter pylint 的消息。选择“安装”来安装这些加载项。

添加代码以创建 Flask 应用程序

from flask import Flask, redirect, url_for, request, render_template, session

app = Flask(__name__)

导入语句包含对 Flask 的引用，这是所有 Flask 应用程序的核心。当我们想返回 HTML 时，我们将在一段时间内使用 render_template。

app 将是我们的核心应用程序。在下一步中，我们将使用它来注册路由。

添加路由

应用程序将使用一个路由 - /。此路由有时称为“默认”或“索引”路由，因为在用户不提供域或服务器名称之外的任何内容时，就会使用该路由。

将以下代码添加到“app.py”末尾

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

通过 @app.route，我们可以指定要创建的路由。路径将是，这是默认路由/。我们指出这将用于 GET。如果 / 收到 GET 请求，Flask 将自动调用修饰器下面直接声明的函数，我们的示例中为 index。在 index 的正文中，我们表示将向用户返回一个名为“index.html”的 HTML 模板。

为表单创建 HTML 模板

Flask 的模板引擎 Jinja 非常关注 HTML。因此，我们可以使用所有现有的 HTML 技能和工具。我们将使用启动来布置页面，使其更美观。通过启动，我们将在 HTML 上使用不同的 CSS 类。如果不熟悉启动，则可以忽略这些类而专注于 HTML（这是真正重要的部分）。

重要

HTML（超文本标记语言）是用于创建网页的标准标记语言。 HTML 包括一系列标记和属性，用于创建构成网页的标题、段落、列表、图像、链接和其他元素。当用户请求网页时，用户的浏览器会读取 HTML 代码，并将其呈现为用户可以与之交互的视觉对象网页。若要了解有关 HTML 的详细信息，请参阅 HTML 基础知识。

Flask 的模板需要在名为“模板”的文件夹中创建，这很合适。让我们创建文件夹、必要的文件并添加 HTML。

通过在 Visual Studio Code 的“资源管理器”工具中选择“新建文件夹”，创建一个名为“模板”的新文件夹
选择创建的“模板”文件夹，然后选择“新建文件”将文件添加到该文件夹中
将该文件命名为“index.html”

添加以下 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>Translator</title>
</head>
<body>
    <div class="container">
        <h1>Translation service</h1>
        <div>Enter the text you wish to translate, choose the language, and click Translate!</div>
        <div>
            <form method="POST">
                <div class="form-group">
                    <textarea name="text" cols="20" rows="10" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="language">Language:</label>
                    <select name="language" class="form-control">
                        <option value="en">English</option>
                        <option value="it">Italian</option>
                        <option value="ja">Japanese</option>
                        <option value="ru">Russian</option>
                        <option value="de">German</option>
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-success">Translate!</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

以上 HTML 中的核心组成部分是用户希望翻译的文本的 textarea，以及用户将用来指示目标语言的下拉列表 (select)。如果要添加更多语言，则可以参考受支持语言列表，获取其他选项。将 value 属性设置为语言代码，例如，“pl”表示波兰语。

测试应用程序

创建初始站点后，就该对其进行测试了！我们将使用 Visual Studio Code 中的集成终端，让这一过程更轻松一些。

在 Mac 上，选择 Ctrl-` 或 Cmd-` 来打开集成终端
运行以下命令将 Flask 运行时设置为开发，这意味着服务器将在每次更改时自动重载
```
# Windows
set FLASK_ENV=development

# Linux/macOS
export FLASK_ENV=development
```
运行应用程序！
```
flask run
```
通过导航到，在浏览器中打开应用程序http://localhost:5000

应看到显示的表单。祝贺你！

知识检查

继续