【Java】Vue-Element-Admin 嵌入Druid监控面板

我看到若依做了Druid面板的嵌入，我自己的项目干脆也做一个

一、后台服务SpringBoot：

Druid配置项：

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3308/tt?serverTimeZone=Asia/Shanghai
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456

    # 德鲁伊监控面板配置
    druid:
      stat-view-servlet:
        # 设置白名单，不填则允许所有访问
        allow:
        url-pattern: /druid/*
        # 访问druid监控界面的用户名密码
        loginUsername: admin
        loginPassword: 123456
        enabled: true
      max-pool-prepared-statement-per-connection-size: 20
      filters: stat,wall
      connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000

过滤器需要放行监控页面路径：

# xss 过滤配置
xss:
  enabled: true
  # 忽略不需要过滤的连接
  excludes:
    - /file/upload
    - /chuck-file/chuck
    - /druid
  # 忽略不需要做html转义的json属性值，多个属性用半角逗号分隔
  properties:

Security需要放行CSRF攻击和IFrame跨域配置：

package cn.cloud9.server.struct.cors;

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

/**
 * Cors跨域访问配置
 * @author OnCloud9
 * @description
 * @project tt-server
 * @date 2022年11月06日 下午 05:55
 */
@Configuration
public class CorsConfig extends WebSecurityConfigurerAdapter {

    @Override
    public void configure(HttpSecurity security) throws Exception {
        security.authorizeRequests()
                .antMatchers("/**").permitAll()
                .anyRequest().authenticated()
                .and().httpBasic()
                .and().cors().configurationSource(corsFilter())
                /* 允许iframe访问本服务资源 */
                .and().headers().frameOptions().disable()
                /* 关闭CSRF攻击阻挡 */
                .and().csrf().disable();
    }

    private CorsConfigurationSource corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedHeader(CorsConfiguration.ALL);
        config.setAllowCredentials(true);
        config.addAllowedMethod(CorsConfiguration.ALL);

        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        return configSource;
    }


}

二、后台服务SpringBoot：

LightFrame的封装面板：

<template>
  <div v-loading="loading" style="height: calc(100vh - 110px)">
    <iframe class="iframe-panel" :src="src" />
  </div>
</template>
<script>
export default {
  name: 'LightFrame',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 94.5 + 'px',
      loading: true,
      url: this.src
    }
  },
  mounted() {
    setTimeout(() => { this.loading = false }, 300)
  }
}
</script>

<style scoped>
.iframe-panel {
  width: 100%;
  height: 100%;
  border: none;
  overflow-scrolling: auto;
}
</style>

Druid监控菜单页面：

<template>
  <light-frame :src="druidMonitorUrl" />
</template>

<script>
import LightFrame from '@/components/LightFrame'
export default {
  name: 'Index',
  components: { LightFrame },
  data() {
    return {
      druidMonitorUrl: `${process.env.VUE_APP_BASE_DOMAIN}${process.env.VUE_APP_BASE_API}/druid/index.html`
    }
  }
}
</script>

地址环境配置：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_DOMAIN = 'http://127.0.0.1:8080'
VUE_APP_BASE_API = '/demo'
VUE_APP_PROXY_API = '/proxy-api'

三、注意事项：

1、只有以后台相同的主机访问项目查看Druid监控才会有效（例如 后台服务主机是127.0.0.1，Web访问的主机也必须以127.0.0.1才可以）

2、IFrame的Src地址，不要使用代理地址去连接请求 （Web配置地址的时候就使用直接地址访问）

3、后台一定要配置iframe跨域放行，因为静态资源不在Web项目里面，是在后台里

四、实现效果：