如何跨平台实现本地数据库SQL脚本的一键顺序执行？

核心实现思路 #

利用Chrome的File System Access API读取本地SQLite数据库和SQL脚本文件，结合sql.js（纯JS实现的SQLite引擎）在浏览器内完成脚本的顺序执行与数据库更新。全程无需联网、无需安装额外软件，完美适配Windows和Mac平台，且易于共享。

具体实现步骤与代码 #

1. 准备依赖文件 #

下载sql.js的预编译文件：

• sql-wasm.js
• sql-wasm.wasm
  将这两个文件和下面的HTML文件放在同一文件夹内（无需联网，本地运行）。

2. 完整工具代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SQLite脚本批量更新工具</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
        .action-btn { padding: 0.8rem 1.2rem; margin: 0.5rem; cursor: pointer; background: #2563eb; color: white; border: none; border-radius: 4px; font-size: 1rem; }
        .log-panel { height: 300px; border: 1px solid #e5e7eb; padding: 1rem; overflow-y: auto; margin: 1.5rem 0; border-radius: 4px; }
        .success { color: #16a34a; }
        .error { color: #dc2626; }
    </style>
</head>
<body>
    <h1>SQLite脚本批量更新工具</h1>
    <button class="action-btn" id="pickDb">选择SQLite数据库</button>
    <button class="action-btn" id="pickScripts">选择SQL脚本（按顺序选择）</button>
    <button class="action-btn" id="runScripts" disabled>一键执行更新</button>
    <div class="log-panel" id="log"></div>

    <script src="sql-wasm.js"></script>
    <script>
        let dbHandle;
        let scriptHandles = [];
        let sqlEngine;

        // 初始化SQL.js引擎
        initSqlJs({ locateFile: name => name }).then(SQL => {
            sqlEngine = SQL;
            addLog('SQL引擎加载完成，准备就绪');
        });

        // 选择数据库文件
        document.getElementById('pickDb').addEventListener('click', async () => {
            [dbHandle] = await window.showOpenFilePicker({
                types: [{ description: 'SQLite数据库', accept: { 'application/x-sqlite3': ['.db', '.sqlite', '.sqlite3'] } }]
            });
            addLog(`已选中数据库: ${dbHandle.name}`);
            toggleRunBtn();
        });

        // 选择脚本文件（按选择顺序执行）
        document.getElementById('pickScripts').addEventListener('click', async () => {
            scriptHandles = await window.showOpenFilePicker({
                types: [{ description: 'SQL脚本', accept: { 'text/plain': ['.sql'] } }],
                multiple: true
            });
            addLog(`已选中 ${scriptHandles.length} 个脚本，执行顺序:`);
            scriptHandles.forEach((h, idx) => addLog(`${idx+1}. ${h.name}`));
            toggleRunBtn();
        });

        // 控制执行按钮状态
        function toggleRunBtn() {
            document.getElementById('runScripts').disabled = !dbHandle || scriptHandles.length === 0;
        }

        // 执行所有脚本
        document.getElementById('runScripts').addEventListener('click', async () => {
            const runBtn = document.getElementById('runScripts');
            runBtn.disabled = true;
            addLog('=== 开始执行脚本更新 ===');

            try {
                // 读取原始数据库内容
                const dbFile = await dbHandle.getFile();
                const dbBuffer = await dbFile.arrayBuffer();
                const db = new sqlEngine.Database(new Uint8Array(dbBuffer));

                // 按顺序执行每个脚本
                for (const [idx, handle] of scriptHandles.entries()) {
                    const scriptFile = await handle.getFile();
                    const scriptContent = await scriptFile.text();
                    addLog(`正在执行第 ${idx+1} 个脚本: ${handle.name}`);

                    try {
                        db.run(scriptContent);
                        addLog(`<span class="success">✅ 脚本 ${handle.name} 执行成功</span>`);
                    } catch (err) {
                        addLog(`<span class="error">❌ 脚本 ${handle.name} 执行失败: ${err.message}</span>`);
                        throw new Error(`更新中断: 第 ${idx+1} 个脚本执行出错`);
                    }
                }

                // 保存更新后的数据库
                const updatedDbBuffer = db.export();
                const writableStream = await dbHandle.createWritable();
                await writableStream.write(updatedDbBuffer);
                await writableStream.close();
                addLog('<span class="success">🎉 所有脚本执行完成，数据库已成功更新</span>');

            } catch (err) {
                addLog(`<span class="error">❌ 更新失败: ${err.message}</span>`);
            } finally {
                runBtn.disabled = false;
            }
        });

        // 日志输出辅助函数
        function addLog(message) {
            const logPanel = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString();
            logPanel.innerHTML += `[${timestamp}] ${message}<br>`;
            logPanel.scrollTop = logPanel.scrollHeight;
        }
    </script>
</body>
</html>

使用说明 #

1. 将HTML文件与sql-wasm.js、sql-wasm.wasm放在同一文件夹
2. 用Chrome浏览器打开该HTML文件（其他支持File System Access API的现代浏览器也可，比如Edge）
3. 点击「选择SQLite数据库」选中需要更新的本地.db文件
4. 点击「选择SQL脚本」按执行顺序选中你的5个SQL脚本文件
5. 点击「一键执行更新」，等待日志显示完成即可

方案优势 #

• 跨平台：完美支持Windows和Mac系统
• 零依赖：无需安装Python、C++环境或DB Browser，仅需Chrome/Edge浏览器
• 离线运行：所有操作本地完成，无需联网，数据安全
• 易共享：将三个文件打包成ZIP，发给他人即可直接使用

内容的提问来源于stack exchange，提问作者urbanspaceman