005.做個搜尋的功能

更新 發佈閱讀 14 分鐘

Q: 承接之前的程式,做一個搜尋對話框

raw-image


GPT回覆如下:

A:

要實現一個前端的搜尋框來按 stock_id 搜尋並展示結果,可以按照以下步驟完成:


修改項目結構

在現有的前端目錄中添加搜尋功能,使用搜尋框提交 stock_id,通過 API 返回數據並渲染到表格中。

bash
複製程式碼frontend/
├── index.html # 主頁面,包含搜尋框和表格
├── app.js # 更新 JavaScript 文件,處理搜尋邏輯
├── styles.css # 更新樣式文件

步驟 1:修改後端 API

1. 新增支持搜尋的 API

backend/app.py 中,更新 /api/company_financials,支持根據 stock_id 查詢數據。

python
複製程式碼@app.route('/api/company_financials', methods=['GET'])
def get_company_financials():
"""
從資料庫中聯合查詢公司靜態與財務數據,支持 stock_id 搜索
"""
try:
# 獲取查詢參數
stock_id = request.args.get('stock_id')

# 基礎查詢語句
query = """
SELECT
c.stock_id,
c.company_short_name,
c.paid_in_capital,
f.revenue_million,
f.gross_margin_percent,
f.operating_profit_margin_percent,
f.pretax_profit_margin_percent,
f.net_profit_margin_percent
FROM twse_listed_companies c
JOIN financial_reports f ON c.stock_id = f.stock_id
"""

# 如果有 stock_id 查詢參數,添加 WHERE 條件
if stock_id:
query += " WHERE c.stock_id = :stock_id"
df = pd.read_sql(query, engine, params={"stock_id": stock_id})
else:
df = pd.read_sql(query, engine)

# 返回 JSON 結果
return jsonify(df.to_dict(orient='records'))
except Exception as e:
return jsonify({"error": str(e)}), 500

這樣,API 可以支持按 stock_id 搜索,例如:

arduino
複製程式碼http://127.0.0.1:5000/api/company_financials?stock_id=2330

步驟 2:修改前端 HTML

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>Company Financial Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Company Financials</h1>

<!-- 搜尋框 -->
<div class="search-container">
<input type="text" id="search-input" placeholder="Enter Stock ID" />
<button id="search-button">Search</button>
</div>

<!-- 表格 -->
<table id="financials-table">
<thead>
<tr>
<th>Stock ID</th>
<th>Company Short Name</th>
<th>Paid-in Capital</th>
<th>Revenue (Million)</th>
<th>Gross Margin (%)</th>
<th>Operating Profit Margin (%)</th>
<th>Pretax Profit Margin (%)</th>
<th>Net Profit Margin (%)</th>
</tr>
</thead>
<tbody>
<!-- Data will be inserted here -->
</tbody>
</table>

<script src="app.js"></script>
</body>
</html>

步驟 3:更新 JavaScript

frontend/app.js 中實現搜尋功能,將 API 結果動態插入表格。

javascript
複製程式碼// Function to fetch and render data
function fetchAndRenderData(stockId = null) {
// API URL
let apiUrl = 'http://127.0.0.1:5000/api/company_financials';
if (stockId) {
apiUrl += `?stock_id=${stockId}`;
}

// Fetch data from API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const tableBody = document.querySelector('#financials-table tbody');
tableBody.innerHTML = ''; // 清空現有的表格數據

// 如果沒有結果
if (data.length === 0) {
const row = document.createElement('tr');
row.innerHTML = `<td colspan="8">No results found</td>`;
tableBody.appendChild(row);
return;
}

// 插入每筆數據
data.forEach(company => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${company.stock_id}</td>
<td>${company.company_short_name}</td>
<td>${company.paid_in_capital || 'N/A'}</td>
<td>${company.revenue_million || 'N/A'}</td>
<td>${company.gross_margin_percent || 'N/A'}</td>
<td>${company.operating_profit_margin_percent || 'N/A'}</td>
<td>${company.pretax_profit_margin_percent || 'N/A'}</td>
<td>${company.net_profit_margin_percent || 'N/A'}</td>
`;
tableBody.appendChild(row);
});
})
.catch(error => console.error('Error fetching data:', error));
}

// Initial load: fetch all data
fetchAndRenderData();

// Search button event listener
document.getElementById('search-button').addEventListener('click', () => {
const stockId = document.getElementById('search-input').value.trim();
fetchAndRenderData(stockId);
});

步驟 4:更新樣式

frontend/styles.css 中為搜尋框添加樣式:

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

h1 {
text-align: center;
}

.search-container {
text-align: center;
margin-bottom: 20px;
}

#search-input {
padding: 10px;
width: 300px;
font-size: 16px;
}

#search-button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

#search-button:hover {
background-color: #45a049;
}

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

tr:nth-child(even) {
background-color: #f9f9f9;
}

完成效果

  1. 初始頁面
    • 顯示所有公司和財務數據。
  2. 搜尋功能
    • 在搜尋框輸入 stock_id,例如 2330
    • 點擊「Search」按鈕,表格會更新為該 stock_id 的相關數據。
    • 若無匹配結果,顯示「No results found」。
留言
avatar-img
留言分享你的想法!
avatar-img
微嗑多的沙龍
3會員
28內容數
人生online之資本市場大作戰
微嗑多的沙龍的其他內容
2024/12/02
這時候修改的程式部分變多了,而且也會遇到Bug,所以重點不僅是要學會把程式路徑打通,還要知道怎麼描述錯誤,了解邏輯錯誤或語法錯誤在哪裡。 簡單來說,就算要複製貼上也要貼對位置。 另外,GPT的確會考慮多一些問題,看到程式的當下會覺得:「哦對,這個要注意。」然後就又佩服GPT可以做到這個程度。
2024/12/02
這時候修改的程式部分變多了,而且也會遇到Bug,所以重點不僅是要學會把程式路徑打通,還要知道怎麼描述錯誤,了解邏輯錯誤或語法錯誤在哪裡。 簡單來說,就算要複製貼上也要貼對位置。 另外,GPT的確會考慮多一些問題,看到程式的當下會覺得:「哦對,這個要注意。」然後就又佩服GPT可以做到這個程度。
2024/11/28
目前為止的程式架構。 我就是幫忙看架構上有沒有錯的慣老闆。
2024/11/28
目前為止的程式架構。 我就是幫忙看架構上有沒有錯的慣老闆。
2024/11/28
先說這一篇不是要教怎麼解讀,純粹發牢騷。想看解讀的方法可以回到上一頁了。
2024/11/28
先說這一篇不是要教怎麼解讀,純粹發牢騷。想看解讀的方法可以回到上一頁了。
看更多
你可能也想看
Thumbnail
Function的使用方式
Thumbnail
Function的使用方式
Thumbnail
工具功能 (1) 彈性任意查詢檔案,如對來源目錄設定,檔案修改日期 設定,檔名特定字串或副檔名設定後,自動查出明細,並可展開至各階子目錄處理     (2) 依查詢後結果,可產出 LIST ,提供查詢結果之確認,再依此對檔案作複 (3) 可對檔案作移動,複製至別處,刪除處理,使電腦可騰出硬碟空間
Thumbnail
工具功能 (1) 彈性任意查詢檔案,如對來源目錄設定,檔案修改日期 設定,檔名特定字串或副檔名設定後,自動查出明細,並可展開至各階子目錄處理     (2) 依查詢後結果,可產出 LIST ,提供查詢結果之確認,再依此對檔案作複 (3) 可對檔案作移動,複製至別處,刪除處理,使電腦可騰出硬碟空間
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
在C#的視窗應用程式中,右鍵選單(Context Menu)是一個方便的使用者介面元素。當中的項目可以包含各種功能,而有時我們可能需要在使用者點擊右鍵選單中的某個項目時,取得該項目的值。以下是一個簡單的教學,教你如何在C#中實現這個功能。
Thumbnail
在C#的視窗應用程式中,右鍵選單(Context Menu)是一個方便的使用者介面元素。當中的項目可以包含各種功能,而有時我們可能需要在使用者點擊右鍵選單中的某個項目時,取得該項目的值。以下是一個簡單的教學,教你如何在C#中實現這個功能。
Thumbnail
此系列教學最後一篇補上使用Hexo後關於Next主題相關的小套件與設定。 提醒小套件的功能視需求而安裝,畢竟安裝太多小套件也是會有執行後效能的問題浮現。
Thumbnail
此系列教學最後一篇補上使用Hexo後關於Next主題相關的小套件與設定。 提醒小套件的功能視需求而安裝,畢竟安裝太多小套件也是會有執行後效能的問題浮現。
Thumbnail
在欄位輸入關鍵字,就會顯示提示列表。 架構 由HTML表單、jQuery的AJAX和PHP與MySQL組成。 先在HTML的文字輸入欄位,輸入關鍵字,接著會呼叫jQuery的AJAX去伺服器,取得建議列表;伺服器收到需求後,PHP會連接MySQL,取得建議列表,接著會建立JSON文件並回傳。
Thumbnail
在欄位輸入關鍵字,就會顯示提示列表。 架構 由HTML表單、jQuery的AJAX和PHP與MySQL組成。 先在HTML的文字輸入欄位,輸入關鍵字,接著會呼叫jQuery的AJAX去伺服器,取得建議列表;伺服器收到需求後,PHP會連接MySQL,取得建議列表,接著會建立JSON文件並回傳。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News