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

最近进行了RuoYi-Vue框架升级，造成积木报表无法使用。经过努力终于解决了，同时集成了积木报表和积木BI。如有需要的朋友可以作为参考

先看下效果图：

一、版本

RuoYi-Vue版本：v3.8.9

JMreport报表版本： v1.9.1

JimuBI大屏版本：V1.9.1
二、执行初始化脚本积木报表sql

下载地址：https://github.com/jeecgboot/JimuReport/tree/master/db

直接导入到数据库
三、pom中引入积木报表最新依赖

打开ruoyi-framework模块的pom.xml文件，添加下面依赖

<!-- 积木报表 -->
<dependency>
<groupId>org.jeecgframework.jimureport</groupId>
<artifactId>jimureport-spring-boot-starter</artifactId>
<version>1.9.1</version>
</dependency>
<!--积木BI大屏-->
<dependency>
<groupId>org.jeecgframework.jimureport</groupId>
<artifactId>jimubi-spring-boot-starter</artifactId>
<version>1.9.1</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/**").permitAll()

2、修改HTTP响应标头代码

修改此处，是为了前端使用iframe嵌套积木界面，实现直接在若依系统界面打开积木系统。

若不修改，可以在创建积木菜单时，使用外链

// 禁用HTTP响应标头
.headers((headersCustomizer) -> {
headersCustomizer.cacheControl(cache -> cache.disable()).frameOptions(options -> options.sameOrigin());
})

修改为

// 禁用HTTP响应标头

.headers((headersCustomizer) -> {
headersCustomizer.cacheControl(cache -> cache.disable()).frameOptions(options -> options.disable());
})

如下图：

七、后端创建Controller文件

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

代码如下：

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";
}
}

八、前端文件创建

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>
  <i-frame :src="url"/>
</template>
<script setup name="ReportDesign">
import { useRouter, useRoute } from 'vue-router'
 
const router = useRouter()
const route = useRoute()
import {getToken} from '@/utils/auth'
import {getReportUrl} from '@/api/tool/jimu'
import iFrame from "@/components/iFrame/index.vue"
 
const url= ref('');
function init(){
  getReportUrl().then(res => {
    url.value = res + "?token=Bearer " + getToken();
  })
}
 
init();
</script>

3、创建src/views/tool/report/reportView.vue文件

<template>
  <i-frame :src="url"/>
</template>
<script setup name="ReportView">
import {getToken} from '@/utils/auth'
import {getReportViewUrl} from '@/api/tool/jimu'
import iFrame from "@/components/iFrame/index.vue"
const {proxy} = getCurrentInstance();
 
const url= ref('');
function init(){
  getReportViewUrl().then(res => {
    const reportId = proxy.$route.path.substring(proxy.$route.path.lastIndexOf("/")+1)
    url.value = res + "/" + reportId  + "?token=Bearer " + getToken();
  })
}
 
init();
</script>

4、创建src/views/tool/report/biList.vue文件

<template>
  <i-frame :src="url"/>
</template>
<script setup name="ReportDesign">
import { useRouter, useRoute } from 'vue-router'
 
const router = useRouter()
const route = useRoute()
import {getToken} from '@/utils/auth'
import {getBiUrl} from '@/api/tool/jimu'
import iFrame from "@/components/iFrame/index.vue"
 
const url= ref('');
function init(){
  getBiUrl().then(res => {
    url.value = res + "?token=Bearer " + getToken();
  })
}
 
init();
</script>

5、创建src/views/tool/report/biView.vue文件

<template>
  <i-frame :src="url"/>
</template>
<script setup name="ReportView">
import {getToken} from '@/utils/auth'
import {getBiViewUrl} from '@/api/tool/jimu'
import iFrame from "@/components/iFrame/index.vue"
const {proxy} = getCurrentInstance();
 
const url= ref('');
function init(){
  getBiViewUrl().then(res => {
    const reportId = proxy.$route.path.substring(proxy.$route.path.lastIndexOf("/")+1)
    url.value = res + "/" + reportId  + "?token=Bearer " + getToken();
  })
}
 
init();
</script>

九、后台创建菜单

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

2、创建积木BI首页导航菜单

至此，你已经可以正常访问积木报表和积木BI系统了
十、创建报表或大屏

在此以创建报表为例

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

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

1）路由地址中，要加入报表的ID号

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

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

好了，这里就不多做演示了，如果有不明白的朋友，可以留言。结束！
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/baoluo/article/details/145009079

posted @ 2025-04-15 19:06 滥好人阅读(2008) 评论(0) 收藏举报

刷新页面返回顶部

滥好人

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

公告