Ruoyi-Vue 3.8.7集成积木报表JmReport和积木大屏JimuBI

Ruoyi-Vue 3.8.7集成积木报表JmReport和积木大屏JimuBI

一、版本

RuoYi-Vue版本:v3.8.7

JMreport报表版本: v1.9.4

JimuBI大屏版本:V1.9.4

二、数据库

积木数据库sql

下载后,使用数据库管理工具执行sql脚本,将需要的一些表导入进去。

三、Pom中引入积木报表最新依赖

打开ruoyi-admin下的pom.xml引入最新依赖

        <!-- 积木报表 -->
        <dependency>
            <groupId>org.jeecgframework.jimureport</groupId>
            <artifactId>jimureport-spring-boot-starter</artifactId>
            <version>1.9.4</version>
        </dependency>
        <!--积木BI大屏-->
        <dependency>
            <groupId>org.jeecgframework.jimureport</groupId>
            <artifactId>jimubi-spring-boot-starter</artifactId>
            <version>1.9.4</version>
        </dependency>

四、RuoYiApplication添加积木报表扫描文件

打开ruoyi-admin模块中的RuoYiApplication文件

@SpringBootApplication(exclude = { DataSourceAutoConfiguration.class },scanBasePackages = {"org.jeecg","com.ruoyi"})

五、配置序列化白名单

打开ruoyi-common模块中Constants文件,修改161行

public static final String[] JSON_WHITELIST_STR = { "org.springframework", "com.ruoyi", "org.jeecg.modules.drag" };

六、SecurityConfig拦截排除

在ruoyi-framework模块中,打开SecurityConfig文件

  1. 添加代码

    .antMatchers("/jmreport/**","/drag/**","/jimubi/**").anonymous()
    
  2. 禁用Https响应

    // 禁用HTTP响应标头
    .headers().frameOptions().disable();
    

    Snipaste_2025-02-20_13-39-46

七、后端创建Controller文件

在ruoyi-admin模块中,创建src/main/java/com/ruoyi/web/controller/tool/reportController.java文件。这个controller目的向前端返回积木的前半部分地址,在前端拼接上后关部分地址。

Snipaste_2025-02-20_13-42-18

代码如下:

package com.ruoyi.web.controller.tool;
 
import com.ruoyi.common.annotation.Anonymous;
import com.ruoyi.common.utils.ip.IpUtils;
import org.springframework.core.env.Environment;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.beans.factory.annotation.Autowired;
 
@Anonymous
@RestController
@RequestMapping("/tool/jm")
public class ReportController {
 
    @Autowired
    Environment environment;
 
    //报表设计
    @PreAuthorize("@ss.hasPermi('tool:report:list')")
    @GetMapping(value = "/reportList")
    public String ReportList(){
        return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/jmreport/list";
    }
 
    //报表查看
    @GetMapping(value = "/reportView")
    public String ReportView(){
        return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/jmreport/view";
    }
 
    //报表查看
    @GetMapping(value = "/biList")
    public String bi(){
        return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/drag/list";
    }
 
    //报表查看
    @GetMapping(value = "/biView")
    public String biView(){
        return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/drag/share/view";
    }
}

