練習 - 建立應用程式

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 的本文中，我們會指出要傳回給使用者的 HTML 範本 index.html。

建立表單的 HTML 範本

Flask 的範本化引擎 Jinja 相當注重 HTML。因此，我們可以使用現有的所有 HTML 技能和工具。我們將使用啟動程序配置頁面，以略加美化。使用啟動程序，就可以在 HTML 上使用不同的 CSS 類別。您如果不熟悉啟動程序，可以忽略類別，專注於 HTML (這才是重點)。

重要

HTML (超文字標記語言) 是一種標準標記語言，可用來建立網頁。 HTML 包含一系列標記和屬性，可建立組成網頁的標題、段落、清單、影像、連結和其他元素。當使用者要求網頁時，其瀏覽器會讀取 HTML 程式碼，並將其轉譯為使用者可以進行互動的視覺網頁。若要深入了解 HTML，請參閱 HTML 基本概念。

您需要在名為 templates 的資料夾中建立為配件的 Flask 範本。讓我們建立資料夾 (必要的檔案)，然後新增 HTML。

在 Visual Studio Code 的 Explorer 工具中選取 [新增資料夾]，以建立名為 templates 的新資料夾
選取您建立的 templates 資料夾，然後選取 [新增檔案] 將檔案新增至資料夾
將檔案命名為 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 以在瀏覽器中開啟應用程式

您應該就會看見表單了！恭喜！

檢定您的知識

繼續