跟著 ChatGPT成為程式大佬！Python 應用程式開發入門（Flask）

2024 iThome 鐵人賽

DAY 26

Python

如果讓chatgpt參加iThome鐵人賽，他竟然寫出...!?系列第 30 篇

16th鐵人賽 #chatgptfr , #chatgptgratuit , #chatgpt , #chatgptfrancais , #chatbot , #ai python入門 flask 從0開始學習程式

wenting_uwu1212

2024-10-14 14:03:21

161 瀏覽

分享至

第 28 天：Web 應用程式開發入門（Flask）

課程目標：

今天我們將學習如何使用 Python 中的 Flask 框架來建立一個簡單的 Web 應用程式。Flask 是一個輕量級的 Web 框架，適合初學者快速上手並理解 Web 開發的基本概念。

1. 什麼是 Flask？

Flask 是一個微型的 Web 框架，用來構建 Web 應用程式。它的簡單性和靈活性使它成為許多 Python 開發者的首選，特別是對於小型項目和學習者。

2. 安裝 Flask

首先，我們需要安裝 Flask。可以通過以下命令在終端中進行安裝：

pip install flask

3. 創建你的第一個 Flask 應用

接下來，我們將創建一個簡單的 Flask Web 應用程式，並在瀏覽器中查看結果。

範例：簡單的 Flask 應用

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Flask!"

if __name__ == '__main__':
    app.run(debug=True)

4. 路由與視圖函數

在 Flask 中，路由是用來定義用戶訪問的網址。每個路由對應一個視圖函數，當用戶訪問該路由時，Flask 會執行對應的函數並返回結果。

範例：多個路由

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Welcome to the Home Page"

@app.route('/about')
def about():
    return "This is the About Page"

if __name__ == '__main__':
    app.run(debug=True)

5. 模板引擎 Jinja2

Flask 使用 Jinja2 模板引擎來渲染動態的 HTML 頁面。通過模板引擎，可以將變數傳遞到 HTML 中，使得網頁更加靈活和動態。

範例：使用模板渲染 HTML

首先，創建一個名為 templates 的資料夾，並在其中創建一個 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Example</title>
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>

接著，在 Flask 應用中渲染該模板：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', message="Hello from Flask!")

if __name__ == '__main__':
    app.run(debug=True)

6. 表單處理

表單是 Web 應用中與用戶交互的重要方式。Flask 可以輕鬆處理表單提交並返回結果。

範例：處理表單提交

首先，創建一個帶有表單的 HTML 文件：

<!-- form.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Example</title>
</head>
<body>
    <form method="POST">
        <label for="name">Your Name:</label>
        <input type="text" name="name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

然後在 Flask 中處理表單提交：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/form', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        name = request.form['name']
        return f"Hello, {name}!"
    return render_template('form.html')

if __name__ == '__main__':
    app.run(debug=True)

7. 今日實作練習：

建立一個簡單的 Flask Web 應用： 創建一個具備首頁和關於頁面的簡單 Web 應用，並展示不同的內容。
動態模板渲染： 使用 Jinja2 模板引擎，讓首頁顯示來自伺服器的變數內容。
表單處理： 創建一個簡單的表單，讓用戶提交姓名，並在頁面上顯示歡迎信息。

今日實踐練習：建立 Flask Web 應用程式

步驟一：安裝 Flask

在開始之前，請確保你已經安裝了 Flask。如果還沒安裝，可以使用以下指令安裝：

pip install flask

步驟二：建立一個簡單的 Flask Web 應用程式

創建一個名為 app.py 的檔案，並撰寫一個簡單的 Flask 應用程式，配備首頁和其他頁面。

from flask import Flask, render_template, request

app = Flask(__name__)

# 首頁路由
@app.route('/')
def home():
    return "<h1>Welcome to the Homepage!</h1><p>This is a simple Flask application.</p>"

# 另一個頁面的路由
@app.route('/about')
def about():
    return "<h1>About Page</h1><p>This is the about page.</p>"

if __name__ == "__main__":
    app.run(debug=True)

步驟三：動態模板渲染

使用 Jinja2 模板引擎，讓首頁動態顯示變數內容。首先需要創建一個模板目錄，並在其中添加模板。

創建 templates 資料夾，並在其中創建 index.html 檔案：

templates/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 Page</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
</body>
</html>

更新 app.py，使首頁使用模板來顯示動態變數。

@app.route('/')
def home():
    title = "Welcome to the Flask Application"
    content = "This is the homepage rendered with a Jinja2 template."
    return render_template('index.html', title=title, content=content)

步驟四：建立表單處理

建立一個簡單的表單，讓使用者填寫姓名，並在頁面上顯示歡迎資訊。

在 templates 資料夾中創建 form.html 檔案：

templates/form.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Page</title>
</head>
<body>
    <h1>Enter Your Name</h1>
    <form action="/greet" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

更新 app.py，加入表單處理邏輯。

@app.route('/form')
def form():
    return render_template('form.html')

@app.route('/greet', methods=['POST'])
def greet():
    name = request.form['name']
    return f"<h1>Hello, {name}!</h1><p>Welcome to the Flask application.</p>"

步驟五：運行 Flask 應用

確保你正在你的專案目錄中，然後運行 Flask 應用：

python app.py

在瀏覽器中打開 http://127.0.0.1:5000，你會看到首頁，並可以訪問 /about 和 /form 頁面。你可以在表單頁面輸入名字，然後查看歡迎訊息。

這樣就完成了一個簡單的 Flask Web 應用，包含動態模板渲染和表單處理的功能！

小結：

今天我們學習了如何使用 Flask 框架來建立一個簡單的 Web 應用程式。Flask 是學習 Web 開發的良好起點，其靈活性和易用性使得它適合初學者快速掌握。通過今天的學習，你應該能夠創建基本的 Web 應用程式，處理路由，使用模板引擎，以及處理用戶提交的表單。

跟著 ChatGPT成為程式大佬！Python 資料庫操作與 SQLite

跟著 ChatGPT成為程式大佬！Python 中的內建函數（Built-in Functions）

系列文

如果讓chatgpt參加iThome鐵人賽，他竟然寫出...!? 共 31 篇

RSS系列文訂閱系列文

2 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22198 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

如果讓chatgpt參加iThome鐵人賽，他竟然寫出...!?系列 第 30 篇