如何使用Flask編寫一個網站

TechSynapse發表於2024-11-11
Flask網站

使用Flask編寫一個網站是一個相對簡單且有趣的過程。Flask是一個用Python編寫的輕量級Web應用框架。它易於上手，同時也非常強大，適合構建從簡單的部落格到複雜的Web應用的各種專案。以下是一個使用Flask編寫簡單網站的指南，包括程式碼示例。

一、如何使用Flask編寫一個網站

（一）安裝Flask

首先，我們需要確保我們的Python環境中安裝了Flask。我們可以使用pip（Python的包管理器）來安裝它。

bash複製程式碼

pip install Flask

（二）建立Flask應用

  1. 建立專案目錄：
    在我們的計算機上建立一個新的目錄來存放我們的Flask專案。
  2. 建立主應用檔案：
    在專案目錄中建立一個名為app.py（或我們喜歡的任何名稱）的檔案，並新增以下程式碼：
# app.py
from flask import Flask, render_template, request
 
app = Flask(__name__)
 
# 配置項（可選）
app.config['DEBUG'] = True  # 開啟除錯模式，這樣程式碼變動後伺服器會自動重啟
 
# 路由和檢視函式
@app.route('/')
def home():
    return render_template('index.html')  # 渲染模板檔案
 
@app.route('/greet', methods=['GET', 'POST'])
def greet():
    if request.method == 'POST':
        name = request.form['name']  # 從表單中獲取資料
        return f'Hello, {name}!'
    return render_template('greet.html')  # 渲染表單模板
 
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)  # 在所有網路介面上執行，監聽5000埠

（三）建立HTML模板

  1. 建立模板目錄：
    在專案目錄中建立一個名為templates的資料夾。
  2. 新增模板檔案：
    在templates資料夾中建立兩個HTML檔案：index.html和greet.html。

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Flask Website</h1>
    <a href="/greet">Greet Someone</a>
</body>
</html>

greet.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greet</title>
</head>
<body>
    <h1>Greet Someone</h1>
    <form method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

（四）執行Flask應用

  1. 開啟終端：
    開啟我們的命令列介面（終端、命令提示符等）。
  2. 導航到專案目錄：
    使用cd命令導航到我們建立的專案目錄。
  3. 執行應用：
    在終端中執行以下命令來啟動Flask應用：
bash複製程式碼

python app.py
  1. 訪問網站：
    開啟我們的網路瀏覽器，並訪問http://localhost:5000/。我們會看到“Welcome to My Flask Website”的頁面。點選“Greet Someone”連結，我們會被帶到表單頁面。填寫表單並提交，我們會看到問候資訊。

（五）除錯和部署

  • 除錯：如果我們開啟了除錯模式（app.config['DEBUG'] = True），當我們修改程式碼並儲存時，Flask應用會自動重啟，以便我們立即看到更改的效果。
  • 部署：將Flask應用部署到生產環境通常涉及使用WSGI伺服器（如Gunicorn或uWSGI）和反向代理（如Nginx或Apache）。這超出了這個簡單指南的範圍，但我們可以查閱Flask的官方文件或搜尋相關的教程來了解更多資訊。

透過以上步驟，我們已經成功地使用Flask編寫了一個簡單的網站。現在，我們可以繼續擴充套件我們的網站，新增更多的路由、模板和邏輯來滿足我們的需求。

二、如何在Flask中新增樣式表

在Flask中新增樣式表（CSS）是一個常見的需求，它允許我們自定義網頁的外觀和感覺。以下是如何在Flask專案中新增和使用樣式表的步驟：

（一）建立靜態資料夾

Flask有一個約定，即所有靜態檔案（如CSS、JavaScript、圖片等）都放在名為static的資料夾中。如果我們的專案目錄中還沒有這個資料夾，請建立一個。

（二）新增樣式表檔案

在static資料夾中，建立一個新的CSS檔案，比如styles.css。

（三）編寫CSS程式碼

在styles.css檔案中編寫我們的CSS程式碼。例如：

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}
 
