springboot前端动态切换日志等级

个人技术网站 欢迎关注

接着上一篇文章讲

 

spring-boot推送实时日志到前端页面显示

https://blog.csdn.net/u014174854/article/details/82143595

日志级别在生产环境中尤为重要，一般都是配置为error级别，如果我想看更多的日志呢？切换很麻烦，所以在spring-boot1.5.X以上的版本支持日志级别动态切换了。

首先引入依赖

<!-- 动态配置日志级别 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>

在spring-boot配置文件中配置

#默认false 否则无法动态切换日志等级
management:
  security:
    enabled: false

具体实现是

POST请求 loggers/包名 带上参数{'configuredLevel' : 日志级别}即可切换日志级别

GET请求 loggers/包名 可以获取此包名的当前日志级别，也可不带包名，直接返回所有包的日志级别

下面给出上一篇博客增加动态切换日志级别的前端代码  具体样式请自行更换

$(".log").click(function () {
        getLogLevel();
        //iframe层
        layer.open({
            type: 1,
            title: '<span class="laytit">接口实时日志</span>当前日志等级 <span class="logleveltext"></span>',
            shadeClose: false,
            shade: 0.7,
            maxmin: true,
            area: ['80%', '70%'],
            content: $("#logdiv").html(), //iframe的url
            btn: ['INFO', 'DEBUG', 'WARN','ERROR','刷新','清屏'], //可以无限个按钮
            cancel: function(index){
                closeSocket();
            },yes: function(index, layero){
                //按钮【按钮一】的回调
                changeLogLevel("INFO");
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #AAC000;">INFO</button>');
                return false;
            },btn2: function(index, layero){
                //按钮【按钮二】的回调
                changeLogLevel("DEBUG");
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #AAC000;">DEBUG</button>');
                return false;
            },btn3: function(index, layero){
                //按钮【按钮三】的回调
                changeLogLevel("WARN");
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #BB872B;">WARN</button>');
                return false;
            },btn4: function(index, layero){
                //按钮【按钮四】的回调
                changeLogLevel("ERROR");
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #D55E56;">ERROR</button>');
                return false;
            },btn5: function(index, layero){
                //按钮【按钮五】的回调
                closeSocket();
                openSocket();
                return false;
            },btn6: function(index, layero){
                //按钮【按钮六】的回调
                $("#log-container div").html("");
                return false;
            },min: function(index) { //点击最小化后的回调函数
                $(".layui-layer-title").html('接口日志');
                $(".layui-layer-shade").hide();
            },restore: function() { //点击还原后的回调函数
                getLogLevel();
                $(".layui-layer-title").html('<span class="laytit">接口实时日志</span>当前日志等级 <span class="logleveltext"></span>');
                $(".layui-layer-shade").show();
            }
        });
    });

    <!-- 日志实时推送业务处理 -->
    var stompClient = null;

    function openSocket() {
        if (stompClient == null) {
            if($("#log-container").find("span").length==0){
                $("#log-container div").after("<span>通道连接成功,静默等待.....</span><img src='images/loading.gif'>");
            }
            var socket = new SockJS('websocket?token=kl');
            stompClient = Stomp.over(socket);
            stompClient.connect({token: "kl"}, function (frame) {
                stompClient.subscribe('/topic/pullLogger', function (event) {
                    var content = JSON.parse(event.body);
                    var leverhtml = '';
                    var className = '<span class="classnametext">' + content.className + '</span>';
                    switch (content.level) {
                        case 'INFO':
                            leverhtml = '<span class="infotext">' + content.level + '</span>';
                            break;
                        case 'DEBUG':
                            leverhtml = '<span class="debugtext">' + content.level + '</span>';
                            break;
                        case 'WARN':
                            leverhtml = '<span class="warntext">' + content.level + '</span>';
                            break;
                        case 'ERROR':
                            leverhtml = '<span class="errortext">' + content.level + '</span>';
                            break;
                    }
                    $("#log-container div").append("<p class='logp'>" + content.timestamp + " " + leverhtml + " --- [" + content.threadName + "] " + className + " ：" + content.body + "</p>");
                    if (content.exception != "") {
                        $("#log-container div").append("<p class='logp'>" + content.exception + "</p>");
                    }
                    if (content.cause != "") {
                        $("#log-container div").append("<p class='logp'>" + content.cause + "</p>");
                    }
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                }, {
                    token: "kltoen"
                });
            });
        }
    }

    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient = null;
        }
    }

    function changeLogLevel(logLevel) {
        var data = {'configuredLevel' : logLevel};
            $.ajax({
            url : "loggers/com.xcloud",
            type : "post",
            dataType: 'json',
            contentType:"application/json",
            data : JSON.stringify(data),
            success : function(e) {
                layer.msg("日志等级变更为 "+logLevel, {icon: 1});
            }
        });
    }

    function getLogLevel() {
        $.get("loggers/com.xcloud", function(result){
            if(result.configuredLevel=="null"){
                defuiltLogLevel(result.effectiveLevel);
            }else{
                defuiltLogLevel(result.configuredLevel);
            }
        });
    }

    function defuiltLogLevel(logLevel) {
        switch (logLevel) {
            case 'INFO':
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #AAC000;">'+logLevel+'</button>');
                break;
            case 'DEBUG':
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #AAC000;">'+logLevel+'</button>');
                break;
            case 'WARN':
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #BB872B;">'+logLevel+'</button>');
                break;
            case 'ERROR':
                $(".logleveltext").html('<button class="layui-btn" style="background-color: #D55E56;">'+logLevel+'</button>');
                break;
        }
    }

相关样式

 .logp {
            padding-top: .25rem;
        }

        .infotext {
            color: #AAC000;
        }

        .debugtext {
            color: #AAC000;
        }

        .warntext {
            color: #D59D30;
        }

        .errortext {
            color: #fb6a53;
        }

        .classnametext {
            color: #309899;
        }

        .excetext {
            margin-left: 1.5rem;
        }

        .layui-layer-content {
            height: 100% !important;
        }
        .layui-layer-title{
           text-align: center!important;
        }
        .laytit{
            float: left;
        }
        .layui-layer-btn{
            text-align: center;
            padding-top: 0!important;
        }
        .layui-layer-btn0{
            border-color: #AAC000!important;
            background-color: #AAC000!important;
            color: #fff!important;
        }
        .layui-layer-btn1{
            border-color: #AAC000!important;
            background-color: #AAC000!important;
            color: #fff!important;
        }
        .layui-layer-btn2{
            border-color: #BB872B!important;
            background-color: #BB872B!important;
            color: #fff!important;
        }
        .layui-layer-btn3{
            border-color: #D55E56!important;
            background-color: #D55E56!important;
            color: #fff!important;
        }
        .layui-layer-btn4{
            border-color: #1E9FFF!important;
            background-color: #1E9FFF!important;
            color: #fff!important;
        }
        .layui-layer-btn5{
            border-color: #009688!important;
            background-color: #009688!important;
            color: #fff!important;
        }
        .layui-layer-btn6{
            border-color: #46963b !important;
            background-color: #46963b!important;
            color: #fff!important;
        }
        .layui-btn {
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            font-size: 12px;
            display: inline-block;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }