使用油猴脚本进行数据采集

网站分析

找到需要提取数据的接口（代码中不提供，你需要自己去网上找一些接口来测试），以下是返回的数据结构

脚本编写

油猴脚本的使用教程：【保姆级教程】油猴脚本的安装使用-优快云博客

采集数据

// ==UserScript==
// @name         采集车辆信息
// @namespace    http://tampermonkey.net/
// @description  简单的信息采集
// @version      2025-01-11
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    if (!window.CAR_GLOBAL) {
        window.CAR_GLOBAL = {};
    }

    function initControl(){
        var div = document.createElement('div');
        div.style.position = 'fixed';
        div.style.top = '10px';
        div.style.right = '10px';
        div.style.zIndex = '1000';
        div.style.background = '#999';
        div.style.padding = '20px';

        div.innerHTML = `
            <button type="button" style="padding:8px 10px;border-radius:5px;background:#fff;margin-right:10px;" οnclick="CAR_GLOBAL.fetchData()">采集</button>
            <button type="button" style="padding:8px 10px;border-radius:5px;background:#fff;" οnclick="CAR_GLOBAL.exportData()">导出数据</button>
        `;

        document.body.appendChild(div);
    }

    window.CAR_GLOBAL.fetchData = function() {
        fetch('xxx').then(res => res.json()).then(res => {
            console.log(res.result.seriesgrouplist);
        });
    }

    window.CAR_GLOBAL.exportData = function() {
        console.log('exportData');
    }

    function run() {
        initControl();
    }

    run();
})();

到这一步数据已经采集过来了，下面我们解决存储问题。一般浏览器存储大家会选择localstorage，可以存储10MB左右，不同浏览器也会有所不同。针对大数据量，我们可以采用IndexedDB。

原生方式使用IndexedDB会比较麻烦，这里我引入一个第三方操作IndexedDB的库Dexie.js

修改后的代码：

// ==UserScript==
// @name         采集车辆信息
// @namespace    http://tampermonkey.net/
// @description  简单的信息采集
// @version      2025-01-11
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var _db;

    // 省略代码...
    
    window.CAR_GLOBAL.fetchData = function() {
        fetch('xxx').then(res => res.json()).then(res => {
            const list = res.result.seriesgrouplist || [];
            for (const item of list) {
                _db.cars.add({data: item})
            }
        });
    }
    
    // 省略代码...

    function addScript(url, callback) {
        // 创建 script 标签
        var script = document.createElement('script');

        // 设置 script 标签的属性
        script.src = url;
        script.type = 'text/javascript';

        // 判断script是否加载完成
        script.onload = function() {
            console.log('脚本加载完成');
            if (typeof callback === 'function') {
                callback();
            }
        };

        // 处理加载错误的情况
        script.onerror = function() {
            console.error('脚本加载失败: ' + url);
        };

        // 将 script 标签添加到文档中开始加载
        document.body.appendChild(script);
    }

    function run() {
        addScript('https://unpkg.com/dexie/dist/dexie.js', function() {
            _db = new Dexie("car_db");
            _db.version(1).stores({
                cars: "++id, data", // id 自增
            });
        });
        initControl();

    }

    run();
})();

按F12-应用程序可以查看数据库

导出数据

将数据库里的数据，生成json文件导出

// ==UserScript==
// @name         采集车辆信息
// @namespace    http://tampermonkey.net/
// @description  简单的信息采集
// @version      2025-01-11
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var _db;
    
    // 省略代码
    
    window.CAR_GLOBAL.exportData = function() {
        _db.cars.toArray().then(res => {
            downloadObjectAsJson(res, `car_${Date.now()}`);
        });
    }

    function downloadObjectAsJson(exportObj, exportName) {
        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
        const downloadAnchorNode = document.createElement('a');

        downloadAnchorNode.setAttribute("href", dataStr);
        downloadAnchorNode.setAttribute("download", exportName + ".json");
        document.body.appendChild(downloadAnchorNode); // required for firefox
        downloadAnchorNode.click();
        downloadAnchorNode.remove();
    }

    function addScript(url, callback) {
        // 创建 script 标签
        var script = document.createElement('script');

        // 设置 script 标签的属性
        script.src = url;
        script.type = 'text/javascript';

        // 判断script是否加载完成
        script.onload = function() {
            console.log('脚本加载完成');
            if (typeof callback === 'function') {
                callback();
            }
        };

        // 处理加载错误的情况
        script.onerror = function() {
            console.error('脚本加载失败: ' + url);
        };

        // 将 script 标签添加到文档中开始加载
        document.body.appendChild(script);
    }

    function run() {
        addScript('https://unpkg.com/dexie/dist/dexie.js', function() {
            _db = new Dexie("car_db");
            _db.version(1).stores({
                cars: "++id, data", // id 自增
            });
        });
        initControl();
    }

    run();
})();

课后作业

可以通过发送请求的方法，把数据发送给自己的服务器进行处理。注意考虑跨域问题

总结

优点：

• 直接在网页端进行采集，可以适当绕过登录、授权等问题
• 调试方便，通过debugger 可以实时调试网页

缺点：

• 没有IDE支持，编码提示少，好在可以直接让GPT来编写