本文介绍了一个基于 HTML 和 JavaScript 的轻量级工具，用于解析 MyBatis 持久层框架输出的 SQL 日志。该脚本自动提取日志中的 SQL 语句与参数，将占位符替换为实际值（包括字符串、时间戳及空值处理），从而生成可直接在数据库中执行的完整 SQL 语句，有效简化开发与调试流程。
在常规开发过程中，若采用 MyBatis 作为持久层框架，开发者常需通过查看 SQL 日志来调试及优化查询性能。不过，MyBatis 默认输出的日志通常包含占位符与参数信息，这导致直接执行这些 SQL 语句存在困难。针对这一痛点，我们设计并实现了一个基于 HTML 与 JavaScript 的脚本，旨在解析 MyBatis 的 SQL 日志，并自动生成可直接执行的 SQL 语句。
1. 脚本功能概述
该脚本的核心功能涵盖以下方面：
解析 SQL 日志：从 MyBatis 输出的日志中准确提取 SQL 语句及其对应的参数信息。
参数替换：将 SQL 语句中的占位符（即问号 ?）替换为具体的参数值。
生成可执行 SQL：输出处理后的完整 SQL 语句，使其能够在数据库中直接运行。
2. 实现细节
2.1 HTML 结构
脚本的 HTML 部分构建了一个简洁的用户界面，主要包含输入区域、解析按钮以及输出区域三个部分。
- 输入区域：用户可将 MyBatis 的 SQL 日志粘贴至此处。
- 解析按钮：点击该按钮将触发 JavaScript 函数，执行日志解析操作。
- 输出区域：用于展示解析完成后生成的可执行 SQL 语句。
2.2 JavaScript 逻辑
JavaScript 部分实现了日志解析的核心算法，具体逻辑如下：
日志分割：利用换行符将原始日志分割为多行，并逐行进行后续处理。
SQL 语句提取：识别以 Preparing: 开头的行，从中提取出 SQL 语句主体。
参数解析：识别以 Parameters: 开头的行，提取参数值并根据数据类型进行相应处理。
字符串和时间戳：对字符串类型及时间戳类型的参数，使用单引号包裹，并妥善处理转义字符。
空值：若参数为空，则将其替换为 NULL。
其他类型：对于非字符串且非空的其他类型参数，直接进行替换。
结果输出：将经过上述替换处理后的 SQL 语句显示在输出区域中。
3. 脚本代码
创建一个 .html 文件，将脚本内容编辑并粘贴至该文件中，保存后使用浏览器打开即可直接使用。
<!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时发生错误：" + e.message);
}
}
function copySQL() {
var SQL = document.getElementById("d1");
navigator.clipboard.writeText(SQL.value).then(function() {
var msg = document.getElementById("msg");
msg.innerHTML = "已复制到剪切板";
setTimeout(function () {
msg.innerHTML = "";
}, 3000);
}).catch(function(err) {
console.error("复制失败：", err);
alert("复制SQL时发生错误：" + 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">解析为可执行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()">复制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>4. 使用方法
将 MyBatis 生成的 SQL 日志完整粘贴至界面的输入区域。
点击“解析SQL”按钮以触发解析过程。
在输出区域查看解析结果，并可复制生成的 SQL 语句。
4.1 示例
假设输入的日志内容如下：
Preparing: INSERT INTO users (name, email) VALUES (?, ?) Parameters: John(String), null
经过脚本解析后，输出的结果为：
INSERT INTO users (name, email) VALUES ('John', NULL)
5. 总结
借助这个简易脚本，开发者能够快速将 MyBatis 的 SQL 日志转换为可执行的 SQL 语句，显著提升了开发与调试的效率。期望该工具能为您的工作提供便利。
关于 JavaScript 脚本实现解析 MyBatis SQL 日志的介绍至此结束，更多相关 MyBatis SQL 日志解析内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！