從資料到產品：打造搜尋、可視化與即時查詢的資料應用實踐

2025-04-21

經過前幾篇文章的努力，我們已經成功從 Taobao 等電商網站抓取了大量商品資料，並完成清洗、去重與入庫。然而，如果這些數據僅存在資料庫中而沒有進一步應用，將無法產生真正的價值。

本篇文章將帶你從「資料供應方」進入「資料應用層」，透過建構 API、整合搜尋引擎與前端展示介面，讓資料具備可查詢、可分析、可互動的能力。

一、什麼是資料 API？讓資料動起來

資料 API（Application Programming Interface）是一種讓應用程式能夠透過 HTTP 請求方式查詢資料庫的機制。它通常提供：

RESTful 風格的端點設計
輸入參數控制（如查詢條件、分頁、排序）
JSON 格式輸出，易於被前端或第三方系統使用

例如：

GET /api/products?q=耳機&price_min=100&price_max=500

二、使用 FastAPI 快速構建查詢 API

FastAPI 是一個現代、高效的 Python Web 框架，非常適合構建資料型應用。

安裝 FastAPI 及 Uvicorn：

pip install fastapi uvicorn pymongo

建立商品查詢 API（連接 MongoDB）：

from fastapi import FastAPI, Query
from pymongo import MongoClient
from typing import List
app = FastAPI()
client = MongoClient("mongodb://localhost:27017")
collection = client.taobao.products
@app.get("/api/products")
def search_products(
q: str = Query(None),
price_min: float = Query(0),
price_max: float = Query(999999),
limit: int = 20
):
query = {
"price": {"$gte": price_min, "$lte": price_max}
}
if q:
query["title"] = {"$regex": q, "$options": "i"}
results = collection.find(query).limit(limit)
return [
{
"id": str(item["_id"]),
"title": item["title"],
"price": item["price"]
}
for item in results
]

執行：

uvicorn main:app --reload

三、整合 Elasticsearch 搜尋：支援中文與高亮顯示

若資料量龐大且需要支援「模糊搜尋」、「中文分詞」，則可使用 Elasticsearch 作為底層搜尋引擎。

安裝並設定中文分詞器（如 jieba）

在 elasticsearch.yml 中加入：

index.analysis.analyzer.default.type: ik_max_word

FastAPI + Elasticsearch 搜尋實作：

from elasticsearch import Elasticsearch
from fastapi import FastAPI, Query
app = FastAPI()
es = Elasticsearch("http://localhost:9200")
@app.get("/api/search")
def search_product(q: str = Query(...)):
body = {
"query": {
"match": {
"title": {
"query": q,
"operator": "and"
}
}
},
"highlight": {
"fields": {
"title": {}
}
}
}
res = es.search(index="taobao", body=body)
return [
{
"id": hit["_id"],
"title": hit["highlight"]["title"][0],
"price": hit["_source"]["price"]
}
for hit in res["hits"]["hits"]
]

四、建立可視化報表：從數據變成圖表

使用 Chart.js、Echarts 等前端圖表庫，可以透過後端統計 API 將資料轉為圖表。

統計商品價格分佈（FastAPI + MongoDB）：

@app.get("/api/price_stats")
def price_histogram():
pipeline = [
{"$bucket": {
"groupBy": "$price",
"boundaries": [0, 100, 300, 500, 1000, 5000],
"default": "5000+",
"output": {"count": {"$sum": 1}}
}}
]
data = list(collection.aggregate(pipeline))
return data

前端配合 Chart.js：

new Chart(ctx, {
type: 'bar',
data: {
labels: ['0-100', '100-300', '300-500', '500-1000', '1000-5000', '5000+'],
datasets: [{
label: '商品數',
data: [50, 120, 90, 40, 25, 10]
}]
}
});

五、實時查詢與前端整合技巧

1. 與前端 Vue / React 整合 API

fetch('/api/products?q=藍牙耳機&price_min=100')
.then(res => res.json())
.then(data => console.log(data))

2. 跨域處理（CORS）：

from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],  # 可限定前端域名
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)

3. 設定 API 限流：

可透過 Nginx 或 Redis 實作簡易流量控制。

六、安全與效能優化策略

API Key 認證：保護敏感資料與流量濫用
Redis 快取：熱門查詢結果先快取，降低 DB 負擔
查詢效能監控：Mongo 慢查詢日誌 / Elasticsearch 查詢耗時統計
異常監控與警報：搭配 Sentry、Prometheus 等工具

七、延伸應用場景

打造商品搜尋網站（如內部版 Taobao 小搜尋引擎）
結合 Superset / Grafana 展示分析儀表板
將 API 封裝成第三方平台服務，對開發者開放

結語：資料不只是存放，更是啟用

本文，我們把「靜態的資料」轉化為「動態的應用」，讓數據成為網站的核心能力，真正達到從爬蟲 → 清洗 → 儲存 → 查詢與展示的閉環。如果說前面的幾篇是為了「取得與整理資料」，那這篇就是「讓資料真正創造價值」。

接下來，你可以選擇：

拓展資料源（加入更多站點、不同領域）
擴充應用功能（推薦系統、用戶行為分析）
建立資料平台（供開發者使用的 API 集）

Articles related to APIs :

如您需要 Taobao API 可聯係我們：support@luckdata.com