1,在pom文件添加jar包
<!--添加ureport设计器--> <dependency> <groupId>com.bstek.ureport</groupId> <artifactId>ureport2-console</artifactId> <version>2.2.9</version> </dependency>
2,在启动程序*Application添加初始化bean
@Bean public ServletRegistrationBean ureportServlet(){ ServletRegistrationBean bean = new ServletRegistrationBean(new UReportServlet()); bean.addUrlMappings("/ureport/*"); return bean; }
3,在SecurityConfig.java放行/ureport/**路径
.antMatchers("/ureport/**").anonymous()
4,这样就可以直接使用localhost:8080/ureport/designer浏览了
5,在vue项目里,在vue.config.js添加下列代码
devServer: {
host: '0.0.0.0',
port: port,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
'/ureport': {
target: 'http://localhost:8080',//公司内部童鞋使用本地服务后端
ws:false,
changeOrigin: true,
pathRewrite: {
'^/ureport': '/ureport'
}
}
6.在views目录添加ureport/designer的index.vue文件,目录形式如下:views/ureport/designer
<template>
<div v-loading="loading" :style="'height:'+ height">
<iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
</div>
</template>
<script>
export default {
name: "Ureport",
data() {
return {
src: "/ureport/designer",
height: document.documentElement.clientHeight - 94.5 + "px;",
loading: true
};
},
mounted: function() {
setTimeout(() => {
this.loading = false;
}, 230);
const that = this;
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 94.5 + "px;";
};
}
};
</script>
7.在后台管理界面添加菜单,图片如下所示:
8.最后成功展示