003.資料庫有了，我想要用網頁看。

2024/11/27閱讀時間約 10 分鐘

投資理財內容聲明

文內如有投資理財相關經驗、知識、資訊等內容，皆為創作者個人分享行為。
有價證券、指數與衍生性商品之數據資料，僅供輔助說明之用，不代表創作者投資決策之推介及建議。
閱讀同時，請審慎思考自身條件及自我決策，並應有為決策負責之事前認知。
方格子希望您能從這些分享內容汲取投資養份，養成獨立思考的能力、判斷、行動，成就最適合您的投資理財模式。

Q:好，這個002步驟完成了，接下來我想要有個簡單的網頁可以去找到這資料庫裡的靜態資料。

項目新結構

我們將基於一個簡單的前後端分離架構來實現網頁訪問。

project/
│
├── backend/                        # 後端服務，提供 API
│   ├── app.py                      # Flask 主程式，處理數據庫連接與 API
│   ├── requirements.txt            # 後端依賴
│
├── frontend/                       # 前端頁面，顯示靜態資料
│   ├── index.html                  # 主頁面
│   ├── app.js                      # 與 API 通信的 JavaScript
│   ├── styles.css                  # 簡單樣式
│
├── sql/                            # 資料庫相關 SQL 文件
│   ├── create_twse_table.sql       # 建表語句
│
├── README.md                       # 更新後的說明文件
└── .gitignore                      # 忽略文件

步驟 1：建立後端 API

1. 使用 Flask 開發 API

我們將 Flask 作為後端框架，提供一個簡單的 /api/companies API，返回資料庫中的靜態資料。

backend/app.py：

python
複製程式碼from flask import Flask, jsonify
from sqlalchemy import create_engine
import pandas as pd

app = Flask(__name__)

# 資料庫連接設定
DB_CONNECTION_STRING = "postgresql://<username>:<password>@<host>:<port>/<database>"
engine = create_engine(DB_CONNECTION_STRING)

@app.route('/api/companies', methods=['GET'])
def get_companies():
    """
    從資料庫中讀取公司靜態資料並返回 JSON
    """
    try:
        # 使用 SQLAlchemy 讀取資料
        query = "SELECT stock_id, company_name, industry, address, website FROM twse_listed_companies"
        df = pd.read_sql(query, engine)

        # 將資料轉為 JSON 格式返回
        return jsonify(df.to_dict(orient='records'))
    except Exception as e:
        return jsonify({"error": str(e)}), 500

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

2. 安裝後端依賴

在 backend/requirements.txt 中列出 Flask 和 SQLAlchemy 的依賴：

php
複製程式碼flask
sqlalchemy
pandas
psycopg2-binary

安裝依賴：

bash
複製程式碼cd backend
pip install -r requirements.txt

3. 啟動後端服務

運行 Flask：

bash
複製程式碼python app.py

後端將在 http://127.0.0.1:5000/api/companies 提供 API。

步驟 2：建立前端靜態頁面

前端部分使用 HTML、CSS 和 JavaScript，通過 AJAX 請求 Flask API 並展示資料。

1. 建立主頁面

frontend/index.html：

html
複製程式碼<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TWSE Listed Companies</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>TWSE Listed Companies</h1>
    <table id="companies-table">
        <thead>
            <tr>
                <th>Stock ID</th>
                <th>Company Name</th>
                <th>Industry</th>
                <th>Address</th>
                <th>Website</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be inserted here -->
        </tbody>
    </table>
    <script src="app.js"></script>
</body>
</html>

2. 編寫 JavaScript

frontend/app.js：

javascript
複製程式碼// Fetch companies data from API
fetch('http://127.0.0.1:5000/api/companies')
    .then(response => response.json())
    .then(data => {
        const tableBody = document.querySelector('#companies-table tbody');
        tableBody.innerHTML = ''; // 清空現有的資料

        // 插入每筆資料
        data.forEach(company => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${company.stock_id}</td>
                <td>${company.company_name}</td>
                <td>${company.industry}</td>
                <td>${company.address}</td>
                <td><a href="${company.website}" target="_blank">${company.website}</a></td>
            `;
            tableBody.appendChild(row);
        });
    })
    .catch(error => console.error('Error fetching data:', error));

3. 添加樣式

frontend/styles.css：

css
複製程式碼body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f4f4f4;
}