Ruoyi Vue前后端分离版本添加UReport设计器

发布于: 2020 年 04 月 30 日
Ruoyi Vue前后端分离版本添加UReport设计器

1,在pom文件添加jar包

<!--添加ureport设计器--><dependency><groupId>com.bstek.ureport</groupId><artifactId>ureport2-console</artifactId><version>2.2.9</version></dependency>

2,在启动程序*Application添加初始化bean

@Beanpublic 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.最后成功展示

发布于: 2020 年 04 月 30 日 阅读数: 19
用户头像

赵欣

关注

继续追逐我的梦 2019.02.14 加入

热衷软件架构设计,熟悉Spring Portfolio系列,对大数据,区块链也有基本了解

评论

发布
暂无评论
Ruoyi Vue前后端分离版本添加UReport设计器