RuoYi-Vue前后端分离版集成UReport2(IDEA版)

喜欢ヅ旅行 2024-04-08 10:47 88阅读 0赞

1.  RuoYi-Vue前后端分离项目结构  
    ![在这里插入图片描述][3b10dc314f784bd4a2f636de6ed9d1ef.png_pic_center]
2.  在项目的ruoyi-common模块下的pom.xml加入jar包依赖
    
        
        <dependency>
           <groupId>com.bstek.ureport</groupId>
           <artifactId>ureport2-console</artifactId>
           <version>2.2.9</version>
        </dependency>
    
    > 最新jar包依赖的版本号可以到[https://search.maven.org/][https_search.maven.org]上查询“ureport2-console”关键字，以查看该包的最新版本号。
3.  该jar包可以在自己的Maven本地仓库中找到  
    ![在这里插入图片描述][691651d291a84b72a570052f5bb3c9c5.png_pic_center]
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")
    
    ![在这里插入图片描述][eb9f2d475a6b443d93e343424e737c76.png_pic_center]
5.  在ruoyi-framework模块中加入运行匿名访问，将拦截排除
    
    > 目录在ruoyi-framework\\src\\main\\java\\com\\ruoyi\\framework\\config\\SecurityConfig.java
    
    ![在这里插入图片描述][3709e7c8b3f74d01a2af3b3cac9fdd3b.png_pic_center]
6.  启动项目，访问ureport2报表
    
    > 默认端口为8080，可根据所需更改端口号，端口号所在路径为ruoyi-admin\\src\\main\\resources\\application.yml
    
    集成完成后，启动项目，在浏览器上输入ureport2报表的访问地址：[http://localhost:8080/ureport/designer][http_localhost_8080_ureport_designer] 即可访问
    
    ![在这里插入图片描述][1e9598ca5f8846b5833421df9d98e882.png_pic_center]
7.  在ruoyi-ui/vue.config.js添加下列代码
    
        '/ureport': {
              
            target: 'http://localhost:8080',
            ws:false,
            changeOrigin: true,
            pathRewrite: {
              
                '^/ureport': '/ureport'
            }
        }
    
    ![在这里插入图片描述][a782e759dd054de1a08cc8010d4cd2f4.png_pic_center]
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.  运行若依管理系统，依次点击系统管理->菜单管理，新增目录
    
    ![在这里插入图片描述][6c59d904d6dd4f10b3bb7f38548c6aa7.png_pic_center]
10. 在当前目录上新增菜单

![在这里插入图片描述][997e66b0e4a3404a93ed95a40fe6d622.png_pic_center]

1.  点击报表设计菜单，ureport2报表集成到RuoYi-Vue前后端分离项目
    
    ![在这里插入图片描述][101ab279035d40a6aa7e3d32ef923374.png_pic_center]

[3b10dc314f784bd4a2f636de6ed9d1ef.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3a32e751a68d4392a5060a42975e9c77.png
[https_search.maven.org]: https://search.maven.org/
[691651d291a84b72a570052f5bb3c9c5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1d5904180c8a4d2aa1067d59a3317e0e.png
[eb9f2d475a6b443d93e343424e737c76.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/70fe32d0d32d4bbabb3155d950e26175.png
[3709e7c8b3f74d01a2af3b3cac9fdd3b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2be08545ac3146b982c47a85ced5a290.png
[http_localhost_8080_ureport_designer]: http://localhost:8080/ureport/designer
[1e9598ca5f8846b5833421df9d98e882.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/02c55b93c7e64d3c89772e3812bfbaf9.png
[a782e759dd054de1a08cc8010d4cd2f4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/34105bce460440af8cce27b8cccdef13.png
[6c59d904d6dd4f10b3bb7f38548c6aa7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4d08647cc0b347febc036501bddaa986.png
[997e66b0e4a3404a93ed95a40fe6d622.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c7c9818787874cc0a84f067632b7352e.png
[101ab279035d40a6aa7e3d32ef923374.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/622c03d445384ad08331497ab625ce8d.png