h1 {
    color: #333;
}
 
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

（四）在HTML模板中連結樣式表

現在，我們需要在HTML模板中連結這個CSS檔案。使用<link>標籤，並將href屬性設定為樣式表的相對路徑（從static資料夾開始）。

例如，在我們的index.html模板中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask Website</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <h1>Welcome to My Flask Website</h1>
        <p>This is a simple Flask web application with a custom stylesheet.</p>
    </div>
</body>
</html>

注意這裡使用了{{ url_for('static', filename='styles.css') }}來生成樣式表的URL。這是Flask提供的一個幫助函式，它可以確保我們的靜態檔案路徑是正確的，即使我們將應用部署到不同的URL或子路徑上。

（五）執行Flask應用

確保我們的Flask應用正在執行，然後訪問我們的網頁。我們能看到應用了CSS樣式的網頁。

（六）除錯和修改

如果樣式沒有正確應用，檢查以下幾點：

  • 確保static資料夾和styles.css檔案的路徑正確。
  • 確保在HTML模板中正確使用了<link>標籤。
  • 清除瀏覽器快取，以確保我們看到的是最新的CSS檔案。
  • 使用瀏覽器的開發者工具（通常可以透過按F12或右鍵點選頁面並選擇“檢查”來開啟）來檢查是否有任何錯誤或警告。

透過以上步驟，我們能夠成功地在Flask專案中新增和使用樣式表。

三、如何在Flask中新增圖片

在Flask中新增圖片與新增樣式表類似，我們需要將圖片檔案放在指定的靜態資料夾中，並在HTML模板中引用它們。以下是詳細步驟：

（一）建立或確認靜態資料夾

確保我們的Flask專案中有一個名為static的資料夾。這個資料夾用於存放所有的靜態檔案，包括圖片、CSS檔案、JavaScript檔案等。

（二）新增圖片檔案

將我們的圖片檔案（如example.png）放入static資料夾中。我們可以在這個資料夾內建立一個子資料夾來組織我們的圖片，比如static/images/。

（三）在HTML模板中引用圖片

在我們的HTML模板中，使用<img>標籤來引用圖片。由於圖片存放在static資料夾中，我們需要使用相對路徑來引用它們。Flask提供了一個幫助函式url_for來生成靜態檔案的URL，但對於圖片來說，直接使用相對路徑通常更簡單且直觀。

例如，如果我們的圖片存放在static/images/資料夾中，我們可以在HTML模板中這樣引用它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask Website with Images</title>
</head>
<body>
    <h1>Welcome to My Flask Website</h1>
    <p>Here is an example image:</p>
    <img src="{{ url_for('static', filename='images/example.png') }}" alt="Example Image">
    <!-- 或者使用相對路徑，如果圖片在static/images/資料夾中 -->
    <!-- <img src="/static/images/example.png" alt="Example Image"> -->
</body>
</html>

注意，這裡展示了兩種引用圖片的方法：

  1. 使用url_for函式，這是Flask推薦的方式，因為它可以處理路徑和URL的更改。
  2. 使用相對路徑，這種方法更簡單，但在某些情況下（如應用部署在子路徑上時）可能會遇到問題。

（四）執行Flask應用

確保我們的Flask應用正在執行，然後訪問我們的網頁。我們能看到引用的圖片顯示在網頁上。

（五）除錯和修改

如果圖片沒有正確顯示，檢查以下幾點：

  • 確保static資料夾和圖片檔案的路徑正確。
  • 確保在HTML模板中正確使用了<img>標籤和src屬性。
  • 清除瀏覽器快取，以確保我們看到的是最新的圖片檔案。
  • 檢查圖片檔案的許可權，確保Web伺服器可以訪問它們。
  • 使用瀏覽器的開發者工具來檢查是否有任何錯誤或警告，特別是關於圖片載入失敗的錯誤。

透過以上步驟，我們能夠成功地在Flask專案中新增和顯示圖片。

相關文章