使用Python和Flask編寫(xiě)一個(gè)留言簿

更新時(shí)間：2024年12月15日 13:32:15 作者：傻啦嘿喲

本文將通過(guò)創(chuàng)建一個(gè)簡(jiǎn)單的留言簿應(yīng)用來(lái)入門(mén)Flask,這個(gè)項(xiàng)目可以幫助我們理解Flask的基本概念和功能,如路由、模板、表單處理等,感興趣的可以了解下

1. 環(huán)境準(zhǔn)備
2. 創(chuàng)建Flask應(yīng)用
3. 創(chuàng)建路由和視圖函數(shù)
4. 創(chuàng)建模板
5. 處理表單提交
6. 運(yùn)行應(yīng)用
7. 添加樣式和功能（可選）
8. 示例：添加驗(yàn)證和錯(cuò)誤處理
9. 進(jìn)一步優(yōu)化
10. 部署到生產(chǎn)環(huán)境

在本文中，我們將通過(guò)創(chuàng)建一個(gè)簡(jiǎn)單的留言簿應(yīng)用來(lái)入門(mén)Flask。這個(gè)項(xiàng)目將幫助我們理解Flask的基本概念和功能，如路由、模板、表單處理等。如果你是一個(gè)Python新手，或者第一次嘗試使用Flask，不用擔(dān)心，本文會(huì)一步步帶你完成這個(gè)項(xiàng)目。

1. 環(huán)境準(zhǔn)備

首先，你需要確保你的計(jì)算機(jī)上安裝了Python和pip。接著，我們需要安裝Flask。在命令行中運(yùn)行以下命令：

pip install Flask

如果你打算使用數(shù)據(jù)庫(kù)，可以選擇SQLite（內(nèi)置于Python標(biāo)準(zhǔn)庫(kù)），或者安裝一個(gè)更強(qiáng)大的數(shù)據(jù)庫(kù)如MySQL或PostgreSQL。為了簡(jiǎn)化，我們?cè)谶@個(gè)項(xiàng)目中使用SQLite。

2. 創(chuàng)建Flask應(yīng)用

在你的工作目錄下創(chuàng)建一個(gè)新文件，命名為app.py。這個(gè)文件將包含我們的Flask應(yīng)用代碼。

from flask import Flask, render_template, request, redirect, url_for
import sqlite3
 
app = Flask(__name__)
 
# 配置數(shù)據(jù)庫(kù)連接
DATABASE = 'guestbook.db'
 
def get_db_connection():
    conn = sqlite3.connect(DATABASE)
    conn.row_factory = sqlite3.Row
    return conn
 
def init_db():
    conn = get_db_connection()
    c = conn.cursor()
    c.execute('''CREATE TABLE IF NOT EXISTS messages (
                    id INTEGER PRIMARY KEY AUTOINCREMENT,
                    name TEXT NOT NULL,
                    message TEXT NOT NULL,
                    timestamp TEXT NOT NULL
                )''')
    conn.commit()
    conn.close()
 
# 初始化數(shù)據(jù)庫(kù)
if __name__ == '__main__':
    init_db()

3. 創(chuàng)建路由和視圖函數(shù)

接下來(lái)，我們需要定義一些路由和視圖函數(shù)來(lái)處理用戶(hù)請(qǐng)求。

@app.route('/')
def index():
    conn = get_db_connection()
    c = conn.cursor()
    c.execute('SELECT * FROM messages ORDER BY timestamp DESC')
    messages = c.fetchall()
    conn.close()
    return render_template('index.html', messages=messages)

上面的代碼定義了一個(gè)路由/，當(dāng)用戶(hù)訪問(wèn)這個(gè)URL時(shí)，會(huì)調(diào)用index視圖函數(shù)。這個(gè)函數(shù)會(huì)從數(shù)據(jù)庫(kù)中獲取所有留言，并按時(shí)間降序排列，然后將它們傳遞給模板index.html。

4. 創(chuàng)建模板

在Flask中，模板用于生成HTML。在你的工作目錄下創(chuàng)建一個(gè)文件夾，命名為templates。在這個(gè)文件夾中創(chuàng)建一個(gè)文件，命名為index.html。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>留言簿</title>
    <link  rel="stylesheet">
  </head>
  <body>
    <div class="container mt-5">
      <h1 class="mb-4">留言簿</h1>
      <form method="post" action="/add_message">
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="form-group">
          <label for="message">留言</label>
          <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
      <hr>
      <div class="list-group">
        {% for message in messages %}
          <a href="#" class="list-group-item list-group-item-action">
            <h5 class="mb-1">{{ message['name'] }}</h5>
            <p class="mb-1">{{ message['message'] }}</p>
            <small>{{ message['timestamp'] }}</small>
          </a>
        {% endfor %}
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

這個(gè)模板使用Bootstrap來(lái)美化表單和留言列表。表單的action屬性設(shè)置為/add_message，這意味著當(dāng)用戶(hù)提交表單時(shí)，會(huì)向這個(gè)URL發(fā)送POST請(qǐng)求。

5. 處理表單提交

現(xiàn)在，我們需要定義一個(gè)視圖函數(shù)來(lái)處理表單提交。

from datetime import datetime
 
