2024-11-27|閱讀時間 ‧ 約 0 分鐘

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

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;
}

步驟 3：更新 README 文件

將安裝和啟動步驟加入 README 文件。

分享至

成為作者繼續創作的動力吧！

微嗑多

追蹤

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

項目新結構

步驟 1：建立後端 API

1. 使用 Flask 開發 API

2. 安裝後端依賴

3. 啟動後端服務

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

1. 建立主頁面

2. 編寫 JavaScript

3. 添加樣式

步驟 3：更新 README 文件

作者的相關文章

微嗑多的沙龍的其他內容

你可能也想看

發表回應

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

項目新結構

步驟 1：建立後端 API

1. 使用 Flask 開發 API

2. 安裝後端依賴

3. 啟動後端服務

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

1. 建立主頁面

2. 編寫 JavaScript

3. 添加樣式

步驟 3：更新 README 文件

作者的相關文章

微嗑多的沙龍 的其他內容

你可能也想看

發表回應

微嗑多的沙龍的其他內容