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

原创已于 2025-01-09 09:21:26 修改 · 6.3k 阅读

48 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#ruoyi

于 2025-01-08 16:20:43 首次发布

该文章已生成可运行项目，

最近进行了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>