八、前端文件(Vue2)创建

  1. 创建src/api/tool/jimu.js文件,代码如下:

    import request from '@/utils/request'
    
    
    export function getReportUrl() {
      return request({
        url: '/tool/jm/reportList',
        method: 'get'
      })
    }
    export function getReportViewUrl() {
      return request({
        url: '/tool/jm/reportView',
        method: 'get'
      })
    }
    export function getBiUrl() {
      return request({
        url: '/tool/jm/biList',
        method: 'get'
      })
    }
    export function getBiViewUrl() {
      return request({
        url: '/tool/jm/biView',
        method: 'get'
      })
    }
    
  2. 创建src/views/tool/report/reportList.vue文件

    <template>
      <!-- 组件名按照 Vue 2 习惯一般首字母大写,当然小写也能用 -->
      <IFrame :src="url" />
    </template>
    
    <script>
    // 导入获取 token 的工具函数
    import { getToken } from '@/utils/auth';
    // 导入获取报表 URL 的 API 函数
    import { getReportUrl } from '@/api/tool/jimu';
    // 导入自定义的 IFrame 组件
    import IFrame from "@/components/iFrame/index.vue";
    
    export default {
      // 组件名称
      name: 'ReportDesign',
      // 注册子组件
      components: {
        IFrame
      },
      // 定义组件的数据
      data() {
        return {
          // 初始化 url 为空字符串
          url: ''
        };
      },
      // 生命周期钩子,在实例创建完成后立即调用
      created() {
        this.init();
      },
      // 定义组件的方法
      methods: {
        init() {
          getReportUrl()
            .then((res) => {
              // 将获取到的 URL 拼接上 token 并赋值给 data 中的 url
              this.url = res + "?token=Bearer " + getToken();
            })
            .catch((error) => {
              // 处理接口调用失败的情况
              console.error('获取报表 URL 失败:', error);
              // 你可以在这里添加更多错误处理逻辑,比如显示错误提示给用户
            });
        }
      }
    };
    </script>
    
  3. 创建src/views/tool/report/reportView.vue文件

    <template>
      <!-- 按照 Vue 组件命名规范,建议组件名首字母大写 -->
      <IFrame :src="url" />
    </template>
    
    <script>
    // 导入获取 token 的工具函数
    import { getToken } from '@/utils/auth';
    // 导入获取报表视图 URL 的 API 函数
    import { getReportViewUrl } from '@/api/tool/jimu';
    // 导入自定义的 IFrame 组件
    import IFrame from "@/components/iFrame/index.vue";
    
    export default {
      // 组件名称
      name: 'ReportView',
      // 注册子组件
      components: {
        IFrame
      },
      // 定义组件的数据
      data() {
        return {
          // 初始化 url 为空字符串
          url: ''
        };
      },
      // 生命周期钩子,在实例创建完成后立即调用
      created() {
        this.init();
      },
      // 定义组件的方法
      methods: {
        init() {
          getReportViewUrl()
            .then((res) => {
              // 从路由路径中提取 reportId
              const reportId = this.$route.path.substring(this.$route.path.lastIndexOf("/") + 1);
              // 拼接 URL、reportId 和 token 并赋值给 url
              this.url = res + "/" + reportId + "?token=Bearer " + getToken();
            })
            .catch((error) => {
              // 处理接口调用失败的情况
              console.error('获取报表视图 URL 失败:', error);
              // 可以添加更多错误处理逻辑,如显示错误提示信息给用户
            });
        }
      }
    };
    </script>
    
  4. 创建src/views/tool/report/biList.vue文件

    <template>
      <i-frame :src="url" />
    </template>
    
    <script>
    import { getToken } from '@/utils/auth';
    import { getBiUrl } from '@/api/tool/jimu';
    import IFrame from "@/components/iFrame/index.vue";
    
    export default {
      name: 'ReportDesign',
      components: {
        IFrame
      },
      data() {
        return {
          url: ''
        };
      },
      created() {
        this.init();
      },
      methods: {
        init() {
          getBiUrl()
            .then(res => {
              this.url = res + "?token=Bearer " + getToken();
            })
            .catch(error => {
              console.error('获取 BI URL 失败:', error);
              // 可以添加更详细的错误处理逻辑,如显示错误提示信息
            });
        }
      }
    };
    </script>
    
    1. 创建src/views/tool/report/biView.vue文件
    <template>
      <!-- 建议使用大写开头的组件名,遵循 Vue 组件命名规范 -->
      <IFrame :src="url" />
    </template>
    
    <script>
    // 导入获取 token 的工具函数
    import { getToken } from '@/utils/auth';
    // 导入获取 BI 视图 URL 的 API 函数
    import { getBiViewUrl } from '@/api/tool/jimu';
    // 导入自定义的 IFrame 组件
    import IFrame from "@/components/iFrame/index.vue";
    
    export default {
      // 组件名称
      name: 'ReportView',
      // 注册子组件
      components: {
        IFrame
      },
      // 定义组件的数据
      data() {
        return {
          // 初始化 url 为空字符串
          url: ''
        };
      },
      // 生命周期钩子,在实例创建完成后立即调用
      created() {
        this.init();
      },
      // 定义组件的方法
      methods: {
        init() {
          getBiViewUrl()
            .then((res) => {
              // 从路由路径中提取 reportId
              const reportId = this.$route.path.substring(this.$route.path.lastIndexOf("/") + 1);
              // 将获取到的 URL 拼接上 reportId 和 token 并赋值给 data 中的 url
              this.url = res + "/" + reportId + "?token=Bearer " + getToken();
            })
            .catch((error) => {
              // 处理接口调用失败的情况
              console.error('获取 BI 视图 URL 失败:', error);
              // 可以在这里添加更多错误处理逻辑,例如显示错误提示给用户
            });
        }
      }
    };
    </script>
    

九、后台创建菜单

  1. 创建积木报表首页导航菜单,如果你是按第七步中的文件名创建的前端文件,请按下图创建导航菜单,否则,根据实际的组件修改。权限字符,可以自定义。

Snipaste_2025-02-20_13-50-40

  1. 创建Bi报表

Snipaste_2025-02-20_13-51-00

十、创建报表或大屏

十、创建报表或大屏

在此以创建报表为例

1、预览创建好的积木报表,在地址栏中,找到报表的ID号,如下图中的

引用图片1

2、在ruoyi系统中创建导航菜单

1)路由地址中,要加入报表的ID号

2)组件路径,填写用于显示报表的组件。可以查看第七步 创建src/views/tool/report/reportView.vue文件

3)权限字符中,也加入了报表ID号,用于权限控制

引用图片2

posted @   抗争的小青年  阅读(20)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示