使用JS解析idea控制台SQL日志——JS版MybatisLogPlugin_js mybaties-log sql日志解析-优快云博客

本文链接：https://blog.youkuaiyun.com/hunt_er/article/details/115169721

由于idea升级到了20.3版本，新版的Mybatis Log Plugin插件要收费，遂参照网上代码，修改了一下，产生如下js替换版本。

功能：将idea控制台输出的 sql日志转化为 sql语句。支持同时解析多条sql语句。

示例：

: ==>  Preparing: update sys_config set v=? where id=? 
2021-09-03 11:18:00.054 DEBUG 7428 --- [pool-2-thread-1] c.w.p.b.m.ConfigMapper.editFilePath      : ==> Parameters: 2021-09-03 11:23:00(String), B22B3AB2-E88B-A432-E050-0A0A18230287(String)
2021-09-03 11:18:00.056 DEBUG 7428 --- [pool-2-thread-1] c.w.p.b.m.ConfigMapper.editFilePath      : <==    Updates: 2

结果：

update sys_config set v='2021-09-0311:23:00' where id='B22B3AB2-E88B-A432-E050-0A0A18230287'

页面效果如下:

如何使用？

新建一个html页面，放入以下代码，保存为html文件，使用浏览器在本地打开该html文件，即可使用。

HTML文件代码：

<!DOCTYPE html>
<html lang="en" style="background: #40434e">
<head>
    <meta charset="UTF-8"/>
    <title>Mybatis Log Helper</title>
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href=""/>
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #app {
            margin-top: 70px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
        .el-textarea__inner {
            background: #40434e;
            color: deepskyblue;
        }
    </style>
</head>
<body>
<div id="app">
    <el-input type="textarea" v-model="pre" placeholder="请复制输入Mybatis打印的日志，须完整Prepareing语句和Parameter语句"
              :rows="28" style="width: 600px"></el-input>
    <el-button type="success" @click="multiConvert" style="height: 50px; width: 80px;">转换</el-button>
    <el-button type="info" @click="res=''" style="height: 50px; width: 80px;">重置</el-button>
    <el-checkbox v-model="checked">自动重置</el-checkbox>
    <el-input ref="res" type="textarea" v-model="res" placeholder="输出结果"
              :rows="28" style="width: 600px"></el-input>
</div>

<script type="text/javascript">
    const SQL_PRE = 'Preparing: '
    const PARAM_PRE = 'Parameters: '
    var app = new Vue({
        el: '#app',
        data() {
            return {
                // 原始str
                pre: '',
                // 输出结果
                res: '',
                checked: true
            }
        },
        methods: {
            multiConvert() {
                if (this.checked) this.res = ''
                let text = this.pre
                let mybatisSQLList = []
                while (text.lastIndexOf(SQL_PRE) !== -1) {
                    // 尾部截取，从数组的头部添加
                    mybatisSQLList.unshift(text.substring(text.lastIndexOf(SQL_PRE)));
                    text = text.substring(0, text.lastIndexOf(SQL_PRE));
                }
                console.log(mybatisSQLList);
                if (mybatisSQLList.length === 0) {
                    this.$message.error(`解析失败！请将${SQL_PRE}和${PARAM_PRE}语句行完整复制进来`)
                }
                mybatisSQLList.forEach(item => {
                    this.convert(item)
                })
                this.copyRes()
            },
            convert(str) {
                // str为完整的三行或两行mybatisSQL
                if (str.indexOf(SQL_PRE) === -1 || str.indexOf(PARAM_PRE) === -1) {
                    this.$message.error(`请将${SQL_PRE}和${PARAM_PRE}语句行完整复制进来`)
                }
                // 提取预编译语句行
                let prepare = str.substring(str.indexOf(SQL_PRE) + SQL_PRE.length, str.indexOf('\n'))
                // 获取参数行
                let params = str.substring(str.indexOf(PARAM_PRE) + PARAM_PRE.length, str.indexOf('\n', str.indexOf(PARAM_PRE)))
                // 参数数组
                let array = params.replace(/ /g, '').split(',')
                // 循环替换占位符，字符串方式替换每次替换第一个
                array.forEach(item => {
                    // 获取参数值
                    let value = item.substring(0, item.indexOf('('))
                    // 获取参数类型
                    const type = item.substring(item.indexOf('(') + 1, item.indexOf(')'))
                    if ('String' === type) {
                        value = "'" + value + "'"
                    }
                    prepare = prepare.replace('?', value)
                })
                this.res += prepare + '\n\n\n'
            },
            copyRes() {
                // 确保复制成功，延时执行
                setTimeout(() => {
                    if (this.res.length === 0) return
                    this.$refs.res.select()
                    document.execCommand('copy')
                    this.$message.success('SQL已复制到剪切板！')
                }, 1)
            }
        }
    })
</script>
</body>
</html>

新的想法，可以利用mybatis拦截器拦截sql，直接转换sql打印到log。就省去了粘贴的过程。可能会增加性能消耗。

新的想法实现：SpringBoot通过MyBatis拦截器打印完整SQL语句(无问号)_hunt_er的博客-优快云博客