1. RuoYi-Vue前后端分离项目结构
    在这里插入图片描述

  2. 在项目的ruoyi-common模块下的pom.xml加入jar包依赖

    <!--ureport2报表-->
    <dependency>
       <groupId>com.bstek.ureport</groupId>
       <artifactId>ureport2-console</artifactId>
       <version>2.2.9</version>
    </dependency>
    

    最新jar包依赖的版本号可以到https://search.maven.org/上查询“ureport2-console”关键字,以查看该包的最新版本号。

  3. 该jar包可以在自己的Maven本地仓库中找到
    在这里插入图片描述

  4. 在RuoYiApplication主程序添加初始化Bean,在SpringBootApplication注解上添加注解

    @Bean
    public ServletRegistrationBean urportServlet(){
        ServletRegistrationBean bean = new ServletRegistrationBean(new UReportServlet());
        bean.addUrlMappings("/ureport/*");
        return bean;
    }
    
    @ImportResource("classpath:ureport-console-context.xml")
    

    在这里插入图片描述

  5. ruoyi-framework模块中加入运行匿名访问,将拦截排除

    目录在ruoyi-framework\src\main\java\com\ruoyi\framework\config\SecurityConfig.java

    在这里插入图片描述

  6. 启动项目,访问ureport2报表

    默认端口为8080,可根据所需更改端口号,端口号所在路径为ruoyi-admin\src\main\resources\application.yml

    集成完成后,启动项目,在浏览器上输入ureport2报表的访问地址:http://localhost:8080/ureport/designer 即可访问

    在这里插入图片描述

  7. ruoyi-ui/vue.config.js添加下列代码

    '/ureport': {
        target: 'http://localhost:8080',
        ws:false,
        changeOrigin: true,
        pathRewrite: {
            '^/ureport': '/ureport'
        }
    }
    

    在这里插入图片描述

  8. 在views目录添加ureport/designer的index.vue文件

    目录路径为:ruoyi-ui/src/views/ureport/designer/index.vue

    <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>
    
  9. 运行若依管理系统,依次点击系统管理->菜单管理,新增目录

    在这里插入图片描述

  10. 在当前目录上新增菜单

在这里插入图片描述

  1. 点击报表设计菜单,ureport2报表集成到RuoYi-Vue前后端分离项目

    在这里插入图片描述

Logo

快速构建 Web 应用程序

更多推荐