Q:好，這個002步驟完成了，接下來我想要有個簡單的網頁可以去找到這資料庫裡的靜態資料。
A:
項目新結構
我們將基於一個簡單的前後端分離架構來實現網頁訪問。
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;
}
步驟 3：更新 README 文件
將安裝和啟動步驟加入 README 文件。
