前端爬蟲數據獲取與入庫：AJAX 獲取 JSON → 後端 Controller 入庫完整鏈路

架構流程

目標頁面 (瀏覽器)
  → F12 Console / Tampermonkey 腳本
    → 提取 JSON 數據 (DOM 解析 / 接口攔截)
      → AJAX POST 到自建後端 API
        → Controller 接收 → Service 處理 → DAO 入庫
          → 返回結果 → 前端展示/日誌

前端數據提取兩大路徑

完整前端腳本

// Tampermonkey / Console 通用
(async () => {
    // 1. 獲取數據 (示例：攔截某接口)
    const response = await fetch('/api/data/list?page=1', { credentials: 'include' });
    const { data } = await response.json(); // 假設返回 {data: [...]}
    
    // 2. 過濾/轉換
    const payload = data.map(item => ({
        id: item.id,
        name: item.name,
        value: item.value
    }));
    
    // 3. 發送到後端入庫 API
    const res = await fetch('https://localhost:8080/api/collect', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    });
    const result = await res.json();
    console.log('入庫結果:', result);
})();

後端 Controller 入庫

@RestController
@RequestMapping("/api/collect")
public class CollectController {
    @Autowired private CollectService service;
    
    @PostMapping
    public Result collect(@RequestBody List list) {
        return service.batchSave(list);
    }
}

@Service
public class CollectService {
    @Autowired private DataRepository repo;
    
    @Transactional
    public Result batchSave(List list) {
        List entities = list.stream()
            .map(dto -> new DataEntity(dto.getId(), dto.getName(), dto.getValue()))
            .collect(Collectors.toList());
        repo.saveAll(entities);
        return Result.ok("成功入庫 " + entities.size() + " 條");
    }
}

關鍵注意事項

• 同源策略：前端腳本需在目標域下運行（Tampermonkey/Console），或後端配置 CORS 允許跨域。
• 反爬蟲：目標站可能有簽名、Token、頻率限制，需模擬完整請求頭、Cookie、間隔請求。
• 數據去重：入庫前按唯一鍵 (ID/URL) 查重，或數據庫唯一索引 ON DUPLICATE KEY UPDATE。
• 異常重試：網絡波動/後端錯誤時指數退避重試，記錄失敗日誌人工介入。

進階：無頭瀏覽器自動化

若目標頁面重度依賴 JS 渲染，使用 Puppeteer / Playwright / Selenium 運行無頭瀏覽器，模擬真實用戶行為獲取數據，再走相同入庫鏈路。

構建「前端提取 → 後端入庫」標準化管道，將零散頁面數據轉化為結構化資產。