快捷導(dǎo)航

JavaScript腳本實現(xiàn)解析MyBatis?SQL日志

更新時間：2025年02月20日 09:16:10 作者：￡漫步?云端彡

這篇文章主要為大家詳細介紹了如何開發(fā)一個簡單的?HTML?和?JavaScript?腳本,用于解析?MyBatis?的?SQL?日志并生成可執(zhí)行的?SQL?語句,需要的可以參考下

在日常開發(fā)中，使用 MyBatis 作為持久層框架時，我們經(jīng)常需要查看 SQL 日志以調(diào)試和優(yōu)化查詢。然而，MyBatis 的日志輸出通常包含占位符和參數(shù)信息，這使得直接執(zhí)行這些 SQL 語句變得困難。為了解決這個問題，我們開發(fā)了一個簡單的 HTML 和 JavaScript 腳本，用于解析 MyBatis 的 SQL 日志并生成可執(zhí)行的 SQL 語句。

1. 腳本功能概述

該腳本的主要功能是：

解析 SQL 日志：從 MyBatis 日志中提取 SQL 語句和參數(shù)。

參數(shù)替換：將 SQL 語句中的占位符 ? 替換為實際的參數(shù)值。

生成可執(zhí)行 SQL：輸出完整的 SQL 語句，便于在數(shù)據(jù)庫中直接執(zhí)行。

2. 實現(xiàn)細節(jié)

2.1 HTML 結(jié)構(gòu)

腳本的 HTML 部分提供了一個簡單的用戶界面，包含輸入?yún)^(qū)域、解析按鈕和輸出區(qū)域。

輸入?yún)^(qū)域：用戶可以在此粘貼 MyBatis 的 SQL 日志。
解析按鈕：點擊后觸發(fā) JavaScript 函數(shù)進行解析。
輸出區(qū)域：顯示解析后的可執(zhí)行 SQL 語句。

2.2 JavaScript 邏輯

JavaScript 部分實現(xiàn)了日志解析的核心邏輯：

日志分割：通過換行符將日志分割為多行，逐行處理。

SQL 語句提?。鹤R別包含 Preparing: 的行，提取 SQL 語句。

參數(shù)解析：識別包含 Parameters: 的行，提取參數(shù)并根據(jù)類型進行處理。

字符串和時間戳：用單引號包裹，處理轉(zhuǎn)義字符。

空值：替換為 NULL。

其他類型：直接替換。

結(jié)果輸出：將替換后的 SQL 語句顯示在輸出區(qū)域。

3. 腳本代碼

創(chuàng)建一個.html文件，編輯，將腳本內(nèi)容貼至文件內(nèi)，保存，用瀏覽器打開文件即可使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mybatis SQL日志解析</title>
    <script type="text/javascript">
        function f(obj) {
            try {
                var textVa = obj.value;
                var logs = textVa.split('\n'); // Split by newline
                var results = [];
                var currentStatement = null;

                logs.forEach(function(log) {
                    // Check if this line contains "Preparing:" or "Parameters:"
                    if (log.indexOf('Preparing:') !== -1) {
                        if (currentStatement !== null) {
                            // If we have a current statement, push it to the results
                            results.push(currentStatement);
                        }
                        // Start a new statement
                        currentStatement = log.substring(log.indexOf('Preparing:') + "Preparing:".length).trim();
                    } else if (log.indexOf('Parameters:') !== -1 && currentStatement !== null) {
                        // If we find parameters and have a current statement, parse the parameters
                        var parametersStr = log.substring(log.indexOf('Parameters:') + "Parameters:".length).trim();
                        var parameters = parametersStr.split(/,(?![^()]*\))/g); // Use regex to split correctly
                        for (var i = 0; i < parameters.length; i++) {
                            var paramValue = parameters[i].trim();
                            if (paramValue === "null") {
                                currentStatement = currentStatement.replace("?", "NULL");
                            } else {
                                var typeStr = paramValue.substring(paramValue.indexOf("(") + 1, paramValue.indexOf(")"));
                                paramValue = paramValue.substring(0, paramValue.indexOf("(")).trim();
                                if (typeStr === "String" || typeStr === "Timestamp") {
                                    paramValue = "'" + paramValue.replace("'", "''") + "'";
                                }
                                currentStatement = currentStatement.replace("?", paramValue);
                            }
                        }
                        // Add the final statement to the results and reset currentStatement
                        results.push(currentStatement);
                        currentStatement = null;
                    }
                });

                // If there's a remaining statement, push it to the results
                if (currentStatement !== null) {
                    results.push(currentStatement);
                }

                document.getElementById("d1").value = results.join("\n\n");
            } catch (e) {
                console.error(e);
                alert("解析SQL時發(fā)生錯誤：" + e.message);
            }
        }
        function copySQL() {
            var SQL = document.getElementById("d1");
            navigator.clipboard.writeText(SQL.value).then(function() {
                var msg = document.getElementById("msg");
                msg.innerHTML = "已復(fù)制到剪切板";
                setTimeout(function () {
                    msg.innerHTML = "";
                }, 3000);
            }).catch(function(err) {
                console.error("復(fù)制失敗：", err);
                alert("復(fù)制SQL時發(fā)生錯誤：" + err.message);
            });
        }
        function clearLog(obj) {
            obj.value = "";
        }
    </script>
</head>
<body>

<h2><font color="#00bfff"> 輸入Mybatis SQL日志：</font></h2>
<textarea id="sqlLog" rows="12" cols="140" style="font-size:12px;font-family: 'CourierNew';font-weight: bold;width: 98%;"></textarea>
<div style="border:0px deepskyblue solid;width:1425px;height:50px;text-align:right;">
    <button style="color:mediumblue;width:100px;height:60px" type="button" onclick="clearLog(document.getElementById('sqlLog'))">清空</button>
    <button style="color:mediumblue;width:100px;height:60px" type="submit" onclick="f(document.getElementById('sqlLog'))">解析SQL</button>
</div>

<h2><font color="#32cd32">解析為可執(zhí)行SQL：</font></h2>
<textarea id="d1" rows="12" cols="140" style="font-size:12px;font-family: 'CourierNew';font-weight: bold;width: 98%;"></textarea>
<div style="border:0px deepskyblue solid;width:1425px;height:50px;text-align:right;">
    <button style="color:mediumblue;width:100px;height:60px" type="button" onclick="copySQL()">復(fù)制SQL</button>
</div>

<div id="msg" style="color:cornflowerblue;border:0px black solid;width:800px;height:20px;text-align:right;font-style: initial;font-size: large"></div>

</body>
</html>