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();
   

   

七、后端创建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 {@AutowiredEnvironment 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 中的 urlthis.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) => {// 从路由路径中提取 reportIdconst reportId = this.$route.path.substring(this.$route.path.lastIndexOf("/") + 1);// 拼接 URL、reportId 和 token 并赋值给 urlthis.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>
   

   5. 创建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) => {// 从路由路径中提取 reportIdconst reportId = this.$route.path.substring(this.$route.path.lastIndexOf("/") + 1);// 将获取到的 URL 拼接上 reportId 和 token 并赋值给 data 中的 urlthis.url = res + "/" + reportId + "?token=Bearer " + getToken();}).catch((error) => {// 处理接口调用失败的情况console.error('获取 BI 视图 URL 失败:', error);// 可以在这里添加更多错误处理逻辑，例如显示错误提示给用户});}}
   };
   </script>
   

九、后台创建菜单

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

2. 创建Bi报表

十、创建报表或大屏

在此以创建报表为例

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

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

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

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

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

十一、问题

集成后，登录ruoyi系统提示如下错误：

No qualifying bean of type 'org.springframework.context.MessageSource' available: expected single matching bean but found 2: messageSource,jmMessageSource

解决方法：
找到src/main/java/com/ruoyi/common/utils/MessageUtils.java

修改获取bean为通过名字获取项目指定bean

MessageSource messageSource = SpringUtils.getBean("messageSource");