使用JS解析idea控制台SQL日志——JS版MybatisLogPlugin

梦里梦外; 2021-09-25 05:58 247阅读 0赞

由于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'

页面效果如下:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZHNfc3Vyaw_size_20_color_FFFFFF_t_70_g_se_x_16][]

如何使用？

新建一个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的博客-CSDN博客][SpringBoot_MyBatis_SQL_hunt_er_-CSDN]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZHNfc3Vyaw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20210923/8e113c2cd26a42809f6fa4423876c04f.png
[SpringBoot_MyBatis_SQL_hunt_er_-CSDN]: https://blog.csdn.net/hunt_er/article/details/120081742