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

 关注

发布于: 2020 年 04 月 30 日

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.最后成功展示
﻿
​
﻿