@app.route('/add_message', methods=['POST'])
def add_message():
    name = request.form['name']
    message = request.form['message']
    timestamp = datetime.utcnow().isoformat()
 
    conn = get_db_connection()
    c = conn.cursor()
    c.execute('INSERT INTO messages (name, message, timestamp) VALUES (?, ?, ?)', (name, message, timestamp))
    conn.commit()
    conn.close()
 
    return redirect(url_for('index'))

在這個(gè)視圖函數(shù)中，我們從request.form中獲取表單數(shù)據(jù)，然后將其插入到數(shù)據(jù)庫(kù)中。最后，我們使用redirect函數(shù)將用戶(hù)重定向到首頁(yè)。

6. 運(yùn)行應(yīng)用

現(xiàn)在，你可以運(yùn)行你的Flask應(yīng)用了。在命令行中，導(dǎo)航到你的app.py文件所在的目錄，然后運(yùn)行以下命令：

python app.py

默認(rèn)情況下，F(xiàn)lask應(yīng)用會(huì)在http://127.0.0.1:5000/上運(yùn)行。打開(kāi)你的瀏覽器，訪問(wèn)這個(gè)URL，你應(yīng)該能看到你的留言簿應(yīng)用。

7. 添加樣式和功能（可選）

雖然我們的留言簿應(yīng)用現(xiàn)在已經(jīng)可以工作了，但你可以通過(guò)添加一些樣式和功能來(lái)使其更加完善。

驗(yàn)證和錯(cuò)誤處理：你可以添加一些驗(yàn)證邏輯來(lái)確保用戶(hù)輸入的數(shù)據(jù)是有效的。例如，你可以檢查姓名和留言是否為空，或者限制留言的長(zhǎng)度。

分頁(yè)：如果留言很多，你可以添加分頁(yè)功能來(lái)讓用戶(hù)能夠?yàn)g覽更多的留言。

用戶(hù)身份驗(yàn)證：你可以添加用戶(hù)身份驗(yàn)證功能來(lái)限制只有注冊(cè)用戶(hù)才能留言。

刪除和編輯留言：你可以添加刪除和編輯留言的功能。

部署：你可以將你的應(yīng)用部署到一個(gè)服務(wù)器上，讓其他人能夠訪問(wèn)它。

8. 示例：添加驗(yàn)證和錯(cuò)誤處理

下面是一個(gè)簡(jiǎn)單的示例，展示了如何在表單提交時(shí)添加驗(yàn)證和錯(cuò)誤處理。

from flask import flash
 
@app.route('/add_message', methods=['POST'])
def add_message():
    name = request.form['name'].strip()
    message = request.form['message'].strip()
 
    if not name or not message:
        flash('姓名和留言都不能為空。', 'error')
        return redirect(url_for('index'))
 
    if len(message) > 500:
        flash('留言不能超過(guò)500個(gè)字符。', 'error')
        return redirect(url_for('index'))
 
    timestamp = datetime.utcnow().isoformat()
 
    conn = get_db_connection()
    c = conn.cursor()
    c.execute('INSERT INTO messages (name, message, timestamp) VALUES (?, ?, ?)', (name, message, timestamp))
    conn.commit()
    conn.close()
 
    flash('留言已成功添加。', 'success')
    return redirect(url_for('index'))

在這個(gè)示例中，我們使用了strip()方法來(lái)去除用戶(hù)輸入的前后空格，并檢查姓名和留言是否為空。我們還檢查了留言的長(zhǎng)度，如果超過(guò)了500個(gè)字符，就會(huì)顯示一個(gè)錯(cuò)誤消息。我們使用flash函數(shù)來(lái)顯示這些消息，這些消息會(huì)在模板中通過(guò)get_flashed_messages()函數(shù)來(lái)獲取。

在index.html模板中，你可以添加以下代碼來(lái)顯示這些消息：

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      {% for category, message in messages %}
        <strong>{{ category.capitalize() }}!</strong> {{ message }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      {% endfor %}
    </div>
  {% endif %}
 
{% endwith %}

將上述代碼添加到你的 index.html 模板的 <body> 標(biāo)簽內(nèi)，通常位于 <div class="container mt-5"> 之前，這樣 Flash 消息就會(huì)在頁(yè)面頂部顯示。這個(gè)代碼塊使用了 Jinja2 模板引擎的 with 語(yǔ)句來(lái)創(chuàng)建一個(gè)本地作用域，其中 messages 變量包含了通過(guò) get_flashed_messages(with_categories=true) 獲取的 Flash 消息及其類(lèi)別。然后，使用一個(gè)循環(huán)來(lái)遍歷這些消息，并根據(jù)類(lèi)別（如 'error' 或 'success'）顯示不同的樣式。

完整的 index.html 模板應(yīng)該如下所示（僅展示關(guān)鍵部分）：

<!doctype html>
<html lang="en">
  <head>
    <!-- 省略之前的頭部信息 -->
  </head>
  <body>
    <!-- Flash 消息顯示區(qū)域 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <div class="alert alert-info alert-dismissible fade show" role="alert">
          {% for category, message in messages %}
            <strong>{{ category.capitalize() }}!</strong> {{ message }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}
    
    <!-- 省略之前的留言簿容器和表單 -->
    
    <!-- 省略之前的腳本引用 -->
  </body>
</html>

這樣，當(dāng)用戶(hù)提交表單時(shí)，如果驗(yàn)證失敗，就會(huì)顯示相應(yīng)的錯(cuò)誤消息。如果驗(yàn)證成功，就會(huì)顯示成功消息，并將用戶(hù)重定向回首頁(yè)。