我看到若依做了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项目里面,是在后台里
四、实现效果:
标签:Vue,Java,Admin,true,druid,springframework,org,import,config From: https://www.cnblogs.com/mindzone/p/17045174.html