iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0
自我挑戰組

全端網頁-入職三十天學習筆記系列 第 14

【全端網頁開發】Day14-PostgreSQL應用於flask網頁

  • 分享至 

  • xImage
  •  

前言

今天是9/29正好是中秋節,先祝大家中秋節快樂~~

那這次主要是PostgreSQL應用在flask方式,
其實連線的方式有不同種套件可以使用,
這次是使用psycopg2的套件來連線,
可以直接在python檔寫入SQL語法來進行連線。

使用 PostgreSQL 和 Flask 創建一個資料庫查詢應用程式

步驟 1:建立 PostgreSQL 連接
首先,我們需要建立與 PostgreSQL 資料庫的連接。
這個連接包括了主機名稱、埠號、使用者名稱、密碼和資料庫名稱等資訊。
以下是如何建立連接的範例程式碼:

import psycopg2

# 填入你的資料庫資訊
db_host = '***'
db_port = '***'
db_user = '***'
db_password = '***'
db_name = '***'

# 創建資料庫連接
conn = psycopg2.connect(
    host=db_host,
    port=db_port,
    user=db_user,
    password=db_password,
    database=db_name
)

步驟 2:建立 Flask 應用程式
現在,我們將使用 Flask 來建立我們的 Web 應用程式。
我們將建立一個 Blueprint 來處理資料庫查詢的路由。以下是一個簡單的示例:

from flask import Blueprint, render_template, request
import psycopg2

sql = Blueprint('sql', __name__)

@sql.route('/')
def index():
    # 在這裡設定初始顯示
    display = "none"
    return render_template('select.html', display=display)

@sql.route('/select', methods=['GET', 'POST'])
def select():
    # 在這裡處理用戶的查詢請求
    display = "block"

    if request.method == 'POST':
        date = request.form.get('date')
        project_id = request.form.get('project_id')
        table_name = request.form.get('table_name')  # 獲取用戶選擇的資料表名稱

        # 根據用戶選擇的資料表名稱構建對應的 SQL 查詢
        if table_name == 'subimage_part':
            sql_query = f"""
                -- 你的 SQL 查詢語句
            """
        elif table_name == 'bigimage_part':
            sql_query = f"""
                -- 你的 SQL 查詢語句
            """

        # 在這裡執行 SQL 查詢,獲得結果
        conn.rollback()
        cur = conn.cursor()
        cur.execute(sql_query)
        result = cur.fetchall()
        conn.commit()
        cur.close()

        # 在這裡處理查詢結果,然後傳遞給前端模板
        if result:
            return render_template('select.html', data=result, date=date, project_id=project_id, table_name=table_name, display=display)
        else:
            return render_template('select.html', date=date, project_id=project_id, table_name=table_name, display=display)

    return render_template('select.html', display=display)

步驟 3:編寫 SQL 查詢
現在,我們來編寫 SQL 查詢。
根據用戶的選擇,我們構建不同的 SQL 查詢,
並將結果返回給用戶。這裡是一個簡單的示例:

if table_name == 'subimage_part':
    sql_query = f"""
        SELECT ***
        FROM *** LEFT JOIN ***
        ON *** = ***
        WHERE *** =  '{date}'
        AND *** =  '{project_id}'
        AND *** = '{logdate}'
        LIMIT 500;
    """
elif table_name == 'bigimage_part':
    sql_query = f"""
        SELECT ***
        FROM *** LEFT JOIN ***
        ON *** = ***
        WHERE *** =  '{date}'
        AND *** =  '{project_id}'
        AND *** = '{logdate}'
        LIMIT 500; 
    """

步驟 4:在 Web 界面上顯示查詢結果
最後,我們使用 HTML 和 JavaScript 在 Web 界面上顯示查詢結果。
我們使用分頁來管理大量資料的顯示。以下是一個簡單的示例:

<div class="container">
    <!-- ... 省略其他 HTML 內容 ... -->
    <div class="list-group mt-4">
        <h1>查詢結果</h1>
        {% if data %}
        <table class="table table-striped table-sm" id="resultTable">
            <thead>
                <!-- ... 省略其他 HTML 內容 ... -->
            </thead>
            <tbody>
                <!-- 使用 JavaScript 動態填充資料 -->
            </tbody>
        </table>

        <!-- 分頁按鈕 -->
        <div class="text-center" id="paginationContainer">
            <ul class="pagination" id="pagination" style="justify-content: center;">
                <!-- 使用 JavaScript 動態生成分頁按鈕 -->
            </ul>
        </div>

        <!-- 分頁 JavaScript -->
        <script>
            // ... 省略分頁 JavaScript 程式碼 ...
        </script>

        {% else %}
        <p style="display:{{ display }};">此筆查詢無資料</p>
        {% endif %}
    </div>
</div>

結語

這篇教學介紹了如何使用 PostgreSQL 和 Flask 來建立一個強大的資料庫查詢應用程式。
我們從建立 PostgreSQL 連接開始,然後使用 Flask 創建 Web 應用程式,
包括處理用戶的查詢請求和顯示查詢結果。最後,我們使用 HTML 和 JavaScript 來美化和分頁顯示資料。

希望這篇教學對你有所幫助,
讓你能夠更好地理解如何使用 PostgreSQL 和 Flask 來建立 Web 應用程式,
並開始建立自己的應用程式專案。祝你在程式開發的旅程中取得成功!


上一篇
【全端網頁開發】Day13-PostgreSQL實做partition table分區表
下一篇
【全端網頁開發】Day15-PostgreSQL-實作應用sqlalchemy撰寫查詢
系列文
全端網頁-入職三十天學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言